Scribd
Upload
74 views

Address Book Using MERN

Address Book using MERN

Uploaded by

Ronny Camacho
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
74 views

Address Book Using MERN

Address Book using MERN

Uploaded by

Ronny Camacho
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 13
TutorialsDSAData ScienceWeb TechCourses oS MERN Stack MERN Interview Questions MERN Projects MERNStackDeveloper ReactJS React Interview Q Address Book using MERN Last Updated : 15 Nov, 2023, In this article, we will build a Address Book using the MERN stack. The application will enable users to add, remove, edit and view addresses. The project will use the mongoDB database for storage and React for UI part. This classic address book helps you to save your contacts easily and data can be retrieved easily. Preview of Final Output: Let us have a look at how our final project will look like: Address Book Name: GeetaForGeeke Ema: efg@emallcom Contact: 1234567890 ‘Adress fg, noida, india nu Name txt Email: [email protected] Contact 123154352 Address: test, tet, test ae Prerequisites of Address Book : * Model schema for address should be designed before implementing the database . * The routes and endpoints of NodeJS backend must be designed before implementation Technologies Used in Address Book: * MongoDB * Express ¢ React JS * NodeJS Approach To create Address Book: 1. We will build a frontend in React that will use bootstrap to develop a UI which will be used for below mentioned functionalities . 2. Then we will create MongoDB collection to store the data related to addresses . 3. NodeJS will be used for developing backend server and Express will be used to implement endpoints used by our frontend ies of Address Book : The project will have following functionalities . Functiona + Add Address : User can create a new address and save it to address book * Remove Address : User can remove existing addresses from address book. * Edit Address : User can edit and update existing address. * View Addresses : User can view all the addresses from address book. Steps to create a Address Book : Frontend Step 1: First we will create a frontend for our application in React . start a new react project using below command nox create-react-app address-book Step 2: For this project we will require axios to make API calls to backend . Also we will require bootstrap for elegant design . We are also going to use react-bootstrap-icons for icons . finally we will use react-router-dom package for routing in frontend. Step 3: Install all the dependencies using npm as below inside frontend folder, nom i axios react-bootstrap-icons react-router-dom Step 4: For bootstrap get CDN links of bootstrap and jquery and paste it inside index.html file in public folder as below, tink href="https://cdn jsdelivr.net/npm/[email protected]/dist/ess/bootstrap.mi n.css” re 'stylesheet” integrity="sha384- EVSTQN3/azprG.1Anm3QDgp/LIm9Nao0Yz1ztcQTwFspd3yD65Vohhpu uCOmLASJC" crossorigin="anonymous"> integrity= Step 5: Create a folder called components in src directory and create files. AddAddress,js, AddressListjs, Navigation,js inside it. Backend For backend create a separate folder outside of React folder called ‘address- book-backend’. Ae ae) di AREPA Step 1: Inside this folder initiate node project using below command. npm init Step 2: Now lets install required packages nodemon , express , mongoose , cors , body-parser as below npm i express nodemon mongoose cors body-parser Step 3: Once the packages are installed create a app,js file which will contain our backend code . Also create a folder models and create a file addressjs Database : * For database we are using local MongoDB you can use Atlas also . * Inside MongoDB create a new database with the name ‘addressbook’ * Now create ‘addresses’ collection inside this database and we are done with database part. Project Structure of Address Book: The updated dependencies in package,json will look like: Frontend : "dependencies": { "@testing-library/jest-dom": "5.17.8", "@testing-library/react": "*13.4.8", "@testing-library/user-event": "913.5.8", "axios": "41.5.1", "http": "90.0,1-security", “react": "18.2.8" “peact-bootstrap-icons": "41.18.3", “react-dom": "*18.2.8", "46.16.80"; “react-scripts": "5.0.1", "web-vitals": "42.1.4" } Backend: "dependencies": { “body-parser": "41,28.2", "cors": "92.8.5", express": "4.18.2", "mongoose": "7.6.8", "nodemon": "43.8.1 } Example: Write the following code in respective file Frontend Code : * App,js: This file implements routing and imports all components + AddAddress.js: This component creates a forma to save new addresses * AddressListj: This component displays Address in a list format * Navigation : This component implements navigation and handle update and delete function Javascript J1pp.js import React from ‘react’; import { BrowserRouter as Router, Route, Routes } from ‘react-router-dom’ ; import AddressList from './components/AddressList’; import Addaddress from '../components/AddAddress’ ; function App() { return (
{ nav("/')5 Yi: ¥ return (

Add Address

< Navigation />
ext" nam name” onChange=(handleChange) required classi
add Address«
) export default AddAddress; Javascript //AddressList.js import React, { useState, useEffect } from ‘react’; import axios from ‘axios import Navigation from './Navigation"; import { PencilSquare, Trash } from ‘react-bootstrap-icons' const AddressList = () => { const [addresses, setAddresses] = useState({]); const [selectedAddress, setSelectedAddress] = useState(nul1); /Thandle for fetching addresses on page load useEffect(() => { axios.get( ‘http: //localhost:5000/api/addresses').then((response) => { setAddresses(response.data) ; Ys % (5 //handle for deleting address const handlebelete = (addressId) => ( -delete(*http: //localhost :5000/api/addresses/${addressId} ) sthen(() => { axios.get( ‘http: //localhost:5000/api/addresses').then((response) => { setAddresses(response.data) ; v3 » scatch((error) => { console.error('Error deleting address: ', error) Ys oe /Thandle for setting address to be deleted const handleEdit = (address) => { setSelectedAddress (address) ; h //handle for updating address const handleUpdate = (updatedaddress) => { axios -put(“http: //Localhost:5000/api/addresses/${updatedAddress._id}", updatedadd sthen(() => { axios .get( ‘http: //localhost: 5000 /api /addresses').then((response) => ( setAddresses(response. data); setSelectedAddress (null); Ds » scatch((error) => { console.error('Error updating address: Ds » error); return (
setSelectedaddress(( --.selectedaddress, name: e.target. value » ) required Pp
'form-control” phone value={selectedAddress contact) onchange={(e) => setSelectedaddress({ + +sSelectedaddress, contact: e.target.value, d > required bP
vy