Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/siraajul/todospark
A minimalist React + Vite Todo application that offers essential CRUD operations (Create, Read, Update, Delete) with a clean, modern UI built using Tailwind CSS. Features include task completion toggling, inline editing, local storage persistence, and responsive design. Perfect for both React beginners and developers seeking a lightweight todo app
https://github.com/siraajul/todospark
css3 html5 javascript jsx reactjs todoapp vitejs webapp
Last synced: about 2 months ago
JSON representation
A minimalist React + Vite Todo application that offers essential CRUD operations (Create, Read, Update, Delete) with a clean, modern UI built using Tailwind CSS. Features include task completion toggling, inline editing, local storage persistence, and responsive design. Perfect for both React beginners and developers seeking a lightweight todo app
- Host: GitHub
- URL: https://github.com/siraajul/todospark
- Owner: siraajul
- Created: 2024-11-09T22:22:28.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-09T22:36:05.000Z (about 2 months ago)
- Last Synced: 2024-11-09T23:25:06.616Z (about 2 months ago)
- Topics: css3, html5, javascript, jsx, reactjs, todoapp, vitejs, webapp
- Language: JavaScript
- Homepage: https://todospark-kappa.vercel.app
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Todo App ✅
A minimalist React + Vite Todo application that helps you manage your daily tasks with ease. Built with modern tooling and a clean UI.
## Features 🚀
- ✨ Create, edit, and delete tasks
- ✅ Mark tasks as complete/incomplete
- 💾 Persistent storage using localStorage
- 📱 Responsive design
- ⚡ Lightning fast with Vite
- 🎨 Modern UI with Tailwind CSS
## Tech Stack 💻
- React 18
- Vite
- Tailwind CSS
- Lucide Icons
- shadcn/ui components
## Quick Start 🏃♂️
```bash
# Clone the repository
git clone https://github.com/yourusername/react-todo-app.git
# Navigate to project directory
cd react-todo-app
# Install dependencies
npm install
# Start development server
npm run dev
```
Visit `http://localhost:5173` to view the app.
## Usage 📝
1. **Add a task**: Type your task in the input field and press Enter or click the "+" button
2. **Complete a task**: Click the checkbox next to the task
3. **Edit a task**: Click the edit icon to modify the task text
4. **Delete a task**: Click the trash icon to remove the task
## Project Structure 📂
```
react-todo-app/
├── src/
│ ├── components/
│ │ └── ui/
│ ├── App.jsx
│ └── main.jsx
├── public/
├── index.html
└── package.json
```
## Development 🛠️
```bash
# Run development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
```
## Contributing 🤝
Feel free to:
1. Fork the repository
2. Create a new branch: `git checkout -b feature-name`
3. Make your changes
4. Submit a pull request
## License 📄
MIT License - feel free to use this project as a template for your own todo app!
## Connect With Me 🌐
- GitHub: [your-github-username]
- LinkedIn: [your-linkedin]
---
Built with ❤️ and React