├── .babelrc
├── .gitignore
├── .postcssrc
├── New Text Document.txt
├── Notes
    ├── 4. Notes provided.txt
    ├── Assignment1.txt
    ├── Assignment10 + notes.txt
    ├── Assignment11 + notes.txt
    ├── Assignment12 + notes.txt
    ├── Assignment13 + notes.txt
    ├── Assignment3.txt
    ├── Assignment4.txt
    ├── Assignment5 + notes.txt
    ├── Assignment6 + notes.txt
    ├── Assignment8.txt
    └── Assignment9 + notes.txt
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── About.js
    │   ├── Body.js
    │   ├── Cart.js
    │   ├── Config.js
    │   ├── Contact.js
    │   ├── Error.js
    │   ├── Footer.js
    │   ├── Header.js
    │   ├── InputControl.js
    │   ├── ItemCardComponent.js
    │   ├── Login.js
    │   ├── MealComponent.js
    │   ├── OrderHistory.js
    │   ├── ProfileClass.js
    │   ├── ProfileFunction.js
    │   ├── RestaurantCard.js
    │   ├── RestaurantMenu.js
    │   ├── RestaurantMenuShimmer.js
    │   ├── SearchBar.js
    │   ├── ShimmerUI.js
    │   ├── ShimmerUICard.js
    │   ├── SignUp.js
    │   └── UpdateCartOnUserChange.js
    ├── firebase.js
    ├── script.js
    └── utils
    │   ├── PathContext.js
    │   ├── RestaurantContext.js
    │   ├── SearchTextContext.js
    │   ├── Store.js
    │   ├── UserContext.js
    │   ├── cartSlice.js
    │   ├── useOnlineStatus.js
    │   ├── useRestaurantMenu.js
    │   ├── userSlice.js
    │   └── utils.js
├── style.css
└── tailwind.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | // with options
 2 | // {
 3 | //     "plugins": [ ["transform-remove-console" , {
 4 | //         "exclude" : ["log"]
 5 | //         }
 6 | //     ]]
 7 | // }
 8 | //no options
 9 | {
10 |     "plugins": [
11 |         [
12 |             "transform-remove-console"
13 |         ]
14 |     ]
15 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | /.parcel-cache
 8 | /dist
 9 | 
10 | # testing
11 | /coverage
12 | 
13 | # production
14 | /build
15 | 
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/.postcssrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": {
3 |     "tailwindcss": {}
4 |   }
5 | }


--------------------------------------------------------------------------------
/New Text Document.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ajeet1606/Namaste-React/0bdb17a3a606be45de3ba27872dd7c21d8a833e6/New Text Document.txt


--------------------------------------------------------------------------------
/Notes/4. Notes provided.txt:
--------------------------------------------------------------------------------
 1 | Running Notes of @akshaymarch7  's session on 01-01-2023:
 2 | 
 3 | Writing Scripts in package.json.
 4 | 
 5 | *Q. What converts New Code to Older Code(For older version Browsers)? 
 6 | A: Babel 
 7 | We do not need to write polyfill. Babel does it automatically.
 8 | 
 9 | npx - executing commands without downloading packages
10 | npm - will download required packages
11 | 
12 | Note: Parcel will not remove console.log automatically. We need to configure for it. There is a package for it, named 'babel-plugin-transform-remove-console' either from babel website or npmjs website: npm install babel-plugin-transform-remove-console --save-dev /-D
13 | 
14 | Usage: 1.via .babelrc (recommended)
15 |     2. via CLI
16 |     3. via NodeAPI
17 | 
18 | React-key Reconciliation :
19 | When there are siblings in an array, we need to give keys for each sibling
20 | HW: Read about React-key Reconciliation from React Docs.
21 | 
22 | React.createElement gives us an Object, which is then converted to html and puts into DOM
23 | JSX uses React.createElement (behind the scenes), which gives Object, and then into HTML, and it is put into DOM
24 | Babel does it. Babel converts JSX. JSX was developed by Facebook.
25 | Babel is must to use JSX.
26 | 
27 | Q. Is JSX HTML inside JS? No. 
28 | A: JSX is a HTML like Syntax, and not HTML inside JS.
29 | 
30 | Babel: Compiler for JS.
31 | Read Babel Docs: babeljs.io
32 | Play with Babel in it's website.
33 | Babel comes along with Parcel.
34 | 
35 | Also Go to it's GitHub Repo, and read about its algorithms.
36 | 
37 | React Component:
38 | 2 Types:
39 | 1. Functional Component- NEW
40 | 2. Class Based Component - OLD
41 | 
42 | Functional Comp is just a normal function that returns some piece of JSX, or a react element, or a function. 
43 | 
44 | Name of a Component starts with a Capital Letter (not mandatory, but good practice to use)
45 | 
46 | If we have to write multiple lines to be returned in a component, we need to use ()and ; at the end.
47 | 
48 |  For Homework, use Normal Convention.
49 | 
50 | Continued... Part 2
51 | 
52 | Hope it was Helpful ??
53 | Notes Part 2:
54 | 
55 | Diff b/n React Element & React Component:
56 | 
57 | React Element is returning an Object.
58 | React Component is a function that returns JSX, or a react element, or a function.
59 | 
60 | Syntax When rendering:
61 | For React Element, We use root.render(element_name);
62 | For React Component, We use Angular brackets: root.render(<ComponentName />);
63 | 
64 |  Any piece of Javascript code can be written within {} 
65 | 
66 | XSS - Cross site scripting (XSS) is an attack in which an attacker injects malicious executable scripts into the code of a trusted application or website. Attackers often initiate an XSS attack by sending a malicious link to a user and enticing the user to click it.
67 | 
68 | JSX takes care of XSS.
69 | 
70 | *Interview Q: Component Composition:
71 | A: Writing/ Passing component inside component.
72 | 
73 | Home Work:
74 | 1. Read about React-key Reconciliation from React Docs.
75 | 2. Do Whatever Akshay did in the Session.
76 | 
77 | *
78 | 
79 | Hope it was Helpful ??


--------------------------------------------------------------------------------
/Notes/Assignment1.txt:
--------------------------------------------------------------------------------
 1 | 								CHAPTER 1 - INCEPTION
 2 | 
 3 | Ques: 1. What is Emmet?
 4 | 
 5 | Ans: Emmet is a plug in for many popular text editors which greatly improves HTML & CSS workflow.
 6 | 
 7 | Ques: 2. Difference between a Library & a Framework?
 8 | 
 9 | Ans: Both frameworks and libraries are code written by someone else that is used to help solve common problems.
10 | A library is like going to Ikea. You already have a home, but you need a bit of help with furniture. You don’t feel like making your own table from scratch. Ikea allows you to pick and choose different things to go in your home. You are in control.
11 | 
12 | A framework, on the other hand, is like building a model home. You have a set of blueprints and a few limited choices when it comes to architecture and design. Ultimately, the contractor and blueprint are in control. And they will let you know when and where you can provide your input.
13 | 
14 | The Technical Difference
15 | The technical difference between a framework and library lies in a term called inversion of control.
16 | 
17 | When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.
18 | 
19 | Ques: 3. What is CDN? Why we use it?
20 | Ans: A CDN improves efficiency by introducing intermediary servers between the client and the website server. These CDN servers manage some of the client-server communications. They decrease web traffic to the web server, reduce bandwidth consumption, and improve the user experience of your applications.
21 | 
22 | Ques: 4. Why is React known as React?
23 | Ans: React is called "React" because of its core feature, which is its ability to "react" or respond dynamically to changes in data. React was originally created by Facebook in 2011 for use in their own web applications, and it was released as an open-source project in 2013. 
24 | In a traditional JavaScript application, you need to look at what data changed and imperatively make changes to the DOM to keep it up-to-date.
25 | React takes a different approach.
26 | 
27 | When your component is first initialized, the render method is called, generating a lightweight representation of your view. From that representation, a string of markup is produced, and injected into the document. When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM.
28 | 
29 | Ques: 5. What is cross origin in script tag?
30 | Ans: The crossorigin attribute sets the mode of the request to an HTTP CORS Request. Web pages often make requests to load resources on other servers. Here is where CORS comes in. A cross-origin request is a request for a resource (e.g. style sheets, iframes, images, fonts, or scripts) from another domain.
31 | 
32 | Ques: 6. Difference between React & ReactDOM?
33 | Ans: React: React is a javascript library, designed for building better user interfaces.
34 | 
35 | React-DOM: React-DOM is a complimentary library to React which glues React to the browser DOM
36 | 
37 | In a nutshell, Whenever we use component, classes, elements, etc. We’re using React and whenever we use methods like render() or findDOMNode() we’re using React-DOM.
38 | 
39 | 
40 | Ques: 7. Difference between React.development.js and React.production.js files via CDN?
41 | Ans: The development build is used - as the name suggests - for development reasons. You have Source Maps, debugging and often times hot reloading ability in those builds. The production build, on the other hand, runs in production mode which means this is the code running on your client's machine.
42 | 
43 | Ques: 8: What is async and defer in script?
44 | Ans: When browser reads the web page, there are 2 things happening: 
45 | 1. Parsing the HTML
46 | 2. Loading & Executing Scripts.
47 | There are 3 ways to define scripts in HTML file.
48 | 1. Direct way: <script scr=""/>
49 | Browser starts parsing HTML and when it reaches the scripts, it stopps, first it loads script & executes them then only further paring is done.
50 | 2. Using async: <script async src=""/>
51 | Script is loaded along with parsing but then parsing stopps for script execution, when it's completed then parsing resumes.
52 | 3. Using defer: <script defer src=""/>
53 | Script is loaded along with parsing and when parsing is completed then script is executed.
54 | 
55 | async doesn't maintain any order of script execution where as defer does.


--------------------------------------------------------------------------------
/Notes/Assignment10 + notes.txt:
--------------------------------------------------------------------------------
 1 | Read List:
 2 | -> Read about different routers in react-router-dom.
 3 | -> read about constructor and super(props) in classes.
 4 | -> React lifecycle diagram.
 5 | -> componentDidMount can be async but useEffect not why?		
 6 | 
 7 | 							
 8 | NOTES
 9 | 
10 | 
11 | -> We can create childrens of children also in react route path. Apparently we've to create outlet in the parent body also when rendering.
12 | 
13 | CLASS BASED COMPONENTS:
14 | -> render method is mandatory.
15 | -> we've a method, componentDidMount at the place of useEffect, so the order of execution is: contructor -> render -> componentDidMount.
16 | -> componentDidMount and useEffect in functional compo, are best place to make API calls.
17 | 
18 | 
19 | 
20 | 
21 | 									ASSIGNMENT
22 | 
23 | => Why we use super(props) in constructor of class component?
24 | It allows to us to access 'this' keyword in constructor. It calls the constructor of parent class and assigns the props to this pointer.
25 | 
26 | => Why can't we have the callback function of useEffect async?
27 | Using async function in useEffect is an error coz it return a promise and useEffect doesn't expect a callback fun to return promise, it should return nothing or a function. Still we can use async functions by defining a new inside/outside useEffect.
28 | 
29 | 


--------------------------------------------------------------------------------
/Notes/Assignment11 + notes.txt:
--------------------------------------------------------------------------------
 1 | Notes:
 2 | 
 3 | 
 4 | -> Parecel is a bundler, makes a single file for all of the code in our project.
 5 | -> In large scale applications, one single file can make the network very slow hence we break the the code into multiple chunks (process called: Chunking, Code splitting, dynamic building, lazy loading, on demand loading) according to the intent of that.
 6 | -> Now, every chunk is loaded into the browser only when it's needed, on demand loading.
 7 | Such elements are imprted using lazy: 
 8 | const myCompoenent = lazy(() => import(path));
 9 | -> So, when needed in browser, if it takes time to load and react wants to render it instantly and it's not loaded, react suspends the rendering and shows an error, to prevent this, to make react wait for loading, we SUSPENSE tag while making the route for our component. <Suspense> <MyComponent/> <Suspense/>
10 | -> In this case, to avoid showing blank page while loading, we show shimmer UI using fallback attribute of suspense.
11 | <Suspense fallback = {<Shimmer/>}> <MyComponent/> <Suspense/>


--------------------------------------------------------------------------------
/Notes/Assignment12 + notes.txt:
--------------------------------------------------------------------------------
 1 | Reading list:
 2 | Pure css
 3 | Inline css 
 4 | SCSS vs SASS
 5 | Styled components
 6 | Component libraries: Tailwind, MUI, Chakra UI, Base UI, Ant design, Bootstrap.
 7 | 
 8 | Read all pros and cons.
 9 | 
10 | 
11 | Tailwind Pros:
12 | - CSS on the go,
13 | - reusability,
14 | - less bundle size,
15 | - flexible ui, less restriction.
16 | 
17 | 
18 | To-do:
19 | - install tailwind pkg.
20 | - read about the config file of tailwind.
21 | - instal tailwind css intellisense extension


--------------------------------------------------------------------------------
/Notes/Assignment13 + notes.txt:
--------------------------------------------------------------------------------
 1 | 								NOTES + ASSIGNMENT
 2 | 
 3 | Props Drilling:
 4 | The process of passing data from Parent component to child component through a chain of other components, it goes through multiple other components to reach the destination. 
 5 | Disadvantages: Makes our code cluttered when the hierarchy becomes large.
 6 | 		   If parent changes the data, all the childs in the hierarchy are re rendered.
 7 | 
 8 | Lifting State up:
 9 | The process of lifting the state up is used to moving the state of a component to higher in the component hierarchy so that other components can also access it. It's done for code reusability and avoid passing props through multiple layers of components.
10 | Basically state is managed by the a parent and passed to childs as props.
11 | 


--------------------------------------------------------------------------------
/Notes/Assignment3.txt:
--------------------------------------------------------------------------------
 1 | 										ASSIGNMENT - 2: IGNITING OUR APP
 2 | 
 3 | 
 4 | Ques 1: What is NPM?
 5 | Ans: It's a package manager for JavaScript, it's defalt p. manager for JS runtime Nodejs. It consists of 2 parts:
 6 | -> A CLI tool for publishing and downloading packages.
 7 | -> An online repo that hosts JS packages.
 8 | 
 9 | Soruce: https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/
10 | 
11 | 
12 | Ques 2: What is Parcel/Webpack? It's need?
13 | Ans: These are bundlers mostly used for JS/TS that helps to minify, clean and make your code compact. Normally without using bundlers, in loading a web page, multiple files are transfered resulting in huge processing time but bundlers substantially reduce the time it takes and removes the unused code/ comments without modifying the functionality of code.
14 | 
15 | Ques 3: What is .parcel-cache?
16 | Ans: Cache folder or .parcel-cache stores the information about the project when parcel builds it so that next time it don't have to parse and process everything from scratch. It's the reason behind Parcel being so fast in development.
17 | 
18 | Ques 4: Difference between dependencies and devdependencies?
19 | Ans: Dependency is what your project needs to run like a library which provides some functionality that you call from your code. They are installed transitively. (A depends on B, we install A then B will also be installed)
20 | 
21 | DevDependency is what we need during develpment or testing like compilers, test frameworks or documentation generators.
22 | 
23 | Ques 5: What is Tree Shaking?
24 | Ans: When we import/export modules in JS, there are some unused code floating around. Tree Shaking or Dead Code Elimination means that unused code will not be included in the bundle during build process. Bundlers like parcel/webpack do this.
25 | 
26 | Ques 6: Hot Module Replacement?
27 | Ans: It allows developers to update code changes in the running application without requiring a full browser refresh. It speeds up the development as the code changes are reflected immediately. It simply detects the changes in source code and injects the updated code into the application.
28 | 
29 | 
30 | Ques 7: What is NPX?
31 | Ans: It stands for Node Package eXecute. It's a node package runner which allows developers to run the JS packages available on NPM registry w/o even installing them.
32 | 
33 | Ques 8: List down some super powers of Parcel?
34 | Ans:
35 | -> Builtin Support for various Technologies: It supports JS, TS, React, Vue, CSS.
36 | -> Universal Binding: It supports binding for both frontend & backend technologies.
37 | -> Hot Module Reloading: Update code changes in the running application without need of refreshing the broweser.
38 | -> Tree shaking: Exclude the unused code from the bundle during the build process.
39 | -> Zero Configuration: Needs no configuration in setting up hence super fast to start with.
40 | -> Speed: Super fast due to it's parallel processing and caching.
41 | 
42 | Ques 9: What is .git-ignore?
43 | Ans: It is a file that tells Git which file/directory to ignore while tracking changes in a repository. We add the files here, which can be dynamically regenrated.
44 | 
45 | Ques 10: Difference betweent package.json and package-lock.json?
46 | Ans: Package.json contains the metadata about the project and some functional dependencies which are required to run the project.
47 | Package-lock.json is created for locking the dependency with the locked version.
48 | 
49 | Ques 11: Why should we not modify package-lock.json?
50 | Ans: - Can cause issue with consistency and integrity of your project's dependencies.
51 | - Can cause problems when collaborating with other devs as it can create difference in dependencies.
52 | - If you need to update, use the proper npm command.
53 | 
54 | Ques 12: What are node-modules?
55 | Ans: It's a directory which is created when you install node.js packages in your project using package managers like NPM or YARN. It contains all the dependencies that your project needs to run.
56 | Don't push it to git: - Huge size, Redundant: can be generated using package-lock.json.
57 | 
58 | Ques 13: What is dist folder in parcel?
59 | Ans: A directory which contains the final output of the build process, when you run parcel-build it takes all the files of your source code like HTML, CSS, JS and bundles them together to build a single package which can be deployed to a server or used in a production environment.
60 | Add it to git-igonre as it can be re-generated using parcel-build.
61 | 
62 | Ques 14: Browserlists?
63 | Ans: It is a configuration file that allows devs to specify which browser and version their code should support.
64 | 
65 | Ques 15: Bundlers?
66 | Ans: Bundlers are the tools which are used to make packages of our code and optimze it for deployment. They allow us to write modular code using modules and dependencies and bundle all of the code into a single package for production use. e.g: webpack, parcel.
67 | 
68 | Ques 16: Caret ^ and Tilde ~
69 | Ans: Dependency versions are written in semver(semantic version) form, which consists of 3 parts, major, minor, patch. {1.2.3: major.minor.patch}.
70 | When we use ^ in front of version, it takes the latest minor version of given major version.
71 | When we use ~ in front of version, it takes the latest patch of given minor version.


