Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/muhammadaliashraf/nextjs-todo

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.
https://github.com/muhammadaliashraf/nextjs-todo

api application expressjs mern-project mern-stack mern-stack-app next-auth next-js nextjs nextjs13 nextjstodo opensource project react-hooks reactjs ssr todolist todolist-application vercel vercel-deployment

Last synced: 27 days ago
JSON representation

Host: GitHub
URL: https://github.com/muhammadaliashraf/nextjs-todo
Owner: MuhammadAliashraf
Created: 2024-06-05T14:36:10.000Z (5 months ago)
Default Branch: main
Last Pushed: 2024-06-12T21:59:06.000Z (5 months ago)
Last Synced: 2024-09-26T18:04:05.255Z (about 1 month ago)
Topics: api, application, expressjs, mern-project, mern-stack, mern-stack-app, next-auth, next-js, nextjs, nextjs13, nextjstodo, opensource, project, react-hooks, reactjs, ssr, todolist, todolist-application, vercel, vercel-deployment
Language: JavaScript
Homepage: https://next-js-todo-roan.vercel.app
Size: 220 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

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

## 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**:

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

2. **Install dependencies**:

```bash
npm install
```

3. **Set up environment variables**:

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

```plaintext
MONGODB_URI = your_mongodb_connection_string
JWT_SECRET = your_jwt_secret_key
URL= API URL
```

4. **Start the development server**:

```bash
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.