https://github.com/rainernsa/todo
https://github.com/rainernsa/todo
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rainernsa/todo
- Owner: RainerNsa
- Created: 2024-10-18T03:09:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-19T08:06:42.000Z (over 1 year ago)
- Last Synced: 2025-08-26T01:27:17.534Z (10 months ago)
- Language: JavaScript
- Size: 82 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 ToDo App
This is a simple ToDo App built with React and Vite. It allows users to create, read, update, and delete tasks. The application demonstrates basic CRUD (Create, Read, Update, Delete) operations in a React project setup using Vite for fast development and optimized build.
## 🚀 Features
- **Create a Task**: Add new tasks to the to-do list.
- **Read Tasks**: View all added tasks with real-time updates.
- **Update a Task**: Modify the content of a task.
- **Delete a Task**: Remove tasks from the list.
- **Responsive Design**: Mobile-first approach for optimal user experience.
- **Lightweight & Fast**: Vite ensures lightning-fast builds and development server.
## 🛠️ Tech Stack
- **React**: UI framework for building the interface.
- **Vite**: Development environment for a fast and optimized React build.
- **CSS Modules / Tailwind CSS** *(optional)*: For styling the app.
- **LocalStorage**: To persist tasks across sessions.
## 🧑💻 Installation and Setup
1. Clone the repository:
```bash
git clone https://github.com/Woldreamz/ToDo.git
```
2. Navigate to the project directory:
```bash
cd todo-app
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. Build for production:
```bash
npm run build
```
6. Preview the production build:
```bash
npm run preview
```
## 📂 Project Structure
```
📦 todo-app
┣ 📂 src
┃ ┣ 📂 components
┃ ┃ ┣ 📜 TodoItem.jsx # Component for individual task
┃ ┃ ┣ 📜 TodoList.jsx # List of tasks component
┃ ┣ 📜 App.jsx # Main app component
┃ ┣ 📜 main.jsx # ReactDOM render logic
┣ 📂 public
┣ 📜 package.json # Project dependencies and scripts
┣ 📜 vite.config.js # Vite configuration
┗ 📜 README.md # Project documentation
```
## 📝 Usage
1. **Add Task**: Enter a task in the input field and click "Add Task."
2. **Edit Task**: Click on the "Edit" button to modify an existing task.
3. **Delete Task**: Click on the "Delete" button to remove a task from the list.
4. **Mark Task as Complete**: Toggle between completed and incomplete tasks by clicking on the task text.
## 🤝 Contributions
Contributions are welcome! Feel free to open issues, create pull requests, or suggest features.
## 🧾 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
### Happy Coding! 💻✨