0% found this document useful (0 votes)
11 views

Week 2 - Assignment

Hello3

Uploaded by

hello125643
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
11 views

Week 2 - Assignment

Hello3

Uploaded by

hello125643
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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.

You might also like