In today’s world, having a simple yet efficient note-taking application can boost productivity and help organize thoughts. In this tutorial, we will walk through the process of building a note-taking app using Node.js and Express. This app will allow users to create, view, edit, and delete notes. So, let’s get started!
Prerequisites
Before we dive in, make sure you have the following installed on your machine:
- Node.js: To run JavaScript on the server.
- npm (Node Package Manager): To manage dependencies.
- A code editor like Visual Studio Code.
- Basic knowledge of JavaScript and web development.
Step 1: Setting Up the Project
First, let’s set up our project directory. Open a terminal and run the following commands:
mkdir note-taking-app
cd note-taking-app
npm init -y
This will create a new directory for your project and initialize a package.json file, which will manage our app’s dependencies.
Step 2: Install Dependencies
We will need Express for our server and a few other packages:
npm install express body-parser ejs mongoose
- express: Web framework for Node.js.
- body-parser: Middleware to parse incoming request bodies.
- ejs: Template engine used to render HTML.
- mongoose: MongoDB object modeling tool for Node.js.
Step 3: Project Structure
Create the following directory and file structure:
note-taking-app/
├── views/
│ ├── index.ejs
│ ├── addNote.ejs
│ ├── editNote.ejs
└── app.js
Step 4: Setting Up the Server
Open app.js and add the following code to set up the basic Express server:
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
// Connect to MongoDB
mongoose.connect('mongodb://localhost/note-taking-app', {
useNewUrlParser: true,
useUnifiedTopology: true
});
// Create a Note Schema
const noteSchema = new mongoose.Schema({
title: String,
content: String
});
const Note = mongoose.model('Note', noteSchema);
// Middleware
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));
// Routes
app.get('/', (req, res) => {
Note.find({}, (err, notes) => {
if (!err) {
res.render('index', { notes: notes });
}
});
});
// Add a new note
app.get('/add', (req, res) => {
res.render('addNote');
});
app.post('/add', (req, res) => {
const note = new Note({
title: req.body.title,
content: req.body.content
});
note.save(() => {
res.redirect('/');
});
});
// Edit a note
app.get('/edit/:id', (req, res) => {
const id = req.params.id;
Note.findById(id, (err, note) => {
if (!err) {
res.render('editNote', { note: note });
}
});
});
app.post('/edit/:id', (req, res) => {
const id = req.params.id;
Note.findByIdAndUpdate(id, {
title: req.body.title,
content: req.body.content
}, () => {
res.redirect('/');
});
});
// Delete a note
app.post('/delete/:id', (req, res) => {
const id = req.params.id;
Note.findByIdAndRemove(id, () => {
res.redirect('/');
});
});
// Start the Server
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
Step 5: Creating the Views
5.1 index.ejs
Create the index.ejs file to display notes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note Taking App</title>
</head>
<body>
<h1>Notes</h1>
<a href="/add">Add a Note</a>
<ul>
<% notes.forEach(note => { %>
<li>
<h2><%= note.title %></h2>
<p><%= note.content %></p>
<a href="/edit/<%= note._id %>">Edit</a>
<form action="/delete/<%= note._id %>" method="POST" style="display:inline;">
<button type="submit">Delete</button>
</form>
</li>
<% }); %>
</ul>
</body>
</html>
5.2 addNote.ejs
Add the following code in addNote.ejs for adding a new note:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Note</title>
</head>
<body>
<h1>Add a New Note</h1>
<form action="/add" method="POST">
<input type="text" name="title" placeholder="Title" required>
<textarea name="content" placeholder="Content" required></textarea>
<button type="submit">Add Note</button>
</form>
<a href="/">Back to Notes</a>
</body>
</html>
5.3 editNote.ejs
Finally, create the editNote.ejs for editing notes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Note</title>
</head>
<body>
<h1>Edit Note</h1>
<form action="/edit/<%= note._id %>" method="POST">
<input type="text" name="title" value="<%= note.title %>" required>
<textarea name="content" required><%= note.content %></textarea>
<button type="submit">Update Note</button>
</form>
<a href="/">Back to Notes</a>
</body>
</html>
Step 6: Running the Application
Make sure that MongoDB is running. You can start it by running:
mongod
Now you can start your Node.js application:
node app.js
Visit http://localhost:3000 in your web browser to see your note-taking app in action!
Conclusion
Congratulations! You have successfully built a simple note-taking application using Node.js and Express. This app allows users to create, view, edit, and delete notes stored in a MongoDB database. You can extend this application by adding features such as user authentication, tags for notes, and even searching capabilities.
Feel free to explore and enhance the app further! Happy coding!
In today’s world, having a simple yet efficient note-taking application can boost productivity and help organize thoughts. In this tutorial, we will walk through the process of building a note-taking app using Node.js and Express. This app will allow users to create, view, edit, and delete notes. So, let’s get started!
Prerequisites
Before we dive in, make sure you have the following installed on your machine:
Step 1: Setting Up the Project
First, let’s set up our project directory. Open a terminal and run the following commands:
This will create a new directory for your project and initialize a package.json file, which will manage our app’s dependencies.
Step 2: Install Dependencies
We will need Express for our server and a few other packages:
Step 3: Project Structure
Create the following directory and file structure:
Step 4: Setting Up the Server
Open
app.jsand add the following code to set up the basic Express server:Step 5: Creating the Views
5.1
index.ejsCreate the
index.ejsfile to display notes:5.2
addNote.ejsAdd the following code in
addNote.ejsfor adding a new note:5.3
editNote.ejsFinally, create the
editNote.ejsfor editing notes:Step 6: Running the Application
Make sure that MongoDB is running. You can start it by running:
Now you can start your Node.js application:
Visit
http://localhost:3000in your web browser to see your note-taking app in action!Conclusion
Congratulations! You have successfully built a simple note-taking application using Node.js and Express. This app allows users to create, view, edit, and delete notes stored in a MongoDB database. You can extend this application by adding features such as user authentication, tags for notes, and even searching capabilities.
Feel free to explore and enhance the app further! Happy coding!