This project represents modern UI design styles under a todo list app.

Collect all design styles together in one place and learn how to implement them in CSS.

A live demo is available at https://todo-list-rust-theta.vercel.app. To change the theme, click the Settings button on the right navigation bar. Then, select the style you want to use.

All design styles are written from scratch. This application does not use any UI component library. Currently, the app implements the following design styles:

• Modern Dark
• Modern Light
• Brutalism
• Neobrutalism
• Cardboard
• Glassmorphism
• Claymorphism
• Neumorphism
• Aurora (the dark theme with some subtle vector graphics in the background)

⚠️ The screenshot below is outdated. It does not show the latest design styles.

• 🎁 Project: vite, react, typescript
• 🛠️ Tools: yarn, eslint, prettier, husky, speedy web compiler, conventional commits, storybook
• 🎨 Styling: styled-components by emotion
• 🧪 Testing: jest, react-testing-library
• 💎 Others: desktop-first approach, atomic design, progressive web app, docker and dev container

To see all components in isolation:

1. Run yarn storybook in the root directory.
2. Open http:https://localhost:6006 in your browser.

1. Install Node.js.
2. Install Yarn.
3. Clone the repository.
4. Type and run: yarn in the root directory.
5. Type and run: yarn dev in the root directory.
6. Open http:https://localhost:5173 in your browser to see the app.

NOTICE ℹ️: The repository contains also the dev container configuration for Visual Studio Code. If you have the Remote - Containers extension installed, you can run the project in a container instead of installing all dependencies on your local machine.