To-Do List Application

Description

This is a simple To-Do List application built using the MERN stack (MongoDB, Express.js, React, Node.js). It allows users to add, update, delete, and mark tasks as complete. The application features a clean UI with a responsive design, and it uses a backend API to manage tasks.

Features

Add Tasks: Create new tasks and add them to the list.
Update Tasks: Modify task details and mark them as complete.
Delete Tasks: Remove individual tasks or delete all tasks at once.
Task Completion: Mark tasks as complete with a checkbox, which will strike through completed tasks.
Notification System: Popup messages for task actions (added, updated, deleted) with color-coded notifications.

Technologies Used

Frontend: React.js, CSS
Backend: Node.js, Express.js
Database: MongoDB
Environment Management: dotenv
Styling: CSS

Installation

Prerequisites

Node.js (v14.x or higher)
npm or yarn
MongoDB (local or cloud instance)

Clone the Repository

git clone https://github.com/ravanraj0312/ToDo.git
cd ToDo

Setup Backend

Navigate to the server directory:
```
cd server
```
Install dependencies:
```
npm install
```
Create a .env file in the server directory with the following content:
```
MONGO_URI=your-mongodb-connection-string
PORT=3000
```
Start the backend server:
```
npm run dev
```

Setup Frontend

Navigate to the client directory:
```
cd client
```
Install dependencies:
```
npm install
```
Start the frontend development server:
```
npm start
```
Open your browser and navigate to http://localhost:5173 (or the URL provided by the development server).

Usage

Add Tasks: Enter a task name in the input field and click "Add Task" to add it to the list.
Update Tasks: Click the checkbox next to a task to mark it as complete. Update task names by clicking on them.
Delete Tasks: Click the "Delete" button next to a task to remove it. Use the "Delete All" button to clear all tasks from the list.
Notifications: Notifications will appear at the top of the page indicating the status of task actions (added, updated, deleted).

Project Structure

To-Do/
│
├── client/          # React frontend
│   ├── src/          # Source files
│   ├── public/       # Public assets
│   ├── package.json  # Frontend dependencies and scripts
│   └── .env          # Frontend environment variables
│
├── server/          # Node.js backend
│   ├── models/      # Mongoose models
│   ├── routes/      # API routes
│   ├── package.json # Backend dependencies and scripts
│   └── server.js    # Main server file
│
├── .gitignore       # Git ignore file
├── README.md        # This file
└── package.json     # Root project dependencies and scripts

Contact

For any questions or inquiries, please contact Raj Gohel.