Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mhistiak3/react-todo-app
https://github.com/mhistiak3/react-todo-app
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/mhistiak3/react-todo-app
- Owner: mhistiak3
- Created: 2024-09-13T10:22:44.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2024-09-13T10:43:33.000Z (2 months ago)
- Last Synced: 2024-09-14T00:15:01.062Z (2 months ago)
- Language: JavaScript
- Homepage: https://react-todo-ia.netlify.app/
- Size: 31.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React To-Do List App
A fully functional To-Do List application built with **React**, **Context API**, **Tailwind CSS**, and **Vite**. This app allows users to add, edit, delete, and mark tasks as complete with a modern and responsive design.
## Features
- **Add, Edit, Delete, and Complete Todos**: Manage your tasks with ease.
- **Responsive Design**: Optimized for all devices.
- **State Management with Context API**: Efficient and scalable state management without Redux.
- **Modern UI**: Beautiful design using Tailwind CSS with smooth transitions and icons.
## Getting Started
### Prerequisites
- **Node.js** (>= 12.x)
- **npm** or **yarn**
### Installation
1. **Clone the Repository:**
```bash
git clone https://github.com/your-username/react-todo-app.git
cd react-todo-app
```
2. **Install Dependencies:**
```bash
npm install
# or
yarn install
```
3. **Run the Development Server:**
```bash
npm run dev
# or
yarn dev
```
Open your browser and go to `http://localhost:5173` to see the app in action.
## Project Structure
```
react-todo-app/
├── public/
│ └── index.html
├── src/
│ ├── components/
│ │ └── .jsx
│ ├── context/
│ │ └── TodoContext.jsx
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── package.json
└── README.md
```
- **`context/TodoContext.jsx`**: Manages state using React Context API.
- **`components/`**: Contains the UI logic for the todo list.
- **`index.css`**: Tailwind CSS configuration.
- **`App.jsx`**: Main application component.
- **`main.jsx`**: Entry point for React with Vite.
## Usage
- **Add Todo**: Enter a task and click "Add".
- **Edit Todo**: Click the edit icon to modify a task.
- **Delete Todo**: Click the trash icon to remove a task.
- **Complete Todo**: Click the checkmark icon to mark a task as complete.
## Built With
- [React](https://reactjs.org/)
- [Context API](https://reactjs.org/docs/context.html)
- [Tailwind CSS](https://tailwindcss.com/)
- [Vite](https://vitejs.dev/)