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: 2 days 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 (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-21T10:54:18.000Z (24 days ago)
• Last Synced: 2024-10-21T15:42:11.722Z (24 days 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.