Week 2 Assignment
A Simple TODO List
Objective
Build a simple Todo List application using React & Node. This project will help students
understand the basic concepts of React, such as components, state, props, and event
handling.
Instructions
You will create a Todo List app where users can:
● Add new tasks.
● View all added tasks.
● Mark tasks as completed.
● Delete tasks.
● Filter tasks (show all, only completed, or only incomplete tasks).
● Persist tasks in MongoDB using a node server so that they are saved even after
the user navigates away.
Requirements
1. Set up
- Use Vite for react.
- Use NPM for node
- Install the required dependencies.
2. App Structure
- Create a folder named components where all components will reside.
- Create separate routes for listing, viewing a task and creating a last.
- User should be to delete a task from the listing screen itself.
- Build the following components:
- TodoInput Component: Handles task input and adds new tasks.
- TodoItem Component: Displays each task with options to mark as
completed or delete.
- TodoList Component: Displays the list of tasks.
- Filter Component: Allows the user to filter tasks (e.g., show all, completed,
or incomplete).
3. Node.js and Express Setup
- Create a Node.js server using Express to handle HTTP requests.
- Persist data in mongodb and retrieve it using apis.
- Request and Response must only be in JSON format.
Submission:
- Submit the project as a zipped folder.
- The project should include a README.md file with instructions on how to run the
application, install dependencies, and how to obtain an API key for the weather
API.