--------------------------------------------------------------------------------
/Notes/Assignment4.txt:
--------------------------------------------------------------------------------
  1 | 										ASSINMENT 3: LAYING THE FOUNDATION
  2 | 
  3 | 
  4 | JSX => It's an extension of Javascript which allows us to write HTML like syntax in JavaScript. It makes it really easier to create and manipulate dynamic interfaces. This HTML like syntax is transformed into standard JS objects using a transpiler such a Babel.
  5 | 
  6 | e.g: JSX: const element = <button className="btn btn-primary">Click me</button>;
  7 | Converted into JS: const element = React.createElement("button", { className: "btn btn-primary" }, "Click me");
  8 | 
  9 | 									<--------------------------------------->
 10 | 
 11 | React.createElement => It's a method provided by React library to create React elements programmatically using JS. It has 3 arguments: type of element, properties, child elements.
 12 | e.g: React.createElement('div', { className: 'my-class' }, 'Hello, world!');
 13 | 
 14 | 									<--------------------------------------->
 15 | 
 16 | Benefits of JSX => 
 17 | 1. Readability: Easy to read & understand the structure of UI.
 18 | 2. Easy to learn: Similar to HTML
 19 | 3. Improved performance: React can optimize the rendering of components when it detects changes in their state or props, which can reduce the number of DOM updates needed and improve performance.
 20 | 4. Strong typing: Statically typed: Errors can be checked at compile time.
 21 | 5. Customizable: define custom components and reuse.
 22 | 
 23 | 									<--------------------------------------->
 24 | 
 25 | Behind the Scenes of JSX =>
 26 | JSX code is transpiled into JS:
 27 | 1. Parsing: Through Babel -> AST
 28 | 2. Transformation: AST -> JS, involves creating & updating DOM.
 29 | 3. Bundling: Group up this JS file with other files/ dependencies by Parcel to make a package which is served to browser.
 30 | 4. Execution: Bundled code is executed, React library takes control to create and update DOM.
 31 | 
 32 | 									<--------------------------------------->
 33 | Babel & parcel role in JSX =>
 34 | 
 35 | Babel: Transpiler, converts JSX to JS or modern JS syntax to old so that browser can read. Have a plugin for JSX called @babel/plugin-transform-react-jsx, which converts JSX syntax into function calls that create React elements.
 36 | 
 37 | Parcel: Bundler, takes all files, gives one package which is served to browser.
 38 | 
 39 | 									<--------------------------------------->
 40 | 
 41 | Components in React =>
 42 | Building blocks of React application, they're re-usable pieces of code, represent a part of UI like bottom, forms, entire section.
 43 | Two types: 
 44 | - Functional Component: Simple JS functions which take sime props and return a React element. Used for simple ones which don't require state or life cycle methods. Using a component inside another component is called composing component.
 45 | - Class Components.
 46 | 
 47 | 									<-------------------Coding Part-------------------->
 48 | 
 49 | 
 50 | Create a Nested header Element using React.createElement(h1,h2,h3 inside a div with class “title”):
 51 | 
 52 | const myHeading = React.createElement(
 53 |     "div",
 54 |     {
 55 |         className : "title"
 56 |     },
 57 |     [
 58 |         React.createElement(
 59 |             "h1",
 60 |             {
 61 |                 id: "h1"
 62 |             }, 
 63 |             "This is H1"
 64 |         ), 
 65 |         React.createElement(
 66 |             "h2",
 67 |             {
 68 |                 id: "h2"
 69 |             }, 
 70 |             "This is H2"
 71 |         ), 
 72 |         React.createElement(
 73 |             "h3",
 74 |             {
 75 |                 id: "h3"
 76 |             }, 
 77 |             "This is H3"
 78 |         )
 79 |     ]
 80 | );
 81 | 
 82 | 
 83 | Create the same element using JSX:
 84 | 
 85 | const myHeading1 = (
 86 |     <div className="title">
 87 |         <h1>This is h1</h1>
 88 |         <h2>This is h2</h2>
 89 |         <h3>This is h3</h3>
 90 |     </div>
 91 | );
 92 | 
 93 | 
 94 | Create a functional component of the same with JSX:
 95 | 
 96 | const myHeading2 = () => (
 97 |     <div className="title">
 98 |         <h1>This is h1</h1>
 99 |         <h2>This is h2</h2>
100 |         <h3>This is h3</h3>
101 |     </div>
102 | );
103 | 
104 | 									<--------------------------------------->
105 | Create a Header Component from scratch using Functional Components with JSX
106 | Add a Logo on left
107 | Add a search bar in middle
108 | Add User icon on right
109 | Add CSS to make it look nice
110 | 
111 | 
112 | Script file:
113 | 
114 | const Header = () => {
115 |     return (
116 |         <div className="header">
117 |             <div className="logo">
118 |                 <img src="https://c4.wallpaperflare.com/wallpaper/328/540/963/beautiful-nature-scenes-images-1920x1200-wallpaper-preview.jpg" alt="" />
119 |             </div>
120 |             <div className="search">
121 |                 <input type="search" name="" id="" />
122 |             </div>
123 |             <div className="user">
124 |                 <img src="https://vastphotos.com/files/uploads/photos/11382/autumn-photo-wall-art-m.jpg?v=20221031150227" alt="" />
125 |             </div>
126 |         </div>
127 |     );
128 | }
129 | 
130 | 
131 | const root = ReactDOM.createRoot(document.getElementById("root"));
132 | 
133 | root.render(<Header/>); 
134 | 
135 | CSS file:
136 | 
137 | 
138 | .header{
139 |     display: flex;
140 |     justify-content: space-between;
141 |     margin: 10px;
142 |     padding: 5px;
143 |     background-color: rgba(249, 202, 99, 0.607);
144 |     border-radius: 50px;
145 | }
146 | 
147 | .logo, .user{
148 |     width: 50px;
149 |     height: 50px;
150 |     overflow: hidden;
151 |     border-radius: 50%;
152 |     display: flex;
153 |     justify-content: center; /* center horizontally */
154 |     /* align-items: center; center vertically */
155 | }
156 | 
157 | .search{
158 |     display: flex;
159 |     justify-content: center; /* center horizontally */
160 |     align-items: center; /* center vertically */
161 | }
162 | 
163 | .search > input{
164 |     width: 300px;
165 |     height: 30px;
166 | }
167 | 
168 | .search > input:hover, img:hover{
169 |     cursor: pointer;
170 | }
171 | 
172 | img{
173 |     max-width: 100%;
174 |     max-height: 100%;
175 |     object-fit: cover;
176 | }
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 
183 | 
184 | 
185 | ------------------------------------------------------ NOTES PROVIDED BY AKSHAY BHAIYA --------------------------------------------------
186 | 
187 | Running Notes of @akshaymarch7  's session on 01-01-2023:
188 | 
189 | Writing Scripts in package.json.
190 | 
191 | *Q. What converts New Code to Older Code(For older version Browsers)? 
192 | A: Babel 
193 | We do not need to write polyfill. Babel does it automatically.
194 | 
195 | npx - executing commands without downloading packages
196 | npm - will download required packages
197 | 
198 | Note: Parcel will not remove console.log automatically. We need to configure for it. There is a package for it, named 'babel-plugin-transform-remove-console' either from babel website or npmjs website: npm install babel-plugin-transform-remove-console --save-dev /-D
199 | 
200 | Usage: 1.via .babelrc (recommended)
201 |     2. via CLI
202 |     3. via NodeAPI
203 | 
204 | React-key Reconciliation :
205 | When there are siblings in an array, we need to give keys for each sibling
206 | HW: Read about React-key Reconciliation from React Docs.
207 | 
208 | React.createElement gives us an Object, which is then converted to html and puts into DOM
209 | JSX uses React.createElement (behind the scenes), which gives Object, and then into HTML, and it is put into DOM
210 | Babel does it. Babel converts JSX. JSX was developed by Facebook.
211 | Babel is must to use JSX.
212 | 
213 | Q. Is JSX HTML inside JS? No. 
214 | A: JSX is a HTML like Syntax, and not HTML inside JS.
215 | 
216 | Babel: Compiler for JS.
217 | Read Babel Docs: babeljs.io
218 | Play with Babel in it's website.
219 | Babel comes along with Parcel.
220 | 
221 | Also Go to it's GitHub Repo, and read about its algorithms.
222 | 
223 | React Component:
224 | 2 Types:
225 | 1. Functional Component- NEW
226 | 2. Class Based Component - OLD
227 | 
228 | Functional Comp is just a normal function that returns some piece of JSX, or a react element, or a function. 
229 | 
230 | Name of a Component starts with a Capital Letter (not mandatory, but good practice to use)
231 | 
232 | If we have to write multiple lines to be returned in a component, we need to use ()and ; at the end.
233 | 
234 |  For Homework, use Normal Convention.
235 | 
236 | Continued... Part 2
237 | 
238 | Hope it was Helpful ??
239 | Notes Part 2:
240 | 
241 | Diff b/n React Element & React Component:
242 | 
243 | React Element is returning an Object.
244 | React Component is a function that returns JSX, or a react element, or a function.
245 | 
246 | Syntax When rendering:
247 | For React Element, We use root.render(element_name);
248 | For React Component, We use Angular brackets: root.render(<ComponentName />);
249 | 
250 |  Any piece of Javascript code can be written within {} 
251 | 
252 | XSS - Cross site scripting (XSS) is an attack in which an attacker injects malicious executable scripts into the code of a trusted application or website. Attackers often initiate an XSS attack by sending a malicious link to a user and enticing the user to click it.
253 | 
254 | JSX takes care of XSS.
255 | 
256 | *Interview Q: Component Composition:
257 | A: Writing/ Passing component inside component.
258 | 
259 | Home Work:
260 | 1. Read about React-key Reconciliation from React Docs.
261 | 2. Do Whatever Akshay did in the Session.
262 | 
263 | *
264 | 
265 | Hope it was Helpful ??
266 | 
267 | 
268 | 
269 | 
270 | 
271 | 
272 | 
273 | 


--------------------------------------------------------------------------------
/Notes/Assignment5 + notes.txt:
--------------------------------------------------------------------------------
 1 | 				   MY	NOTES
 2 | 
 3 | - JSX code can only have one parent so to wrap our all components, we use React.Fragment.
 4 | <React.Fragment>
 5 | 	<Header/>
 6 | 	<Body/>
 7 | 	<Footer/>
 8 | </React.Fragment>
 9 | 
10 | To make it more cleaner we can write only empty tags also.
11 | <>
12 | 	<Header/>
13 | 	<Body/>
14 | 	<Footer/>
15 | </>
16 | 
17 | - When we modify our whole UI according to different situations dynamically it is called Config driven UI.
18 | 
19 | 
20 | 
21 | 					                  ---------------------ASSIGNMENT--------------------
22 | 
23 | Ques1:  Is JSX mandatory for React?
24 | Ans: JSX is not mandatory but it's the preferred way to React code, it provides an HTML like syntax to write Javascript which makes it easier to write and understand. On the other hand we can write plain Javascript then we've to generate those HTML using JS which is quite complex and error prone.
25 | 
26 | Ques2: Is ES6 mandatory for React?
27 | Ans: No, ES6 (ECMA Script 2015) birngs so many new features to JS like classes, template literals, arrow functions, destructuring and modules. Using it in react makes your code more concise, easier to read and maintain than compared to normal(in case that code can be written without ES6). 
28 | Many important concepets of React like useState rely on ES6 itself.
29 | 
30 | Ques3: {TitleComponent} vs {<TitleComponent/>} vs {<TitleComponent></TitleComponent>} in JSX?
31 | Ans: All 3 are different ways to render a React component depending on the user preference and personal needs.
32 | {TitleComponent}: Calling the component as react variable.
33 | {<TitleComponent/>}: Calling in a self closing tag like html <img/> used when no props are passed.
34 | {<TitleComponent><TitleComponent/>}: Render using an opening and a closing tag, we can easily pass props, include some child components also.
35 | 
36 | Ques4: How can I write comments in JSX?
37 | Ans: {/* This is a comment */}
38 | 
39 | 
40 | Ques5: What is <React.Fragment></React.Fragment> and <></> ?
41 | Ans: In JSX, any component can return only one block of code, so we need to wrap our code in a parent element.
42 | <div>
43 | 	<img/>
44 | 	<img/>
45 | <div/>
46 | But using the div tag to wrap our code, creates an actual div in our DOM, which is of no use. So, in React we use React.Fragment tag to wrap which makes no extra element in DOM.
47 | Since React 16, we can use it's shorthand version <></> to do the same.
48 | 
49 | Ques6: What is Virtual DOM?
50 | Ans: DOM: Document Object model is a hierarchical representation of HTML elements on a web page.
51 | When something changes in our code, DOM is updated to reflect it on web page, updating DOM directly is explensive and slow hence React uses the concept of Virtual DOM, which a virtual lightweight representation of actual DOM. When we change something:
52 | React creates a new VDOM,
53 | Compares VDOM to old VDOM,
54 | Finds Changes, updates only the changed element in DOM. This process is called Reconciliation and done using Diffing algorithm. React fiber is new reconcilliation engine in React 16.
55 | 
56 | 
57 | Ques7: What is Reconciliation in React?
58 | Ans: When we update a state or props, React
59 | - Create updates the virtual DOM,
60 | - Compares new and old VDOM,
61 | - Finds the changes,
62 | - Updates the DOM,
63 | this process is Reconcilliation done using a Difing Algo.
64 | Few ways to improve Reconcilliation,
65 | - Provide Keys to elements, so when a similar kind of new element comes, it doesn't confuse and differentiates both.
66 | - ShouldComponentUpdate - A lifecycle method provided to you, you can tell which component would be re-rendered and which not.
67 | 
68 | 
69 | Ques8: What is React Fiber?
70 | Ans: Reimplementation of reconciliation algortihm, introduced in React 16, supports Asynchronous rendering, incremental updates, it's a unit of work. Earlier reconci. algo was using recursive approach, which could block the main thread especially in complex codes. It makes reconci. more efficient and fast.
71 | Async Rendering: When a task is being executed, React can stop this and start executing some other component complete that and come back and resume it.
72 | Incremental Updates: Update only the changed part of DOM tree instead of rerendering the whole tree.
73 | 
74 | 
75 | Ques9: Why we need keys in React? When do we need keys in React?
76 | Ans: Keys are used to give a unique identity to component childs, when react re-renders the component, it needs to know which element got changes/deleted/added. Using keys makes it easier to identify that. If a key is already seen, it doesn't re renders that, it a new key is found, it adds it to DOM to be re rendered. When keys match, attributes/properties of element are compared.
77 | Keys must be unique among it's siblings not the whole tree.
78 | 
79 | Ques10: Can we use index as keys in React?
80 | Ans: Technically Yes but not recommended, using index of an array element as keys can lead to various problems if the array values change.
81 | 
82 | Ques11: What is props in React? Ways to paas props?
83 | Ans: Props (properties) are inputs to a component which it takes from it's parent component. It allows to customize it's behaviour and appearance.
84 | 
85 | Ques12: What is a Config Driven UI ?
86 | Ans: Enables developers to create and manage UI using congiguration data instead of hardcoding that.
87 | Benefits: 
88 | - Flexibility: As configuration data is separated from codebase, we can easily modify it without touching code base.
89 | - Consistency: UI components can be reused throughout the application.
90 | 


--------------------------------------------------------------------------------
/Notes/Assignment6 + notes.txt:
--------------------------------------------------------------------------------
 1 | 										NOTES
 2 | 
 3 | Reading List{
 4 | 	- React File Structure
 5 | 	-
 6 | }
 7 | 
 8 | - Ways to export a component:
 9 | 	- Named Export: add export keyword in front of component definition, import will -> import {Name} from "file path"
10 | 	- Default Export: at the end of compo file: export default name: import -> import Name from "file path" (only one compo can be exported by defualt)
11 | 	- If we have exported multiple compos from a file, we can import them like: import * as XYZ from "file path" and later use it as: XYZ.Name.
12 | 
13 | 
14 | ---------------------------------------------------------	ASSIGNMENT --------------------------------------
15 | 
16 | Ques1: What is the difference between Named Export, Default export and * as export?
17 | Ans: Answered in Notes above.
18 | 
19 | Ques2: What is the importance of config.js file?
20 | Ans: Few reasons for it's importance.
21 | -> Centralized Configuration: It stores all the configuration data at one place which makes it easy to access and modify them when needed.
22 | -> Separation of Concerns: Separating config data from the code makes it easier to maintain the code, developers can fully focus on building the product by using already available data instead of hard coding them.
23 | -> Security: Adding the API keys and other sensitive information in config file helps in protecting them from being exposed in code base.
24 | 
25 | Ques3: What are React Hooks?
26 | Ans: Are functions, introduced in react 16.8, allows us to add state and lifecycle methods to functional components, earlier these were available only for class components.
27 | Popular hooks:
28 | -> useState: Allows functional component to use state, takes an inital value and returns an array of current value and a function to update the value.
29 | -> useEffect: Allows functional component to use lifecycle methods such as componentDidMount, componentDidUpdate. takes a function as a parameter and executes it after every render.
30 | -> useContext: helps to consume context element that were defined by the parent element using React.useContext API.
31 | -> useReducer
32 | -> useCallback.
33 | 
34 | 
35 | Ques4: Why do we need a useState Hook?
36 | Ans: Allows functional components to use state, earlier they were state less. Why?
37 | 1. Simplicity: When used with functional compo, makes it easier to understand and clear.
38 | 2. Performance: Reduces un-necessary re renders of compo.
39 | 


--------------------------------------------------------------------------------
/Notes/Assignment8.txt:
--------------------------------------------------------------------------------
 1 | 									EXPLORING THE WORLD
 2 | 
 3 | Ques1: What are Microservices?
 4 | Ans: Microservices is a Software Architecture that structures an application as a combination of small, independent services that communicate with other through APIs. Promotes Agility, Scalability and Resilience so each service can be build, updated and deployed without affecting the rest of the system.
 5 | 
 6 | 
 7 | Ques2: What is a Monolith Architecture?
 8 | Ans: Monolith architecuture is a traditional software design approach, which combines the whole software into a single unit, Each and every service like: User Interface, Business logic, frontend, backend, database, APIs all are processed into a single container.
 9 | Any small change in any service leads to the whole software to be rebuilt, tested and deployed. Still widely used in small scale companies where Microservices isn't much evident.
