This is a simple Todo List web application built using the MERN (MongoDB, Express.js, React.js, Node.js) stack. Users can add, delete, and mark tasks as completed.
- Add Task: Users can add new tasks to the todo list by entering a task name and clicking the "Add" button.
- Delete Task: Users can delete tasks by clicking on the delete button next to each task.
- Mark Task as Completed: Users can mark tasks as completed by clicking on a checkbox next to each task.
- MongoDB: Database to store the todo tasks.
- Express.js: Backend framework to handle HTTP requests and responses.
- React.js: Frontend library to build the user interface.
- Node.js: JavaScript runtime environment to run server-side code.
- Axios: HTTP client for making requests to the backend API.
- Bootstrap: CSS framework for styling the application.
-
Clone the repository:
git clone https://github.com/yourusername/mern-todo-list.git
-
Navigate to the project directory:
cd mern-todo-list
-
Install dependencies:
npm install
-
Start the backend server:
npm start
-
Navigate to the client directory:
cd client
-
Install client dependencies:
npm install
-
Start the React development server:
npm start
-
Open your web browser and go to
http://localhost:3000
to view the todo list application.
- GET /todo: Get all todo tasks.
- POST /todo/new: Add a new todo task.
- DELETE /todo/delete/:id: Delete a todo task by ID.
- PUT /todo/update/:id: Update a todo task (e.g., mark as completed) by ID.
server.js
: Entry point for the backend server.routes/todo.js
: Defines routes for handling todo tasks CRUD operations.models/Todo.js
: Defines the MongoDB Todo schema.client/src/App.js
: Main component for the React frontend.client/src/components/TodoItem.js
: Component to render individual todo items.client/src/App.css
: Styles for the React frontend.
This project is licensed under the MIT License - see the LICENSE file for details.