https://github.com/raihan71/react-todo-app

https://github.com/raihan71/react-todo-app

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/raihan71/react-todo-app
• Owner: raihan71
• Created: 2023-01-25T09:42:32.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-01-25T09:59:52.000Z (over 2 years ago)
• Last Synced: 2024-04-17T05:03:44.812Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://react-todo-app-black.vercel.app
• Size: 842 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Todo App 



### 📜 Todo App built with React and Tailwind

🔗 Live Demo: [https://react-todo-app-black.vercel.app/](https://react-todo-app-black.vercel.app/)

![image](https://user-images.githubusercontent.com/31585789/214531768-da1abde0-3043-402f-9ac5-48727aa8c1bf.png)

## ✨ Features

- Data is storing in your browser `Local Storage` (when you're not login)

- Data is storing in your Google account `Firebase` (when you're login)

- Import and Export todos `.json`

- Animate effects

- Sound effects

- Drag-Drop

- Copy the clipboard

- Priority for todos

- Tags for todos

- Sorting

## 💻 Tech Stack

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white)

![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)

![Yarn](https://img.shields.io/badge/yarn-%232C8EBB.svg?style=for-the-badge&logo=yarn&logoColor=white)

## 📝 Packages

- react

- react-dom

- react-redux

- react-icons

- react-toastify

- react-card-flip

- react-html-parser

- react-beautiful-dnd

- react-copy-to-clipboard

- firebase

- use-sound

- classnames

- @reduxjs/toolkit

- @formkit/auto-animate

## ⚙️ Development

#### Clone remote repo to your local

```

git clone https://github.com/raihan71/react-todo-app.git

```

#### Change directory

```

cd react-todo-app

```

#### Install dependencies

```

npm install

```

#### Happy Hacking 🎉

```

npm run dev

```

#### Build:

```

npm run build

```

#### Preview the build:

```

vite preview

```

## ⚠️ Warning

#### Remember to rename or copy the `.env.example` file to `.env` file and fill in the `.env` file.