Todo List

todo list practice.

Architecture

Component Structure

Data-Flow

excalidraw file: architecture

Resources

• Sound Effects: Pixabay Sound Effects
• MP3Cutter: Online MP3 Cutter

---

Requirements

• Use any frontend frameworks of your choice(Angular, React, Vue, etc)
• Feel free to build the UI in your own way

Test coverage

• Can add tasks with a short description
• Show a list of all tasks(completed/uncompleted)
• Can set a task as completed or uncompleted
• Can delete a task
• Can update the task description
• (optional) Can sort tasks by time the tasks are created
• (optional) Can filter or search tasks
• (optional) Make the UI responsive

Submission

• Clean and extendable code
• Documentation (source code, architecture)
• (optional) Live demo site

---

Try something

• Use commitizen for conventional commits
• Use Tailwind for styling
• Use Vercel to host site
• Use SQL like solution to store data (IndexedDB, PonchDB)
• Add PWA support
• Add Sound Effects

---

How to start

• Download the project.
• Run npm init with node enviroment.
• Run npm start to serve the web， open http://localhost:4200 to see the result.

How to commit messages

• Run commitizen by npm run commit to commit messages.