10 | 
11 | 
12 | Ques3: What is the difference between Monolith and Microservice?
13 | Ans: Main different points:
14 | (i) Scalability: Monolithic Achitectures can't be scaled very much as a small change in any particular service leads to the whole application rebuilt, tested and redeployed. Where as in Microservice, all the services are independent of each other so changing anyone doesn't affect the rest of the system so scaling in easier.
15 | 
16 | (ii) Resilience: In Monolithic Architecture, if one service fails, the application may go down but same in not to be necessarily true in case of Microservices as each service is independent of other.
17 | 
18 | (iii)Agility: Monolithic can be too hard to modify and update as the size of application grows whereas Microservices are easier and agile to change.
19 | 
20 | 
21 | Ques4: Need of useEffect hook?
22 | Ans: Used to perform side effects, which affects the world outside the component. e.g. fetching the data from and API, updating the browser's title(a/c to the component name/current page openend), websocket.
23 | It takes two arguments: callback function with side effects, which tell what to do and an array of depenedencies, when changed, callback is called.
24 | 
25 | 
26 | Ques5: What is Optional Chaining?
27 | Ans: It's the ability to check whether a property of a JS object exists before going to access that. It saves us from getting a type error. operator => '?.'
28 | 
29 | 
30 | Ques6: What is Shimmer UI?
31 | Ans: When the website is loading, it's used to provide visual feedback to the users. It's a technique used to simulate the loading of the content by showing placeholders and animations which mimics the actual content to be loaded.
32 | 
33 | 
34 | Ques7: Conditional Rendering?
35 | Ans: Technique that allows us to render different content/component based on certain conditions. Commonly used in showing/hiding a data based on user interactions.
36 | 
37 | Ex: function Greetings(props){
38 | 	const isLoggedin = props.isLoggedIn;
39 | 	if(isLoggedin) return <h1>Welcome back<h1/>
40 | 	else	return <h1>Login pls<h1/>
41 |     }
42 | 
43 | ReactDOM.render(
44 | 	<Greetings "true"/>, 
45 | 	document.getElementById('root')
46 | );
47 | 
48 | 
49 | Ques8: What is CORS?
50 | Ans: Cross Origin Resource Sharing, is security feature implemented by web browsers that restricts web browsers to make request to a different domain than the one that served the page. It's a mechanism that allows servers to specify who can access their resources. Without CORS web pages would be able to access any resource on any domain which is risky.
51 | 
52 | Ques9: Async and await?
53 | Ans: These are the keywords used for asynchronous programming. This is useful when performing a time consuming operations like reading and writing files which takes a long time, it would be inefficient to bolck the program's execution until the operation completes.
54 | Async & await work together, async defines a function that can be executed asynchronously, await keyword is to pause the function execution until the async operation completes. Allowing other tasks to executed in meantime.
55 | 
56 | Ques10: What is the use of `const json = await data.json();
57 | Ans: Used to extract and parse JSON data from response object returned by an API call.


--------------------------------------------------------------------------------
/Notes/Assignment9 + notes.txt:
--------------------------------------------------------------------------------
 1 | 								NOTES
 2 | 
 3 | -> useEffect takes a callback function and a dependency array, the callback function:
 4 | 	-> will be called when the elements of array changes.
 5 | 	-> if array is empty: will be called once after inital render.
 6 | 	-> if no array is passed, will render after each render.
 7 | 
 8 | -> Don't create any component inside another component(before return point), rendering will be affected. Child will be created many times on every render.
 9 | -> Don't create state variables inside ifelse or loop. Always keep inside a component.
10 | 
11 | Creating Route:
12 | -> instal react-route-dom
13 | -> in app.js, import createBrowserRouter.
14 | -> Create appRouter,which defines the different paths to app and pages where to go.
15 | -> appRouter must be below the rendering of appLayout, the home page.
16 | -> Now, we've to provide this appRouter to our app, import RouterProvider.
17 | 
18 | Two types of routing: Client side(data stays in client side, Single page apps) & server side(data comes from server whole page reloads, old method).
19 | -> use link component of react-router-dom, no reloads, single page application in moving to different pages.
20 | 
21 | 
22 | NESTED ROUTING:
23 | -> We want to keep our header and footer to be present always, so other pages will be rendered between them. Hence we make them child of appComponent by defining them in route config.
24 | -> Now we use something called, 'outlet' from react-router-dom, render it where we want other pages to be, it'll put them at it's place a/c to route.
25 | 
26 | 
27 | Dynamic Segments: Routing
28 | 
29 | -> Used for random routes when they can be variable.
30 | 
31 | 
32 | 	------------------------------------------  ASSIGNMENT ----------------------------------------------
33 | 
34 | Ques1: What are various ways to add images into our App? Explain with code examples?
35 | Ans:	-> Use url in img tag
36 | 	-> Store in your app: -> directly put the path in src or import the path then use as variable.
37 | 
38 | 
39 | Ques2: What would happen if we do console.log(useState())?
40 | Ans: useState returns an array of a variable with it's inital value and a function to modify it.
41 | 
42 | 
43 | Ques3: How will useEffect behave if we don't add a dependency array ?
44 | Ans: Dependency array defines the values on which useEffect callback function depends, it there no array, it'll be free and will be called after each render. So, empty array and no array are two different things here.
45 | 
46 | 
47 | Ques4: SPA
48 | Ans: Single Page application is a web application that loads a single HTML page and dynamically updates the elements without requireing the full page relaod.
49 | 
50 | Ques5: Client Side & Server Side Routing?
51 | Ans: 	Client: Routing is handled totally on client side, fast, SPA built on it.
52 | 	Server: Routing is handled on server side code, on demand, server responds to a html page.
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Namaste-React
 2 | This repository contains all the learnings and notes I created while learning React JS from #Namaste-React Course, food studio is a project, built while learning the concepts.
 3 | 
 4 | ## Food-Studio
 5 | Order food from the confort of your home, we show the latest restaurants available in your city, with all the details. 
 6 | Pick a dish, add to cart, place order, get delivered.
 7 | 
 8 | ## Tech - Stack
 9 | 1. Frontend Library: React JS
10 | 2. Styling: Tailwind CSS
11 | 3. Database: Firebase
12 | 4. Bundler: Parcel
13 | 5. Authentication: Firebase-Auth
14 | 6. State Management: Redux Toolkit
15 | 
16 | ## Working of project
17 | 1. We fetch the restaurants of your city from Swiggy API, getting the live data.
18 | 2. Display them with Area name, Cuisines Category and Ratings.
19 | 3. Search Restaurants by Name.
20 | 4. For any restaurant, you can checkout all the different type of dishes available with details and prices per quantity.
21 | 5. Add to cart
22 | 6. Authenticate yourself
23 | 7. Place Order.
24 | 
25 | ## Improvements to make
26 | 1. Not responsive for Mobile phones
27 | 2. Cart data is not stored anywhere, it should be in local storage for not logged in users to avoid losing on refresh page.
28 | 3. While Signing up, user name is not displayed in the profile point instantly, needs a refresh. It doesn't happen in logging in process.
29 | 4. Improve the design, take user address and payment details.
30 | 5. Add feature to search different cities, currently working for Prayagraj only.
31 | 
32 | ## How to run on your local
33 | 1. Clone the repository 
34 | 2. Run ```npm init```
35 | 3. Run ```npm start```.
36 | 4. Make sure you've allow CORS extension installed in your browser.
37 | 
38 | Drop a 💫 if you liked it.
39 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Food Studio</title>
 8 |     
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
10 |     
11 |     
12 |     <link rel="stylesheet" href="style.css" />
13 |   </head>
14 |   <body>
15 |     <div id="root"></div>
16 | 
17 |     <!-- Attach our JavaScript file -->
18 |     <script type="module" src="src/script.js"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "namaste-react",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the start of Namaste React",
 5 |   "scripts": {
 6 |     "start": "parcel index.html",
 7 |     "build": "parcel build index.html",
 8 |     "test": "jest"
 9 |   },
10 |   "author": "Ajeet Patel",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "@babel/core": "^7.21.3",
14 |     "babel-plugin-transform-remove-console": "^6.9.4",
15 |     "parcel": "^2.8.3",
16 |     "postcss": "^8.4.21",
17 |     "process": "^0.11.10",
18 |     "tailwindcss": "^3.3.1"
19 |   },
20 |   "dependencies": {
21 |     "@reduxjs/toolkit": "^1.9.5",
22 |     "firebase": "^9.21.0",
23 |     "react": "^18.2.0",
24 |     "react-dom": "^18.2.0",
25 |     "react-loading-skeleton": "^3.2.0",
26 |     "react-redux": "^8.0.5",
27 |     "react-router-dom": "^6.10.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/About.js:
--------------------------------------------------------------------------------
 1 | import { useLocation } from "react-router-dom";
 2 | import { useContext, useEffect } from "react";
 3 | import PathContext from "../utils/PathContext";
 4 | 
 5 | const About = () => {
 6 |   const {setCurrentPath} = useContext(PathContext);
 7 |   const {pathname} = useLocation();
 8 | 
 9 |   useEffect(() => {
10 |     setCurrentPath(pathname);
11 |   }, [])
12 |   
13 |   return (
14 |     <>
15 |       <div className="p-20 bg-orange-300 text-2xl font-Arvo">
16 |         ″Our mission is to elevate the quality of life for the urban consumer
17 |         with unparalleled convenience. Convenience is what makes us tick. It's
18 |         what makes us get out of bed and say, "Let's do this."
19 |       </div>
20 | 
21 |       <img src="https://careers.swiggy.com/assets/img/Swiggy-Journey.jpg" alt="" />
22 | 
23 |       <h1 className="text-center my-9 text-5xl">What’s In Store For The Future?</h1>
24 | 
25 |       <h4 className="text-center text-xl mx-20 my-10">Food Studio has grand plans to be India’s most loved hyperlocal player. It aims to be the most accessible platform on the network - reimagining the meaning of convenience in the country through a variety of service offerings.</h4>
26 | 
27 |       <div className="flex justify-between m-10">
28 |           <h2 className="text-6xl w-3/4">Changing <b>the Game</b></h2>
29 |           <div className="flex">
30 |               <span className="border rounded border-orange-600 text-center text-xl mx-2 px-1">
31 |                   <p className="my-6"><b>150000+</b> Restaurant Partners Countrywide</p></span>
32 |               <span className="border rounded border-orange-600 text-center text-xl mx-2 px-1">
33 |                   <p className="my-6"><b>260000+</b> Delivery Executives</p></span>
34 |               <span className="border rounded border-orange-600 text-center text-xl mx-2 px-1">
35 |                   <p className="my-6"><b>5000+</b> Employees across the Country</p></span>
36 |               <span className="border rounded border-orange-600 text-center text-xl mx-2 px-1">
37 |                   <p className="my-6"><b>500+</b> Cites PAN India</p></span>
38 |               
39 |           </div>
40 |       </div>
41 |     </>
42 |   );
43 | };
44 | 
45 | export default About;
46 | 


--------------------------------------------------------------------------------
/src/components/Body.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useContext } from "react";
 2 | import { useLocation } from "react-router-dom";
 3 | import useOnlineStatus from "../utils/useOnlineStatus";
 4 | import { filterRestaurants } from "../utils/utils";
 5 | import { restaurants } from "./Config";
 6 | import RestaurantCard from "./RestaurantCard";
 7 | import ShimmerUI from "./ShimmerUI";
 8 | import SearchTextContext from "../utils/SearchTextContext";
 9 | import PathContext from "../utils/PathContext";
10 | 
11 | const Body = () => {
12 |   const [filteredRestaurants, setFilteredRestaurants] = useState([]);
13 |   const { searchTxt, setsearchTxt, searchTxtFound } =
14 |     useContext(SearchTextContext);
15 | 
16 |   const { pathname } = useLocation();
17 |   const { setCurrentPath } = useContext(PathContext);
18 | 
19 |   useEffect(() => {
20 |     setCurrentPath(pathname);
21 |     setsearchTxt("");
22 |   }, []);
23 | 
24 |   // searching
25 |   useEffect(() => {
26 |     const result = filterRestaurants(searchTxt, restaurants);
27 |     if (result.length === 0) {
28 |       alert("No Restaurant Found");
29 |     } else {
30 |       setFilteredRestaurants(result);
31 |     }
32 |   }, [searchTxtFound]);
33 | 
34 |   const isOnline = useOnlineStatus();
35 |   if (!isOnline) {
36 |     alert("You're offline, Please check your internet connection");
37 |     return <ShimmerUI />;
38 |   }
39 | 
40 |   return restaurants.length === 0 || filteredRestaurants.length === 0 ? (
41 |     <ShimmerUI />
42 |   ) : (
43 |     <>
44 |       <div className="flex justify-around flex-wrap my-6 mx-3 min-h-screen">
45 |         {filteredRestaurants.map((restaurant) => {
46 |           return <RestaurantCard {...restaurant?.info} key={restaurant?.id} />;
47 |         })}
48 |       </div>
49 |     </>
50 |   );
51 | };
52 | 
53 | export default Body;
54 | 


--------------------------------------------------------------------------------
/src/components/Cart.js:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useContext } from "react";
  2 | import { useDispatch, useSelector, useStore } from "react-redux";
  3 | import { Link, useLocation } from "react-router-dom";
  4 | import { addItem, clearCart, removeItem } from "../utils/cartSlice";
  5 | import { IMG_CDN_URL } from "./Config";
  6 | import { auth, database } from "../firebase";
  7 | import OrderHistory from "./OrderHistory";
  8 | import PathContext from "../utils/PathContext";
  9 | 
 10 | const Cart = () => {
 11 |   //------------------------------------------- Initialisation area ---------------------------------------
 12 |   // State variables
 13 |   const [totalBill, setTotalBill] = useState(0);
 14 |   const [currentUser, setCurrentUser] = useState(null);
 15 | 
 16 |   // Subscribe to items array of cart slice in the store.
 17 |   const cartItems = useSelector((store) => store.cart.cartItems);
 18 | 
 19 |   //path will take you to respective restaurnat menu.
 20 |   const path = "/restaurant/" + cartItems.restaurant_id;
 21 | 
 22 |   const {setCurrentPath} = useContext(PathContext);
 23 |   const {pathname} = useLocation();
 24 | 
 25 |   //--------------------------------------- useEffects --------------------------------------------------
 26 |   useEffect(()=> {
 27 |     setCurrentPath(pathname);
 28 |   }, [])
 29 |   
 30 |   useEffect(() => {
 31 |     let total = 0;
 32 |     cartItems.items.forEach((cur) => {
 33 |       if (cur.price != "NaN") total += (cur.price / 100) * cur.quantity;
 34 |     });
 35 |     total.toFixed(2);
 36 |     setTotalBill(total);
 37 |   }, []);
 38 | 
 39 |   useEffect(() => {
 40 |     const unsubscribe = auth.onAuthStateChanged((user) => {
 41 |       if (user) {
 42 |         setCurrentUser(user);
 43 |       } else {
 44 |         setCurrentUser(null);
 45 |       }
 46 |     });
 47 | 
 48 |     return () => {
 49 |       unsubscribe();
 50 |     };
 51 |   }, []);
 52 | 
 53 |   //--------------------------------------- Cart modifications ------------------------------------------
 54 | 
 55 |   const dispatch = useDispatch();
 56 |   const store = useStore();
 57 | 
 58 |   // Add menu in cart
 59 |   const addMenu = (curItem) => {
 60 |     dispatch(addItem(curItem));
 61 |     setTotalBill(totalBill + curItem.price / 100);
 62 |   };
 63 | 
 64 |   //remove menu
 65 |   const removeMenu = (curItem) => {
 66 |     dispatch(removeItem(curItem));
 67 |     const bill = Math.max(0, totalBill - curItem.price / 100);
 68 |     setTotalBill(bill);
 69 |   };
 70 | 
 71 |   //---------------------------------------- Checkout -> Push data to Firebase RTDB -----------------------
 72 | 
 73 |   const handleClick = () => {
 74 |     //check if user is logged in.
 75 |     if (!currentUser) {
 76 |       alert("Please Login/Sign up first to place an order");
 77 |       return;
 78 |     }
 79 | 
 80 |     //fetch cart items from redux store.
 81 |     const cartState = store.getState().cart;
 82 |     const cartItems = cartState.cartItems;
 83 | 
 84 |     //user details
 85 |     const uid = currentUser.uid;
 86 |     const databaseRef = database.ref("users/" + uid);
 87 |     const newChildRef = databaseRef.push();
 88 |     newChildRef.set(cartItems);
 89 | 
 90 |     alert("Order Successful");
 91 |     dispatch(clearCart());
 92 |   };
 93 | 
 94 |   //---------------------------------------- Rendering area -----------------------------------------------
 95 | 
 96 |   return (
 97 |     <>
 98 |       <div className="flex bg-slate-200 px-4 min-h-screen">
 99 |         {/* account details side */}
100 |         <div className="w-[70%] m-4 p-4">
101 |           {/* Account */}
102 |           <div className="py-5 px-10 bg-white">
103 |             <h3 className="text-lg font-bold font-Arvo">Account</h3>
104 | 
105 |             {currentUser ? (
106 |               <div className="my-1">
107 |                 {/* personal information */}
108 |                 <div className="my-1">
109 |                   <h2 className="text-md font-semibold font-Arvo">
110 |                     Personal Information
111 |                   </h2>
112 |                   <h2 className="text-md font-Arvo m-1">
113 |                     Name: {currentUser.displayName}
114 |                   </h2>
115 |                   <h3 className="text-md font-Arvo m-1">
116 |                     Email: {currentUser.email}
117 |                   </h3>
118 |                 </div>
119 |                 {/* Order History */}
120 |                 <div className="my-1">
121 |                   <h2 className="text-md font-semibold font-Arvo">
122 |                     Order History
123 |                   </h2>
124 |                   <OrderHistory currentUser={currentUser} />
125 |                 </div>
126 |               </div>
127 |             ) : (
128 |               <div>
129 |                 <h4 className="font-Arvo text-slate-400 mb-4">
130 |                   To place your order now, log in to your existing account or
131 |                   sign up.
132 |                 </h4>
133 |                 <Link to="/login">
134 |                   <button className="border border-green-700 rounded text-green-700 font-Arvo mx-2 py-1 px-3 text-sm">
135 |                     Have an account? <br />
136 |                     <span className="text-md ">LOG IN</span>
137 |                   </button>
138 |                 </Link>
139 |                 <Link to="/signup">
140 |                   <button className="bg-green-700 rounded text-white font-Arvo mx-2 py-1 px-3 text-sm">
141 |                     New to Food Studio? <br />
142 |                     <span className="text-md"> SIGN UP</span>
143 |                   </button>
144 |                 </Link>
145 |               </div>
146 |             )}
147 |           </div>
148 |           {/* Delivery Address */}
149 |           <div className="py-5 px-10 bg-white my-4">
150 |             <h3 className=" font-Arvo font-bold text-lg">Delivery Address</h3>
151 |           </div>
152 |           {/* payment */}
153 |           <div className="py-5 px-10 bg-white my-4">
154 |             <h3 className="font-Arvo font-bold text-lg">Payment</h3>
155 |           </div>
156 |         </div>
157 | 
158 |         {/* Cart details side */}
159 |         {cartItems.items.length > 0 && (
160 |           <div className="bg-white w-[30%] h-[70vh] p-4 my-8 mx-4 ">
161 |             {/* restaurant details */}
162 |             <div className="flex">
163 |               <div className="w-16 h-12 mx-2 overflow-hidden">
164 |                 <Link to={path}>
165 |                   <img
166 |                     className="min-h-full max-h-full object-fill rounded"
167 |                     src={IMG_CDN_URL + cartItems.logo}
168 |                     alt=""
169 |                   />
170 |                 </Link>
171 |               </div>
172 |               <div className="mx-2">
173 |                 <h3 className="text-lg font-Arvo">
174 |                   {cartItems.restaurantName}
175 |                 </h3>
176 |                 <h4 className="text-sm">{cartItems.areaName}</h4>
177 |               </div>
178 |             </div>
179 | 
180 |             {/* menu items list */}
181 |             {/* Title, buttons to change quantity, price per piece */}
182 |             <div className="h-[35vh] overflow-y-auto mt-4">
183 |               {cartItems.items.map((curItem) => {
184 |                 return (
185 |                   <div className="my-4 flex justify-between items-center">
186 |                     <h3 className="w-[40%] font-Arvo">{curItem.name}</h3>
187 |                     <div className="w-[35%] flex justify-between items-center border border-gray-400 px-2 mx-2">
188 |                       <button onClick={() => removeMenu(curItem)}>➖</button>
189 | 
190 |                       <h4 className="mx-1 font-Arvo">{curItem.quantity}</h4>
191 | 
192 |                       <button onClick={() => addMenu(curItem)}>➕</button>
193 |                     </div>
194 |                     <p className="w-[25%] text-end font-Arvo">
195 |                       {(curItem.price / 100) * curItem.quantity}Rs
196 |                     </p>
197 |                   </div>
198 |                 );
199 |               })}
200 |             </div>
201 |             {/* Total Charge */}
202 | 
203 |             <div className="mt-2 p-2 flex justify-between ">
204 |               <h3 className="font-bold">Total Amount to Pay:</h3>
205 |               <h3 className="font-semibold">{totalBill}Rs</h3>
206 |             </div>
207 | 
208 |             <div className="flex justify-between my-1">
209 |               <button
210 |                 className="bg-green-600 text-white font-Arvo p-1 rounded"
211 |                 onClick={() => {
212 |                   dispatch(clearCart());
213 |                 }}
214 |               >
215 |                 Clear Cart
216 |               </button>
217 |               <button
218 |                 className="bg-green-600 text-white font-Arvo p-1 rounded"
219 |                 onClick={handleClick}
220 |               >
221 |                 CheckOut
222 |               </button>
223 |             </div>
224 |           </div>
225 |         )}
226 |       </div>
227 |     </>
228 |   );
229 | };
230 | 
231 | export default Cart;
232 | 


--------------------------------------------------------------------------------
/src/components/Config.js:
--------------------------------------------------------------------------------
  1 | //Store all constants data.
  2 | export const FOOD_STDUIO_LOGO =
  3 |   "https://corsproxy.io/?https://food-studio.co.za/wp-content/uploads/2019/08/Food-Studio-Logo.png";
  4 | 
  5 | export const IMG_CDN_URL =
  6 |   "https://corsproxy.io/?https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/";
  7 | 
  8 |   //unused
  9 | export const GET_RESTAURANT_URL =
 10 |   "https://corsproxy.io/?https://www.swiggy.com/dapi/restaurants/list/v5?lat=25.4358011&lng=81.846311&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING";
 11 | 
 12 | export const FETCH_MENU_URL_FIRST_PART =
 13 |   "https://corsproxy.io/?https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=25.4358011&lng=81.846311&restaurantId=";
 14 | 
 15 | export const FETCH_MENU_URL_SECOND_PART = "&submitAction=ENTER";
 16 | 
 17 | // whole array
 18 | 
 19 | export const restaurants = [
 20 |   {
 21 |     info: {
 22 |       id: "224920",
 23 |       name: "Chandralok Kachouri",
 24 |       cloudinaryImageId: "qbo11lh7l43xpkd7wqts",
 25 |       locality: "Kp Kakkar Road",
 26 |       areaName: "Rambagh",
 27 |       costForTwo: "₹150 for two",
 28 |       cuisines: ["Snacks", "South Indian", "Chinese", "Fast Food", "Pizzas"],
 29 |       avgRating: 4,
 30 |       veg: true,
 31 |       feeDetails: {
 32 |         restaurantId: "224920",
 33 |         fees: [
 34 |           { name: "BASE_DISTANCE", fee: 1900 },
 35 |           { name: "BASE_TIME" },
 36 |           { name: "ANCILLARY_SURGE_FEE" },
 37 |         ],
 38 |         totalFee: 1900,
 39 |       },
 40 |       parentId: "57887",
 41 |       avgRatingString: "4.0",
 42 |       totalRatingsString: "5K+",
 43 |     },
 44 |   },
 45 |   {
 46 |     info: {
 47 |       id: "147619",
 48 |       name: "Jai Shree Shankar Punjabi Dhaba",
 49 |       cloudinaryImageId: "slfbprrckr7jk1zm58rd",
 50 |       locality: "Mahatma Gandhi Marg",
 51 |       areaName: "Civil Lines",
 52 |       costForTwo: "₹250 for two",
 53 |       cuisines: [
 54 |         "Indian",
 55 |         "North Indian",
 56 |         "Chinese",
 57 |         "South Indian",
 58 |         "Snacks",
 59 |         "Punjabi",
 60 |         "Beverages",
 61 |       ],
 62 |       avgRating: 3.6,
 63 |       veg: true,
 64 |       feeDetails: {
 65 |         restaurantId: "147619",
 66 |         fees: [
 67 |           { name: "BASE_DISTANCE", fee: 2500 },
 68 |           { name: "BASE_TIME" },
 69 |           { name: "ANCILLARY_SURGE_FEE" },
 70 |         ],
 71 |         totalFee: 2500,
 72 |       },
 73 |       parentId: "108723",
 74 |       avgRatingString: "3.6",
 75 |       totalRatingsString: "10K+",
 76 |     },
 77 |   },
 78 |   {
 79 |     info: {
 80 |       id: "127614",
 81 |       name: "Statesman House",
 82 |       cloudinaryImageId: "98588793791dd32f2daa7e3595fcb69c",
 83 |       locality: "Hewett Road",
 84 |       areaName: "Rambagh",
 85 |       costForTwo: "₹300 for two",
 86 |       cuisines: ["North Indian", "Chinese"],
 87 |       avgRating: 3.8,
 88 |       feeDetails: {
 89 |         restaurantId: "127614",
 90 |         fees: [
 91 |           { name: "BASE_DISTANCE", fee: 1900 },
 92 |           { name: "BASE_TIME" },
 93 |           { name: "ANCILLARY_SURGE_FEE" },
 94 |         ],
 95 |         totalFee: 1900,
 96 |       },
 97 |       parentId: "195577",
 98 |       avgRatingString: "3.8",
 99 |       totalRatingsString: "5K+",
100 |     },
101 |   },
102 |   {
103 |     info: {
104 |       id: "380152",
105 |       name: "The Quick Curry",
106 |       cloudinaryImageId: "aq5uredkyfrmct6a99cv",
107 |       locality: "Vivekanand Marg",
108 |       areaName: "Leader Road",
109 |       costForTwo: "₹250 for two",
110 |       cuisines: ["Thalis", "North Indian"],
111 |       avgRating: 3.8,
112 |       veg: true,
113 |       feeDetails: {
114 |         restaurantId: "380152",
115 |         fees: [
116 |           { name: "BASE_DISTANCE", fee: 1900 },
117 |           { name: "BASE_TIME" },
118 |           { name: "ANCILLARY_SURGE_FEE" },
119 |         ],
120 |         totalFee: 1900,
121 |       },
122 |       parentId: "212902",
123 |       avgRatingString: "3.8",
124 |       totalRatingsString: "1K+",
125 |     },
126 |   },
127 |   {
128 |     info: {
129 |       id: "666981",
130 |       name: "Fire House Pizza",
131 |       cloudinaryImageId: "906c0affa7d8ff78a3e4db88b4433cde",
132 |       locality: "Neta nagar",
133 |       areaName: "Civil Lines",
134 |       costForTwo: "₹600 for two",
135 |       cuisines: ["Pizzas"],
136 |       avgRating: 3.6,
137 |       veg: true,
138 |       feeDetails: {
139 |         restaurantId: "666981",
140 |         fees: [
141 |           { name: "BASE_DISTANCE", fee: 1900 },
142 |           { name: "BASE_TIME" },
143 |           { name: "ANCILLARY_SURGE_FEE" },
144 |         ],
145 |         totalFee: 1900,
146 |       },
147 |       parentId: "79622",
148 |       avgRatingString: "3.6",
149 |       totalRatingsString: "10+",
150 |     },
151 |   },
152 |   {
153 |     info: {
154 |       id: "481918",
155 |       name: "Al-Baik Zone",
156 |       cloudinaryImageId: "mra2lrsmgduhwswzzee0",
157 |       locality: "Nakhas Kona",
158 |       areaName: "Leader Road",
159 |       costForTwo: "₹200 for two",
160 |       cuisines: ["Fast Food", "Arabian", "Biryani"],
161 |       avgRating: 4,
162 |       feeDetails: {
163 |         restaurantId: "481918",
164 |         fees: [
165 |           { name: "BASE_DISTANCE", fee: 1900 },
166 |           { name: "BASE_TIME" },
167 |           { name: "ANCILLARY_SURGE_FEE" },
168 |         ],
169 |         totalFee: 1900,
170 |       },
171 |       parentId: "8049",
172 |       avgRatingString: "4.0",
173 |       totalRatingsString: "100+",
174 |     },
175 |   },
176 |   {
177 |     info: {
178 |       id: "80312",
179 |       name: "Raju Kitchen Restaurant",
180 |       cloudinaryImageId: "u8m5sxxbwuwfjolzdf69",
181 |       locality: "Tandon Road",
182 |       areaName: "Civil Lines",
183 |       costForTwo: "₹200 for two",
184 |       cuisines: [
185 |         "Indian",
186 |         "Chinese",
187 |         "Mughlai",
188 |         "North Indian",
189 |         "Snacks",
190 |         "Lucknowi",
191 |         "Biryani",
192 |       ],
193 |       avgRating: 3.7,
194 |       feeDetails: {
195 |         restaurantId: "80312",
196 |         fees: [
197 |           { name: "BASE_DISTANCE", fee: 2500 },
198 |           { name: "BASE_TIME" },
199 |           { name: "ANCILLARY_SURGE_FEE" },
200 |         ],
201 |         totalFee: 2500,
202 |       },
203 |       parentId: "165971",
204 |       avgRatingString: "3.7",
205 |       totalRatingsString: "10K+",
206 |     },
207 |   },
208 |   {
209 |     info: {
210 |       id: "404669",
211 |       name: "Momos castle",
212 |       cloudinaryImageId: "lubiprpdt4cgnunga3rr",
213 |       locality: "Sardar Patel Marg",
214 |       areaName: "Civil Lines",
215 |       costForTwo: "₹150 for two",
216 |       cuisines: ["Chinese"],
217 |       avgRating: 4.3,
218 |       feeDetails: {
219 |         restaurantId: "404669",
220 |         fees: [
221 |           { name: "BASE_DISTANCE", fee: 2500 },
222 |           { name: "BASE_TIME" },
223 |           { name: "ANCILLARY_SURGE_FEE" },
224 |         ],
225 |         totalFee: 2500,
226 |       },
227 |       parentId: "250870",
228 |       avgRatingString: "4.3",
229 |       totalRatingsString: "100+",
230 |     },
231 |   },
232 |   {
233 |     info: {
234 |       id: "147244",
235 |       name: "Delight The Pastry Shop",
236 |       cloudinaryImageId: "dlx59kcbntvnlf8igifw",
237 |       locality: "Jahid Complex",
238 |       areaName: "Kareli",
239 |       costForTwo: "₹200 for two",
240 |       cuisines: ["Bakery", "Chinese", "Biryani", "Snacks"],
241 |       avgRating: 4.1,
242 |       feeDetails: {
243 |         restaurantId: "147244",
244 |         fees: [
245 |           { name: "BASE_DISTANCE", fee: 2500 },
246 |           { name: "BASE_TIME" },
247 |           { name: "ANCILLARY_SURGE_FEE" },
248 |         ],
249 |         totalFee: 2500,
250 |       },
251 |       parentId: "70572",
252 |       avgRatingString: "4.1",
253 |       totalRatingsString: "1K+",
254 |     },
255 |   },
256 |   {
257 |     info: {
258 |       id: "80427",
259 |       name: "Jai Shree Shankar Bhojanalaya",
260 |       cloudinaryImageId: "qhdec9rh38ewnb80tkim",
261 |       locality: "Mahatma Gandhi Marg",
262 |       areaName: "Civil Lines",
263 |       costForTwo: "₹250 for two",
264 |       cuisines: [
265 |         "North Indian",
266 |         "Thalis",
267 |         "South Indian",
268 |         "Chinese",
269 |         "Snacks",
270 |         "Indian",
271 |       ],
272 |       avgRating: 3.7,
273 |       veg: true,
274 |       feeDetails: {
275 |         restaurantId: "80427",
276 |         fees: [
277 |           {
278 |             name: "BASE_DISTANCE",
279 |             fee: 1900,
280 |           },
281 |           {
282 |             name: "BASE_TIME",
283 |           },
284 |           {
285 |             name: "ANCILLARY_SURGE_FEE",
286 |           },
287 |         ],
288 |         totalFee: 1900,
289 |       },
290 |       parentId: "108722",
291 |       avgRatingString: "3.7",
292 |       totalRatingsString: "10K+",
293 |     },
294 |   },
295 |   {
296 |     info: {
297 |       id: "80703",
298 |       name: "Aryan Family's Delight",
299 |       cloudinaryImageId: "kb34u4pywk49ksbyn4g5",
300 |       locality: "Sardar Patel Marg",
301 |       areaName: "Civil Lines",
302 |       costForTwo: "₹400 for two",
303 |       cuisines: [
304 |         "North Indian",
305 |         "South Indian",
306 |         "Fast Food",
307 |         "Snacks",
308 |         "Burgers",
309 |         "Chinese",
310 |       ],
311 |       avgRating: 4.2,
312 |       feeDetails: {
313 |         restaurantId: "80703",
314 |         fees: [
315 |           {
316 |             name: "BASE_DISTANCE",
317 |             fee: 2500,
318 |           },
319 |           {
320 |             name: "BASE_TIME",
321 |           },
322 |           {
323 |             name: "ANCILLARY_SURGE_FEE",
324 |           },
325 |         ],
326 |         totalFee: 2500,
327 |       },
328 |       parentId: "6001",
329 |       avgRatingString: "4.2",
330 |       totalRatingsString: "10K+",
331 |     },
332 |   },
333 |   {
334 |     info: {
335 |       id: "87514",
336 |       name: "Haldiram Bhujiawala",
337 |       cloudinaryImageId: "nkd7purcqzconoypeto9",
338 |       locality: "Tashkent Marg",
339 |       areaName: "Civil Lines",
340 |       costForTwo: "₹300 for two",
341 |       cuisines: [
342 |         "Sweets",
343 |         "North Indian",
344 |         "South Indian",
345 |         "Chinese",
346 |         "Desserts",
347 |         "Indian",
348 |         "Fast Food",
349 |       ],
350 |       avgRating: 3.7,
351 |       veg: true,
352 |       feeDetails: {
353 |         restaurantId: "87514",
354 |         fees: [
355 |           {
356 |             name: "BASE_DISTANCE",
357 |             fee: 2500,
358 |           },
359 |           {
360 |             name: "BASE_TIME",
361 |           },
362 |           {
363 |             name: "ANCILLARY_SURGE_FEE",
364 |           },
365 |         ],
366 |         totalFee: 2500,
367 |       },
368 |       parentId: "92848",
369 |       avgRatingString: "3.7",
370 |       totalRatingsString: "10K+",
371 |     },
372 |   },
373 |   {
374 |     info: {
375 |       id: "128962",
376 |       name: "Pizza Club 99",
377 |       cloudinaryImageId: "yxkkxyhgvcb0mkmneoj6",
378 |       locality: "Gulteria",
379 |       areaName: "Dhoomanganj",
380 |       costForTwo: "₹300 for two",
381 |       cuisines: ["Pizzas", "Fast Food", "Beverages"],
382 |       avgRating: 3.7,
383 |       feeDetails: {
384 |         restaurantId: "128962",
385 |         fees: [
386 |           {
387 |             name: "BASE_DISTANCE",
388 |             fee: 4400,
389 |           },
390 |           {
391 |             name: "BASE_TIME",
392 |           },
393 |           {
394 |             name: "ANCILLARY_SURGE_FEE",
395 |           },
396 |         ],
397 |         totalFee: 4400,
398 |       },
399 |       parentId: "13512",
400 |       avgRatingString: "3.7",
401 |       totalRatingsString: "5K+",
402 |     },
403 |   },
404 |   {
405 |     info: {
406 |       id: "80216",
407 |       name: "Hot Stuff",
408 |       cloudinaryImageId: "beeaadg3lqjics4fzuvw",
409 |       locality: "Lal Bhadhur Shastri Marg",
410 |       areaName: "Civil Lines",
411 |       costForTwo: "₹200 for two",
412 |       cuisines: ["North Indian", "Beverages", "Desserts", "Pizzas"],
413 |       avgRating: 3.8,
414 |       feeDetails: {
415 |         restaurantId: "80216",
416 |         fees: [
417 |           {
418 |             name: "BASE_DISTANCE",
419 |             fee: 2500,
420 |           },
421 |           {
422 |             name: "BASE_TIME",
423 |           },
424 |           {
425 |             name: "ANCILLARY_SURGE_FEE",
426 |           },
427 |         ],
428 |         totalFee: 2500,
429 |       },
430 |       parentId: "97558",
431 |       avgRatingString: "3.8",
432 |       totalRatingsString: "1K+",
433 |     },
434 |   },
435 |   {
436 |     info: {
437 |       id: "150376",
438 |       name: "Shri Ram Shakahari Bhojnalaya",
439 |       cloudinaryImageId: "suz4we5x7dgznrquxvu9",
440 |       locality: "Katju Road",
441 |       areaName: "Leader Road",
442 |       costForTwo: "₹200 for two",
443 |       cuisines: ["North Indian"],
444 |       avgRating: 4.1,
445 |       veg: true,
446 |       feeDetails: {
447 |         restaurantId: "150376",
448 |         fees: [
449 |           {
450 |             name: "BASE_DISTANCE",
451 |             fee: 1900,
452 |           },
453 |           {
454 |             name: "BASE_TIME",
455 |           },
456 |           {
457 |             name: "ANCILLARY_SURGE_FEE",
458 |           },
459 |         ],
460 |         totalFee: 1900,
461 |       },
462 |       parentId: "186817",
463 |       avgRatingString: "4.1",
464 |       totalRatingsString: "10K+",
465 |     },
466 |   },
467 |   {
468 |     info: {
469 |       id: "314904",
470 |       name: "Capsicum",
471 |       cloudinaryImageId: "60d52c0fb85ea4f566864b2709538d6f",
472 |       locality: "Mahewa Purab Patti",
473 |       areaName: "Naini",
474 |       costForTwo: "₹200 for two",
475 |       cuisines: ["Chinese", "Pizzas", "Pastas", "Snacks", "Beverages"],
476 |       avgRating: 3.5,
477 |       feeDetails: {
478 |         restaurantId: "314904",
479 |         fees: [
480 |           {
481 |             name: "BASE_DISTANCE",
482 |             fee: 2500,
483 |           },
484 |           {
485 |             name: "BASE_TIME",
486 |           },
487 |           {
488 |             name: "ANCILLARY_SURGE_FEE",
489 |           },
490 |         ],
491 |         totalFee: 2500,
492 |       },
493 |       parentId: "55813",
494 |       avgRatingString: "3.5",
495 |       totalRatingsString: "100+",
496 |     },
497 |   },
498 |   {
499 |     info: {
500 |       id: "380494",
501 |       name: "Chinese Hunger",
502 |       cloudinaryImageId: "h5zwpqi3jquzonhjq8bn",
503 |       locality: "Mahewa Naini",
504 |       areaName: "Naini",
505 |       costForTwo: "₹200 for two",
506 |       cuisines: ["Chinese"],
507 |       avgRating: 4.3,
508 |       feeDetails: {
509 |         restaurantId: "380494",
510 |         fees: [
511 |           {
512 |             name: "BASE_DISTANCE",
513 |             fee: 2500,
514 |           },
515 |           {
516 |             name: "BASE_TIME",
517 |           },
518 |           {
519 |             name: "ANCILLARY_SURGE_FEE",
520 |           },
521 |         ],
522 |         totalFee: 2500,
523 |       },
524 |       parentId: "61783",
525 |       avgRatingString: "4.3",
526 |       totalRatingsString: "20+",
527 |     },
528 |   },
529 |   {
530 |     info: {
531 |       id: "591407",
532 |       name: "Sardar G Malai Chaap Junction",
533 |       cloudinaryImageId: "sk6saam8uteg0kuoxkas",
534 |       locality: "Tashkand Marg",
535 |       areaName: "Civil Lines",
536 |       costForTwo: "₹300 for two",
537 |       cuisines: ["Indian", "Tandoor", "Arabian", "Punjabi"],
538 |       avgRating: 4,
539 |       feeDetails: {
540 |         restaurantId: "591407",
541 |         fees: [
542 |           {
543 |             name: "BASE_DISTANCE",
544 |             fee: 2500,
545 |           },
546 |           {
547 |             name: "BASE_TIME",
548 |           },
549 |           {
550 |             name: "ANCILLARY_SURGE_FEE",
551 |           },
552 |         ],
553 |         totalFee: 2500,
554 |       },
555 |       parentId: "14511",
556 |       avgRatingString: "4.0",
557 |       totalRatingsString: "50+",
558 |     },
559 |   },
560 |   {
561 |     info: {
562 |       id: "80226",
563 |       name: "Pizza Hut",
564 |       cloudinaryImageId: "2b4f62d606d1b2bfba9ba9e5386fabb7",
565 |       locality: "Sardar Patel Marg",
566 |       areaName: "Civil Lines",
567 |       costForTwo: "₹350 for two",
568 |       cuisines: ["Pizzas"],
569 |       avgRating: 3.8,
570 |       feeDetails: {
571 |         restaurantId: "80226",
572 |         fees: [
573 |           {
574 |             name: "BASE_DISTANCE",
575 |             fee: 2500,
576 |           },
577 |           {
578 |             name: "BASE_TIME",
579 |           },
580 |           {
581 |             name: "ANCILLARY_SURGE_FEE",
582 |           },
583 |         ],
584 |         totalFee: 2500,
585 |       },
586 |       parentId: "721",
587 |       avgRatingString: "3.8",
588 |       totalRatingsString: "10K+",
589 |     },
590 |   },
591 |   {
592 |     info: {
593 |       id: "238136",
594 |       name: "La Pino'z Pizza",
595 |       cloudinaryImageId: "a3poc70wqkajnw3zxpsl",
596 |       locality: "Tashkand Marg",
597 |       areaName: "Civil Lines",
598 |       costForTwo: "₹200 for two",
599 |       cuisines: ["Pizzas", "Pastas", "Italian", "Desserts", "Beverages"],
600 |       avgRating: 3.7,
601 |       feeDetails: {
602 |         restaurantId: "238136",
603 |         fees: [
604 |           {
605 |             name: "BASE_DISTANCE",
606 |             fee: 2500,
607 |           },
608 |           {
609 |             name: "BASE_TIME",
610 |           },
611 |           {
612 |             name: "ANCILLARY_SURGE_FEE",
613 |           },
614 |         ],
615 |         totalFee: 2500,
616 |       },
617 |       parentId: "4961",
618 |       avgRatingString: "3.7",
619 |       totalRatingsString: "5K+",
620 |     },
621 |   },
622 |   {
623 |     info: {
624 |       id: "332194",
625 |       name: "Kwality Walls Frozen Dessert and Ice Cream Shop",
626 |       cloudinaryImageId: "mlhwn3yictyis4cey2ai",
627 |       locality: "Lajpat Rai Road",
628 |       areaName: "Meergunj",
629 |       costForTwo: "₹300 for two",
630 |       cuisines: ["Desserts", "Ice Cream", "Ice Cream Cakes"],
631 |       avgRating: 4.4,
632 |       veg: true,
633 |       feeDetails: {
634 |         restaurantId: "332194",
635 |         fees: [
636 |           {
637 |             name: "BASE_DISTANCE",
638 |             fee: 1900,
639 |           },
640 |           {
641 |             name: "BASE_TIME",
642 |           },
643 |           {
644 |             name: "ANCILLARY_SURGE_FEE",
645 |           },
646 |         ],
647 |         totalFee: 1900,
648 |       },
649 |       parentId: "582",
650 |       avgRatingString: "4.4",
651 |       totalRatingsString: "1K+",
652 |     },
653 |   },
654 |   {
655 |     info: {
656 |       id: "442057",
657 |       name: "Shravan Specials by Lunchbox",
658 |       cloudinaryImageId: "crakciwcxxy6jfoqxzkj",
659 |       locality: "Civil Lines",
660 |       areaName: "Stanley Road",
661 |       costForTwo: "₹200 for two",
662 |       cuisines: ["Biryani", "North Indian", "Desserts", "Beverages"],
663 |       avgRating: 3.3,
664 |       feeDetails: {
665 |         restaurantId: "442057",
666 |         fees: [
667 |           {
668 |             name: "BASE_DISTANCE",
669 |             fee: 2500,
670 |           },
671 |           {
672 |             name: "BASE_TIME",
673 |           },
674 |           {
675 |             name: "ANCILLARY_SURGE_FEE",
676 |           },
677 |         ],
678 |         totalFee: 2500,
679 |       },
680 |       parentId: "21938",
681 |       avgRatingString: "3.3",
682 |       totalRatingsString: "6",
683 |     },
684 |   },
685 |   {
686 |     info: {
687 |       id: "442056",
688 |       name: "The Biryani Life",
689 |       cloudinaryImageId: "uu7a0fqio5jygufj8lul",
690 |       locality: "Stanley Road",
691 |       areaName: "Civil Lines",
692 |       costForTwo: "₹250 for two",
693 |       cuisines: [
694 |         "Biryani",
695 |         "Mughlai",
696 |         "Lucknowi",
697 |         "Hyderabadi",
698 |         "Kebabs",
699 |         "Desserts",
700 |         "Beverages",
701 |       ],
702 |       avgRating: 3.7,
703 |       feeDetails: {
704 |         restaurantId: "442056",
705 |         fees: [
706 |           {
707 |             name: "BASE_DISTANCE",
708 |             fee: 2500,
709 |           },
710 |           {
711 |             name: "BASE_TIME",
712 |           },
713 |           {
714 |             name: "ANCILLARY_SURGE_FEE",
715 |           },
716 |         ],
717 |         totalFee: 2500,
718 |       },
719 |       parentId: "8496",
720 |       avgRatingString: "3.7",
721 |       totalRatingsString: "100+",
722 |     },
723 |   },
724 |   {
725 |     info: {
726 |       id: "723874",
727 |       name: "Hudson Chopsticks",
728 |       cloudinaryImageId: "1952cde9bea82274227516f5caa99123",
729 |       locality: "PD Tandon Road",
730 |       areaName: "Civil Lines",
731 |       costForTwo: "₹300 for two",
732 |       cuisines: [
733 |         "Chinese",
734 |         "Thai",
735 |         "Asian",
736 |         "Snacks",
737 |         "Tibetan",
738 |         "Nepalese",
739 |         "Pan-Asian",
740 |         "Seafood",
741 |         "Beverages",
742 |       ],
743 |       avgRating: 4.2,
744 |       feeDetails: {
745 |         restaurantId: "723874",
746 |         fees: [
747 |           {
748 |             name: "BASE_DISTANCE",
749 |             fee: 2500,
750 |           },
751 |           {
752 |             name: "BASE_TIME",
753 |           },
754 |           {
755 |             name: "ANCILLARY_SURGE_FEE",
756 |           },
757 |         ],
758 |         totalFee: 2500,
759 |       },
760 |       parentId: "7129",
761 |       avgRatingString: "4.2",
762 |       totalRatingsString: "50+",
763 |     },
764 |   },
765 | ];
766 | 


--------------------------------------------------------------------------------
/src/components/Contact.js:
--------------------------------------------------------------------------------
 1 | import { useState, useContext, useEffect } from "react";
 2 | import { useLocation } from "react-router-dom";
 3 | import PathContext from "../utils/PathContext";
 4 | import InputControl from "./InputControl";
 5 | 
 6 | const Contact = () => {
 7 | 
 8 |   const {setCurrentPath} = useContext(PathContext);
 9 |   const {pathname} = useLocation();
10 | 
11 |   const [data, setData] = useState({
12 |     name: "",
13 |     email: "",
14 |     message: "",
15 |   });
16 | 
17 | 
18 |   const handleClick = () => {
19 |       if(!data.name || !data.email || !data.message){
20 |           alert("fill every field");
21 |       }
22 |       else alert("Message Submitted Successfully");
23 |       setData({
24 |           name: "",
25 |           email: "",
26 |           message: ""
27 |       })
28 |   }
29 | 
30 |   useEffect(() => {
31 |     setCurrentPath(pathname);
32 |   }, [])
33 | 
34 |   return (
35 |     <>
36 |       <div className="min-h-screen p-10 flex flex-col items-center">
37 |         <InputControl label="Name" placeholder="Enter Your Name" 
38 |         value = {data.name} 
39 |         onChange = {(event) => setData((prev) => ({
40 |             ...prev, 
41 |             name: event.target.value,
42 |             }))
43 |         }
44 |         ></InputControl>
45 | 
46 |         <InputControl
47 |           label="Email"
48 |           placeholder="Enter Your Email"
49 |           value = {data.email}
50 |           onChange = {(event) => setData((prev) => ({
51 |               ...prev, 
52 |               email: event.target.value,
53 |           }))}
54 |         ></InputControl>
55 | 
56 |         <InputControl
57 |           label="Message"
58 |           placeholder="Enter the message"
59 |           value = {data.message}
60 |           onChange = {(event) => setData((prev) => ({
61 |               ...prev,
62 |               message: event.target.value,
63 |           }))}
64 | 
65 |         ></InputControl>
66 | 
67 |         <button className="bg-green-400 py-2 px-5 border rounded font-Arvo"
68 |         onClick={handleClick}
69 |         >
70 |           Submit
71 |         </button>
72 |       </div>
73 |     </>
74 |   );
75 | };
76 | 
77 | export default Contact;
78 | 


--------------------------------------------------------------------------------
/src/components/Error.js:
--------------------------------------------------------------------------------
 1 | import { useRouteError } from "react-router-dom";
 2 | 
 3 | const Error = () => {
 4 |     const err = useRouteError();
 5 |     
 6 |     return (
 7 |         <>
 8 |             <h1>Oops !! You followed a wrong path.</h1>
 9 |             <h2>{err.status + " " + err.statusText}</h2>
10 |         </>
11 |     )
12 | }
13 | 
14 | export default Error;


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | const Footer = () => {
 3 | 
 4 | 
 5 |   return (
 6 |     <div className="flex justify-around bg-black text-white font-Arvo px-5 py-10">
 7 |       <div>
 8 |         <h1 className="my-4 text-[#9e9a9a] font-bold">COMPANY</h1>
 9 |         <ul className="cursor-pointer">
10 |           <li className="my-2">About Us</li>
11 |           <li className="my-2">Team</li>
12 |           <li className="my-2">Careers</li>
13 |           <li className="my-2">Food Studio Blog</li>
14 |           <li className="my-2">Bug Bounty</li>
15 |           <li className="my-2">Food Studio One</li>
16 |           <li className="my-2">Food Studio Corporate</li>
17 |         </ul>
18 |       </div>
19 | 
20 |       <div>
21 |         <h1 className="my-4 text-[#9e9a9a] font-bold">CONTACT</h1>
22 |         <ul className="cursor-pointer">
23 |           <li className="my-2">Help and Support</li>
24 |           <li className="my-2">Partner With Us</li>
25 |           <li className="my-2">Ride With Us</li>
26 |         </ul>
27 |       </div>
28 | 
29 |       <div>
30 |         <h1 className="my-4 text-[#9e9a9a] font-bold">LEGAL</h1>
31 |         <ul className="cursor-pointer">
32 |           <li className="my-2">Terms and Conditions</li>
33 |           <li className="my-2">Refund and Cancellation</li>
34 |           <li className="my-2">Privacy Policy</li>
35 |           <li className="my-2">Cookie Policy</li>
36 |           <li className="my-2">Offer Terms</li>
37 |         </ul>
38 |       </div>
39 | 
40 |       <div>
41 |         <img className="cursor-pointer my-2" src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_200,h_65/icon-AppStore_lg30tv" alt="" />
42 |         <img className="cursor-pointer my-2" src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_200,h_65/icon-GooglePlay_1_zixjxl" alt="" />
43 |       </div>
44 |     </div>
45 |   )
46 | };
47 | 
48 | export default Footer;
49 | 


--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState, useContext } from "react";
 2 | import SearchBar from "./SearchBar";
 3 | import {Link} from "react-router-dom";
 4 | import { useSelector } from "react-redux";
 5 | import { FOOD_STDUIO_LOGO } from "./Config";
 6 | import { auth } from "../firebase";
 7 | import PathContext from "../utils/PathContext";
 8 | 
 9 | 
10 | const Header = () => {
11 | 
12 |   const {currentPath} = useContext(PathContext);
13 | 
14 |   const [userName, setUserName] = useState(null);
15 | 
16 |   // Subscribe to the redux store
17 |   const cartItems = useSelector(store => store.cart.cartItems);
18 |   const path = "/signup";
19 | 
20 |   // console.log("Header rendering");
21 |   useEffect(() => {
22 |     const unsubscribe = auth.onAuthStateChanged(async(user) => {
23 |       // console.log(user);
24 |       if(user != null){
25 |         // console.log(user.displayName);
26 |         if(!user.displayName){
27 |           await user.reload();
28 |         }
29 |         setUserName(user.displayName);
30 |       }else{
31 |         setUserName(null);
32 |       }
33 |     })
34 | 
35 |     return () => {
36 |       unsubscribe();
37 |     }
38 |   })
39 | 
40 |   const handleClick = () => {
41 |     // console.log("log out");
42 |     auth.signOut();
43 |     // setUser(null);
44 |   }
45 | 
46 |   return (
47 |     <div className="flex justify-between p-[13px]">
48 |       <a className="w-[50px] h-[50px] overflow-hidden rounded-full flex justify-center" href="/">
49 |         <img className="max-w-full max-h-full object-cover"
50 |           src= {FOOD_STDUIO_LOGO}
51 |           alt=""
52 |         />
53 |       </a>
54 | 
55 |       {
56 |         currentPath === "/" && <SearchBar/>
57 |       }
58 | 
59 |       <div className="flex justify-end items-center ">
60 |         <ul className="list-none flex justify-between m-0 p-0">
61 |           <li className="font-Arvo p-[10px] text-[18px]"><Link to="/">Home</Link></li>
62 |           <li className="font-Arvo p-[10px] text-[18px]"><Link to="/about">About Us</Link></li>
63 |           <li className="font-Arvo p-[10px] text-[18px]"><Link to="/contact">Contact Us</Link></li>
64 |           <li className="font-Arvo p-[10px] text-[18px]"><Link to="/cart">Cart ({cartItems.items.length})</Link></li>
65 |           
66 |         </ul>
67 |         <div className="flex items-center">
68 |           {
69 |             !userName ? (<Link to={path}><button className=" bg-inherit border-2 border-black rounded p-1 font-Arvo text-[18px] h-[37px]"
70 |             >Login</button></Link>) : 
71 |             (<button className=" bg-inherit border-2 border-black rounded p-1 font-Arvo text-[18px] h-[37px]"
72 |             onClick= {() => handleClick()}
73 |             >{userName}</button>)
74 |           }
75 |           
76 |         </div>
77 |       </div>
78 |     </div>
79 |   );
80 | };
81 | 
82 | export default Header;
83 | 


--------------------------------------------------------------------------------
/src/components/InputControl.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const InputControl = (props) => {
 3 |     return (
 4 |         <div className="flex flex-col w-full m-2">
 5 |             { props.label && <label className="text-xl font-Arvo my-1">{props.label}</label> }
 6 |             <input className="rounded border border-red-400 h-10 font-Arvo my-1 p-1" {...props} required/>
 7 |         </div>
 8 |     )
 9 | }
10 | 
11 | export default InputControl;


--------------------------------------------------------------------------------
/src/components/ItemCardComponent.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import MealComponent from "./MealComponent";
 3 | 
 4 | const ItemCardComponent = (itemCard) => {
 5 |  
 6 |   //state variables
 7 |   const [expanded, setexpanded] = useState(false);
 8 | 
 9 |   //extracting data from props
10 |   const title = itemCard?.itemCard?.card?.card?.title;
11 |   const menu = itemCard?.itemCard?.card?.card?.itemCards;
12 |   // console.warn(menu);
13 |   //when there is no dish 
14 |   if (menu === undefined) {
15 |     return;
16 |   }
17 | 
18 |   return (
19 |     <>
20 |       <div className="my-[5px] py-[5px] font-Arvo">
21 |         <div>
22 |           <div
23 |             className="flex cursor-pointer py-[18px] shadow-md"
24 |             onClick={() => setexpanded(!expanded)}
25 |           >
26 |             <h3 className="text-center w-[90%] font-bold text-[20px]">
27 |               {title} ({menu.length})
28 |             </h3>
29 |             <p className="text-center w-[10%]">{expanded ? "✖️" : "➕"}</p>
30 |           </div>
31 | 
32 |           {expanded && 
33 |             menu.map((curMenu, index) => {
34 |               return <MealComponent curMenu = {curMenu} key={index}/>;
35 |             })
36 |           }
37 |         </div>
38 |       </div>
39 |     </>
40 |   );
41 | };
42 | 
43 | export default ItemCardComponent;
44 | 


--------------------------------------------------------------------------------
/src/components/Login.js:
--------------------------------------------------------------------------------
  1 | import { useState, useContext} from "react";
  2 | import InputControl from "./InputControl";
  3 | import { Link, useNavigate } from "react-router-dom";
  4 | import { signInWithEmailAndPassword } from "firebase/auth";
  5 | import { auth } from "../firebase";
  6 | import { useDispatch } from "react-redux"; 
  7 | import { setUser } from "../utils/userSlice";
  8 | 
  9 | const Login = () => {
 10 |   const [loginInProcess, setLoginInProcess] = useState(false);
 11 |   const [errorMessage, setErrorMessage] = useState("");
 12 |   const [localUserData, setLocalUserData] = useState({
 13 |     email: "",
 14 |     password: "",
 15 |   });
 16 | 
 17 |   //react-router-dom hook to navigate to home once logged in.
 18 |   const navigate = useNavigate();
 19 | 
 20 |   //store operations
 21 |   const dispatch = useDispatch();
 22 | 
 23 |   const handleClick = () => {
 24 |     if (!localUserData.email || !localUserData.password) {
 25 |       setErrorMessage("Please fill every field");
 26 |       setTimeout(() => {
 27 |         setErrorMessage("");
 28 |       }, 2000);
 29 | 
 30 |       return;
 31 |     }
 32 | 
 33 |     //verify details from firebase database
 34 |     setLoginInProcess(true);
 35 |     signInWithEmailAndPassword(
 36 |       auth,
 37 |       localUserData.email,
 38 |       localUserData.password
 39 |     )
 40 |       .then((res) => {
 41 |         setLoginInProcess(false);
 42 |         //dispatch this user to user slice in store.
 43 |         dispatch(setUser(localUserData.email));
 44 |         navigate("/");
 45 |       })
 46 |       .catch((err) => {
 47 |         setErrorMessage(err.code + " " + err.message);
 48 |         console.log(errorMessage);
 49 |         setTimeout(() => {
 50 |           setErrorMessage("");
 51 |         }, 5000);
 52 |         setLoginInProcess(false);
 53 |       });
 54 | 
 55 |     setLocalUserData({
 56 |       email: "",
 57 |       password: "",
 58 |     });
 59 |   };
 60 | 
 61 |   return (
 62 |     <>
 63 |       <div className="w-full min-h-screen">
 64 |         <div className="w-1/2 flex flex-col items-center mx-auto border rounded border-gray-500  p-5 m-5">
 65 |           <InputControl
 66 |             label="Email"
 67 |             placeholder="Enter Email Address"
 68 |             type="email"
 69 |             value={localUserData.email}
 70 |             onChange={(event) =>
 71 |               setLocalUserData((prev) => ({
 72 |                 ...prev,
 73 |                 email: event.target.value,
 74 |               }))
 75 |             }
 76 |           />
 77 | 
 78 |           <InputControl
 79 |             label="Password"
 80 |             placeholder="Enter Password"
 81 |             type="password"
 82 |             value={localUserData.password}
 83 |             onChange={(event) =>
 84 |               setLocalUserData((prev) => ({
 85 |                 ...prev,
 86 |                 password: event.target.value,
 87 |               }))
 88 |             }
 89 |           />
 90 | 
 91 |           {errorMessage != "" && (
 92 |             <p className="text-red-500 font-Arvo">{errorMessage}</p>
 93 |           )}
 94 | 
 95 |           <div className="w-full m-2">
 96 |             {
 97 |               loginInProcess ? (
 98 |                 <button
 99 |               className="bg-gray-500 border rounded p-2 w-full font-Arvo text-lg" disabled={true}
100 |               onClick={handleClick}
101 |             >
102 |               Log In
103 |             </button>
104 |               ): (
105 |                 <button
106 |               className="bg-green-400 border rounded p-2 w-full font-Arvo text-lg"
107 |               onClick={handleClick}
108 |             >
109 |               Log In
110 |             </button>
111 |               )
112 |             }
113 |           </div>
114 | 
115 |           <p className="font-Arvo">
116 |             Don't have an account,
117 |             <Link to="/signup">
118 |               <span className="text-blue-500 hover:cursor-pointer">
119 |                 {" "}
120 |                 Sign Up{" "}
121 |               </span>
122 |             </Link>{" "}
123 |             to continue.
124 |           </p>
125 |         </div>
126 |       </div>
127 |     </>
128 |   );
129 | };
130 | 
131 | export default Login;
132 | 


--------------------------------------------------------------------------------
/src/components/MealComponent.js:
--------------------------------------------------------------------------------
  1 | import {useState, useContext, useEffect} from "react";
  2 | import { IMG_CDN_URL } from "./Config";
  3 | import { useDispatch ,useSelector } from "react-redux";
  4 | import { checkAvailability, findQuantity, removeMenu } from "../utils/utils";
  5 | import { useParams } from "react-router-dom";
  6 | import RestaurantContext from "../utils/RestaurantContext";
  7 | 
  8 | const MealComponent = (curMenu) => {
  9 | 
 10 |     //destructure props
 11 |     const {name, price, description, imageId} = curMenu?.curMenu?.card?.info;
 12 | 
 13 |     //state variables
 14 |     const [itemQuantity, setItemQuantity] = useState(0);
 15 | 
 16 |     //Read data from context API
 17 |     const myData = useContext(RestaurantContext);
 18 | 
 19 |     //fetch the id of opened restaurant
 20 |     const { id } = useParams();
 21 |     
 22 | //Cart operations
 23 |     //susbcribe to cart
 24 |     const cartItems = useSelector(store => store.cart.cartItems);
 25 |     //push to cart
 26 |     const dispatch = useDispatch();
 27 | 
 28 |     //action functions
 29 |     const handleAdd = (meal) => {
 30 |         const check = checkAvailability(id, meal, cartItems, dispatch, myData);
 31 |         if(check){
 32 |             setItemQuantity(itemQuantity+1);
 33 |         }
 34 |     }
 35 | 
 36 |     const handleRemove = (meal) => {
 37 |         removeMenu(meal, cartItems, dispatch);
 38 |         setItemQuantity(Math.max(0, itemQuantity-1));
 39 |     }
 40 | 
 41 |     useEffect(() => {
 42 |       setItemQuantity(findQuantity(curMenu?.curMenu?.card?.info?.id, cartItems));
 43 |     }, []);
 44 |     
 45 | 
 46 |   return (
 47 |     <>
 48 |         <div className="flex p-[5px] items-center">
 49 |           <div className="w-[80%] mb-[10px] px-[10px]">
 50 |             <h4 className="mt-0 mb-[8px]">{name}</h4>
 51 |             <h5 className="my-[4px]  text-[#5e5d5d]">
 52 |               {price / 100}Rs
 53 |             </h5>
 54 |             <p className="my-[4px] text-[#8d8d8d]">
 55 |               {description}
 56 |             </p>
 57 |           </div>
 58 |           <div className="relative w-[20%] text-center px-[10px] overflow-hidden">
 59 |             {imageId ? (
 60 |               <img
 61 |                 className="min-w-full max-w-full object-fill rounded-md"
 62 |                 src={IMG_CDN_URL + imageId}
 63 |                 alt="meal-image"
 64 |               />
 65 |             ) : (
 66 |               <></>
 67 |             )}
 68 |             <div className="flex justify-evenly rounded">
 69 |               <button
 70 |                 className=" text-sm text-white p-1 transform transition duration-300 hover:scale-125"
 71 |                 onClick={() => handleRemove(curMenu?.curMenu?.card?.info)}
 72 |               >
 73 |                 ➖
 74 |               </button>
 75 | 
 76 |               <h1 className="p-1">{itemQuantity}</h1>
 77 | 
 78 |               <button
 79 |                 className=" text-sm text-white p-1 transform transition duration-300 hover:scale-125"
 80 |                 onClick={() => handleAdd(curMenu?.curMenu?.card?.info)}
 81 |               >
 82 |                 ➕
 83 |               </button>
 84 |             </div>
 85 |           </div>
 86 |         </div>
 87 |         <hr className="w-[100%]" />
 88 |         {/* {index < menu.length - 1 ? (
 89 |           <div>
 90 |             
 91 |           </div>
 92 |         ) : (
 93 |           <></>
 94 |         )} */}
 95 |     </>
 96 |   );
 97 | };
 98 | 
 99 | export default MealComponent;
100 | 


--------------------------------------------------------------------------------
/src/components/OrderHistory.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { database } from "../firebase";
 3 | import { IMG_CDN_URL } from "./Config";
 4 | import { Link } from "react-router-dom";
 5 | 
 6 | const OrderHistory = (currentUser) => {
 7 |   const [orders, setOrders] = useState(null);
 8 |   const uid = currentUser.currentUser.uid;
 9 | 
10 |   useEffect(() => {
11 |     const fetchData = () => {
12 |       const databaseRef = database.ref("users/" + uid);
13 | 
14 |       databaseRef.on("value", (snapshot) => {
15 |         const val= snapshot.val();
16 |         if(val){
17 |           const data = Object.values(val);
18 |           setOrders(data);
19 |         }
20 |         // const data = Object?.values(snapshot.val());
21 |         // setOrders(data);
22 |       });
23 |       console.log(orders);
24 |       // databaseRef.off("value");
25 |     };
26 | 
27 |     fetchData();
28 |   }, []);
29 | 
30 | 
31 |   return (
32 |     <>
33 |       {orders != null &&
34 |         orders.length > 0 &&
35 |         orders.map((order) => {
36 |           const path = "/restaruant/" + order.restaurant_id;
37 |           return (
38 |             <div className="my-1 flex ">
39 |               {/* left side: logo */}
40 |               <div className="w-16 h-12 mx-2 overflow-hidden">
41 |                 <Link to={path}>
42 |                   <img
43 |                     className="min-h-full max-h-full object-fill rounded"
44 |                     src={IMG_CDN_URL + order.logo}
45 |                     alt="restaurant logo"
46 |                   />
47 |                 </Link>
48 |               </div>
49 |               {/* right side for other details: top restaruant, below menu */}
50 |               <div>
51 |                 {/* restaurant */}
52 |                 <div>
53 |                   <h3 className="text-lg font-Arvo">{order.restaurantName}</h3>
54 |                 </div>
55 |                 {/* menu */}
56 |                 {order.items.map((item) => {
57 |                   return (
58 |                     <div className="flex font-Arvo text-sm">
59 |                       <h3 className="mx-2">{item.name}</h3>
60 |                       <h3 className="mx-2">{item.price / 100}</h3>
61 |                       <h3 className="mx-2">{item.quantity}</h3>
62 |                     </div>
63 |                   );
64 |                 })}
65 |               </div>
66 |             </div>
67 |           );
68 |         })}
69 |     </>
70 |   );
71 | };
72 | 
73 | export default OrderHistory;
74 | 


--------------------------------------------------------------------------------
/src/components/ProfileClass.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class ProfileClass extends React.Component {
 4 | 
 5 |     //step 1 of execution
 6 |     constructor(props){
 7 |         super(props);
 8 |         //create state here.
 9 |         this.state = {
10 |             count: 1,
11 |             count2: 2,
12 |         }
13 |         console.log("Constructor called");
14 |         
15 |     }
16 | 
17 |     //step 3 of execution
18 |     componentDidMount(){
19 |         //API calls here.
20 |         console.log("componentDidMount called");
21 |     }
22 | 
23 |     //step 2 of execution
24 |     render(){
25 |         console.log("render");
26 |         return(
27 |             <div>
28 |                 <h2>Profile Component in Class</h2>
29 |                 <h3>{this.props.name}</h3>
30 |                 <h3>{this.state.count}</h3>
31 | 
32 |                 <button onClick={() => {
33 |                     this.setState({
34 |                         count: 10
35 |                     })
36 |                 }
37 |                 }>SetState</button>
38 |             </div>
39 |         )
40 |     }
41 | }
42 | 
43 | export default ProfileClass


--------------------------------------------------------------------------------
/src/components/ProfileFunction.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | const ProfileFunction = (props) => {
 4 | 
 5 | 
 6 |     const [count, setcount] = useState(1);
 7 |     return (
 8 |         <>
 9 |             <h2>Profile Function componenet</h2>
10 |             <h3>{props.name}</h3>
11 |             <h3>{count}</h3>
12 |             <button onClick={() => {setcount(10)}}
13 |             >SetState</button>
14 |         </>
15 |     )
16 | }
17 | 
18 | export default ProfileFunction;


--------------------------------------------------------------------------------
/src/components/RestaurantCard.js:
--------------------------------------------------------------------------------
 1 | import { IMG_CDN_URL } from "./Config";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | const RestaurantCard = ({
 5 |   name,
 6 |   cloudinaryImageId,
 7 |   cuisines,
 8 |   areaName,
 9 |   id,
10 |   avgRating,
11 | }) => {
12 |   // console.warn(id);
13 |   const path = "/restaurant/" + id;
14 |   // console.warn(path);
15 |   if (!name) return;
16 |   return (
17 |     <Link to={path}>
18 |       <div className="w-[250px] m-2 px-[10px] py-[5px] rounded-[5px] transition duration-300 ease-in-out hover:scale-110 shadow-md">
19 |         <img
20 |           className="w-[300px] h-[150px] rounded-[5px]"
21 |           src={IMG_CDN_URL + cloudinaryImageId}
22 |           alt="restaurants-logo"
23 |         />
24 | 
25 |         <h3 className="m-[2px] font-Arvo font-normal">{name}</h3>
26 |         <div className="flex  items-center">
27 |           <div className="px-[3px] w-[75%]">
28 |             <h5 className="m-[2px] font-Arvo text-sm text-[#484848]">
29 |               {cuisines?.join(", ")}
30 |             </h5>
31 |             <div className="flex items-center">
32 |               <img
33 |                 className="h-5 w-4"
34 |                 src="https://www.clipartmax.com/png/small/207-2072371_or-combined-to-be-gigantic-location-icon-in-orange-color.png"
35 |                 alt=""
36 |               />
37 |               <h5 className="m-1 font-Arvo text-sm text-[#484848]">{areaName}</h5>
38 |             </div>
39 |           </div>
40 | 
41 |           {avgRating != "--" && (
42 |             <div className="w-[25%] text-center bg-green-500 mx-1">
43 |               <span className="star-rating text-white text-sm font-Arvo">
44 |                 <i className="fa fa-star"></i> {avgRating}
45 |               </span>
46 |             </div>
47 |           )}
48 |         </div>
49 | 
50 |         <div className="flex items-center">
51 |           <img
52 |             className="h-6 w-6"
53 |             src="https://thumbs.dreamstime.com/b/print-144632261.jpg"
54 |             alt=""
55 |           />
56 | 
57 |           <span className="text-[#a0522d] text-xs font-Arvo">
58 |             40% Off | Use TRYNEW
59 |           </span>
60 |         </div>
61 |       </div>
62 |     </Link>
63 |   );
64 | };
65 | 
66 | export default RestaurantCard;
67 | 


--------------------------------------------------------------------------------
/src/components/RestaurantMenu.js:
--------------------------------------------------------------------------------
  1 | import { useParams } from "react-router-dom";
  2 | import useRestaurantMenu from "../utils/useRestaurantMenu";
  3 | import ItemCardComponent from "./ItemCardComponent";
  4 | import RestaurantContext from "../utils/RestaurantContext";
  5 | 
  6 | const RestaurantMenu = () => {
  7 |   const { id } = useParams();
  8 |   const restaurant = useRestaurantMenu(id);
  9 |   const {
 10 |     name,
 11 |     cuisines,
 12 |     areaname,
 13 |     deliverymsg,
 14 |     avgrating,
 15 |     totalratings,
 16 |     itemCards,
 17 |     logo,
 18 |   } = restaurant;
 19 |   // console.warn(itemCards);
 20 |   //we've to pass the name, id, areaname & logo of restaurant to MealComponent so that they can be added to cart details along with a meal. Hence we create a context and put these into it.
 21 | 
 22 |   console.log(name);
 23 |   const myData = {
 24 |     name: name,
 25 |     id: id,
 26 |     areaname: areaname,
 27 |     logo: logo,
 28 |   };
 29 | 
 30 |   //----------------------    Context ends    ----------------------
 31 | 
 32 |   return (
 33 |     <>
 34 |       <div className="w-full min-h-screen">
 35 |         {/* Restaurant details */}
 36 |         <div className="w-[60%] mx-auto font-Arvo mt-[20px] flex justify-between items-baseline">
 37 |           <div>
 38 |             <h2 className="font-bold text-[22px] mb-[15px]">{name}</h2>
 39 |             <h5 className="font-normal text-[#8d8d8d]">
 40 |               {cuisines.join(", ")}
 41 |             </h5>
 42 |             <div className="flex">
 43 |               <img
 44 |                 className="h-5 w-4 mr-1"
 45 |                 src="https://www.clipartmax.com/png/small/207-2072371_or-combined-to-be-gigantic-location-icon-in-orange-color.png"
 46 |                 alt=""
 47 |               />
 48 |               <h5 className="font-normal text-[#8d8d8d]">{areaname}</h5>
 49 |             </div>
 50 |             <h5 className="font-normal text-[#8d8d8d]">{deliverymsg}</h5>
 51 |           </div>
 52 |           <div className="flex flex-col shadow-md">
 53 |             <span className="star-rating text-center border-[1px] border-[#d0d0d0] py-[5px] px-[2px] bg-green-500 text-white">
 54 |               <i className="fa fa-star"></i>{" "}
 55 |               {avgrating != "--" ? avgrating : "0.0"}
 56 |             </span>
 57 |             {totalratings != null && (
 58 |               <span className="review-count text-center border-[1px] border-[#d0d0d0] py-[5px] px-[2px] text-[#8d8d8d] font-[13px]">
 59 |                 {totalratings}
 60 |               </span>
 61 |             )}
 62 |           </div>
 63 |         </div>
 64 | 
 65 |         <hr className="w-[60%] mx-auto my-2 border-gray-600" />
 66 | 
 67 |         {/* Offers area */}
 68 | 
 69 |         <div className="w-[60%] mx-auto font-Arvo flex items-center overflow-x-auto whitespace-nowrap scrollbar-none">
 70 |           <div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
 71 |             <h5 className="font-semibold">30% upto 75rs</h5>
 72 |             <span className="font-[12px] text-[#a0522d]">
 73 |               use TRYNEW above 149rs
 74 |             </span>
 75 |           </div>
 76 |           <div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
 77 |             <h5 className="font-semibold">30% upto 75rs</h5>
 78 |             <span className="font-[12px] text-[#a0522d]">
 79 |               use TRYNEW above 149rs
 80 |             </span>
 81 |           </div>
 82 |           <div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
 83 |             <h5 className="font-semibold">30% upto 75rs</h5>
 84 |             <span className="font-[12px] text-[#a0522d]">
 85 |               use TRYNEW above 149rs
 86 |             </span>
 87 |           </div>
 88 |           <div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
 89 |             <h5 className="font-semibold">30% upto 75rs</h5>
 90 |             <span className="font-[12px] text-[#a0522d]">
 91 |               use TRYNEW above 149rs
 92 |             </span>
 93 |           </div>
 94 |           <div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
 95 |             <h5 className="font-semibold">30% upto 75rs</h5>
 96 |             <span className="font-[12px] text-[#a0522d]">
 97 |               use TRYNEW above 149rs
 98 |             </span>
 99 |           </div>
100 |           <div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
101 |             <h5 className="font-semibold">30% upto 75rs</h5>
102 |             <span className="font-[12px] text-[#a0522d]">
103 |               use TRYNEW above 149rs
104 |             </span>
105 |           </div>
106 |         </div>
107 | 
108 |         {/* Veg/non veg declaration */}
109 | 
110 |         <div className="w-[60%] mx-auto font-Arvo">
111 |           <h4 className="mt-[20px] mb-[10px] font-[600] text-[18px]">
112 |             <i className="fa fa-leaf text-green-800"></i> Pure Veg
113 |           </h4>
114 |         </div>
115 | 
116 |         <hr className="w-[60%] mx-auto border-gray-600" />
117 | 
118 |         {/* Menu items with categories */}
119 | 
120 |         <RestaurantContext.Provider value={myData}>
121 |           <div className="w-[60%] mx-auto my-1">
122 |             {itemCards?.map((itemCard, index) => {
123 |               if (index != 0) {
124 |                 return <ItemCardComponent key={index} itemCard={itemCard} />;
125 |               }
126 |             })}
127 |           </div>
128 |         </RestaurantContext.Provider>
129 |       </div>
130 |     </>
131 |   );
132 | };
133 | 
134 | export default RestaurantMenu;
135 | 


--------------------------------------------------------------------------------
/src/components/RestaurantMenuShimmer.js:
--------------------------------------------------------------------------------
 1 | import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 2 | import "react-loading-skeleton/dist/skeleton.css";
 3 | 
 4 | const RestaurantMenuShimmer = () => {
 5 |   return (
 6 |     <SkeletonTheme>
 7 |       <div className="w-full min-h-screen">
 8 |         {/* Restaurant details */}
 9 |         <div className="w-[60%] mx-auto font-Arvo mt-[20px] flex justify-between items-baseline">
10 |           <div>
11 |             <h2 className="font-bold text-[22px] mb-[15px]"><Skeleton/></h2>
12 |             <h5 className="font-normal text-[#8d8d8d]">
13 |             <Skeleton/>
14 |             </h5>
15 |             <h5 className="font-normal text-[#8d8d8d]"><Skeleton/></h5>
16 |             <h5 className="font-normal text-[#8d8d8d]"><Skeleton/></h5>
17 |           </div>
18 |           <div className="flex flex-col shadow-md">
19 |             <span className="star-rating text-center border-[1px] border-[#d0d0d0] py-[5px] px-[2px] text-green-800">
20 |               <i className="fa fa-star"></i>
21 |               <Skeleton/>
22 |             </span>
23 |             
24 |               <span className="review-count text-center border-[1px] border-[#d0d0d0] py-[5px] px-[2px] text-[#8d8d8d] font-[13px]">
25 |               <Skeleton/>
26 |               </span>
27 |             
28 |           </div>
29 |         </div>
30 | 
31 |         <hr className="w-[60%] mx-auto my-2 border-gray-600" />
32 | 
33 |         {/* Offers area */}
34 | 
35 |         <div className="w-[60%] mx-auto font-Arvo flex items-center overflow-x-auto whitespace-nowrap scrollbar-none">
36 |           <div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
37 |             <h5 className="font-semibold"><Skeleton/></h5>
38 |             <span className="font-[12px] text-[#8d8d8d]">
39 |             <Skeleton/>
40 |             </span>
41 |           </div>
42 |           <div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
43 |             <h5 className="font-semibold"><Skeleton/></h5>
44 |             <span className="font-[12px] text-[#8d8d8d]">
45 |             <Skeleton/>
46 |             </span>
47 |           </div><div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
48 |             <h5 className="font-semibold"><Skeleton/></h5>
49 |             <span className="font-[12px] text-[#8d8d8d]">
50 |             <Skeleton/>
51 |             </span>
52 |           </div><div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
53 |             <h5 className="font-semibold"><Skeleton/></h5>
54 |             <span className="font-[12px] text-[#8d8d8d]">
55 |             <Skeleton/>
56 |             </span>
57 |           </div><div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
58 |             <h5 className="font-semibold"><Skeleton/></h5>
59 |             <span className="font-[12px] text-[#8d8d8d]">
60 |             <Skeleton/>
61 |             </span>
62 |           </div><div className="rounded-md m-1 p-2 shadow cursor-pointer border border-gray-400">
63 |             <h5 className="font-semibold"><Skeleton/></h5>
64 |             <span className="font-[12px] text-[#8d8d8d]">
65 |             <Skeleton/>
66 |             </span>
67 |           </div>
68 |         </div>
69 | 
70 |         {/* Veg/non veg declaration */}
71 | 
72 |         <div className="w-[60%] mx-auto font-Arvo">
73 |           <h4 className="mt-[20px] mb-[10px] font-[600] text-[18px]">
74 |             <i className="fa fa-leaf text-green-800"></i> <Skeleton/>
75 |           </h4>
76 |         </div>
77 | 
78 |         <hr className="w-[60%] mx-auto border-gray-600" />
79 | 
80 |         {/* Menu items with categories */}
81 | 
82 |           <div className="w-[60%] mx-auto my-1">
83 |           <Skeleton/>
84 |           </div>
85 |       </div>
86 |     </SkeletonTheme>
87 |   );
88 | };
89 | 
90 | export default RestaurantMenuShimmer;
91 | 


--------------------------------------------------------------------------------
/src/components/SearchBar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { useContext } from "react";
 3 | import SearchTextContext from "../utils/SearchTextContext";
 4 | 
 5 | function SearchBar() {
 6 |     const {searchTxt, setsearchTxt, setsearchTxtFound} = useContext(SearchTextContext);
 7 | 
 8 |     // built for search when enter is pressed.
 9 |   // function handleKeyPress(event) {
10 |   //   if (event.key === "Enter") {
11 |   //     setsearchTxtFound(!searchTxtFound);
12 |   //   }
13 |   // }
14 |   return (
15 |     <div className="flex items-center">
16 |       <input className="h-[35px] w-20 lg:w-[300px] md:w-52 sm:w-40 text-center text-lg border-2 border-[#818080] rounded font-Arvo"
17 |         type="search"
18 |         placeholder="Search a Restaurant"
19 |         value={searchTxt}
20 |         onChange={(e) => {
21 |           setsearchTxt(e.target.value);
22 |           setsearchTxtFound((prev) => !prev);
23 |         }}
24 |         // onKeyDown={handleKeyPress}
25 |       />
26 |     </div>
27 |   );
28 | }
29 | 
30 | export default SearchBar;
31 | 


--------------------------------------------------------------------------------
/src/components/ShimmerUI.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ShimmerUICard from './ShimmerUICard'
 3 | 
 4 | 
 5 | function ShimmerUI() {
 6 | 
 7 |   return (
 8 |     <>
 9 |       <div className='flex justify-around flex-wrap'>
10 |         {Array(15).fill("").map((e, index) => (
11 |           <ShimmerUICard key={index}/> 
12 |         ))}
13 |       </div>
14 |     </>
15 |   )
16 | }
17 | 
18 | export default ShimmerUI


--------------------------------------------------------------------------------
/src/components/ShimmerUICard.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 3 | import "react-loading-skeleton/dist/skeleton.css";
 4 | 
 5 | function ShimmerUICard() {
 6 |   return (
 7 |     <SkeletonTheme>
 8 |       <div className="w-[250px] m-[10px] px-[10px] py-[5px] rounded-[5px] transition duration-300 ease-in-out hover:scale-110 shadow-md">
 9 |         <Skeleton className="w-[300px] h-[157.48px] rounded-[5px]" />
10 |         <h3 className="m-[2px] font-Arvo font-normal">
11 |           <Skeleton />
12 |         </h3>
13 |         <h5>
14 |           <Skeleton count={2} />
15 |         </h5>
16 |       </div>
17 |     </SkeletonTheme>
18 | 
19 |   );
20 | }
21 | 
22 | export default ShimmerUICard;
23 | 


--------------------------------------------------------------------------------
/src/components/SignUp.js:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import InputControl from "./InputControl";
  3 | import { Link, useNavigate } from "react-router-dom";
  4 | import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
  5 | import { auth } from "../firebase";
  6 | 
  7 | const SignUp = () => {
  8 |   const [errorMessage, setErrorMessage] = useState("");
  9 |   const [signUpInProcess, setSignUpInProcess] = useState(false);
 10 | 
 11 |   const [localUserData, setLocalUserData] = useState({
 12 |     name: "",
 13 |     email: "",
 14 |     password: "",
 15 |   });
 16 | 
 17 | 
 18 |   const navigate = useNavigate();
 19 | 
 20 |   const handleClick = () => {
 21 |     if (
 22 |       !localUserData.name ||
 23 |       !localUserData.email ||
 24 |       !localUserData.password
 25 |     ) {
 26 |       setErrorMessage("Please fill every field");
 27 |       setTimeout(() => {
 28 |         setErrorMessage("");
 29 |       }, 2000);
 30 | 
 31 |       return;
 32 |     }
 33 | 
 34 |     //create user in firebase
 35 |     setSignUpInProcess(true);
 36 | 
 37 |     createUserWithEmailAndPassword(
 38 |       auth,
 39 |       localUserData.email,
 40 |       localUserData.password
 41 |     )
 42 |       .then (async(res) => {
 43 |         console.log(res.user.displayName);
 44 |         console.log("Updating profile name");
 45 |         await updateProfile(res.user, {
 46 |           displayName: localUserData.name,
 47 |         });
 48 |         console.log("profile updated");
 49 |         console.log(res.user.displayName);
 50 |         setSignUpInProcess(false);
 51 |         navigate("/");
 52 |       })
 53 |       .catch((err) => {
 54 |         setErrorMessage(err.code + " " + err.message);
 55 |         setTimeout(() => {
 56 |           setErrorMessage("");
 57 |         }, 5000);
 58 |         setSignUpInProcess(false);
 59 |       });
 60 | 
 61 |     setLocalUserData({
 62 |       name: "",
 63 |       email: "",
 64 |       password: "",
 65 |     });
 66 |   };
 67 | 
 68 |   return (
 69 |     <div className="w-full min-h-screen">
 70 |       <div className="w-1/2 flex flex-col items-center mx-auto border rounded border-gray-500  p-5 m-5">
 71 |    
 72 |         <InputControl
 73 |           label="Name"
 74 |           placeholder="Enter Your Name"
 75 |           type="text"
 76 |           value={localUserData.name}
 77 |           onChange={(event) =>
 78 |             setLocalUserData((prev) => ({ ...prev, name: event.target.value }))
 79 |           }
 80 |         />
 81 | 
 82 |         <InputControl
 83 |           label="Email"
 84 |           placeholder="Enter Email Address"
 85 |           type="email"
 86 |           value={localUserData.email}
 87 |           onChange={(event) =>
 88 |             setLocalUserData((prev) => ({ ...prev, email: event.target.value }))
 89 |           }
 90 |         />
 91 | 
 92 |         <InputControl
 93 |           label="Password"
 94 |           placeholder="Enter Password"
 95 |           type="password"
 96 |           value={localUserData.password}
 97 |           onChange={(event) =>
 98 |             setLocalUserData((prev) => ({
 99 |               ...prev,
100 |               password: event.target.value,
101 |             }))
102 |           }
103 |         />
104 | 
105 |         {errorMessage != "" && (
106 |           <p className="text-red-500 font-Arvo">{errorMessage}</p>
107 |         )}
108 | 
109 |         <div className="w-full m-2">
110 |           {
111 |             signUpInProcess ? (
112 |               <button
113 |             className="bg-gray-400 border rounded p-2 w-full font-Arvo text-lg"
114 |             onClick={handleClick} disabled = {true}
115 |           >
116 |             Sign Up
117 |           </button>
118 |             ): (
119 |               <button
120 |             className="bg-green-400 border rounded p-2 w-full font-Arvo text-lg"
121 |             onClick={handleClick}
122 |           >
123 |             Sign Up
124 |           </button>
125 |             )
126 |           }
127 |           
128 |         </div>
129 | 
130 |         
131 |         <p className="font-Arvo">
132 |           Already have an account,
133 |           <Link to="/login">
134 |             <span className="text-blue-500 hover:cursor-pointer"> Log In </span>
135 |           </Link>{" "}
136 |           to continue.
137 |         </p>
138 |       </div>
139 |     </div>
140 |   );
141 | };
142 | 
143 | export default SignUp;
144 | 


--------------------------------------------------------------------------------
/src/components/UpdateCartOnUserChange.js:
--------------------------------------------------------------------------------
 1 | import { useSelector } from "react-redux";
 2 | 
 3 | const UpdateCartOnUserChange = () => {
 4 | 
 5 |     //subscribe to user slice to get his respective cart from firebase, is rendered whenever user is changed
 6 |     const user = useSelector((store) => store.user);
 7 | 
 8 |     //we've to fetch the cart details of this user then update cart slice.
 9 |     
10 | 
11 |     return (
12 |         <>
13 |         </>
14 |     )
15 | }
16 | 
17 | export default UpdateCartOnUserChange;


--------------------------------------------------------------------------------
/src/firebase.js:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import firebase from "firebase/compat/app"
 3 | import "firebase/compat/database";
 4 | import {getAuth} from "firebase/auth"
 5 | 
 6 | const firebaseConfig = {
 7 |   apiKey: "AIzaSyAJLfZ6u1AUL3Ne0J-qJRLRAeQxCH0Bvnk",
 8 |   authDomain: "food-studio-a10b7.firebaseapp.com",
 9 |   projectId: "food-studio-a10b7",
10 |   storageBucket: "food-studio-a10b7.appspot.com",
11 |   messagingSenderId: "182884177059",
12 |   appId: "1:182884177059:web:5bc7d7e2960f578d54db16",
13 |   measurementId: "G-R2YQXX0RR4"
14 | };
15 | 
16 | // Initialize Firebase
17 | firebase.initializeApp(firebaseConfig);
18 | // const app = initializeApp(firebaseConfig);
19 | const database = firebase.database();
20 | const auth = getAuth();
21 | 
22 | export {firebase, auth, database};


--------------------------------------------------------------------------------
/src/script.js:
--------------------------------------------------------------------------------
 1 | import { useState, lazy, Suspense } from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
 4 | 
 5 | import Header from "./components/Header";
 6 | import Body from "./components/Body";
 7 | import Footer from "./components/Footer";
 8 | // import About from "./components/About";
 9 | import Error from "./components/Error";
10 | import Contact from "./components/Contact";
11 | import Cart from "./components/Cart";
12 | import Login from "./components/Login";
13 | import RestaurantMenu from "./components/RestaurantMenu";
14 | import { Provider } from "react-redux";
15 | import store from "./utils/Store";
16 | import SearchTextContext from "./utils/SearchTextContext";
17 | import SignUp from "./components/SignUp";
18 | import PathContext from "./utils/PathContext";
19 | 
20 | const About = lazy(() => import("./components/About"));
21 | // -----------------------------------------  BUILDING FOOD STUDIO     ------------------------------
22 | 
23 | const AppComponent = () => {
24 |   const [searchTxt, setsearchTxt] = useState("");
25 |   const [searchTxtFound, setsearchTxtFound] = useState(false);
26 |   const [currentPath, setCurrentPath] = useState("home");
27 | 
28 |   return (
29 |     // Provider is used to inform our app about the redux store
30 |     <Provider store={store}>
31 |       {/* User Context is the context we created for logged in user, this provider will pass this context to all the components */}
32 |       <SearchTextContext.Provider
33 |         value={{ searchTxt, setsearchTxt, searchTxtFound, setsearchTxtFound }}
34 |       >
35 |         <PathContext.Provider value={{currentPath, setCurrentPath}}>
36 |         <Header />
37 |         <Suspense fallback={<div>Loading.......</div>}>
38 |           <Outlet /> {/**dynamic pages will be rendered here */}
39 |         </Suspense>
40 |         </PathContext.Provider>
41 |       </SearchTextContext.Provider>
42 |       <Footer />
43 |     </Provider>
44 |   );
45 | };
46 | 
47 | const appRouter = createBrowserRouter([
48 |   {
49 |     path: "/",
50 |     element: <AppComponent />,
51 |     errorElement: <Error />,
52 |     children: [
53 |       {
54 |         path: "/",
55 |         element: <Body />,
56 |       },
57 |       {
58 |         path: "/about", //child path can be added but name it directly: path: 'profile' not path: '/profile' by latter one it will be localhost:1234/profile.
59 |         element: <About />,
60 |       },
61 |       {
62 |         path: "/contact",
63 |         element: <Contact />,
64 |       },
65 |       {
66 |         path: "/restaurant/:id",
67 |         element: <RestaurantMenu />,
68 |       },
69 |       {
70 |         path: "/cart",
71 |         element: <Cart />,
72 |       },
73 |       {
74 |         path: "/login",
75 |         element: <Login />,
76 |       },
77 |       {
78 |         path: "/signup",
79 |         element: <SignUp />,
80 |       },
81 |     ],
82 |   },
83 | ]);
84 | 
85 | const root = ReactDOM.createRoot(document.getElementById("root"));
86 | 
87 | root.render(<RouterProvider router={appRouter} />);
88 | 


--------------------------------------------------------------------------------
/src/utils/PathContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | 
3 | const PathContext = createContext();
4 | 
5 | export default PathContext;


--------------------------------------------------------------------------------
/src/utils/RestaurantContext.js:
--------------------------------------------------------------------------------
 1 | import { createContext } from "react";
 2 | 
 3 | const RestaurantContext = createContext({
 4 |     restaurant: {
 5 |         name: "",
 6 |         id: "",
 7 |         logo: "",
 8 |         areaname: "",
 9 |     },
10 | })
11 | 
12 | export default RestaurantContext;


--------------------------------------------------------------------------------
/src/utils/SearchTextContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | 
3 | const SearchTextContext = createContext();
4 | 
5 | export default SearchTextContext;


--------------------------------------------------------------------------------
/src/utils/Store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from "@reduxjs/toolkit";
 2 | import cartSlice from "./cartSlice";
 3 | import userSlice from "./userSlice";
 4 | 
 5 | const store = configureStore({
 6 |     reducer: {
 7 |         cart: cartSlice,
 8 |         user: userSlice,
 9 |     }
10 | })
11 | 
12 | export default store;


--------------------------------------------------------------------------------
/src/utils/UserContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | 
3 | const UserContext = createContext("");
4 | 
5 | export default UserContext;
6 | 


--------------------------------------------------------------------------------
/src/utils/cartSlice.js:
--------------------------------------------------------------------------------
  1 | import { createSlice } from "@reduxjs/toolkit";
  2 | 
  3 | const cartItems = {
  4 |   restaurantName: "",
  5 |   restaurant_id: "",
  6 |   areaName: "",
  7 |   logo: "",
  8 |   items: [],
  9 | };
 10 | 
 11 | const cartSlice = createSlice({
 12 |   name: "cart",
 13 |   initialState: {
 14 |     cartItems,
 15 |   },
 16 |   reducers: {
 17 |     // state points to our items array/map, action contains the data to modified.
 18 |     assignBasicDetails: (state, action) => {
 19 |       state.cartItems.restaurantName = action.payload.resName;
 20 |       state.cartItems.restaurant_id = action.payload.restaurant_id;
 21 |       state.cartItems.areaName = action.payload.areaname;
 22 |       state.cartItems.logo = action.payload.logo;
 23 |     },
 24 |     addItem: (state, action) => {
 25 |       const item = action.payload;
 26 |       const itemPresent = state.cartItems.items.find((i) => i.id === item.id);
 27 | 
 28 |       if (itemPresent) {
 29 |         itemPresent.quantity += 1;
 30 |       } else {
 31 |         state.cartItems.items.push(item);
 32 |       }
 33 |     },
 34 |     removeItem: (state, action) => {
 35 |       // write logic to search action payload in state and remove that.
 36 |       const item = action.payload;
 37 |       const index = state.cartItems.items.findIndex((i) => i.id === item.id);
 38 |       if (index !== -1) {
 39 |         if (state.cartItems.items[index].quantity > 1) {
 40 |           state.cartItems.items[index].quantity -= 1;
 41 |         } else if (state.cartItems.items[index].quantity == 1) {
 42 |           state.cartItems.items.splice(index, 1);
 43 |         }
 44 |       }
 45 |     },
 46 |     clearCart: (state) => {
 47 |       (state.cartItems.restaurantName = ""),
 48 |         (state.cartItems.restaurant_id = ""),
 49 |         (state.cartItems.areaName = ""),
 50 |         (state.cartItems.logo = ""),
 51 |         (state.cartItems.items = []);
 52 |     },
 53 |   },
 54 | });
 55 | 
 56 | export const { assignBasicDetails, addItem, removeItem, clearCart } =
 57 |   cartSlice.actions;
 58 | 
 59 | export default cartSlice.reducer;
 60 | 
 61 | /**
 62 |  * The process of creating redux store
 63 |  * 
 64 |  * Create store using configureStore imported from RTK
 65 |  *  - Create Slices
 66 |  *      - Cart Slice
 67 |  *          - Create using createSlice imported from RTK
 68 |  *          - contains {
 69 |  *              name: cart,
 70 |  *              intialState: { items: []},
 71 |  *              reducers: {
 72 |  *                  contains actions
 73 |  *                  addItems: (state, action) => {modifies the state(items) by action payload}
 74 |  *                  removeItems:
 75 |  *                  clearCart:
 76 |  *              }
 77 |  *          }
 78 |  *          export it to be used in redux store, 
 79 |  *          - reducers are exported by default, cartSlice.reducer
 80 |  *          - actions are exported by name(many), const {addItem, removeItem} = cartSlice.actions
 81 |  * 
 82 |  *      - User Slice
 83 |  *          - Create userSlice using createSlice imported from RTK
 84 |  *          - it takes an object: {
 85 |  *                  name: 'user',
 86 |  *                  initialState: {
 87 |  *                      email: "",
 88 |  *                   },
 89 |  *                  reducers: {
 90 |  *                      setUser(state, action){},
 91 |  *                      clearUser(state, action){}
 92 |  *                  }
 93 |  *              }
 94 |  *          - export, actions using named export
 95 |  *          - export reducer by default.
 96 |  *  - configure in redux store
 97 |  *      - import the slice, reducers come by dedfault
 98 |  *      - reducer: {
 99 |  *          sliceName: slice
100 |  *          cart: cartSlice,
101 |  *          user: userSlice,
102 |  *        }
103 |  * 
104 |  * 
105 |  *  - Subscribe to the redux store to update our cart: using useSelector hook imported from react-redux
106 |  *      - useSelector(store.sliceName.items)
107 |  
108 |     - Dispatch an action: addItem, removeItem
109 |         - dispatch(action)
110 |         - dispatch(addItem("id of item or what needed"))
111 |         - dispatch comes from a hook useDispatch which is imported from react-redux
112 | 
113 | */
114 | 


--------------------------------------------------------------------------------
/src/utils/useOnlineStatus.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | 
 3 | const useOnlineStatus = () => {
 4 |     const [isOnline, setisOnline] = useState(true);
 5 | 
 6 |     useEffect(() => {
 7 |       
 8 |         const handleOnline = () => {
 9 |             setisOnline(true);
10 |         }
11 | 
12 |         const handleOffline = () => {
13 |             setisOnline(false);
14 |         }
15 | 
16 |         window.addEventListener("online", handleOnline);
17 |         window.addEventListener("offline", handleOffline);
18 | 
19 |         return () => {
20 |             window.removeEventListener("online", handleOnline);
21 |             window.removeEventListener("offline", handleOffline);
22 |         }
23 |     }, [])
24 |     
25 |     return isOnline;
26 | }
27 | 
28 | export default useOnlineStatus;


--------------------------------------------------------------------------------
/src/utils/useRestaurantMenu.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import { FETCH_MENU_URL_FIRST_PART, FETCH_MENU_URL_SECOND_PART } from "../components/Config";
 3 | 
 4 | 
 5 | const useRestaurantMenu = (id) => {
 6 |    
 7 |     const restaurantFormat = {
 8 |         name: "",
 9 |         logo: "",
10 |         id: "",
11 |         cuisines : [],
12 |         areaname: "",
13 |         deliverymsg: "",
14 |         avgrating: "",
15 |         totalratings: "",
16 |         itemCards: []
17 |     }
18 | 
19 |   const [restaurant, setrestaurant] = useState(restaurantFormat);
20 | 
21 | 
22 |     useEffect(() => {
23 |         getRestaurantDetails();
24 |       }, []);
25 |     
26 |       async function getRestaurantDetails() {
27 |         const data = await fetch(FETCH_MENU_URL_FIRST_PART + id + FETCH_MENU_URL_SECOND_PART);
28 |         const json = await data.json();
29 |     
30 |         const card = json?.data?.cards[0]?.card?.card?.info;
31 |         const cuisineDetails = (json?.data?.cards[1]?.groupedCard?.cardGroupMap?.REGULAR?.cards) ? (json?.data?.cards[1]?.groupedCard?.cardGroupMap?.REGULAR?.cards): (json?.data?.cards[2]?.groupedCard?.cardGroupMap?.REGULAR?.cards);
32 |         
33 | 
34 |         setrestaurant({
35 |             name: card?.name,
36 |             logo: card?.cloudinaryImageId,
37 |             id: card?.id,
38 |             cuisines: card?.cuisines,
39 |             areaname: card?.areaName,
40 |             deliverymsg: card?.feeDetails?.message,
41 |             avgrating: card?.avgRatingString,
42 |             totalratings: card?.totalRatingsString,
43 |             itemCards: cuisineDetails
44 |         })
45 |     
46 |       }
47 | 
48 |       return restaurant;
49 | }
50 | 
51 | export default useRestaurantMenu;


--------------------------------------------------------------------------------
/src/utils/userSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const userSlice = createSlice({
 4 |     name: 'user',
 5 |     initialState: {
 6 |         email: null,
 7 |     },
 8 |     reducers: {
 9 |         //set user
10 |         setUser(state, action){
11 |             state.email = action.payload;
12 |         },
13 |         clearUser(state){
14 |             state.email = null;
15 |         }
16 |     }
17 | })
18 | 
19 | export const {setUser, clearUser} = userSlice.actions;
20 | 
21 | export default userSlice.reducer;


--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
 1 | import { addItem, removeItem, assignBasicDetails } from "./cartSlice";
 2 | 
 3 | 
 4 | // Function to filter restaurants when searching.
 5 | export function filterRestaurants(searchTxt, allRestaurants) {
 6 |   if (searchTxt === "") return allRestaurants;
 7 |   const filteredData = allRestaurants.filter(
 8 |     (restaurant) => {
 9 |       return restaurant?.info?.name?.toLowerCase().includes(searchTxt?.toLowerCase())
10 |       // restaurant?.data?.data?.area?.toLowerCase().includes(searchTxt?.toLowerCase()) )
11 |     }
12 |   );
13 |   return filteredData;
14 | }
15 | 
16 | // Function to show the quantity of an item in meals page.
17 | export const findQuantity = (id, cartItems) => {
18 |   const count = cartItems?.items?.findIndex((i) => i.id === id);
19 |   if (count === undefined) return 0;
20 |   if(cartItems?.items[count]?.quantity === undefined) return 0;
21 |   return (cartItems?.items[count]?.quantity);
22 | };
23 | 
24 | // Function to be executed when add to cart is called, first checks if there's any restaurant conflict, we can't have orders from two restaurants together, then adds the meal.
25 | export const checkAvailability = (
26 |   cur_id,
27 |   menu,
28 |   cartItems,
29 |   dispatch,
30 |   myData
31 | ) => {
32 |   if (cartItems.items.length == 0) {
33 |     const details = {
34 |       resName: myData.name,
35 |       restaurant_id: myData.id,
36 |       areaname: myData.areaname,
37 |       logo: myData.logo,
38 |     };
39 | 
40 |     dispatch(assignBasicDetails(details));
41 |     addMenu(menu, dispatch);
42 |   } else {
43 |     if (cur_id != cartItems.restaurant_id) {
44 |       alert("Your Cart contains items from another Restaurant already");
45 |       return false;
46 |     } else {
47 |       addMenu(menu, dispatch);
48 |     }
49 |   }
50 |   return true;
51 | };
52 | 
53 | const addMenu = (menu, dispatch) => {
54 |   const item = { id: menu.id, name: menu.name, price: menu.price, quantity: 1 };
55 |   dispatch(addItem(item));
56 | };
57 | 
58 | //remove item from cart
59 | export const removeMenu = (menu, cartItems, dispatch) => {
60 |   const item = { id: menu.id };
61 |   dispatch(removeItem(item));
62 |   if (cartItems.items.length == 0) {
63 |     const details = { resName: "", areaname: "", logo: "" };
64 |     dispatch(assignBasicDetails(details));
65 |   }
66 | };
67 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Arvo&family=Average&display=swap');
  2 | 
  3 | 
  4 | @tailwind base;
  5 | @tailwind components;
  6 | @tailwind utilities;
  7 | 
  8 | 
  9 | 
 10 | /* @import url('https://fonts.googleapis.com/css2?family=Arvo&family=Ubuntu+Condensed&display=swap'); */
 11 | 
 12 | /* 
 13 | body{
 14 |     margin: 0;
 15 | } */
 16 | 
 17 | 
 18 | /* ----------------------------------Header --------------------------------- */
 19 | /* .header{
 20 |     display: flex;
 21 |     justify-content: space-between;
 22 |     padding: 13px;
 23 |     position: sticky;
 24 |     top: 0;
 25 |     z-index: 1; 
 26 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 27 | } */
 28 | 
 29 | /* .logo{
 30 |     width: 50px;
 31 |     height: 50px;
 32 |     overflow: hidden;
 33 |     border-radius: 50%;
 34 |     display: flex;
 35 |     justify-content: center; 
 36 | } */
 37 | /* 
 38 | img{
 39 |     max-width: 100%;
 40 |     max-height: 100%;
 41 |     object-fit: cover;
 42 | }
 43 | 
 44 | .search-bar{
 45 |     display: flex;
 46 |     align-items: center;
 47 | }
 48 | 
 49 | .search-bar > input{
 50 |     height: 35px;
 51 |     width: 300px;
 52 |     text-align: center;
 53 |     font-size: large;
 54 |     border: 2px solid #818080;
 55 |     border-radius: 4px;
 56 |     font-family: Arvo;
 57 | }
 58 | 
 59 | .nav-items{
 60 |     display: flex;
 61 |     justify-content: end;
 62 |     align-items: center;
 63 |     width: 30rem;
 64 | }
 65 | 
 66 | .nav-items > ul{
 67 |     list-style-type: none;
 68 |     display: flex;
 69 |     justify-content: space-between;
 70 |     margin: 0px;
 71 |     padding: 0px;
 72 | }
 73 | 
 74 | .nav-items > ul > li{
 75 |     font-family: Arvo;
 76 |     padding: 10px;
 77 |     font-size: large;
 78 | }
 79 | 
 80 | .authenticate{
 81 |     display: flex;
 82 |     align-items: center;
 83 | }
 84 | 
 85 | .authenticate > button{
 86 |     height: 35px;
 87 |     background-color: inherit;
 88 |     border-radius: 4px;
 89 |     font-family: Arvo;
 90 |     font-size: large;
 91 | }
 92 | 
 93 | .nav-items > ul:hover, .authenticate > button{
 94 |     cursor: pointer;
 95 | }
 96 | 
 97 | /* --------------------------------- Body----------------------------------- */
 98 | 
 99 | 
100 | /* ---------------------------- Search Bar ------------------------ */
101 | 
102 | /* 
103 | .search-container{
104 |     display: flex;
105 |     justify-content: space-evenly;
106 | } */
107 | 
108 | 
109 | 
110 | /* ----------------------------- Restaurants lists --------------------- */
111 | /* 
112 | .restaurants-lists{
113 |     display: flex;
114 |     justify-content: space-around;
115 |     flex-wrap: wrap;
116 | }
117 | 
118 | .restaurant-card{
119 |     width: 250px;
120 |     margin: 10px;
121 |     padding: 10px 5px;
122 |     transition: all 0.3s ease-in-out;
123 |     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
124 |     border-radius: 5px;
125 | }
126 | 
127 | .restaurant-card:hover{
128 |     transform: scale(1.1);
129 |     cursor: pointer;
130 | }
131 | 
132 | .restaurant-card > h3, h5{
133 |     margin: 2px;
134 | }
135 | 
136 | .restaurant-card > h3{
137 |     font-family: Arvo;
138 |     font-weight: normal;
139 | }
140 | 
141 | .not-getting-any-proper-name > div > h5{
142 |     font-family: Verdana, Geneva, Tahoma, sans-serif;
143 |     font-weight: normal;
144 |     color: #484848;
145 | }
146 | 
147 | .not-getting-any-proper-name > div{
148 |     padding: 0px 3px;
149 | }
150 | 
151 | .not-getting-any-proper-name{
152 |     display: flex;
153 |     justify-content: space-between;
154 |     align-items: center;
155 | }
156 | 
157 | .restaurant-logo{
158 |     width: 300px;
159 |     height: 157.48px;
160 |     border-radius: 5px;
161 | } */ 
162 | 
163 | /* -----------------------------------  Resaturant Menu ---------------------------------- */
164 | /* 
165 | .parent-off-all{
166 |     width: 100%;
167 | } */
168 | 
169 | /* Centering everything */
170 | /* .restaurant-information, .offers, .veg-non-veg, .cuisines-catagories{
171 |     width: 60%;
172 |     margin: 0px auto;
173 |     font-family: Arvo;
174 | } */
175 | /* 
176 | hr{
177 |     width: 60%;
178 | }
179 | 
180 | .restaurant-information{
181 |     margin-top: 20px;
182 |     display: flex;
183 |     justify-content: space-between;
184 |     align-items:baseline;
185 | }
186 | 
187 | 
188 | .personal-details > h2{
189 |     font-weight: bold;
190 |     margin-bottom: 15px;
191 | }
192 | 
193 | .personal-details > h5{
194 |     font-weight: normal;
195 |     color: #8d8d8d;
196 | }
197 | 
198 | 
199 | .rating-details{
200 |     display: flex;
201 |     flex-direction: column;
202 |     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
203 | }
204 | 
205 | .rating-details > span{
206 |     text-align: center;
207 |     border: 1px solid #d0d0d0;
208 |     padding: 5px 2px;
209 | }
210 | 
211 | .star-rating, .veg-non-veg > h4 > i{
212 |     color: green;
213 | }
214 | 
215 | 
216 | .review-count{
217 |     color: #8d8d8d;
218 |     font-size: small;
219 | }
220 | 
221 | .offers{
222 |     display: flex;
223 |     align-items: center;
224 |     overflow-x: auto;
225 |     white-space: nowrap;
226 | }
227 | 
228 | */
229 | .scrollbar-none::-webkit-scrollbar {
230 |     display: none;
231 | }
232 | 
233 | 
234 | .divs-inside-offers{
235 |     border-radius: 5px;
236 |     margin: 5px;
237 |     padding: 10px;
238 |     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
239 |     cursor: pointer;
240 |     border: 1px solid #d0d0d0;
241 | }
242 | /*
243 | 
244 | .offers > div > span{
245 |     font-size: 12px;
246 |     color: #8d8d8d;
247 | }
248 | 
249 | .veg-non-veg > h4{
250 |     margin-top: 20px;
251 |     margin-bottom: 10px;
252 |     font-weight: 600;
253 | }
254 | 
255 | .cuisines-catagories > div{
256 |     margin: 5px 0;
257 |     padding: 5px 0;
258 |     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
259 | }
260 |  */
261 | 
262 | /* -------------------------------  Cuisines category: Item card component -------------------------- */
263 | 
264 | /* 
265 | .head-category{
266 |     display: flex;
267 |     cursor: pointer;
268 | }
269 | 
270 | .head-category > h3{
271 |     text-align: center;
272 |     width: 90%;
273 | }
274 | 
275 | .head-category > p{
276 |     text-align: center;
277 |     margin: 18px 0;
278 |     width: 10%;
279 | }
280 | 
281 | .meal-details-under-body-category{
282 |     display: flex; 
283 |     padding: 5px;
284 |     align-items: center;
285 | }
286 | 
287 | 
288 | .text-details-under-body-category{
289 |     width: 80%;
290 |     margin-bottom: 10px;
291 | }
292 | .img-detail-under-body-category{
293 |     width: 20%;
294 |     text-align: center;
295 | }
296 | 
297 | .text-details-under-body-category > h4{
298 |     margin-top: 0;
299 |     margin-bottom: 8px;
300 | }
301 | 
302 | .text-details-under-body-category > h5, p{
303 |     margin: 4px 0;
304 |     font-weight: normal;
305 | }
306 | 
307 | .text-details-under-body-category > h5{
308 |     font-size: 13px;
309 |     color: #404040;
310 | }
311 | 
312 | .text-details-under-body-category > p{
313 |     font-size: 12px;
314 |     color: #8d8d8d;
315 | }
316 | 
317 | .text-details-under-body-category, .img-detail-under-body-category{
318 |     padding: 0 10px;
319 | }
320 | 
321 | .img-detail-under-body-category{
322 |     overflow: hidden;
323 | }
324 | 
325 | .img-detail-under-body-category > img{
326 |     max-width: 100%;
327 |     max-height: 100%;
328 |     object-fit: fill;
329 |     border-radius: 5px;
330 | }
331 | 
332 | .liner-under-body-category > hr{
333 |     width: 95%;
334 | } */


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./src/**/*.{html,js}",
 5 |   ],
 6 |   theme: {
 7 |     extend: {},
 8 |     fontFamily: {
 9 |       'Arvo': ['Arvo',]
10 |     }
11 |   },
12 |   plugins: [],
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------