In today's digital age, note-taking has become an essential part of our daily routine. From jotting down quick reminders to organizing important ideas and thoughts, note-taking has proven to be an effective way of enhancing productivity and keeping track of our goals. In this tutorial, we'll guide you through the process of building a basic note-taking app using MongoDB, Node.js, Express, and Bootstrap. With our step-by-step approach, even beginners can follow along and create a fully functional note-taking app that's both user-friendly and visually appealing. Whether you're a student looking to organize your studies or a professional seeking to streamline your work processes, this tutorial is for you. Let's get started!
Step 1: Setup your development environment
Before you start, you need to set up your development environment. Here's what you need:
MongoDB: Install MongoDB on your machine and start the MongoDB server.
Node.js: Install Node.js on your machine.
Text editor: Use any text editor or IDE of your choice to write your code.
Step 2: Create a new Node.js project
Open your terminal and create a new folder for your project. Then, navigate to that folder and run the following command to create a new Node.js project:
npm init
This command will prompt you to enter some details about your project, such as the name, version, description, author, and license. You can either enter the details or press enter to accept the defaults.
Step 3: Install required packages
To create a note-taking app, we need to install the following packages:
express: A popular Node.js framework for building web applications.
mongoose: A MongoDB object modeling tool designed to work in an asynchronous environment.
ejs: A simple templating language that lets you generate HTML markup with plain JavaScript.
body-parser: A middleware that allows you to parse incoming request bodies in a middleware before your handlers.
Run the following command in your terminal to install these packages:
npm install express mongoose ejs body-parser --save
Step 4: Create the app structure
Create the following files and folders in your project folder:
-
app.js: This is the main file of your app where you'll configure the express app. -
views/: This folder will contain all the ejs templates for your app. -
public/: This folder will contain all the static files for your app, such as CSS, images, and JavaScript. -
routes/: This folder will contain all the routes for your app. -
models/: This folder will contain all the models for your app.
Step 5: Configure the app
Open the app.js file and add the following code:
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
// Connect to MongoDB
mongoose.connect('mongodb://localhost/notes', { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('Connected to MongoDB'))
.catch(err => console.log('Could not connect to MongoDB'));
// Set up body-parser middleware
app.use(bodyParser.urlencoded({ extended: false }));
// Set up ejs as the view engine
app.set('view engine', 'ejs');
// Set up the static files middleware
app.use(express.static('public'));
// Import routes
const notesRoutes = require('./routes/notes');
// Set up the routes middleware
app.use('/notes', notesRoutes);
// Home page route
app.get('/', (req, res) => {
res.redirect('/notes');
});
// Start the server
app.listen(3000, () => console.log('Server started on port 3000'));
Here, we're importing the required packages, connecting to the MongoDB server, setting up the middleware, and starting the server.
Step 6: Create the Note model
Create a new file called Note.js in the models/ folder and add the following code:
const mongoose = require('mongoose');
const NoteSchema = new mongoose.Schema({
title: String,
content: String
});
const Note = mongoose.model('Note', NoteSchema);
module.exports = Note;
This code defines the Note schema and exports the Note model.
Step 7: Create the routes
Create a new file called notes.js in the routes/ folder and add the following code:
const express = require('express');
const router = express.Router();
const Note = require('../models/Note');
// Get all notes
router.get('/', async (req, res) => {
const notes = await Note.find();
res.render('index', { notes });
});
// Create a new note
router.post('/', async (req, res) => {
const { title, content } = req.body;
const note = new Note({ title, content });
await note.save();
res.redirect('/notes');
});
module.exports = router;
Here, we're defining two routes - one for getting all notes and another for creating a new note. In the get route, we're fetching all notes from the database and rendering them using the index.ejs template. In the post route, we're creating a new note and redirecting the user back to the index page.
Step 8: Create the views
Create a new file called index.ejs in the views/ folder and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Note Taking App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body class="container">
<h1>Note Taking App</h1>
<form action="/notes" method="post">
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title" id="title" class="form-control" placeholder="Title" required>
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea name="content" id="content" class="form-control" placeholder="Content" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" >Save Note</button>
</div>
</form>
<hr>
<% if (notes.length > 0) { %>
<% notes.forEach(note => { %>
<h2><%= note.title %></h2>
<p><%= note.content %></p>
<% }) %>
<% } else { %>
<p>No notes found.</p>
<% } %>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Here, we're creating a form for adding a new note and displaying all existing notes using a loop.
Step 9: Run the app
Now that we've set up everything, we can start the app by running the following command in your terminal:
node app.js
This will start the server on port 3000. Open your web browser and go to http://localhost:3000/ to view the app.
Congratulations! You've successfully created a basic note-taking app using MongoDB, NodeJS, Express JS, and Bootstrap.
GitHub Repo: https://github.com/Shamsuddeen/note-taker
Read my previous tutorial on How to Build a Simple Blog with MongoDB, Express JS, and Node in 5 Easy Steps
Top comments (0)