📝 Notes Keeper

A full-stack web application similar to Google Keep, built with the MERN stack. Users can create, read, update, and delete notes with titles and descriptions.

🚀 Features

• ✅ Create new notes with title and description
• ✅ View all notes in a clean, organized layout
• ✅ Edit existing notes
• ✅ Delete notes
• ✅ Responsive design
• ✅ Real-time updates
• ✅ Error handling and validation

🛠️ Tech Stack

Frontend

• React.js
• Axios (HTTP client)
• CSS/Tailwind CSS (styling)

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose (ODM)

Tools & Libraries

• Nodemon (development)
• CORS (cross-origin requests)
• dotenv (environment variables)

📁 Project Structure

notes-keeper/
├── client/                    # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   │   ├── NoteForm.jsx
│   │   │   ├── NoteList.jsx
│   │   │   ├── NoteCard.jsx
│   │   │   └── Header.jsx
│   │   ├── services/
│   │   │   └── api.js
│   │   ├── App.jsx
│   │   └── index.css
│   └── package.json
│
├── server/                    # Express backend
│   ├── models/
│   │   └── Note.model.js
│   ├── controllers/
│   │   └── notes.controllers.js
│   ├── routes/
│   │   └── notes.route.js
│   ├── config/
│   │   └── Db.js
│   ├── index.js
│   ├── app.js
│   ├── .env
│   └── package.json
│
└── README.md

⚙️ Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local or Atlas)
• npm or yarn

Backend Setup

1. Navigate to server directory:

   cd server

2. Install dependencies:

   npm install

3. Create .env file:

   touch .env

4. Add environment variables to .env:

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/notes-keeper
   NODE_ENV=development
   

   For MongoDB Atlas:

   MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/notes-keeper
   

5. Start the backend server:

   npm start
   # or with nodemon for development
   npm run dev

   Server will run on http://localhost:5000

Frontend Setup

1. Navigate to client directory:

   cd client

2. Install dependencies:

   npm install

3. Create .env file (if needed):

   REACT_APP_API_URL=http://localhost:5000/api/notes
   

4. Start the development server:

   npm start

   App will run on http://localhost:8000

📡 API Endpoints

Base URL

http://localhost:5000/api/notes

Endpoints

Method	Endpoint	Description
GET	/	Get all notes
GET	/:id	Get single note by ID
POST	/	Create a new note
PUT	/:id	Update a note
DELETE	/:id	Delete a note

Request/Response Examples

Create Note:

POST /api/notes
Content-Type: application/json

{
  "title": "My First Note",
  "description": "This is the content of my note"
}

Response:

{
  "success": true,
  "message": "Note created successfully",
  "data": {
    "_id": "507f1f77bcf86cd799439011",
    "title": "My First Note",
    "description": "This is the content of my note",
    "createdAt": "2025-10-11T10:30:00.000Z",
    "updatedAt": "2025-10-11T10:30:00.000Z"
  }
}

🔍 Database Schema

Note Model

{
  _id: ObjectId,
  title: String (required, max 100 chars),
  description: String (required, max 5000 chars),
  createdAt: Timestamp,
  updatedAt: Timestamp
}

📝 Usage

1. Open the app in your browser at http://localhost:8000
2. Create a note by filling in the title and description form
3. View all notes in the main feed
4. Edit a note by clicking the edit button on any note card
5. Delete a note by clicking the delete button
6. Changes are saved automatically to the database

🚨 Error Handling

The app handles various error scenarios:

• Missing or empty fields (validation error)
• Invalid note ID (404 error)
• Database connection issues (500 error)
• Server errors (500 error)

All errors return a consistent JSON response:

{
  "success": false,
  "message": "Error description",
  "error": "Detailed error message"
}

🧪 Testing

Test with Postman/Thunder Client

1. Import the API endpoints
2. Test each CRUD operation
3. Verify response formats
4. Check error handling

Manual Testing Checklist

• Create note with valid data
• Create note with empty fields (should fail)
• Fetch all notes
• Fetch single note by ID
• Update note title only
• Update note description only
• Update both title and description
• Delete existing note
• Delete non-existent note (should fail)
• Test with invalid ID format (should fail)

🚀 Deployment

Deploy Backend (Heroku/Render)

1. Push code to GitHub
2. Connect to Heroku/Render
3. Set environment variables
4. Deploy

Deploy Frontend (Vercel/Netlify)

1. Build the app: npm run build
2. Deploy build folder to Vercel/Netlify
3. Update API URL in environment variables

📚 Future Enhancements

• User authentication & authorization
• Color-coded notes
• Pin important notes
• Archive notes
• Search functionality
• Tags/labels
• Rich text editor
• Image attachments
• Share notes
• Dark mode
• Sorting options
• Note categories

🐛 Troubleshooting

MongoDB Connection Error

• Ensure MongoDB is running
• Check connection string in .env
• Verify IP whitelist (if using Atlas)

CORS Error

• Ensure cors package is installed
• Check CORS middleware in app.js
• Verify frontend URL is correct

Port Already in Use

# Kill process on port 5000
npx kill-port 5000

Module Not Found

• Check file naming (case-sensitive)
• Verify import paths
• Run npm install again

📄 License

This project is open source and available under the MIT License.

👤 Author

Your Name - GitHub

📧 Support

For issues or questions, please open an issue on GitHub.

---

Happy Note Taking! 📝✨