To-do list website made with React JS, Tailwind CSS
Tags: todo, tailwindcss, typescript
Published: 2023-08-12 20:11:26

---
title: To-do list website made with React JS, Tailwind CSS
published: true
date: 2023-08-10 00:19:00 UTC
tags: Todo,TailwindCSS,TypeScript
canonical_url: https://reactjsexample.com/to-do-list-website-made-with-react-js-tailwind-css/
---

## Demo

# ToDo
 ![To-do list website made with React JS, Tailwind CSS](https://reactjsexample.com/content/images/2023/08/code_2023-08-23-14-35.jpg)

To-do list website made with React JS, Tailwind CSS, TypeScript and more.[![To-do list website made with React JS, Tailwind CSS](https://camo.githubusercontent.com/bc2bc782fa8b7aa5e1f2d5d1159cc86ab9ba2b6bff7620d56a34912a6aae0b6c/68747470733a2f2f776562766176652e69722f74656d702f746f646f2f312e706e67)](https://camo.githubusercontent.com/bc2bc782fa8b7aa5e1f2d5d1159cc86ab9ba2b6bff7620d56a34912a6aae0b6c/68747470733a2f2f776562766176652e69722f74656d702f746f646f2f312e706e67)

[![To-do list website made with React JS, Tailwind CSS](https://camo.githubusercontent.com/cd6cdee797af53bbc7bcd3efb276e21a6330af4d1505a6ef9bd577a675c00b32/68747470733a2f2f776562766176652e69722f74656d702f746f646f2f322e706e67)](https://camo.githubusercontent.com/cd6cdee797af53bbc7bcd3efb276e21a6330af4d1505a6ef9bd577a675c00b32/68747470733a2f2f776562766176652e69722f74656d702f746f646f2f322e706e67)

[![To-do list website made with React JS, Tailwind CSS](https://camo.githubusercontent.com/662de2f2328bbcf4564921895fd9c53ed46ce9668c0cb4326d4c75e488e3f472/68747470733a2f2f776562766176652e69722f74656d702f746f646f2f332e706e67)](https://camo.githubusercontent.com/662de2f2328bbcf4564921895fd9c53ed46ce9668c0cb4326d4c75e488e3f472/68747470733a2f2f776562766176652e69722f74656d702f746f646f2f332e706e67)

Light mode:[![To-do list website made with React JS, Tailwind CSS](https://camo.githubusercontent.com/c4b70056b37dde9f7ae5ad2338b309ad441cd1687112eefae7a230fbc49083f0/68747470733a2f2f776562766176652e69722f74656d702f746f646f2f342e706e67)](https://camo.githubusercontent.com/c4b70056b37dde9f7ae5ad2338b309ad441cd1687112eefae7a230fbc49083f0/68747470733a2f2f776562766176652e69722f74656d702f746f646f2f342e706e67)

## Features

- Responsive design for optimal usage on various devices.
- Filter tasks by status (all, active, completed).
- Applied to organize your tasks with the following data: title, description, date, mark as complete and mark as important.
- Tasks are organized into routes: today’s tasks, important tasks, incomplete, complete, all tasks and tasks by directory (folder). Directories and tasks can be edited or deleted. In addition, there is a main directory called “Main” which cannot be edited or deleted.
- The list of tasks can be displayed first in: nearest, farthest, complete or incomplete.
- You can search for any tasks in the search field.
- Today’s tasks are shown in the user section and in notifications.
- Tasks, directories and DarkMode data are saved to localStorage.

## Goal

The project mainly aimed to put into practice knowledge of TypeScript, Tailwind, UseApi and React Js.

## Tools used

- React JS
- TypeScript
- Tailwind CSS
- React Router DOM
- HTML
- Api
- Weather
- Game
- Figma

## How to Run

if Need run on your machine:

Clone project

```
git clone https://github.com/ariyan-emi/ToDo.git

```

go to project

```
cd ToDo

```

install npm

```
npm install

```

start project

```
npm start

```

## Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.😊

## GitHub

[View Github](https://github.com/ariyan-emi/ToDo?ref=reactjsexample.com)