https://github.com/alexander784/kangacook
A Task management application that allows users to add, view, and delete tasks. Built with Django for the backend and React for the frontend.
https://github.com/alexander784/kangacook
django django-rest-framework reactjs restful-api ui-design use-context
Last synced: about 2 months ago
JSON representation
A Task management application that allows users to add, view, and delete tasks. Built with Django for the backend and React for the frontend.
- Host: GitHub
- URL: https://github.com/alexander784/kangacook
- Owner: alexander784
- Created: 2024-08-20T06:10:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-21T10:54:18.000Z (over 1 year ago)
- Last Synced: 2025-06-12T17:08:52.471Z (12 months ago)
- Topics: django, django-rest-framework, reactjs, restful-api, ui-design, use-context
- Language: Python
- Homepage:
- Size: 14.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Task Manager
A Task management application that allows users to add, view, and delete tasks. Built with Django for the backend and React for the frontend.
## Features
1. Add new task.
2. VIews a list of all tasks.
3. Delete task
4. Responsive UI Built with React.
5. Restful API built eith Django.
## Tech Stack
* Frontend: React,Tailwind
* Backend: Django, Django REST Framework
* Database: SQLite.
* State Management: useContext, Reducers
## Setup and Installation
## prerequisites:
* python 3.10.12
* Node.js
* Django
* Django REST Framework
* React
## Backend SetUp
1. Clone the repo:
``git clone https://github.com/alexander784/Kangacook.git``
``cd Kangacook``
2. Install dependecies:
``pip install -r requirements.txt``
3. Run migrations and start the djano development server.
``python3 manage.py migrate``
``python3 manage.py runserver``
### Frontend Setup
1. Navigate to the frontend directory:
`cd client`
2. Install dependecies.
`npm install`
3. Start the React development server:
`npm start`
## Usage
## Adding a New Task
1. Go to the `Add Task` section on the homepage.
2. Enter the task title and description.
3. Click the `Add Task` button to submit.
## Viewing Tasks
1. All tasks are listed on the homepage.
2. The task list displays the title and description of each task.
## Deleting a Task
1. Click the "Delete" button next to the task you want to remove.
2. The task will be removed from the list.
## State Management
State is managed globally using React's useContext hooks and reducers:
**Context Provider**: Wraps the application, providing state and dispatch functions to components.
**Reducer**: Handles state updates for adding, deleting, and fetching tasks.
## API Endpoints:
`` GET /task_app/: Fetch all tasks``
`` POST /task_app/: Add a new task``
`` DELETE /tasks_app/{id}/: Delete a task by ID``
## Author: Alexander Nyaga.
## License:
This project is licensed under the MIT License. See the LICENSE file for more details.