This is a complete dynamic contact app with axios and json server

Features

• Add contact
• Edit contact
• Delete contact

Technology

• HTML
• CSS
• Bootstarp
• JavaScript DOM
• Axios
• Json Server
• faker.js
• Webpack
• Babel

Starterkit

Get the kit

git clone https://github.com/Rafiul-Islam/Contact-App-With-AJAX/

Open the Json Server folder of the project

Install JSON Server

npm install -g json-server

Start JSON Server

json-server --watch db.json

Now if you go to http://localhost:3000/Users you'll get

[
  {
    "id": 1,
    "name": "Lina Thompson",
    "email": "Norwood_Maggio15@gmail.com",
    "jobTitle": "Global Division Specialist"
  },
  {
    "id": 2,
    "name": "Miss Haleigh Spinka",
    "email": "Terence.Upton1@gmail.com",
    "jobTitle": "Principal Program Director"
  },
  {
    "id": 3,
    "name": "Desmond Leffler",
    "email": "Rosalind.Waelchi91@hotmail.com",
    "jobTitle": "Corporate Optimization Developer"
  },
  {
    "id": 4,
    "name": "Armani Hyatt",
    "email": "Anahi_Waelchi14@hotmail.com",
    "jobTitle": "Chief Solutions Analyst"
  },
  {
    "id": 5,
    "name": "Leatha Stark",
    "email": "Sandy_Abernathy11@gmail.com",
    "jobTitle": "International Infrastructure Producer"
  },
  {
    "id": 6,
    "name": "Alize Nolan",
    "email": "Aliza.Skiles@gmail.com",
    "jobTitle": "Corporate Marketing Director"
  },
  {
    "id": 7,
    "name": "Daren Abbott IV",
    "email": "Royal_Hahn37@hotmail.com",
    "jobTitle": "Product Assurance Specialist"
  },
  {
    "id": 8,
    "name": "Jalon Krajcik",
    "email": "Hassan_Gerlach@hotmail.com",
    "jobTitle": "Product Brand Representative"
  },
  {
    "id": 9,
    "name": "Alexandra McCullough",
    "email": "Concepcion_Koss28@gmail.com",
    "jobTitle": "Senior Web Associate"
  },
  {
    "id": 10,
    "name": "Mrs. Arthur Marquardt",
    "email": "Julio_Gulgowski78@gmail.com",
    "jobTitle": "Chief Accounts Facilitator"
  },
  {
    "name": "Rafiul Islam",
    "email": "rafi@gmail.com",
    "jobTitle": "Software developer",
    "id": 11
  }
]

This data are generated using faker.js in the index.html file of this folder

Now get back to the project folder

Installation

npm install

Builds the application and starts a webserver with hot loading. Runs on http://localhost:8080/

npm start