Todolist-react-api-json

Best-README-Template

An awesome README template to jumpstart the project!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• About Todolist
  
• About The Project
  
• Prerequisites
  
• Install
  
• Build With
  • React
  • Axios API
  • JSON Server
  • NPM
  • Bootstrap
  • Material-UI
• Maintainers
  
• Contributor
  
• License
  
• Contact
  
  

About Todolist

• A TODOLIST app lets you write, organize, and reprioritize your tasks more efficiently.
• They also let you attach notes, links, and files to a task, and many let you see when someone else has completed a task.
• In many ways, a good to-do app is the ultimate productivity app.
  
  

About The Project

• The TODOLIST-REACT-API-JSON is react app.
• It build on React with Axios API and JSON Server.
• Used Bootstrap and Material-UI to markup the project.

• This app has five components -
  • Todolist
  • Header
  • AddNewItem
  • ItemList
  • UpdateInput
• Todolist is main component, Who contain other four components.
• Header component store heading details.
• AddNewItem component contain one "input field" in form to take task from user and two buttons first is "Add Task" it's action is add task in taskList and second is "Remove All" it's action is remove all tasks from taskList.
• ItemList component render entire taskList with two buttons, they avilable with each task first is "edit/update" button it's action is popup UpdateInput component with selected task and second is "delete" button it's action is delete selected task from the taskList.

• UpdateInput component contain one input field in form to show selected task and take details to edit/update task. It contain two button also first is "Update" button it's action is update task and close UpdateInput component and second is "Cancel" button it's action is close UpdateInput component without any changes.

(back to top)

Prerequisites

• NPM - Download Link
  
  

Install

1. Clone the Todolist-react-api-json app project.

git clone https://github.com/surajt26/Todolist-react-api-json.git

2. Install all dependency which mention in "package.json" file.

npm install

3. Start Todolist-react-api-json Project.

npm start

4. Install JSON Server at new CMD/Terminal.

npm install -g json-server

5. Run JSON Server.

json-server --watch db.json --port 3004

(back to top)

Build With

React

• React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.
• It is maintained by Meta and a community of individual developers and companies.

Axios API

• Axios: Axios is a Javascript library used to make HTTP requests from node. js or XMLHttpRequests from the browser and it supports the Promise API that is native to JS ES6.
• It can be used intercept HTTP requests and responses and enables client-side protection against XSRF.
• It also has the ability to cancel requests.

JSON Server

• JSON Server is a Node Module that you can use to create demo REST JSON services within a short span of minutes.
• All we need to do is have a JSON file as sample data.
• Let's learn more about how to install and set up a JSON server in our system and alongside we'll try to create a REST API.

NPM

• npm is a package manager for the JavaScript programming language maintained by npm, Inc.
• npm is the default package manager for the JavaScript runtime environment Node.js.
• It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.

Bootstrap

• Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
• It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Material-UI

• MUI offers a comprehensive suite of UI tools to help you ship new features faster.
• Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.
  
  

Maintainer

@surajt26.

Contributor

License

MIT © Suraj KY

Contact

Suraj KY

LinkedIn · Gmail · Github · Twitter · Instagram · Project Link

(back to top)