This is a complete dynamic contact app with axios and json server
- Add contact
- Edit contact
- Delete contact
- HTML
- CSS
- Bootstarp
- JavaScript DOM
- Axios
- Json Server
- faker.js
- Webpack
- Babel
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
npm install
Builds the application and starts a webserver with hot loading. Runs on http://localhost:8080/
npm start