MyKeeper - MERN Notes App

Live Demo

✨ Features

  • Create, Update, and Delete Notes: Users can manage their notes efficiently with CRUD operations.
  • Authentication: Secure login and registration using JWT to ensure only authenticated users access the app.
  • Private Routing: Routes are protected, ensuring access to notes is restricted to authenticated users.
  • Responsive Design: Optimized for desktop and mobile, providing a seamless experience across devices.
  • Search Functionality: Quickly find specific notes using the search bar.

Tech Stack

  • Frontend

    • ReactJS with functional components and hooks
    • TailwindCSS for styling

  • Backend

    • Node.js with Express
    • MongoDB for data storage
    • JWT (JSON Web Tokens) for authentication

  • Hosting

    • Render for deployment

How to Run

  1. Backend Setup:

    • Navigate to the server directory: cd server
    • Install dependencies: npm install
    • Start the backend server: node index.js

  2. Frontend Setup:

    • Navigate to the client directory: cd client
    • Install dependencies: npm install
    • Start the frontend server: npm run dev
  3. Open your browser and navigate to http://localhost:5173.

API Endpoints

  • POST /api/auth/register: Register a new user.
  • POST /api/auth/login: Login for existing users.
  • GET /api/notes: Fetch all notes for the logged-in user.
  • POST /api/notes: Create a new note.
  • PUT /api/notes/:id: Update an existing note.
  • DELETE /api/notes/:id: Delete a note.

Environment Variables

Set up the following in your .env file: 

MONGODB_URL=your_mongodb_connection_string  
JWT_SECRET=your_jwt_secret

Acknowledgements

  • MERN stack community for detailed documentation and resources
  • JWT for simplifying secure authentication
  • Render for seamless deployment

Enjoy using MyKeeper to manage your notes! If you found the project helpful, don’t forget to star it on GitHub. 🌟