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 left 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)
- VFD Display (the dark theme with a retro VFD display glowing effect)
- CRT (the old-school cathode ray tube monitor effect)
- 🎁 Project: vite, react, typescript
- 🛠️ Tools: yarn, eslint, prettier, husky, speedy web compiler, conventional commits, storybook, react-hook-form, react-router
- 🎨 Styling: styled-components by emotion, lucide icons
- 🧪 Testing: jest, react-testing-library
- 💎 Others: desktop-first approach, atomic design, progressive web app, docker and dev container
This application uses conventional commits for generating changelog and versioning. The change log is available at CHANGELOG.md.
- Install Node.js.
- Install Yarn.
- Clone the repository.
- Type and run:
yarnin the root directory. - Type and run:
yarn devin the root directory. - Open
http://localhost:5173in your browser to see the app.
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.
The project contains component tests for all dump (atom/molecule/organism) components (111 tests in total including 23 snapshot tests). To run the tests, type and run: yarn test in the root directory.
Report:
