Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ayushsgithub/redux_todo
https://github.com/ayushsgithub/redux_todo
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ayushsgithub/redux_todo
- Owner: ayushsgithub
- Created: 2023-09-23T07:07:34.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-26T11:28:39.000Z (about 1 year ago)
- Last Synced: 2024-05-28T18:40:28.176Z (6 months ago)
- Language: JavaScript
- Size: 133 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Redux Todo App
This is a simple todo app built with the help of React, Vite, Tailwind and Redux. This README aims to provide an overview of the app and how to get it up and running.
![todo png](https://github.com/ayushsgithub/redux_Todo/blob/main/src/assets/todo.png?raw=true)
## Getting Started
To get the app running locally:
1. Clone the repository:
```
git clone https://github.com/ayushsgithub/redux_Todo.git
```2. Install dependencies:
```
npm install
```3. Start the development server:
```
npm start
```The app will be served at `http://localhost:3000`.
4. Add todos by typing in the input box and clicking the "Add Todo" button.
5. Delete todos by clicking the "BIN" button.
## App Structure
The app consists of the following components:
`AddTodo.jsx`: Contains the input box and "Add Todo" button. On submit, dispatches an action to add a todo.
`Todos.jsx`: Lists all todos. Contains each todo and a "BIN" button to delete. Dispatches actions accordingly.
`store.js`: Redux store configuration.
`index.js`: Main app component that renders the TodoInput and TodoList components.
## Technologies Used
- React - For the UI
- Redux - For state management
- Tailwind - For CSS## Improving the App
Some things that could be improved:
- Add filtering/sorting of todos
- Add editing of existing todos# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh