Note Flow

A modern full-stack Notes Application built with React, Node.js, Express, MongoDB, and TipTap Editor.
The application provides a clean writing experience with rich-text editing, real-time note switching, dark mode support, and an intuitive UI inspired by modern productivity tools.

Live Demo : click here

Features

1. Rich Text Editor

Built using TipTap editor with support for:

• Bold
• Italic
• Headings
• Bullet Lists

2. Dark Mode

Smooth light/dark theme switching for better user experience and accessibility.

3. Search Notes

Instantly search and filter notes from the sidebar.

4. Real-Time Note Switching

Seamlessly switch between notes without refreshing the page.

5. Delete Notes

Delete notes instantly with responsive UI updates.

6. Responsive Layout

Clean and minimal UI designed for modern note-taking workflows.

7. Modern UI/UX

• Interactive toolbar
• Hidden smooth scrollbars
• Hover effects
• Active note states
• Structured editor layout

Tech Stack

Frontend

• React
• Vite
• TipTap Editor
• React Icons
• CSS3

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose

Project Structure

Frontend

client/
│
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Editor.jsx
│   │   ├── NoteCard.jsx
│   │   ├── NotesList.jsx
│   │   ├── RichEditor.jsx
│   │   └── Sidebar.jsx
│   │
│   ├── services/
│   │   └── notesApi.js
│   │
│   ├── styles/
│   │   └── App.css
│   │
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── package.json
└── vite.config.js

Backend

server/
│
├── src/
│   ├── config/
│   │   └── db.js
│   │
│   ├── controllers/
│   │   └── notesController.js
│   │
│   ├── middleware/
│   │   └── errorHandler.js
│   │
│   ├── models/
│   │   └── Notes.js
│   │
│   ├── routes/
│   │   └── notesRoutes.js
│   │
│   └── app.js
│
├── .env
├── server.js
└── package.json

Installation

1️. Clone the Repository

git clone https://github.com/Anurag-3112/Note-Flow.git

2️. Frontend Setup

cd client
npm install
npm run dev

Frontend runs on:

http://localhost:5173

3️. Backend Setup

cd server
npm install
node server.js

Backend runs on:

http://localhost:5000

Environment Variables

Create a .env file inside the server folder.

PORT=5000
MONGO_URI=your_mongodb_connection_string OR mongodb://127.0.0.1:27017/notesDB

API Endpoints

Get All Notes

GET /api/notes

Response

[
  {
    "_id": "665a1f3d2c91b0a123456789",
    "title": "Meeting Notes",
    "content": "<p>Project discussion</p>",
    "createdAt": "2026-05-12T10:00:00.000Z",
    "updatedAt": "2026-05-12T10:30:00.000Z"
  }
]

Create Note

POST /api/notes

Request Body

{
  "title": "My Note",
  "content": "<p>Hello World</p>"
}

Update Note

PUT /api/notes/:id

Response

{
  "_id": "665a1f3d2c91b0a123456789",
  "title": "Updated Title",
  "content": "<h1>Updated Content</h1>",
  "updatedAt": "2026-05-12T11:00:00.000Z"
}

Delete Note

DELETE /api/notes/:id

Response

{
  "message": "Note deleted successfully"
}

Key Learnings

• Managing rich-text editor state using TipTap
• React state synchronization
• Full-stack CRUD operations
• MongoDB schema design
• REST API architecture
• Component-based UI design
• Dark mode implementation

Screenshots

 

Future Improvements

• Authentication & Authorization
• Tags & Categories
• Markdown Export
• Drag & Drop Notes
• Pinned Notes
• Collaborative Editing

Author

Anurag Kumar

• GitHub: https://github.com/Anurag-3112/
• LinkedIn: https://linkedin.com/in/anurag-kumar-work/

⭐ Show Your Support

If you like this project, consider giving it a ⭐ on GitHub!