https://github.com/jason89521/react-todo

A classic to-do app built with React, Tailwind CSS and Vite
https://github.com/jason89521/react-todo

react tailwindcss todolist vite

Last synced: 4 months ago
JSON representation

A classic to-do app built with React, Tailwind CSS and Vite

• Host: GitHub
• URL: https://github.com/jason89521/react-todo
• Owner: jason89521
• Created: 2022-03-27T12:38:30.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-30T09:50:09.000Z (over 4 years ago)
• Last Synced: 2025-08-08T04:33:17.095Z (12 months ago)
• Topics: react, tailwindcss, todolist, vite
• Language: TypeScript
• Homepage: react-todo-jason89521.vercel.app
• Size: 1.17 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Todos - Frontend Mentor

A simple todo app designed by Frontend Mentor, you can see the full description on [here](https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW).

## Screenshots

![light mode screenshot](./screenshot-light.png)

![dark mode screenshot](./screenshot-dark.png)

## Motivation

I read some articles saying that we should try to make our React components as independent as possible. For example, if we want to create a `List` component to list our todos, we should not implement the logic about manipulating todos inside this component. Doing so will make our `List` component non-reusable.

To make the `List` component more reusable, we can implement the logic about manipulating todos in its parent component, and pass the todos data to it. All the `List` component should do is to list the data which are passed by its parent component. As a result, if we want the `List` component to list the other data, we can just pass the data to it.

I totally agree with this design pattern, so I built this project to practice this pattern.

## Structure

All states about todos are managed by the component in `App.tsx`, including add, delete, remove, filter and the functionality of drag and drop. Those components, which are used to display the information of the todos, do not have their own state because what they need to do is just render the todos data onto the screen.

Another component has its own state is `Header` component, which is implemented in `Header.tsx`. It manage the theme of this app.

**This project is not a fullstack project, the data are stored in the local storage**.

## Built with

- React

- Tailwind CSS

- Vite