Todolist With Restapi

kosar726

Todo List with REST API A full-stack Todo List application built with a React and Tailwind CSS frontend, and an ExpressJS, MongoDB, and JWT-based backend.

Download

Todo List with REST API

A full-stack Todo List application built with a React and Tailwind CSS frontend, and an ExpressJS, MongoDB, and JWT-based backend. Users can register, log in, and manage tasks with features like sorting, pagination, and task completion tracking.

Overview
Features
Tech Stack
Installation
- Backend Setup
- Frontend Setup
API Endpoints
Screenshots
Contributing
Developer

Overview

This project is a full-stack Todo List application that enables users to manage tasks efficiently. The frontend is built with React and styled using Tailwind CSS, providing a modern and responsive UI. The backend is a REST API developed with ExpressJS, using Mongoose for MongoDB integration and JWT for user authentication. Users can register, log in, create, edit, and delete tasks, mark tasks as completed, and sort tasks by priority, creation date, or completion status.

Features

User authentication with JWT
Task management: create, edit, delete, and mark tasks as completed
Task sorting: by priority, creation date, or completion status
Pagination for better performance with large datasets
Responsive and modern UI using Tailwind CSS
Friendly error messages and loading indicators

Tech Stack

Frontend

React
Tailwind CSS

Backend

ExpressJS
Mongoose
JWT
MongoDB

Installation

Prerequisites

Node.js (v18 or higher)
npm (v8 or higher)
MongoDB (local or cloud instance)

Backend Setup

Navigate to the backend directory:
```
cd backend
```
Install dependencies:
```
npm install
```

Create a config.env file inside a config folder with the following content:

PORT=8080
MONGODB_URI=mongodb://localhost:27017/todolist
JWT_SECRET=your_jwt_secret

Start the backend server:
```
npm start
```
The backend will run on http://localhost:8080.

Frontend Setup

Navigate to the frontend directory:
```
cd frontend
```
Install dependencies:
```
npm install
```
Start the frontend development server:
```
npm start
```
The frontend will run on http://localhost:3000.

API Endpoints

Method	Endpoint	Description	Requires Auth
POST	`/register`	Register a new user	No
POST	`/login`	Log in and get a JWT token	No
GET	`/tasks`	Get all tasks for the user	Yes
POST	`/task`	Create a new task	Yes
PUT	`/task/:id`	Update a task by ID	Yes
PUT	`/taskComplete/:id`	Toggle task completion status	Yes
DELETE	`/task/:id`	Delete a task by ID	Yes

Example Request

Create a Task:

POST http://localhost:8080/task
Headers: Authorization: Bearer <your_jwt_token>
Body: {
  "title": "Finish project",
  "subject": "Work",
  "priority": 3
}

Screenshots

Contributing

Contributions are welcome. If you'd like to contribute:

Fork the repository.
Create a new branch:
```
git checkout -b feature/your-feature
```
Commit your changes:
```
git commit -m "Add your feature"
```
Push the branch:
```
git push origin feature/your-feature
```
Open a Pull Request.

Developer

Kosar - GitHub Profile

Top categories