MERN Stack Todo Application with Authentication (Cookie-based) using Next.js

This repository contains a Todo application built with the MERN (MongoDB, Express.js, React.js, Node.js) stack and uses Next.js for server-side rendering and routing. Authentication is implemented using cookies.

Features

• Authentication: User registration and login using cookies for session management.
• Todo CRUD Operations: Create, Read, Update, and Delete Todos.
• Server-side Rendering (SSR): Enhanced performance and SEO benefits with Next.js.
• API Routes: Backend APIs using Express.js for handling Todo operations and authentication.

Prerequisites

• Node.js and npm installed on your machine.
• MongoDB instance (local or cloud-based) for database storage.

Getting Started

1. Clone the repository:

   git clone https://github.com/MuhammadAliashraf/NextJs-Todo.git
   

2. Install dependencies:

   npm install
   

3. Set up environment variables:

   Create a .env file in the root directory and configure the following variables:

   MONGODB_URI = your_mongodb_connection_string
   JWT_SECRET = your_jwt_secret_key
   URL= API URL
   

4. Start the development server:

   npm run dev
   

   This will start the Next.js development server and the Express server concurrently.

5. Access the application:

   Open your browser and go to http://localhost:3000 to view the Todo application.

Folder Structure

• /pages: Next.js pages for routing and SSR.
• /components: React components for UI elements.
• /api: Backend API routes using Express.js.
• /models: MongoDB models for Todo and User schemas.
• /utils: Utility functions such as authentication middleware and error handlers.

API Routes

• /api/auth/register: Register a new user.
• /api/auth/login: Login and create a session using cookies.
• /api/auth/logout: Logout and destroy the session.
• /api/todos: CRUD operations for Todos (requires authentication).

Technologies Used

• Next.js: React framework for SSR and client-side rendering.
• React.js: Frontend library for building user interfaces.
• Express.js: Backend framework for handling API requests.
• MongoDB: NoSQL database for storing Todos and User data.
• JWT: JSON Web Tokens for authentication and session management.

Author

• Muhammad Ali
• 030-62767-542

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Feel free to customize the sections as per your project's specific details and add more detailed explanations or usage instructions where necessary. This template should give you a good starting point for documenting your MERN stack Todo application with authentication using cookies in Next.js.