davidnguyen11 / cs50-final

my todo list

The web application to manage daily basis. It contains 4 pages:

• Login: allow users to log in and enjoy the service.
• Register: allow users to register to be a member of the service.
• Home page: allow users to see all of user's todo lists.
• List items: allow users to see all of list items of single todo list.

The web app is responsive, user can use desktop browser or mobile browser to enjoy the User Experience.

How to start

api

Make sure you have docker installed.

Run commands:

start & create database

docker-compose up -d

development

npm i

npm run dev

production

npm i

npm run build

npm start

my-todo

Run commands

development

npm i

npm run dev

production

npm i

npm start

Features

Login

login UI

login with error

Register

register UI

register with required error

register with error that is violated the database constraints

Home page

home UI

Displaying the list of todo lists

add new todo list

Allow user to add new todo list

edit the existing todo list

Allow user to edit the existing todo list

delete the existing todo list

Allow user to delete the existing todo list

List items

todo list items page

Display the items of specific todo list

add new todo list item

Allow user to add new todo list item

edit the existing todo list item

Allow user to edit the existing todo list item

delete the existing todo list item

Allow user to delete the existing todo list item

mark item as completed

Allow user to mark item as completed

back to todo list page

Allow user to navigate back to todo list page

Technologies

Back-End (API)

• Docker
• Postgres
• Typescript
• NodeJS
• ExpressJS

Front-End

• React
• NextJS
• Typescript
• NodeJS
• ExpressJS
• MATERIAL-UI