https://github.com/amiabasana/react-todo-app
A simple React Todo List App using Tailwind CSS.
https://github.com/amiabasana/react-todo-app
react react-hooks react-router react-todo react-todo-app react-todo-list todo-list-app todolist
Last synced: 2 months ago
JSON representation
A simple React Todo List App using Tailwind CSS.
- Host: GitHub
- URL: https://github.com/amiabasana/react-todo-app
- Owner: amiabasana
- Created: 2025-10-07T13:18:01.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-11-12T07:55:20.000Z (7 months ago)
- Last Synced: 2025-11-12T09:26:03.189Z (7 months ago)
- Topics: react, react-hooks, react-router, react-todo, react-todo-app, react-todo-list, todo-list-app, todolist
- Language: JavaScript
- Homepage: https://amiabasana.github.io/react-todo-app/
- Size: 71.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 React Todo App
A modern, responsive **Todo App** built with **React**, **Vite**, and **Tailwind CSS**.
Easily add, complete, and manage tasks with a clean UI and optimized performance.
🔗 **Live Demo:** [https://amiabasana.github.io/react-todo-app/](https://amiabasana.github.io/react-todo-app/)
---
## 🚀 Features
| Feature | Description |
|---------|-------------|
| Add Todos | Quickly add tasks to your list |
| Complete Todos | Mark tasks as completed with a single click |
| Delete Todos | Remove tasks easily |
| Responsive Design | Works on mobile, tablet, and desktop |
| Dark Mode Ready | UI adapts for dark themes |
| Lazy Loading | Optimized performance with `React.lazy` |
| REST API Integration | Demo fetch from JSONPlaceholder |
---
## 🛠 Technologies Used
| Technology | Purpose |
|------------|---------|
| React | Component-based UI & state management |
| Vite | Fast development & optimized production build |
| Tailwind CSS | Utility-first modern styling |
| Lucide React | Clean SVG icons |
| React Suspense & Lazy | Performance optimization |
| GitHub Actions | CI/CD deployment to GitHub Pages |
---
## 📁 Project Structure
```
react-todo-app/
├─ public/
│ └─ vite.svg
├─ src/
│ ├─ components/
│ │ ├─ TodoForm.jsx
│ │ ├─ TodoItem.jsx
│ │ └─ TodoList.jsx
│ ├─ App.jsx
│ ├─ main.jsx
│ └─ index.css
├─ .github/workflows/deploy.yml
├─ package.json
├─ vite.config.js
└─ README.md
```
---
## 💻 Installation & Local Setup
```bash
# Clone the repository
git clone https://github.com/amiabasana/react-todo-app.git
cd react-todo-app
# Install dependencies
npm install
# Run the app locally
npm run dev
# Build for production
npm run build
```
🧑💻 Author
Amisha Abasana – Front-End Developer
GitHub: https://github.com/amiabasana