https://github.com/adudhe01/todoapp
A simple and modern Todo List app built with React and Vite. Easily add, complete, and track your daily tasks with a clean and responsive interface. Perfect for staying organized and productive!
https://github.com/adudhe01/todoapp
frontend javascript productivity reactjs task-manager todolist vite webapp
Last synced: about 2 months ago
JSON representation
A simple and modern Todo List app built with React and Vite. Easily add, complete, and track your daily tasks with a clean and responsive interface. Perfect for staying organized and productive!
- Host: GitHub
- URL: https://github.com/adudhe01/todoapp
- Owner: ADudhe01
- Created: 2025-05-26T01:12:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-26T03:31:17.000Z (about 1 year ago)
- Last Synced: 2025-07-06T04:39:08.960Z (12 months ago)
- Topics: frontend, javascript, productivity, reactjs, task-manager, todolist, vite, webapp
- Language: JavaScript
- Homepage: https://todoapp-seay.vercel.app
- Size: 108 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo App
A simple and interactive Todo List application built with React and Vite. This app allows users to add, complete, and track their daily tasks efficiently.
## Features
- **Add Tasks:** Quickly add new tasks to your todo list.
- **Mark as Complete:** Mark tasks as done or undone.
- **Task Counter:** See how many tasks are completed out of the total.
- **Empty State:** Friendly message when there are no tasks.
- **Responsive UI:** Works well on desktop and mobile devices.
## Project Structure
```
todoapp/
├── index.html
├── package.json
├── vite.config.js
└── src/
├── main.jsx
├── App.jsx
└── components/
├── ToDo.jsx
├── Form.jsx
├── ToDoList.jsx
└── Footer.jsx
```
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/) (v16 or higher recommended)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
### Installation
1. **Clone the repository:**
```sh
git clone https://github.com/your-username/todoapp.git
cd todoapp
```
2. **Install dependencies:**
```sh
npm install
# or
yarn install
```
3. **Start the development server:**
```sh
npm run dev
# or
yarn dev
```
4. **Open your browser and visit:**
```
http://localhost:5173
```
## Usage
- **Add a Task:** Type your task in the input field and press Enter or click the add button.
- **Complete a Task:** Click the checkbox next to a task to mark it as complete.
- **View Progress:** The footer shows how many tasks are completed out of the total.
- **No Tasks:** If there are no tasks, a message "No items in the list" will be displayed.
## Customization
- You can modify the styles in the respective component files or add a global CSS file for custom themes.
- To change the favicon, replace `vite.svg` in the `public` folder.
## Built With
- [React](https://react.dev/)
- [Vite](https://vitejs.dev/)
## License
This project is licensed under the MIT License.
---
**Happy tasking!**