Loading repository data…
wojciechmarek / repository
todo-list
Basic and simple the to-do list app representing modern UI design styles.
#atomic-design#aurora#bruthalism#cardboard#claymorphism#conventional-commits
Live repository statistics
★ 5Stars
⑂ 0Forks
◯ 0Open issues
◉ 5Watchers
README preview
Todo List
This project represents modern UI design styles under a todo list app.
Purpose
To collect different design styles together in one place and learn how to implement them in the CSS.
Demo
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.
Design styles
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 👈 set as a default style
- 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)
Screenshots
Used technologies
- 🎁 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
Versioning
This application uses conventional commits for generating changelog and versioning. The change log is available at CHANGELOG.md.
How to run the app
- 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.
Component tests
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: