 |
| Restaurant App in React with JSON API Data | IndianTechnoEra |
Aim:
Create a react application, using which the details of “Restaurant: - Dish ID, Image of the Dish, Comments of the dish and Description” are fetched from the JSON server and displayed on the web page.
Component 1: Index Part
| index.js |
|---|
import ReactDOM from 'react-dom/client' import RestApp from './RestApp' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( <> <RestApp/> </> ) |
Component 2: Top-bar Part
| RestTopBar.js |
|---|
import React from 'react' // import { Link, Outlet } from 'react-router-dom' function TopBar() { return ( <> <div className='top'> <div className='topLeft'> <h1 className='topLeft'>NewRest</h1> </div> <div className='topCenter'> <ul className='topList'> <li className='topListItem'>Home</li> <li className='topListItem'>Offers</li> <li className='topListItem'>Order</li> <li className='topListItem'>AboutUs</li> <li className='topListItem'>ContactUs</li> <li className='topListItem'>Profile</li> </ul> </div> <div className='topRight'> <i className='topSearchIcon fas fa-search'></i> </div> </div> {/* <Outlet /> */} </> ) } export default TopBar |
Component 3: Restaurant Data Display Part
| RestCard.js |
|---|
import FoodData from './RestaurantAPI.json' import './Rest.css'
function ShowRestaurantAPI () { const DisplayFood = FoodData.map(data => { return ( <> <span className='card'> <span className="cardImg"> <img src={data.Img} className='card-img-top' alt={data.Name} ></img> </span> <div className="card-body"> <p className='card-text'><b>Name : </b> {data.Name}</p> <p className='card-text'><b>Description : </b> {data.Description} </p> <p className='card-text'><b>Comment : </b> {data.Comment} </p> </div> </span> </> ) }) return <>{DisplayFood}</> } export default ShowRestaurantAPI |
Component 4: Footer Part
| RestFooter.js |
|---|
function RestFooter () { return ( <> <div className='fDiv'> <div className='footerSocial '> <i className='p-1 fs-5 fab fa-facebook-square'></i> <i className='p-1 fs-5 fab fa-twitter-square'></i> <i className='p-1 fs-5 fab fa-pinterest-square'></i> <i className='p-1 fs-5 fab fa-instagram-square'></i> </div> <h6>© All Right Reserve | NewRest</h6> </div> </> ) } export default RestFooter |
Component 5: Restaurant Data API Part
| RestaurantAPI.json |
|---|
[{ "FoodId": "1", "Img": "../food_img/1.jpeg", "Name": "Fried Rice", "Comment": "Very tasty ", "Description": "Fried rice is a dish of cooked rice that has been stir-fried in a wok .." }, { "FoodId": "2", "Img": "../food_img/1.webp", "Name": "Noodles", "Comment": "Good", "Description": "Noodles are a type of food made from unleavened dough which is either rolled flat and cut, stretched, or extruded, into long strips or strings." }, { "FoodId": "3", "Img": "../food_img/2.jpg", "Name": "Burger", "Comment": "Really good!", "Description": "A burger is a flat round mass of minced meat or vegetables, which is fried and often eaten in a bread roll" }, { "FoodId": "4", "Img": "../food_img/4.webp", "Name": "Momo", "Comment": "Delicious !", "Description": "Momo are bite-size dumplings made with a spoonful of stuffing wrapped in dough. Momo are usually steamed, though they are sometimes fried or steam-fried." }, { "FoodId": "5", "Img": "../food_img/5.webp", "Name": "Pizza", "Comment": "This is Yummy!", "Description": "Pizza, dish of Italian origin consisting of a flattened disk of bread dough topped with some combination of olive oil, oregano, tomato, olives, mozzarella or other cheese" } ] |
Component 6: CSS Part
| Rest.js |
|---|
body{background-color:#fff} .fDiv{background-color:#22d667;padding:15px;color:#fff;font-size:11px;} .fDiv{text-align:center;padding:15px;bottom:0;position:fixed;width:100%;z-index:999} .card-img-top{height:350px;align-items:center;transition:cubic-bezier(0.075,0.82,0.165,1)} .card-img-top:hover{transition:cubic-bezier(0.075,0.82,0.165,1)} .card{width:250px;position:relative;align-items:center;margin:5px;flex:auto;display:inline-block;} .card{border:2px solid #000;border-radius:15px;box-sizing:content-box;overflow:hidden} .card:hover{cursor:pointer;box-shadow:0 0 10px #000} .card-body{height:auto;background-color:#fff;overflow:hidden;text-align:left} .card-text{text-align:left;margin-left:10px;margin-right:10px;font-family:'Varela Round'serif;} .card-text{font-size:16px;color:#444;line-height:24px;overflow:hidden;text-overflow:ellipsis;} .card-texr{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-weight:500} .top{width:100%;height:50px;background-color:#22d667;position:sticky;top:0;display:flex;} .top{align-items:center;font-family:'Josefin Sans',sans-serif;z-index:999;margin-bottom:20px;border-bottom:none} .topLeft,.topRight{flex:3;display:flex;align-items:center;justify-content:center;height:50px} .topLeft{padding-top:5px;text-decoration:none;display:flex;justify-content:center;align-items:center} .topLeftLogo{border-bottom:none;cursor:pointer;display:flex;justify-content:center;align-items:center;margin-top:10px;margin-left:10px} .topLeftLogo:hover{color:#000;transition:.4s} .topCenter{flex:6;justify-content:center;align-items:center} .topIcon{font-size:20px;margin-right:10px;color:#444} .topList{display:flex;justify-content:center;margin:0;padding:0;list-style:none} .topList>li:hover{text-decoration:underline;color:#000;transition:.4s} .topListItem{margin-left:20px;font-size:18px;font-weight:500;cursor:pointer;text-decoration:none;color:#fff} .topListItem>a{font-weight:400;text-decoration:none} .topListItem>a:hover{transition:.4s;transition:cubic-bezier(0.075,0.82,0.165,1);text-decoration:underline} .topSearchIcon{font-size:18px;color:#666;cursor:pointer;margin-left:15px} .topSearchIcon:hover{color:#fff} .cardImg{height:240px;width:240px;background-color:aqua;margin-top:5px;border-radius:10px} .footerSocial .footerSocial{cursor:pointer;align-items:center;justify-content:center;color:#fff;transition:.6s} .footerSocial i{cursor:pointer;color:#fff;transition:.4s} .footerSocial i:hover{cursor:pointer;color:#000;transition:.4s} |
Output:
 |
| Restaurant App in React with JSON API Data | IndianTechnoEra |