Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wojciechmarek/todo-list
Basic and simple the to-do list app representing modern UI design styles.
https://github.com/wojciechmarek/todo-list
atomic-design aurora bruthalism cardboard claymorphism conventional-commits crt dark-theme design-systems docker emotion glassmorphism light-theme neubrutalism neumorphism react styled-components typescript vfd vite
Last synced: 2 months ago
JSON representation
Basic and simple the to-do list app representing modern UI design styles.
- Host: GitHub
- URL: https://github.com/wojciechmarek/todo-list
- Owner: wojciechmarek
- Created: 2023-01-15T13:31:18.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-15T21:43:41.000Z (7 months ago)
- Last Synced: 2024-07-16T01:57:43.538Z (7 months ago)
- Topics: atomic-design, aurora, bruthalism, cardboard, claymorphism, conventional-commits, crt, dark-theme, design-systems, docker, emotion, glassmorphism, light-theme, neubrutalism, neumorphism, react, styled-components, typescript, vfd, vite
- Language: TypeScript
- Homepage: https://todo-list-rust-theta.vercel.app
- Size: 3.32 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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](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](./CHANGELOG.md).
## How to run the app
1. Install [Node.js](https://nodejs.org/en/download/).
2. Install [Yarn](https://classic.yarnpkg.com/en/docs/install/).
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://localhost:5173` in 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:
