Beautifully Animated ToDo App built in React

You can try it here

Stack

• React - Front-end library
• React Router - Routing
• ChakraUI - Component library
• Framer Motion - Animations
• Firebase - User auth and database

Project Structure

project root
├── public
│   ├── icons - Icons for the PWA
│   └── favicon.ico - favourite icon
└── src
    ├── assets - Banner Images
    ├── components - UI Components
    ├── context - Custom context and provider for managing global state
    ├── entities - Reusable type definitions
    ├── hooks - Custom hooks
    ├── pages - Components that render the pages
    ├── reducers - Reducers for managing complex state
    ├── utils - Utility functions
    ├── main.tsx - Entry point
    └── routes.tsx - Router definition

How to Run

Firstly, clone the repo:

git clone https://github.com/turtledev65/animated-todo-app.git

Go into the newly created directory:

cd animated-todo-app

Install dependencies using npm:

npm install

And now you can run it using:

npm run dev

Credits

• Sally 3D Pack - used for the banners
• react-icons - used for the icons