15 |
16 | 
17 |
22 |
23 | )
24 | }
25 | export default foodItem;
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/utils/useOnline.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const useOnline = () => {
4 |
5 | const [isOnline, setIsOnline] = useState(true);
6 |
7 | useEffect(() => {
8 |
9 | const handleOnline = () => {
10 | setIsOnline(true);
11 | };
12 | const handleOffline = () => {
13 | setIsOnline(false);
14 | };
15 | window.addEventListener("online", handleOnline);
16 | window.addEventListener("offline", handleOffline);
17 |
18 | return () => {
19 | window.removeEventListener("online", handleOnline);
20 | window.removeEventListener("offline", handleOffline);
21 | }
22 |
23 | }, []);
24 |
25 | // returning boolean value
26 | return isOnline;
27 | };
28 | export default useOnline;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "namastey-react",
3 | "version": "1.0.0",
4 | "description": "this is live course",
5 | "scripts": {
6 | "start": "parcel index.html",
7 | "build": "parcel build index.html",
8 | "test": "jest"
9 | },
10 | "author": "Rohit Sharma",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "@babel/core": "^7.23.7",
14 | "babel-plugin-transform-remove-console": "^6.9.4",
15 | "parcel": "^2.8.3",
16 | "postcss": "^8.4.24",
17 | "process": "^0.11.10",
18 | "tailwindcss": "^3.3.2"
19 | },
20 | "dependencies": {
21 | "@reduxjs/toolkit": "^1.9.7",
22 | "cors": "^2.8.5",
23 | "react": "^18.2.0",
24 | "react-dom": "^18.2.0",
25 | "react-redux": "^8.1.3",
26 | "react-router-dom": "^6.12.0"
27 | },
28 | "browserslist": [
29 | "last 2 versions"
30 | ]
31 | }
32 |
--------------------------------------------------------------------------------
/src/utils/Constant.js:
--------------------------------------------------------------------------------
1 |
2 | export const IMG_CDN_URL = "https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/";
3 |
4 |
5 |
6 | export const MENU_API ="https://foodfire.onrender.com/api/restaurants?lat=21.1702401&lng=72.83106070000001&page_type=DESKTOP_WEB_LISTING";
7 |
8 | export const swiggy_menu_api_URL =
9 | "https://foodfire.onrender.com/api/menu?page-type=REGULAR_MENU&complete-menu=true&lat=21.1702401&lng=72.83106070000001&&submitAction=ENTER&restaurantId=";
10 |
11 |
12 | export const options = {
13 | method: "GET",
14 | headers: {
15 | Authorization: "",
16 | },
17 | };
18 | // menu items api card type key
19 |
20 | export const MENU_ITEM_TYPE_KEY =
21 | "type.googleapis.com/swiggy.presentation.food.v2.ItemCategory";
22 | export const RESTAURANT_TYPE_KEY =
23 | "type.googleapis.com/swiggy.presentation.food.v2.Restaurant";
24 |
25 |
--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
1 |
2 | import heartt from "../Images/heartt.png";
3 | export const Footer = () => {
4 |
5 |
6 | return (
7 | {name}
18 |{ (price? price:defaultPrice)/100}
19 | 20 | 21 |
8 |
9 |
10 | Foodie
11 |
12 | Created By
13 |
14 |
15 |
20 | Rohit Sharma
21 | 
26 | ➡ React
31 |
32 | );
33 |
34 | };
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/src/components/Shimmer.js:
--------------------------------------------------------------------------------
1 |
2 | //import RestrauntCard from "../components/RestrauntMenu";
3 | const Shimmer = () => {
4 | return (
5 | <>
6 | with
22 |
23 |
24 |
25 |
7 | {Array(15)
8 | .fill("").map((e, index) => (
9 |
22 |
23 | );
24 | }
25 | export default Shimmer;
26 | //shadow-stone-500
--------------------------------------------------------------------------------
/src/components/RestaurantCard.js:
--------------------------------------------------------------------------------
1 | import { IMG_CDN_URL } from "../utils/Constant";
2 |
3 | const RestrauntCard = ({
4 | name,
5 | cuisines,
6 | cloudinaryImageId,
7 | avgRating,
8 | costForTwo,
9 |
10 |
11 | }) => {
12 | return (
13 |
14 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | ))}
19 |
20 |
21 |
15 | 
16 |
29 |
30 |
31 | )
32 | }
33 | export default RestrauntCard;
34 |
35 |
36 |
--------------------------------------------------------------------------------
/src/components/About.js:
--------------------------------------------------------------------------------
1 | const About = () => {
2 | return (
3 | {name}
17 |{cuisines.join(", ")}
18 | 19 |{
20 | avgRating < 4.2
21 | ?
25 | ⭐{avgRating}
22 | :⭐{avgRating}
23 | } 24 |•
26 |{costForTwo ?? '₹200 for two'}
27 | 28 |
4 |
6 |
28 | )
29 | }
30 | export default About;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Namaste React Series 🚀
2 |
3 | ### [Namaste React Live Course](https://learn.namastedev.com/courses/namaste-react-live) from Zero to Hero 🚀 by [Akshay Saini](https://www.linkedin.com/in/akshaymarch7/) Founder of [NamasteDev](https://courses.namastedev.com/learn/Namaste-React).
4 |
5 | - I made [🚀 foodie-apps 😍](https://foodie-apps.netlify.app//) from scratch using React.js and Parcel.js, which is the part of this course.
6 |
7 |
8 | ## To Clone this Repository
9 |
10 | You need to write the following commands on the terminal screen(in vscode) so that you can run this project locally.
11 |
12 | ```bash
13 | git clone "https://github.com/RohitSharma50/food-orderinf-website"
14 | ```
15 |
16 | Go to the project directory
17 |
18 | ```bash
19 | cd food-orderinf-website
20 | ```
21 |
22 | Install dependencies
23 |
24 | ```bash
25 | npm install
26 | ```
27 |
28 | Start the server
29 |
30 | ```bash
31 | npm run start
32 | ```
33 |
34 | After doing this this application should now be running on `localhost`. If you want to Fork repository and want to run locally, follow this guidelines [Fork and Clone Github Repository](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
35 |
36 | #
37 | ## Key Features
38 | ◉ Multi Select Cuisines Based Restaurant Filter.
39 | ◉ Search Based Restaurants Filter.
40 | ◉ Shimmer UI
41 | ◉ CORS Extension For Fetching Swiggy Live API Data from Swiggy Public APIs.
42 | ◉ Tailwind CSS
43 | ◉ Class Based Components.
44 | ◉ React Router DOM for routing & navigation
45 | ◉ Lazy Loading
46 | ◉ Context API
47 | ◉ Lifting The State Up
48 |
49 |
50 |
51 |
52 | ## 🔗 Let's Connect
53 |
54 | [](https://www.linkedin.com/in/rohit-sharma50/)
55 |
--------------------------------------------------------------------------------
/src/components/Cart.js:
--------------------------------------------------------------------------------
1 | import {useSelector} from "react-redux";
2 | import FoodItem from "./FoodItem";
3 | import { useState } from 'react';
4 | import {total} from "./FoodItem";
5 |
6 |
7 | const Cart = () => {
8 |
9 | const cartItems = useSelector(store =>store.cart.items);
10 |
11 |
12 | const [isOrder, setIsOrder] = useState(false);
13 | const handleOrderClick = () => {
14 | if(!cartItems.length){
15 | alert("Please add Value to cart");
16 | return;
17 | }
18 | setIsOrder(true);
19 | };
20 | const total = cartItems.reduce((sum, item) => {
21 | return sum + (item.price ? item.price : item.defaultPrice) / 100;
22 | }, 0);
23 |
24 |
25 | return (
26 | Some important information about project
5 |6 |
-
7 |
- 8 | 😎 Key Features 9 | 10 |
- 📌 Shimmer UI for Better UserExperience 11 |
- 📌 Search Feature 12 |
- 📌 Cart Feature 13 |
- 📌 Checking network connection 14 |
- 📌 forms to contact 15 |
- 📌 Single page application 16 |
- 📌 Implemented Lazy Loading or OnDemand Loading on This Router 17 |
-
19 |
- 20 | ⚙️ Tech Stack used 21 | 22 |
- ➡️ React JS for UI 23 |
- ➡️ Parcel for Bundling 24 |
- ➡️ Redux for state management 25 |
- ➡️ Tailwind CSS for Styling 26 |
27 |
28 | {
29 | cartItems.map((item) =>(
30 |
49 | )
50 | }
51 | export default Cart;
--------------------------------------------------------------------------------
/src/components/Contact.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import contact from "../Images/Contact-Us.png"
3 |
4 | const Contact = () => {
5 | const [message, setMessage] = useState(false);
6 | const handleSubmit = (e) => {
7 | e.preventDefault();
8 | setMessage(true);
9 | }
10 | return (
11 |
36 |
37 |
40 |
44 | {isOrder && (
45 | 37 |
Total in INR - {total}
39 |
46 | Your order has been placed successfully!
47 |
)}
48 |
12 |
28 | );
29 | };
30 | export default Contact;
--------------------------------------------------------------------------------
/src/components/Instamart.js:
--------------------------------------------------------------------------------
1 |
2 | // import { useState } from "react";
3 |
4 | // const Section = ({ title, description, isVisible, setIsVisible }) => {
5 | // return (
6 | //
13 | 
14 |
15 |
16 |
27 | Contact us
17 | 18 | 26 |
7 | //
24 |
25 | // )
26 | // };
27 | // const Instamart = () => {
28 | // const [visibleSection, setIsVisibleSection] = useState("Team");
29 | // return (
30 | // {title}
8 | // {isVisible ? ( 9 | // 15 | // ) : ( 16 | // 21 | // )} 22 | // {isVisible &&{description}
} 23 | //
31 | // setIsVisibleSection("about")}
38 | // />
39 | // setIsVisibleSection("Career")}
45 | // />
46 | //
47 | // );
48 | // };
49 | // export default Instamart;
--------------------------------------------------------------------------------
/src/utils/useRestaurant.js:
--------------------------------------------------------------------------------
1 |
2 | import { useEffect, useState } from "react";
3 |
4 | const useRestaurant = (
5 | swiggy_menu_api_URL,
6 | resId,
7 | RESTAURANT_TYPE_KEY,
8 | MENU_ITEM_TYPE_KEY
9 | ) => {
10 | const [restaurant, setRestaurant] = useState(null); // use useState to store restaurant data
11 | const [menuItems, setMenuItems] = useState([]); // use useState to store restaurant Menu Item data
12 |
13 | useEffect(() => {
14 | getRestaurantInfo(); // call getRestaurantInfo function so it fetch api data and set data in restaurant state variable
15 | }, []);
16 |
17 | async function getRestaurantInfo() {
18 | try {
19 | const response = await fetch(swiggy_menu_api_URL + resId);
20 | if (!response.ok) {
21 | const err = response.status;
22 | throw new Error(err);
23 | } else {
24 | const json = await response.json();
25 |
26 | // Set restaurant data
27 | const restaurantData =
28 | json?.data?.cards
29 | ?.map((x) => x.card)
30 | ?.find((x) => x && x.card["@type"] === RESTAURANT_TYPE_KEY)?.card
31 | ?.info || null;
32 | setRestaurant(restaurantData);
33 |
34 | // Set menu item data
35 | const menuItemsData =
36 | json?.data?.cards
37 | .find((x) => x.groupedCard)
38 | ?.groupedCard?.cardGroupMap?.REGULAR?.cards?.map(
39 | (x) => x.card?.card
40 | )
41 | ?.filter((x) => x["@type"] == MENU_ITEM_TYPE_KEY)
42 | ?.map((x) => x.itemCards)
43 | .flat()
44 | .map((x) => x.card?.info) || [];
45 |
46 | const uniqueMenuItems = [];
47 | menuItemsData.forEach((item) => {
48 | if (!uniqueMenuItems.find((x) => x.id === item.id)) {
49 | uniqueMenuItems.push(item);
50 | }
51 | });
52 | setMenuItems(uniqueMenuItems);
53 | }
54 | } catch (err) {
55 | setMenuItems([]);
56 | setRestaurant(null);
57 | console.error(err);
58 | }
59 | }
60 | return [restaurant, menuItems];
61 | };
62 |
63 | export default useRestaurant;
--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
1 |
2 | import { useState } from "react";
3 | import logo from "../assets/foodie.jpg";
4 | import { Link } from "react-router-dom";
5 | import useOnline from "../utils/useOnline";
6 | import React from "react";
7 | import { useSelector } from "react-redux";
8 |
9 | const Title = () => {
10 | return (
11 |
12 | InstaMart
32 | //
29 |
69 |
70 | )
71 |
72 | };
73 | export default Header;
74 |
--------------------------------------------------------------------------------
/src/components/Body.js:
--------------------------------------------------------------------------------
1 | import RestrauntCard from "./RestaurantCard";
2 | import { useEffect, useState } from "react";
3 | import Shimmer from "./Shimmer";
4 | import { Link } from "react-router-dom";
5 | import { filterData } from "../utils/helper";
6 |
7 |
8 |
9 |
10 |
11 | const Body = () => {
12 | const [allRestaurant, setAllRestaurant] = useState("");
13 | const [searchText, setSearchText] = useState("");
14 | const [filterdRestaurant, setFilterdRestaurant] = useState([]);
15 |
16 | useEffect(() => {
17 | getRestaurants();
18 | }, []);
19 |
20 | const getRestaurants = async () => {
21 | try {
22 | const data = await fetch(
23 | "https://foodfire.onrender.com/api/restaurants?lat=21.1702401&lng=72.83106070000001&page_type=DESKTOP_WEB_LISTING");
24 |
25 | const json = await data.json();
26 |
27 |
28 | // was showing an error of data fatching because sometime data coming from cards[1] sometime cards[2] and different on other times so me make a function and check which value of i gives data in cards[i]
29 | async function checkJsonData(jsonData) {
30 |
31 | for (let i = 0; i < jsonData?.data?.cards.length; i++) {
32 |
33 | // initialize checkData for Swiggy Restaurant data
34 | let checkData = json?.data?.cards[i]?.card?.card?.gridElements?.infoWithStyle?.restaurants;
35 |
36 | // if checkData is not undefined then return it
37 | if (checkData !== undefined) {
38 | return checkData;
39 | }
40 | }
41 | }
42 | // call the checkJsonData() function which return Swiggy Restaurant data
43 | const resData = await checkJsonData(json);
44 |
45 | // update the state variable restaurants with Swiggy API data
46 | setAllRestaurant(resData);
47 | setFilterdRestaurant(resData);
48 | } catch (error) {
49 | console.log(error);
50 | }
51 |
52 | }
53 |
54 |
55 |
56 |
57 |
58 | return (allRestaurant?.length === 0) ? (
59 |
31 |
68 | -
32 |
- 33 | Home 34 | 35 |
- 36 | Contact 37 | 38 |
- 39 | About 40 | 41 |
- 42 | Cart 43 | 44 |
- {cartItems.length? cartItems.length : " "} 45 | 46 |
48 |
64 |
65 |
66 |
67 | -
49 | {/*
- 50 | {isLoggedIn ? ( 51 | 52 | ) : ( 53 | ) 54 | 55 | } 56 | */} 57 | 58 |
-
59 |
{isOnline ? "✅" : "🔴"}
60 | 61 |
62 |
64 | {
70 | setSearchText(e.target.value);
71 | }}
72 | />
73 |
74 |
75 |
83 |
84 |
85 |
86 | {(filterdRestaurant?.length === 0 ?
103 |
104 |
105 |
106 | )
107 | };
108 |
109 | export default Body;
110 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * <---***Thinge bundle doing for us***--->
4 | * Create a server
5 | * HRM- HOt Module Reloading
6 | * File Watcher algorithum -C++
7 | * Building
8 | * MInify
9 | * Cleaning our Code
10 | * Dev and Production Build
11 | * Super fast build Algorithum
12 | * Image Optimization
13 | * Caching while development (image should in project )
14 | * Compression
15 | * Compatible with older version of browser
16 | * HTTPS on dev
17 | * parcel manages port number
18 | * Consistent hashing Algorithum
19 | * Zero configuration
20 | *
21 | *
22 | */
23 |
24 | import React, { Suspense, lazy } from "react";
25 | import ReactDOM from "react-dom/client";
26 | import Header from "./components/Header";
27 | import Body from "./components/Body";
28 | import { Footer } from "./components/Footer";
29 | import Error from "./components/Error";
30 | import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
31 | import Contact from "./components/Contact";
32 | import RestaurantMenu from "./components/RestrauntMenu";
33 | import Cart from "./components/Cart";
34 | import { Profiler } from "react";
35 | import {Provider} from "react-redux";
36 | import store from "./utils/store"
37 | const About = lazy(() => import("./components/About"));
38 | //const Instamart = lazy(() => import("./components/Instamart"))
39 |
40 | function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
41 | // Aggregate or log render timings...
42 | }
43 |
44 | const AppLayout = () => {
45 | return (
46 |
47 |