React todo app with CRUD operation

Description

react todo app with CRUD operation with json-server

Demo.mp4

Tech Stack

Client: React js , Bootstrap

Server: json server

Packages

Package Useage
json-server use for simulate backend
axios for create HTTP request better and smoother
Bootstrap for styling
Bootstrap-icons for icons
uuidv4 for create unique key for list rendering
react-toastify for create toast-notification
concurrently for run multiple scripts simultaneously with one script

Getting Start

$ git clone https://github.com/alirzaghlmpr/react-todo-app.git
$ cd react-todo-app
$ npm i
$ npm start

it may take a little long to run for first time , so wait till the browser showup!

with concurrently package , the “npm start” in “create-react-app” is equal to run this following commands:

npm start = npm start(create-react-app default) + json-server --watch db.json

CRUD operation and routes

see the implemented APIs in src/Services/index.js

baseurl : localhost:3001

Method Route Description
GET /todos get all todos
GET /todos?todo_like={query}&label={label} get all datas with todo like {query} and have the {label}
GET /labels get all labels
POST /todos post a data to todos list
POST /labels post a data to labels list
DELETE /todos/{id} delete data with {id} from todos list
DELETE /labels/{id} delete data with {id} from labels list
PUT /todos/{id} update data with {id} from todos list
PUT /labels/{id} update data with {id} from labels list

GitHub

View Github