https://github.com/ali-sanad/todo-list
Todo List with React and Typescript
https://github.com/ali-sanad/todo-list
eslint git github github-pages husky nx pnpm prettier react react-testing-library recoil tailwindcss typescript vite vitest
Last synced: 3 months ago
JSON representation
Todo List with React and Typescript
- Host: GitHub
- URL: https://github.com/ali-sanad/todo-list
- Owner: Ali-Sanad
- Created: 2024-12-17T22:32:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-21T19:11:23.000Z (over 1 year ago)
- Last Synced: 2024-12-21T20:19:24.863Z (over 1 year ago)
- Topics: eslint, git, github, github-pages, husky, nx, pnpm, prettier, react, react-testing-library, recoil, tailwindcss, typescript, vite, vitest
- Language: TypeScript
- Homepage: https://ali-sanad.github.io/todo-list/
- Size: 233 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Todo List Application
### Layout
|Mobile|Desktop|
|------|----------|
|||
### Features
- Add, remove, and toggle completion of todos.
- Clean and responsive UI built with Tailwind CSS.
- State management using Recoil for global state handling.
### Tech Stack
#### 1. **Tailwind CSS**
- Tailwind CSS is used for styling the application with a utility-first approach.
#### 2. **React**
- React is used for building the UI components and managing the rendering of the Todo List.
#### 3. **RecoilJS**
- RecoilJS is utilized for state management, making it easy to manage the todos in a global state with simple hooks and atoms.
#### 4. **TypeScript**
- TypeScript is used to ensure type safety and improve the developer experience by providing better tooling, autocompletion, and error checking.
#### 5. **NX**
- NX is used for managing and scaling the project. It helps with running tasks such as building, linting, testing, and serving the application.
#### 6. **React Testing Library (RTL) & Vitest**
#### 7. **Pnpm, Vite, ESlint, Prettier, and Husky (pre-commit hook)**
### Usage
- Clone the repo
- Install the dependencies
```
pnpm install
```
- Run the application locally
```
pnpm dev
```
- Run the test suits
```
pnpm test
```