Keeping track of your thoughts is a challenge, but building a notes app to organize them? That’s where the fun begins. Today, we’ll walk you through creating a notes-taking app using React, Node.js, Express, and MongoDB
Our app will allow users to:
- Log in with a unique code.
- Create, view, and delete notes.
- Categorize notes for better organization.
- Safely store everything in MongoDB.
1. Backend Development: Setting Up the Server
The backend is the backbone of our app. It will handle user authentication, manage notes, and communicate with the database.
Step 1.1: Initialize the Project
- Create a directory for the backend:
mkdir notes-backend && cd notes-backend npm init -y
- Install dependencies:
npm install express mongoose body-parser cors
Step 1.2: MongoDB Setup
- Use MongoDB Atlas (free tier) or a local installation.
- Create a database named
notesApp. - Set up two collections:
usersandnotes.
Step 1.3: Writing the Backend Code
Create a file server.js for the backend logic.
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(bodyParser.json());
// MongoDB Connection
mongoose.connect('mongodb://localhost:27017/notesApp', {
useNewUrlParser: true,
useUnifiedTopology: true,
});
// Schemas and Models
const UserSchema = new mongoose.Schema({
code: { type: String, unique: true, required: true },
});
const NoteSchema = new mongoose.Schema({
content: String,
category: String,
userId: mongoose.Schema.Types.ObjectId,
});
const User = mongoose.model('User', UserSchema);
const Note = mongoose.model('Note', NoteSchema);
// Routes
// User Login
app.post('/login', async (req, res) => {
const { code } = req.body;
let user = await User.findOne({ code });
if (!user) {
user = await User.create({ code });
}
res.json({ userId: user._id });
});
// Add Note
app.post('/notes', async (req, res) => {
const { content, category, userId } = req.body;
const note = await Note.create({ content, category, userId });
res.json(note);
});
// Get Notes
app.get('/notes/:userId', async (req, res) => {
const notes = await Note.find({ userId: req.params.userId });
res.json(notes);
});
// Delete Note
app.delete('/notes/:id', async (req, res) => {
await Note.findByIdAndDelete(req.params.id);
res.json({ success: true });
});
// Start Server
app.listen(3001, () => {
console.log('Server is running on http://localhost:3001');
});
2. Frontend Development: Building the React App
For the frontend, we’ll use React to create an intuitive interface for our app.
Step 2.1: Initialize the React App
- Create the project:
npx create-react-app notes-frontend cd notes-frontend
-
npm install axios
Step 2.2: Build the React Components
We’ll break our app into the following components:
- Login: For user authentication.
- NotesForm: To add notes.
- NotesList: To display notes.
App.js
This is the main component that ties everything together.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Login from './Login';
import NotesForm from './NotesForm';
import NotesList from './NotesList';
function App() {
const [userId, setUserId] = useState(null);
const [notes, setNotes] = useState([]);
const fetchNotes = async () => {
const { data } = await axios.get(`http://localhost:3001/notes/${userId}`);
setNotes(data);
};
const addNote = async (note) => {
const { data } = await axios.post('http://localhost:3001/notes', { ...note, userId });
setNotes([...notes, data]);
};
const deleteNote = async (id) => {
await axios.delete(`http://localhost:3001/notes/${id}`);
setNotes(notes.filter((note) => note._id !== id));
};
useEffect(() => {
if (userId) fetchNotes();
}, [userId]);
if (!userId) return <Login setUserId={setUserId} />;
return (
<div>
<NotesForm addNote={addNote} />
<NotesList notes={notes} deleteNote={deleteNote} />
</div>
);
}
export default App;
3. Deploying the Backend
- Install PM2 to manage the backend server:
npm install pm2 -g
- Start the backend:
pm2 start server.js --name "notes-backend"
- Save the configuration:
pm2 save pm2 startup
And That’s It!
You now have a full-stack notes app, complete with:
- User login using unique codes.
- Categorized notes.
- A fully functioning backend and database.
Happy coding! If you hit a snag, remember: debugging is just puzzle-solving in disguise.
