Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohamed-taha-essa/react-todo
React To-Do App
https://github.com/mohamed-taha-essa/react-todo
api-rest bootstrap5 component create-react-app css fetch-api front-end-development javascript react react-hooks reactjs useeffect-hook usestate-hook zustand
Last synced: 11 days ago
JSON representation
React To-Do App
- Host: GitHub
- URL: https://github.com/mohamed-taha-essa/react-todo
- Owner: Mohamed-Taha-Essa
- Created: 2024-07-09T18:19:10.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-09T07:53:51.000Z (about 2 months ago)
- Last Synced: 2024-12-09T08:33:53.282Z (about 2 months ago)
- Topics: api-rest, bootstrap5, component, create-react-app, css, fetch-api, front-end-development, javascript, react, react-hooks, reactjs, useeffect-hook, usestate-hook, zustand
- Language: JavaScript
- Homepage:
- Size: 86.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React To-Do App
A frontend application for managing a To-Do list, built with React and Zustand for state management. This app connects to a Django REST Framework backend to perform CRUD operations on tasks.
---
## Features
- **Task Management**:
- Create, update, delete, and list tasks.
- Toggle task status between `INPROGRESS` and `DONE`.
- **Zustand for State Management**:
- Centralized state management with async actions for API calls.
- **RESTful API Integration**:
- Fetches and syncs data with the Django backend.
---
## Technologies Used
- **Frontend**: React.js, Zustand
- **Styling**: Bootstrap (for layout and styling)
- **Backend API**: Django REST Framework
---
## Project Structure
```plaintext
react-todo/
│
├── src/
│ ├── components/
│ │ ├── CreateToDo.jsx # Component for adding new tasks
│ │ ├── ToDos.jsx # Component for listing and managing tasks
│ │
│ ├── store/
│ │ ├── store.js # Zustand store for state management
│ │
│ ├── App.js # Main entry point of the React app
│ ├── index.js # React DOM rendering
│
├── public/ # Public files for the app
├── package.json # Project dependencies
└── README.md # Documentation
```
---
## Components
### 1. `ToDos.jsx`
Manages and displays a list of tasks fetched from the Django backend.
#### Key Features
- Fetch tasks from the backend when the component is mounted.
- Update a task's status between `DONE` and `INPROGRESS`.
- Delete tasks from the list.
```jsx
import { useEffect, useState } from "react";
import useTodoStore from "../store";
const ToDos = () => {
const { todos, fetchTodos, updateTodo, deleteTodo } = useTodoStore((state) => ({
todos: state.todos,
fetchTodos: state.fetchTodos,
updateTodo: state.updateTodo,
deleteTodo: state.deleteTodo,
}));
useEffect(() => {
fetchTodos();
}, []);
return (
{todos.map((todo, index) => (
-
{todo.title}
deleteTodo(todo)}
>
Delete
updateTodo({
...todo,
status: todo.status === "DONE" ? "INPROGRESS" : "DONE",
})}
>
{todo.status}
))}
);
};
export default ToDos;
```
---
### 2. `CreateToDo.jsx`
Provides a form for adding new tasks to the To-Do list.
#### Key Features
- Handles user input for task title and status.
- Submits new tasks to the backend using the Zustand store.
```jsx
import { useState } from "react";
import useTodoStore from "../store";
const CreateToDo = () => {
const createTodo = useTodoStore((state) => state.createTodo);
const [title, setTitle] = useState("");
const [status, setStatus] = useState("INPROGRESS");
const addTodo = (e) => {
e.preventDefault();
createTodo({ title, status });
setTitle("");
setStatus("DONE");
};
return (
setTitle(e.target.value)}
placeholder="Task Title"
/>
setStatus(e.target.value)}
>
INPROGRESS
DONE
Add Task
);
};
export default CreateToDo;
```
---
## State Management
The app uses Zustand for state management.
### `store.js`
Manages tasks, fetches data from the backend, and performs CRUD operations.
#### Actions:
- **fetchTodos**: Fetch all tasks from the backend.
- **createTodo**: Add a new task to the backend.
- **updateTodo**: Update a task's details.
- **deleteTodo**: Remove a task from the backend.
---
## How to Run
1. **Install Dependencies**:
```bash
npm install
```
2. **Start the Development Server**:
```bash
npm start
```
3. **Ensure the Django Backend is Running**:
- Run your Django server at `http://127.0.0.1:8000/`.
4. **Access the App**:
- Open `http://localhost:3000/` in your browser.
---
## Future Improvements
- Add authentication for users.
- Integrate notifications for task updates.
- Enhance UI/UX with animations.