├── .gitignore
├── README.md
├── backend
    ├── Routes
    │   └── Auth.js
    ├── db.js
    ├── index.js
    ├── middleware
    │   └── fetchdetails.js
    ├── models
    │   ├── Orders.js
    │   └── User.js
    ├── package-lock.json
    └── package.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── Modal.js
    ├── components
        ├── Card.js
        ├── Carousel.js
        ├── ContextReducer.js
        ├── Footer.js
        ├── Images
        │   ├── anna-tukhfatullina-food-photographer-stylist-Mzy-OjtCI70-unsplash.jpg
        │   ├── chad-montano-MqT0asuoIcU-unsplash.jpg
        │   ├── davide-cantelli-jpkfc5_d-DI-unsplash.jpg
        │   └── shreyak-singh-0j4bisyPo3M-unsplash.jpg
        └── Navbar.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    ├── screens
        ├── Cart.js
        ├── Home.js
        ├── Login.js
        ├── MyOrder.js
        └── Signup.js
    └── setupTests.js


/.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 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/backend/Routes/Auth.js:
--------------------------------------------------------------------------------
  1 | const express = require('express')
  2 | const User = require('../models/User')
  3 | const Order = require('../models/Orders')
  4 | const router = express.Router()
  5 | const { body, validationResult } = require('express-validator');
  6 | const bcrypt = require('bcryptjs')
  7 | var jwt = require('jsonwebtoken');
  8 | const axios = require('axios')
  9 | const fetch = require('../middleware/fetchdetails');
 10 | const jwtSecret = "HaHa"
 11 | // var foodItems= require('../index').foodData;
 12 | // require("../index")
 13 | //Creating a user and storing data to MongoDB Atlas, No Login Requiered
 14 | router.post('/createuser', [
 15 |     body('email').isEmail(),
 16 |     body('password').isLength({ min: 5 }),
 17 |     body('name').isLength({ min: 3 })
 18 | ], async (req, res) => {
 19 |     let success = false
 20 |     const errors = validationResult(req);
 21 |     if (!errors.isEmpty()) {
 22 |         return res.status(400).json({ success, errors: errors.array() })
 23 |     }
 24 |     // console.log(req.body)
 25 |     // let user = await User.findOne({email:req.body.email})
 26 |     const salt = await bcrypt.genSalt(10)
 27 |     let securePass = await bcrypt.hash(req.body.password, salt);
 28 |     try {
 29 |         await User.create({
 30 |             name: req.body.name,
 31 |             // password: req.body.password,  first write this and then use bcryptjs
 32 |             password: securePass,
 33 |             email: req.body.email,
 34 |             location: req.body.location
 35 |         }).then(user => {
 36 |             const data = {
 37 |                 user: {
 38 |                     id: user.id
 39 |                 }
 40 |             }
 41 |             const authToken = jwt.sign(data, jwtSecret);
 42 |             success = true
 43 |             res.json({ success, authToken })
 44 |         })
 45 |             .catch(err => {
 46 |                 console.log(err);
 47 |                 res.json({ error: "Please enter a unique value." })
 48 |             })
 49 |     } catch (error) {
 50 |         console.error(error.message)
 51 |     }
 52 | })
 53 | 
 54 | // Authentication a User, No login Requiered
 55 | router.post('/login', [
 56 |     body('email', "Enter a Valid Email").isEmail(),
 57 |     body('password', "Password cannot be blank").exists(),
 58 | ], async (req, res) => {
 59 |     let success = false
 60 |     const errors = validationResult(req);
 61 |     if (!errors.isEmpty()) {
 62 |         return res.status(400).json({ errors: errors.array() })
 63 |     }
 64 | 
 65 |     const { email, password } = req.body;
 66 |     try {
 67 |         let user = await User.findOne({ email });  //{email:email} === {email}
 68 |         if (!user) {
 69 |             return res.status(400).json({ success, error: "Try Logging in with correct credentials" });
 70 |         }
 71 | 
 72 |         const pwdCompare = await bcrypt.compare(password, user.password); // this return true false.
 73 |         if (!pwdCompare) {
 74 |             return res.status(400).json({ success, error: "Try Logging in with correct credentials" });
 75 |         }
 76 |         const data = {
 77 |             user: {
 78 |                 id: user.id
 79 |             }
 80 |         }
 81 |         success = true;
 82 |         const authToken = jwt.sign(data, jwtSecret);
 83 |         res.json({ success, authToken })
 84 | 
 85 | 
 86 |     } catch (error) {
 87 |         console.error(error.message)
 88 |         res.send("Server Error")
 89 |     }
 90 | })
 91 | 
 92 | // Get logged in User details, Login Required.
 93 | router.post('/getuser', fetch, async (req, res) => {
 94 |     try {
 95 |         const userId = req.user.id;
 96 |         const user = await User.findById(userId).select("-password") // -password will not pick password from db.
 97 |         res.send(user)
 98 |     } catch (error) {
 99 |         console.error(error.message)
100 |         res.send("Server Error")
101 | 
102 |     }
103 | })
104 | // Get logged in User details, Login Required.
105 | router.post('/getlocation', async (req, res) => {
106 |     try {
107 |         let lat = req.body.latlong.lat
108 |         let long = req.body.latlong.long
109 |         console.log(lat, long)
110 |         let location = await axios
111 |             .get("https://api.opencagedata.com/geocode/v1/json?q=" + lat + "+" + long + "&key=74c89b3be64946ac96d777d08b878d43")
112 |             .then(async res => {
113 |                 // console.log(`statusCode: ${res.status}`)
114 |                 console.log(res.data.results)
115 |                 // let response = stringify(res)
116 |                 // response = await JSON.parse(response)
117 |                 let response = res.data.results[0].components;
118 |                 console.log(response)
119 |                 let { village, county, state_district, state, postcode } = response
120 |                 return String(village + "," + county + "," + state_district + "," + state + "\n" + postcode)
121 |             })
122 |             .catch(error => {
123 |                 console.error(error)
124 |             })
125 |         res.send({ location })
126 | 
127 |     } catch (error) {
128 |         console.error(error.message)
129 |         res.send("Server Error")
130 | 
131 |     }
132 | })
133 | router.post('/foodData', async (req, res) => {
134 |     try {
135 |         // console.log( JSON.stringify(global.foodData))
136 |         // const userId = req.user.id;
137 |         // await database.listCollections({name:"food_items"}).find({});
138 |         res.send([global.foodData, global.foodCategory])
139 |     } catch (error) {
140 |         console.error(error.message)
141 |         res.send("Server Error")
142 | 
143 |     }
144 | })
145 | 
146 | router.post('/orderData', async (req, res) => {
147 |     let data = req.body.order_data
148 |     await data.splice(0,0,{Order_date:req.body.order_date})
149 |     console.log("1231242343242354",req.body.email)
150 | 
151 |     //if email not exisitng in db then create: else: InsertMany()
152 |     let eId = await Order.findOne({ 'email': req.body.email })    
153 |     console.log(eId)
154 |     if (eId===null) {
155 |         try {
156 |             console.log(data)
157 |             console.log("1231242343242354",req.body.email)
158 |             await Order.create({
159 |                 email: req.body.email,
160 |                 order_data:[data]
161 |             }).then(() => {
162 |                 res.json({ success: true })
163 |             })
164 |         } catch (error) {
165 |             console.log(error.message)
166 |             res.send("Server Error", error.message)
167 | 
168 |         }
169 |     }
170 | 
171 |     else {
172 |         try {
173 |             await Order.findOneAndUpdate({email:req.body.email},
174 |                 { $push:{order_data: data} }).then(() => {
175 |                     res.json({ success: true })
176 |                 })
177 |         } catch (error) {
178 |             console.log(error.message)
179 |             res.send("Server Error", error.message)
180 |         }
181 |     }
182 | })
183 | 
184 | router.post('/myOrderData', async (req, res) => {
185 |     try {
186 |         console.log(req.body.email)
187 |         let eId = await Order.findOne({ 'email': req.body.email })
188 |         //console.log(eId)
189 |         res.json({orderData:eId})
190 |     } catch (error) {
191 |         res.send("Error",error.message)
192 |     }
193 |     
194 | 
195 | });
196 | 
197 | module.exports = router


--------------------------------------------------------------------------------
/backend/db.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | // const mongoDbClient = require("mongodb").MongoClient
 3 | const mongoURI = 'mongodb://<!#@!#@>:"!@!@"@mernclustedsfhcbshdbf$##################,merncluster-shard-00-01.d1d4z.mongodb.net:27017,merncluster-shard-00-02.d1d4z.mongodb.net:27017/Customer?ssl=true&replicaSet=atlas-eusy5p-shard-0&authSource=admin&retryWrites=true&w=majority' // Customer change url to your db you created in atlas
 4 | 
 5 | module.exports = function (callback) {
 6 |     mongoose.connect(mongoURI, { useNewUrlParser: true }, async (err, result) => {
 7 |         // mongoDbClient.connect(mongoURI, { useNewUrlParser: true }, async(err, result) => {
 8 |         if (err) console.log("---" + err)
 9 |         else {
10 |             // var database =
11 |             console.log("connected to mongo")
12 |             const foodCollection = await mongoose.connection.db.collection("food_items");
13 |             foodCollection.find({}).toArray(async function (err, data) {
14 |                 const categoryCollection = await mongoose.connection.db.collection("Categories");
15 |                 categoryCollection.find({}).toArray(async function (err, Catdata) {
16 |                     callback(err, data, Catdata);
17 | 
18 |                 })
19 |             });
20 |             // listCollections({name: 'food_items'}).toArray(function (err, database) {
21 |             // });
22 |             //     module.exports.Collection = database;
23 |             // });
24 |         }
25 |     })
26 | };
27 | 


--------------------------------------------------------------------------------
/backend/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | global.foodData = require('./db')(function call(err, data, CatData) {
 3 |   // console.log(data)
 4 |   if(err) console.log(err);
 5 |   global.foodData = data;
 6 |   global.foodCategory = CatData;
 7 | })
 8 | 
 9 | const express = require('express')
10 | const app = express()
11 | const port = 5000
12 | app.use((req, res, next) => {
13 |   res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
14 |   res.header(
15 |     "Access-Control-Allow-Headers",
16 |     "Origin, X-Requested-With, Content-Type, Accept"
17 |   );
18 |   next();
19 | });
20 | app.use(express.json())
21 | 
22 | app.get('/', (req, res) => {
23 |   res.send('Hello World!')
24 | })
25 | 
26 | app.use('/api/auth', require('./Routes/Auth'));
27 | 
28 | app.listen(port, () => {
29 |   console.log(`Example app listening on http://localhost:${port}`)
30 | })
31 | 
32 | 


--------------------------------------------------------------------------------
/backend/middleware/fetchdetails.js:
--------------------------------------------------------------------------------
 1 | var jwt = require('jsonwebtoken');
 2 | const jwtSecret = "HaHa"
 3 | const fetch = (req,res,next)=>{
 4 |     // get the user from the jwt token and add id to req object
 5 |     const token = req.header('auth-token');
 6 |     if(!token){
 7 |         res.status(401).send({error:"Invalid Auth Token"})
 8 | 
 9 |     }
10 |     try {
11 |         const data = jwt.verify(token,jwtSecret);
12 |         req.user = data.user
13 |         next();
14 |         
15 |     } catch (error) {
16 |         res.status(401).send({error:"Invalid Auth Token"})
17 |     }
18 | 
19 | }
20 | module.exports = fetch


--------------------------------------------------------------------------------
/backend/models/Orders.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | 
 3 | const { Schema } = mongoose;
 4 | 
 5 | const OrderSchema = new Schema({
 6 |     email: {
 7 |         type: String,
 8 |         required: true,
 9 |         unique: true
10 |     },
11 |     order_data: {
12 |         type: Array,
13 |         required: true,
14 |     },
15 | 
16 | });
17 | 
18 | module.exports = mongoose.model('order', OrderSchema)


--------------------------------------------------------------------------------
/backend/models/User.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | 
 3 | const { Schema } = mongoose;
 4 | 
 5 | const UserSchema = new Schema({
 6 |     name:{
 7 |         type:String,
 8 |         required:true
 9 |     },
10 |     location:{
11 |         type:String,
12 |         required:true,
13 |     },
14 |     email:{
15 |         type:String,
16 |         required:true,
17 |         unique:true
18 |     },
19 |     password:{
20 |         type:String,
21 |         required:true
22 |     },
23 |     date:{
24 |         type:Date,
25 |         default:Date.now
26 |     },
27 | 
28 |   });
29 | 
30 |   module.exports = mongoose.model('user',UserSchema)


--------------------------------------------------------------------------------
/backend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mern-backend",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "Arshdeep Singh",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "axios": "^0.27.2",
13 |     "bcryptjs": "^2.4.3",
14 |     "express": "^4.18.1",
15 |     "express-validator": "^6.14.0",
16 |     "json-stringify-safe": "^5.0.1",
17 |     "jsonwebtoken": "^8.5.1",
18 |     "mongoose": "^6.3.2"
19 |   },
20 |   "devDependencies": {
21 |     "nodemon": "^2.0.16"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mernapp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^4.12.4",
 7 |     "@material-ui/icons": "^4.11.3",
 8 |     "@testing-library/jest-dom": "^5.16.4",
 9 |     "@testing-library/react": "^13.1.1",
10 |     "@testing-library/user-event": "^13.5.0",
11 |     "bootstrap": "^5.1.3",
12 |     "bootstrap-dark-5": "^1.1.3",
13 |     "express-validator": "^6.14.0",
14 |     "react": "^18.0.0",
15 |     "react-bootstrap": "^2.4.0",
16 |     "react-dom": "^18.0.0",
17 |     "react-router-dom": "^6.3.0",
18 |     "react-scripts": "5.0.1",
19 |     "web-vitals": "^2.1.4"
20 |   },
21 |   "scripts": {
22 |     "start": "react-scripts start",
23 |     "build": "react-scripts build",
24 |     "test": "react-scripts test",
25 |     "eject": "react-scripts eject"
26 |   },
27 |   "eslintConfig": {
28 |     "extends": [
29 |       "react-app",
30 |       "react-app/jest"
31 |     ]
32 |   },
33 |   "browserslist": {
34 |     "production": [
35 |       ">0.2%",
36 |       "not dead",
37 |       "not op_mini all"
38 |     ],
39 |     "development": [
40 |       "last 1 chrome version",
41 |       "last 1 firefox version",
42 |       "last 1 safari version"
43 |     ]
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshdeepsingh2267/Gofood/eac9d535dc5c7057234d93eb985c75e013fb39db/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <link href="../src/index.css" rel="stylesheet">
19 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.min.css" rel="stylesheet">
20 |     <link href="//db.onlinewebfonts.com/c/f21923cb0f60b46d41a66875255790b3?family=NHaasGroteskDSPro-65Md"
21 |     rel="stylesheet" type="text/css" />
22 |     <!--
23 |       Notice the use of %PUBLIC_URL% in the tags above.
24 |       It will be replaced with the URL of the `public` folder during the build.
25 |       Only files inside the `public` folder can be referenced from the HTML.
26 | 
27 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
28 |       work correctly both with client-side routing and a non-root public URL.
29 |       Learn how to configure a non-root public URL by running `npm run build`.
30 |     -->
31 |     <title>React App</title>
32 |   </head>
33 |   <body >
34 |     <noscript>You need to enable JavaScript to run this app.</noscript>
35 |     <div id="cart-root"></div>
36 |     <div id="root"></div>
37 |     <!--
38 |       This HTML file is a template.
39 |       If you open it directly in the browser, you will see an empty page.
40 | 
41 |       You can add webfonts, meta tags, or analytics to this file.
42 |       The build step will place the bundled scripts into the <body> tag.
43 | 
44 |       To begin the development, run `npm start` or `yarn start`.
45 |       To create a production bundle, use `npm run build` or `yarn build`.
46 |     -->
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshdeepsingh2267/Gofood/eac9d535dc5c7057234d93eb985c75e013fb39db/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshdeepsingh2267/Gofood/eac9d535dc5c7057234d93eb985c75e013fb39db/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import '../node_modules/bootstrap-dark-5/dist/css/bootstrap-dark.min.css'  //npm i bootstrap-dark-5 boostrap
 3 | import '../node_modules/bootstrap/dist/js/bootstrap.bundle';
 4 | import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
 5 | 
 6 | import Home from './screens/Home';
 7 | import {
 8 |   BrowserRouter as Router,
 9 |   Routes,
10 |   Route
11 | } from "react-router-dom";
12 | // import Navbar from './components/Navbar';
13 | import Login from './screens/Login';
14 | import Signup from './screens/Signup';
15 | import { CartProvider } from './components/ContextReducer';
16 | import MyOrder from './screens/MyOrder';
17 | 
18 | 
19 | function App() {
20 |   return (
21 |     <CartProvider>
22 |       <Router>
23 |         <div>
24 |           <Routes>
25 |             <Route exact path="/" element={<Home />} />
26 |             <Route exact path="/login" element={<Login />} />
27 |             <Route exact path="/signup" element={<Signup />} />
28 |             <Route exact path="/myorder" element={<MyOrder />} />
29 |           </Routes>
30 |         </div>
31 |       </Router>
32 |     </CartProvider>
33 |   );
34 | }
35 | 
36 | export default App;
37 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/Modal.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDom from 'react-dom'
 3 | 
 4 | const MODAL_STYLES = {
 5 |   position: 'fixed',
 6 |   top: '50%',
 7 |   left: '50%',
 8 |   backgroundColor: 'rgb(34,34,34)',
 9 |   transform: 'translate(-50%, -50%)',
10 |   zIndex: 1000,
11 |   height: '90%',
12 |   width: '90%'
13 | }
14 | 
15 | const OVERLAY_STYLES = {
16 |   position: 'fixed',
17 |   top: 0,
18 |   left: 0,
19 |   right: 0,
20 |   bottom: 0,
21 |   backgroundColor: 'rgba(0, 0, 0, .7)',
22 |   zIndex: 1000
23 | }
24 | 
25 | export default function Modal({ children, onClose }) {
26 | 
27 |   return ReactDom.createPortal(
28 |     <>
29 |       <div style={OVERLAY_STYLES} />
30 |       <div style={MODAL_STYLES}>
31 |         <button className='btn bg-danger fs-4' style={{ marginLeft: "90%", marginTop: "-35px" }} onClick={onClose}> X </button>
32 |         {children}
33 |       </div>
34 |     </>,
35 |     document.getElementById('cart-root')
36 |   )
37 | }


--------------------------------------------------------------------------------
/src/components/Card.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import React, { useState, useRef, useEffect } from 'react'
  3 | import { useNavigate } from 'react-router-dom'
  4 | import { useDispatchCart, useCart } from './ContextReducer'
  5 | // import { Dropdown, DropdownButton } from 'react-bootstrap';
  6 | export default function Card(props) {
  7 |   let data = useCart();
  8 | 
  9 |   let navigate = useNavigate()
 10 |   const [qty, setQty] = useState(1)
 11 |   const [size, setSize] = useState("")
 12 |   const priceRef = useRef();
 13 |   // const [btnEnable, setBtnEnable] = useState(false);
 14 |   // let totval = 0
 15 |   // let price = Object.values(options).map((value) => {
 16 |   //   return parseInt(value, 10);
 17 |   // });
 18 |   let options = props.options;
 19 |   let priceOptions = Object.keys(options);
 20 |   let foodItem = props.item;
 21 |   const dispatch = useDispatchCart();
 22 |   const handleClick = () => {
 23 |     if (!localStorage.getItem("token")) {
 24 |       navigate("/login")
 25 |     }
 26 |   }
 27 |   const handleQty = (e) => {
 28 |     setQty(e.target.value);
 29 |   }
 30 |   const handleOptions = (e) => {
 31 |     setSize(e.target.value);
 32 |   }
 33 |   const handleAddToCart = async () => {
 34 |     let food = []
 35 |     for (const item of data) {
 36 |       if (item.id === foodItem._id) {
 37 |         food = item;
 38 | 
 39 |         break;
 40 |       }
 41 |     }
 42 |     console.log(food)
 43 |     console.log(new Date())
 44 |     if (food !== []) {
 45 |       if (food.size === size) {
 46 |         await dispatch({ type: "UPDATE", id: foodItem._id, price: finalPrice, qty: qty })
 47 |         return
 48 |       }
 49 |       else if (food.size !== size) {
 50 |         await dispatch({ type: "ADD", id: foodItem._id, name: foodItem.name, price: finalPrice, qty: qty, size: size,img: props.ImgSrc })
 51 |         console.log("Size different so simply ADD one more to the list")
 52 |         return
 53 |       }
 54 |       return
 55 |     }
 56 | 
 57 |     await dispatch({ type: "ADD", id: foodItem._id, name: foodItem.name, price: finalPrice, qty: qty, size: size })
 58 | 
 59 | 
 60 |     // setBtnEnable(true)
 61 | 
 62 |   }
 63 | 
 64 |   useEffect(() => {
 65 |     setSize(priceRef.current.value)
 66 |   }, [])
 67 | 
 68 |   // useEffect(()=>{
 69 |   // checkBtn();
 70 |   //   },[data])
 71 | 
 72 |   let finalPrice = qty * parseInt(options[size]);   //This is where Price is changing
 73 |   // totval += finalPrice;
 74 |   // console.log(totval)
 75 |   return (
 76 |     <div>
 77 | 
 78 |       <div className="card mt-3" style={{ width: "16rem", maxHeight: "360px" }}>
 79 |         <img src={props.ImgSrc} className="card-img-top" alt="..." style={{ height: "120px", objectFit: "fill" }} />
 80 |         <div className="card-body">
 81 |           <h5 className="card-title">{props.foodName}</h5>
 82 |           {/* <p className="card-text">This is some random text. This is description.</p> */}
 83 |           <div className='container w-100 p-0' style={{ height: "38px" }}>
 84 |             <select className="m-2 h-100 w-20 bg-success text-black rounded" style={{ select: "#FF0000" }} onClick={handleClick} onChange={handleQty}>
 85 |               {Array.from(Array(6), (e, i) => {
 86 |                 return (
 87 |                   <option key={i + 1} value={i + 1}>{i + 1}</option>)
 88 |               })}
 89 |             </select>
 90 |             <select className="m-2 h-100 w-20 bg-success text-black rounded" style={{ select: "#FF0000" }} ref={priceRef} onClick={handleClick} onChange={handleOptions}>
 91 |               {priceOptions.map((i) => {
 92 |                 return <option key={i} value={i}>{i}</option>
 93 |               })}
 94 |             </select>
 95 |             <div className=' d-inline ms-2 h-100 w-20 fs-5' >
 96 |               ₹{finalPrice}/-
 97 |             </div>
 98 |           </div>
 99 |           <hr></hr>
100 |           <button className={`btn btn-success justify-center ms-2 `} onClick={handleAddToCart}>Add to Cart</button>
101 |           {/* <button className={`btn btn-danger justify-center ms-2 ${btnEnable ? "" : "disabled"}`} onClick={handleRemoveCart}>Remove</button> */}
102 |         </div>
103 |       </div>
104 |     </div>
105 |   )
106 | }
107 | //


--------------------------------------------------------------------------------
/src/components/Carousel.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function Carousel() {
 4 |     return (
 5 |         <div>
 6 | 
 7 |             <div id="carouselExampleFade" className="carousel slide carousel-fade " data-bs-ride="carousel">
 8 | 
 9 |                 <div className="carousel-inner " id='carousel'>
10 |                     <div class=" carousel-caption  " style={{ zIndex: "9" }}>
11 |                         <form className=" d-flex justify-content-center">  {/* justify-content-center, copy this <form> from navbar for search box */}
12 |                             <input className="form-control me-2 w-75 bg-white text-dark" type="search" placeholder="Type in..." aria-label="Search" />
13 |                             <button className="btn text-white bg-success" type="submit">Search</button>
14 |                         </form>
15 |                     </div>
16 |                     <div className="carousel-item active" >
17 |                         <img src="https://source.unsplash.com/random/900x700/?burger" className="d-block w-100  " style={{ filter: "brightness(30%)" }} alt="..." />
18 |                     </div>
19 |                     <div className="carousel-item">
20 |                         <img src="https://source.unsplash.com/random/900x700/?pastry" className="d-block w-100 " style={{ filter: "brightness(30%)" }} alt="..." />
21 |                     </div>
22 |                     <div className="carousel-item">
23 |                         <img src="https://source.unsplash.com/random/900x700/?barbeque" className="d-block w-100 " style={{ filter: "brightness(30%)" }} alt="..." />
24 |                     </div>
25 |                 </div>
26 |                 <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
27 |                     <span className="carousel-control-prev-icon" aria-hidden="true"></span>
28 |                     <span className="visually-hidden">Previous</span>
29 |                 </button>
30 |                 <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
31 |                     <span className="carousel-control-next-icon" aria-hidden="true"></span>
32 |                     <span className="visually-hidden">Next</span>
33 |                 </button>
34 |             </div>
35 | 
36 | 
37 |         </div>
38 |     )
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/ContextReducer.js:
--------------------------------------------------------------------------------
 1 | import React, { useReducer, useContext, createContext } from 'react';
 2 | 
 3 | const CartStateContext = createContext();
 4 | const CartDispatchContext = createContext();
 5 | 
 6 | const reducer = (state, action) => {
 7 |     switch (action.type) {
 8 |         case "ADD":
 9 |             return [...state, { id: action.id, name: action.name, qty: action.qty, size: action.size, price: action.price, img: action.img }]
10 |         case "REMOVE":
11 |             let newArr = [...state]
12 |             newArr.splice(action.index, 1)
13 |             return newArr;
14 |         case "DROP":
15 |             let empArray = []
16 |             return empArray
17 |         case "UPDATE":
18 |             let arr = [...state]
19 |             arr.find((food, index) => {
20 |                 if (food.id === action.id) {
21 |                     console.log(food.qty, parseInt(action.qty), action.price + food.price)
22 |                     arr[index] = { ...food, qty: parseInt(action.qty) + food.qty, price: action.price + food.price }
23 |                 }
24 |                 return arr
25 |             })
26 |             return arr
27 |         default:
28 |             console.log("Error in Reducer");
29 |     }
30 | };
31 | 
32 | export const CartProvider = ({ children }) => {
33 |     const [state, dispatch] = useReducer(reducer, []);
34 | 
35 |     return (
36 |         <CartDispatchContext.Provider value={dispatch}>
37 |             <CartStateContext.Provider value={state}>
38 |                 {children}
39 |             </CartStateContext.Provider>
40 |         </CartDispatchContext.Provider>
41 |     )
42 | };
43 | 
44 | export const useCart = () => useContext(CartStateContext);
45 | export const useDispatchCart = () => useContext(CartDispatchContext);


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function Footer() {
 4 |   return (
 5 |     <div><div className="container">
 6 |     <footer className="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
 7 |       <div className="col-md-4 d-flex align-items-center">
 8 |         <a href="/" className="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
 9 |         </a>
10 |         <span className="text-muted">© 2022 <i>GoFood</i>, Inc</span>
11 |       </div>
12 |   
13 |       <ul className="nav col-md-4 justify-content-end list-unstyled d-flex">
14 |         <li className="ms-3"><a className="text-muted" href="/"><svg className="bi" width="24" height="24"><use ></use></svg></a></li>
15 |         <li className="ms-3"><a className="text-muted" href="/"><svg className="bi" width="24" height="24"><use ></use></svg></a></li>
16 |         <li className="ms-3"><a className="text-muted" href="/"><svg className="bi" width="24" height="24"><use></use></svg></a></li>
17 |       </ul>
18 |     </footer>
19 |   </div>
20 |   </div>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/Images/anna-tukhfatullina-food-photographer-stylist-Mzy-OjtCI70-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshdeepsingh2267/Gofood/eac9d535dc5c7057234d93eb985c75e013fb39db/src/components/Images/anna-tukhfatullina-food-photographer-stylist-Mzy-OjtCI70-unsplash.jpg


--------------------------------------------------------------------------------
/src/components/Images/chad-montano-MqT0asuoIcU-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshdeepsingh2267/Gofood/eac9d535dc5c7057234d93eb985c75e013fb39db/src/components/Images/chad-montano-MqT0asuoIcU-unsplash.jpg


--------------------------------------------------------------------------------
/src/components/Images/davide-cantelli-jpkfc5_d-DI-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshdeepsingh2267/Gofood/eac9d535dc5c7057234d93eb985c75e013fb39db/src/components/Images/davide-cantelli-jpkfc5_d-DI-unsplash.jpg


--------------------------------------------------------------------------------
/src/components/Images/shreyak-singh-0j4bisyPo3M-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshdeepsingh2267/Gofood/eac9d535dc5c7057234d93eb985c75e013fb39db/src/components/Images/shreyak-singh-0j4bisyPo3M-unsplash.jpg


--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable react/jsx-no-undef */
 2 | 
 3 | import React, { useState } from 'react'
 4 | import { Link, useNavigate } from "react-router-dom";
 5 | import Badge from "@material-ui/core/Badge";
 6 | import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
 7 | import { useCart } from './ContextReducer';
 8 | import Modal from '../Modal';
 9 | import Cart from '../screens/Cart';
10 | export default function Navbar(props) {
11 | 
12 |     const [cartView, setCartView] = useState(false)
13 |     localStorage.setItem('temp', "first")
14 |     let navigate = useNavigate();
15 |     const handleLogout = () => {
16 |         localStorage.removeItem('token')
17 | 
18 |         navigate("/login")
19 |     }
20 | 
21 |     const loadCart = () => {
22 |         setCartView(true)
23 |     }
24 | 
25 |     const items = useCart();
26 |     return (
27 |         <div>
28 |             <nav className="navbar navbar-expand-lg navbar-dark bg-success position-sticky"
29 |                 style={{ boxShadow: "0px 10px 20px black", filter: 'blur(20)', position: "fixed", zIndex: "10", width: "100%" }}>
30 |                 <div className="container-fluid">
31 |                     <Link className="navbar-brand fs-1 fst-italic" to="/">GoFood</Link>
32 |                     <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
33 |                         <span className="navbar-toggler-icon"></span>
34 |                     </button>
35 |                     <div className="collapse navbar-collapse" id="navbarSupportedContent">
36 |                         <ul className="navbar-nav me-auto mb-2 mb-lg-0">
37 |                             <li className="nav-item">
38 |                                 <Link className="nav-link fs-5 mx-3 active" aria-current="page" to="/">Home</Link>  {/* index.css - nav-link color white */}
39 |                             </li>
40 |                             {(localStorage.getItem("token")) ?
41 |                                 <li className="nav-item">
42 |                                     <Link className="nav-link fs-5 mx-3 active" aria-current="page" to="/myorder" >My Orders</Link>  {/* index.css - nav-link color white */}
43 |                                 </li> : ""}
44 |                         </ul>
45 |                         {(!localStorage.getItem("token")) ?
46 |                             <form className="d-flex">
47 |                                 <Link className="btn bg-white text-success mx-1 " to="/login">Login</Link>
48 |                                 <Link className="btn bg-white text-success mx-1" to="/signup">Signup</Link>
49 |                             </form> :
50 |                             <div>
51 | 
52 |                                 <div className="btn bg-white text-success mx-2 " onClick={loadCart}>
53 |                                     <Badge color="secondary" badgeContent={items.length} >
54 |                                         <ShoppingCartIcon />
55 |                                     </Badge>
56 |                                     Cart
57 |                                 </div>
58 | 
59 |                                 {cartView ? <Modal onClose={() => setCartView(false)}><Cart></Cart></Modal> : ""}
60 | 
61 |                                 <button onClick={handleLogout} className="btn bg-white text-success" >Logout</button></div>}
62 |                     </div>
63 |                 </div>
64 |             </nav>
65 |         </div>
66 |     )
67 | }
68 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body {
 3 |   margin: 0;
 4 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 5 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 6 |     sans-serif;
 7 |   -webkit-font-smoothing: antialiased;
 8 |   -moz-osx-font-smoothing: grayscale;
 9 |   font-family: 'NHaasGroteskDSPro-65Md' !important;
10 | }
11 | 
12 | code {
13 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
14 |     monospace;
15 | }
16 | 
17 | 
18 | .nav-link{
19 |   color: white !important;
20 | }
21 | #carousel{
22 |   max-height: 500px;
23 | }
24 | .carousalImg{
25 |   object-fit: contain !important;
26 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | import reportWebVitals from './reportWebVitals';
 7 | 
 8 | 
 9 | 
10 | const root = ReactDOM.createRoot(document.getElementById('root'));
11 | root.render(
12 |   <React.StrictMode>
13 |       <App />
14 |   </React.StrictMode>
15 | );
16 | 
17 | // If you want to start measuring performance in your app, pass a function
18 | // to log results (for example: reportWebVitals(console.log))
19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
20 | reportWebVitals();
21 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/screens/Cart.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Delete from '@material-ui/icons/Delete'
 3 | import { useCart, useDispatchCart } from '../components/ContextReducer';
 4 | export default function Cart() {
 5 |   let data = useCart();
 6 |   let dispatch = useDispatchCart();
 7 |   if (data.length === 0) {
 8 |     return (
 9 |       <div>
10 |         <div className='m-5 w-100 text-center fs-3'>The Cart is Empty!</div>
11 |       </div>
12 |     )
13 |   }
14 |   // const handleRemove = (index)=>{
15 |   //   console.log(index)
16 |   //   dispatch({type:"REMOVE",index:index})
17 |   // }
18 | 
19 |   const handleCheckOut = async () => {
20 |     let userEmail = localStorage.getItem("userEmail");
21 |     // console.log(data,localStorage.getItem("userEmail"),new Date())
22 |     let response = await fetch("http://localhost:5000/api/auth/orderData", {
23 |       // credentials: 'include',
24 |       // Origin:"http://localhost:3000/login",
25 |       method: 'POST',
26 |       headers: {
27 |         'Content-Type': 'application/json'
28 |       },
29 |       body: JSON.stringify({
30 |         order_data: data,
31 |         email: userEmail,
32 |         order_date: new Date().toDateString()
33 |       })
34 |     });
35 |     console.log("JSON RESPONSE:::::", response.status)
36 |     if (response.status === 200) {
37 |       dispatch({ type: "DROP" })
38 |     }
39 |   }
40 | 
41 |   let totalPrice = data.reduce((total, food) => total + food.price, 0)
42 |   return (
43 |     <div>
44 | 
45 |       {console.log(data)}
46 |       <div className='container m-auto mt-5 table-responsive  table-responsive-sm table-responsive-md' >
47 |         <table className='table table-hover '>
48 |           <thead className=' text-success fs-4'>
49 |             <tr>
50 |               <th scope='col' >#</th>
51 |               <th scope='col' >Name</th>
52 |               <th scope='col' >Quantity</th>
53 |               <th scope='col' >Option</th>
54 |               <th scope='col' >Amount</th>
55 |               <th scope='col' ></th>
56 |             </tr>
57 |           </thead>
58 |           <tbody>
59 |             {data.map((food, index) => (
60 |               <tr>
61 |                 <th scope='row' >{index + 1}</th>
62 |                 <td >{food.name}</td>
63 |                 <td>{food.qty}</td>
64 |                 <td>{food.size}</td>
65 |                 <td>{food.price}</td>
66 |                 <td ><button type="button" className="btn p-0"><Delete onClick={() => { dispatch({ type: "REMOVE", index: index }) }} /></button> </td></tr>
67 |             ))}
68 |           </tbody>
69 |         </table>
70 |         <div><h1 className='fs-2'>Total Price: {totalPrice}/-</h1></div>
71 |         <div>
72 |           <button className='btn bg-success mt-5 ' onClick={handleCheckOut} > Check Out </button>
73 |         </div>
74 |       </div>
75 | 
76 | 
77 | 
78 |     </div>
79 |   )
80 | }
81 | 


--------------------------------------------------------------------------------
/src/screens/Home.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import Card from '../components/Card'
  3 | // import Carousel from '../components/Carousel'
  4 | import Footer from '../components/Footer'
  5 | import Navbar from '../components/Navbar'
  6 | export default function Home() {
  7 |   const [foodCat, setFoodCat] = useState([])
  8 |   const [foodItems, setFoodItems] = useState([])
  9 |   const [search, setSearch] = useState('')
 10 |   const loadFoodItems = async () => {
 11 |     let response = await fetch("http://localhost:5000/api/auth/foodData", {
 12 |       // credentials: 'include',
 13 |       // Origin:"http://localhost:3000/login",
 14 |       method: 'POST',
 15 |       headers: {
 16 |         'Content-Type': 'application/json'
 17 |       }
 18 | 
 19 |     });
 20 |     response = await response.json()
 21 |     // console.log(response[1][0].CategoryName)
 22 |     setFoodItems(response[0])
 23 |     setFoodCat(response[1])
 24 |   }
 25 | 
 26 |   useEffect(() => {
 27 |     loadFoodItems()
 28 |   }, [])
 29 | 
 30 |   return (
 31 |     <div >
 32 |       <div>
 33 |         <Navbar />
 34 |       </div>
 35 |       <div>
 36 |         <div id="carouselExampleFade" className="carousel slide carousel-fade " data-bs-ride="carousel">
 37 | 
 38 |           <div className="carousel-inner " id='carousel'>
 39 |             <div class=" carousel-caption  " style={{ zIndex: "9" }}>
 40 |               <div className=" d-flex justify-content-center">  {/* justify-content-center, copy this <form> from navbar for search box */}
 41 |                 <input className="form-control me-2 w-75 bg-white text-dark" type="search" placeholder="Search in here..." aria-label="Search" value={search} onChange={(e) => { setSearch(e.target.value) }} />
 42 |                 <button className="btn text-white bg-danger" onClick={() => { setSearch('') }}>X</button>
 43 |               </div>
 44 |             </div>
 45 |             <div className="carousel-item active" >
 46 |               <img src="https://source.unsplash.com/random/900x700/?burger" className="d-block w-100  " style={{ filter: "brightness(30%)" }} alt="..." />
 47 |             </div>
 48 |             <div className="carousel-item">
 49 |               <img src="https://source.unsplash.com/random/900x700/?pastry" className="d-block w-100 " style={{ filter: "brightness(30%)" }} alt="..." />
 50 |             </div>
 51 |             <div className="carousel-item">
 52 |               <img src="https://source.unsplash.com/random/900x700/?barbeque" className="d-block w-100 " style={{ filter: "brightness(30%)" }} alt="..." />
 53 |             </div>
 54 |           </div>
 55 |           <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
 56 |             <span className="carousel-control-prev-icon" aria-hidden="true"></span>
 57 |             <span className="visually-hidden">Previous</span>
 58 |           </button>
 59 |           <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
 60 |             <span className="carousel-control-next-icon" aria-hidden="true"></span>
 61 |             <span className="visually-hidden">Next</span>
 62 |           </button>
 63 |         </div>
 64 |       </div>
 65 |       <div className='container'> {/* boootstrap is mobile first */}
 66 |         {
 67 |           foodCat !== []
 68 |             ? foodCat.map((data) => {
 69 |               return (
 70 |                 // justify-content-center
 71 |                 <div className='row mb-3'>
 72 |                   <div key={data.id} className='fs-3 m-3'>
 73 |                     {data.CategoryName}
 74 |                   </div>
 75 |                   <hr id="hr-success" style={{ height: "4px", backgroundImage: "-webkit-linear-gradient(left,rgb(0, 255, 137),rgb(0, 0, 0))" }} />
 76 |                   {foodItems !== [] ? foodItems.filter(
 77 |                     (items) => (items.CategoryName === data.CategoryName) && (items.name.toLowerCase().includes(search.toLowerCase())))
 78 |                     .map(filterItems => {
 79 |                       return (
 80 |                         <div key={filterItems.id} className='col-12 col-md-6 col-lg-3'>
 81 |                           {console.log(filterItems.url)}
 82 |                           <Card foodName={filterItems.name} item={filterItems} options={filterItems.options[0]} ImgSrc={filterItems.img} ></Card>
 83 |                         </div>
 84 |                       )
 85 |                     }) : <div> No Such Data </div>}
 86 |                 </div>
 87 |               )
 88 |             })
 89 |             : ""}
 90 |       </div>
 91 |       <Footer />
 92 |     </div>
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 | 
101 | 
102 |   )
103 | }
104 | 


--------------------------------------------------------------------------------
/src/screens/Login.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import Navbar from '../components/Navbar';
 3 | import { useNavigate, Link } from 'react-router-dom'
 4 | export default function Login() {
 5 |   const [credentials, setCredentials] = useState({ email: "", password: "" })
 6 |   let navigate = useNavigate()
 7 | 
 8 |   const handleSubmit = async (e) => {
 9 |     e.preventDefault();
10 |     const response = await fetch("http://localhost:5000/api/auth/login", {
11 |       // credentials: 'include',
12 |       // Origin:"http://localhost:3000/login",
13 |       method: 'POST',
14 |       headers: {
15 |         'Content-Type': 'application/json'
16 |       },
17 |       body: JSON.stringify({ email: credentials.email, password: credentials.password })
18 | 
19 |     });
20 |     const json = await response.json()
21 |     console.log(json);
22 |     if (json.success) {
23 |       //save the auth toke to local storage and redirect
24 |       localStorage.setItem('userEmail', credentials.email)
25 |       localStorage.setItem('token', json.authToken)
26 |       navigate("/");
27 | 
28 |     }
29 |     else {
30 |       alert("Enter Valid Credentials")
31 |     }
32 |   }
33 | 
34 |   const onChange = (e) => {
35 |     setCredentials({ ...credentials, [e.target.name]: e.target.value })
36 |   }
37 | 
38 |   return (
39 |     <div style={{backgroundImage: 'url("https://images.pexels.com/photos/326278/pexels-photo-326278.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1")', height: '100vh', backgroundSize: 'cover' }}>
40 |       <div>
41 |         <Navbar />
42 |       </div>
43 |       <div className='container'>
44 |         <form className='w-50 m-auto mt-5 border bg-dark border-success rounded' onSubmit={handleSubmit}>
45 |           <div className="m-3">
46 |             <label htmlFor="exampleInputEmail1" className="form-label">Email address</label>
47 |             <input type="email" className="form-control" name='email' value={credentials.email} onChange={onChange} aria-describedby="emailHelp" />
48 |             <div id="emailHelp" className="form-text">We'll never share your email with anyone.</div>
49 |           </div>
50 |           <div className="m-3">
51 |             <label htmlFor="exampleInputPassword1" className="form-label">Password</label>
52 |             <input type="password" className="form-control" value={credentials.password} onChange={onChange} name='password' />
53 |           </div>
54 |           <button type="submit" className="m-3 btn btn-success">Submit</button>
55 |           <Link to="/signup" className="m-3 mx-1 btn btn-danger">New User</Link>
56 |         </form>
57 | 
58 |       </div>
59 |     </div>
60 |   )
61 | }
62 | 
63 | 
64 | // , 'Accept': 'application/json',
65 | //         'Access-Control-Allow-Origin': 'http://localhost:3000/login', 'Access-Control-Allow-Credentials': 'true',
66 | //         "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",'Access-Control-Allow-Methods': 'PUT, POST, GET, DELETE, OPTIONS'


--------------------------------------------------------------------------------
/src/screens/MyOrder.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import Footer from '../components/Footer';
  3 | import Navbar from '../components/Navbar';
  4 | 
  5 | export default function MyOrder() {
  6 | 
  7 |     const [orderData, setorderData] = useState({})
  8 | 
  9 |     const fetchMyOrder = async () => {
 10 |         console.log(localStorage.getItem('userEmail'))
 11 |         await fetch("http://localhost:5000/api/auth/myOrderData", {
 12 |             // credentials: 'include',
 13 |             // Origin:"http://localhost:3000/login",
 14 |             method: 'POST',
 15 |             headers: {
 16 |                 'Content-Type': 'application/json'
 17 |             },
 18 |             body:JSON.stringify({
 19 |                 email:localStorage.getItem('userEmail')
 20 |             })
 21 |         }).then(async (res) => {
 22 |             let response = await res.json()
 23 |             await setorderData(response)
 24 |         })
 25 | 
 26 | 
 27 | 
 28 |         // await res.map((data)=>{
 29 |         //    console.log(data)
 30 |         // })
 31 | 
 32 | 
 33 |     }
 34 | 
 35 |     useEffect(() => {
 36 |         fetchMyOrder()
 37 |     }, [])
 38 | 
 39 |     return (
 40 |         <div>
 41 |             <div>
 42 |                 <Navbar />
 43 |             </div>
 44 | 
 45 |             <div className='container'>
 46 |                 <div className='row'>
 47 | 
 48 |                     {orderData !== {} ? Array(orderData).map(data => {
 49 |                         return (
 50 |                             data.orderData ?
 51 |                                 data.orderData.order_data.slice(0).reverse().map((item) => {
 52 |                                     return (
 53 |                                         item.map((arrayData) => {
 54 |                                             return (
 55 |                                                 <div  >
 56 |                                                     {arrayData.Order_date ? <div className='m-auto mt-5'>
 57 | 
 58 |                                                         {data = arrayData.Order_date}
 59 |                                                         <hr />
 60 |                                                     </div> :
 61 | 
 62 |                                                         <div className='col-12 col-md-6 col-lg-3' >
 63 |                                                             <div className="card mt-3" style={{ width: "16rem", maxHeight: "360px" }}>
 64 |                                                                 <img src={arrayData.img} className="card-img-top" alt="..." style={{ height: "120px", objectFit: "fill" }} />
 65 |                                                                 <div className="card-body">
 66 |                                                                     <h5 className="card-title">{arrayData.name}</h5>
 67 |                                                                     <div className='container w-100 p-0' style={{ height: "38px" }}>
 68 |                                                                         <span className='m-1'>{arrayData.qty}</span>
 69 |                                                                         <span className='m-1'>{arrayData.size}</span>
 70 |                                                                         <span className='m-1'>{data}</span>
 71 |                                                                         <div className=' d-inline ms-2 h-100 w-20 fs-5' >
 72 |                                                                             ₹{arrayData.price}/-
 73 |                                                                         </div>
 74 |                                                                     </div>
 75 |                                                                 </div>
 76 |                                                             </div>
 77 | 
 78 |                                                         </div>
 79 | 
 80 | 
 81 | 
 82 |                                                     }
 83 | 
 84 |                                                 </div>
 85 |                                             )
 86 |                                         })
 87 | 
 88 |                                     )
 89 |                                 }) : ""
 90 |                         )
 91 |                     }) : ""}
 92 |                 </div>
 93 | 
 94 | 
 95 |             </div>
 96 | 
 97 |             <Footer />
 98 |         </div>
 99 |     )
100 | }
101 | // {"orderData":{"_id":"63024fd2be92d0469bd9e31a","email":"mohanDas@gmail.com","order_data":[[[{"id":"62ff20fbaed6a15f800125e9","name":"Chicken Fried Rice","qty":"4","size":"half","price":520},{"id":"62ff20fbaed6a15f800125ea","name":"Veg Fried Rice","qty":"4","size":"half","price":440}],"2022-08-21T15:31:30.239Z"],[[{"id":"62ff20fbaed6a15f800125f4","name":"Mix Veg Pizza","qty":"4","size":"medium","price":800},{"id":"62ff20fbaed6a15f800125f3","name":"Chicken Doub;e Cheeze Pizza","qty":"4","size":"regular","price":480}],"2022-08-21T15:32:38.861Z"]],"__v":0}}


--------------------------------------------------------------------------------
/src/screens/Signup.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react'
  2 | import { useNavigate, Link } from 'react-router-dom'
  3 | import Navbar from '../components/Navbar';
  4 | export default function Signup() {
  5 |   const [credentials, setCredentials] = useState({ name: "", email: "", password: "", geolocation: "" })
  6 |   let [address, setAddress] = useState("");
  7 |   let navigate = useNavigate()
  8 | 
  9 |   const handleClick = async (e) => {
 10 |     e.preventDefault();
 11 |     let navLocation = () => {
 12 |       return new Promise((res, rej) => {
 13 |         navigator.geolocation.getCurrentPosition(res, rej);
 14 |       });
 15 |     }
 16 |     let latlong = await navLocation().then(res => {
 17 |       let latitude = res.coords.latitude;
 18 |       let longitude = res.coords.longitude;
 19 |       return [latitude, longitude]
 20 |     })
 21 |     // console.log(latlong)
 22 |     let [lat, long] = latlong
 23 |     console.log(lat, long)
 24 |     const response = await fetch("http://localhost:5000/api/auth/getlocation", {
 25 |       method: 'POST',
 26 |       headers: {
 27 |         'Content-Type': 'application/json'
 28 |       },
 29 |       body: JSON.stringify({ latlong: { lat, long } })
 30 | 
 31 |     });
 32 |     const { location } = await response.json()
 33 |     console.log(location);
 34 |     setAddress(location);
 35 |     setCredentials({ ...credentials, [e.target.name]: location })
 36 |   }
 37 | 
 38 |   const handleSubmit = async (e) => {
 39 |     e.preventDefault();
 40 |     const response = await fetch("http://localhost:5000/api/auth/createuser", {
 41 |       // credentials: 'include',
 42 |       // Origin:"http://localhost:3000/login",
 43 |       method: 'POST',
 44 |       headers: {
 45 |         'Content-Type': 'application/json'
 46 |       },
 47 |       body: JSON.stringify({ name: credentials.name, email: credentials.email, password: credentials.password, location: credentials.geolocation })
 48 | 
 49 |     });
 50 |     const json = await response.json()
 51 |     console.log(json);
 52 |     if (json.success) {
 53 |       //save the auth toke to local storage and redirect
 54 |       localStorage.setItem('token', json.authToken)
 55 |       navigate("/login")
 56 | 
 57 |     }
 58 |     else {
 59 |       alert("Enter Valid Credentials")
 60 |     }
 61 |   }
 62 | 
 63 |   const onChange = (e) => {
 64 |     setCredentials({ ...credentials, [e.target.name]: e.target.value })
 65 |   }
 66 | 
 67 |   return (
 68 |     <div style={{ backgroundImage: 'url("https://images.pexels.com/photos/1565982/pexels-photo-1565982.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1")', backgroundSize: 'cover',height: '100vh' }}>
 69 |       <div>
 70 |       <Navbar />
 71 |       </div>
 72 | 
 73 |         <div className='container' >
 74 |           <form className='w-50 m-auto mt-5 border bg-dark border-success rounded' onSubmit={handleSubmit}>
 75 |             <div className="m-3">
 76 |               <label htmlFor="name" className="form-label">Name</label>
 77 |               <input type="text" className="form-control" name='name' value={credentials.name} onChange={onChange} aria-describedby="emailHelp" />
 78 |             </div>
 79 |             <div className="m-3">
 80 |               <label htmlFor="email" className="form-label">Email address</label>
 81 |               <input type="email" className="form-control" name='email' value={credentials.email} onChange={onChange} aria-describedby="emailHelp" />
 82 |             </div>
 83 |             <div className="m-3">
 84 |               <label htmlFor="address" className="form-label">Address</label>
 85 |               <fieldset>
 86 |                 <input type="text" className="form-control" name='address' placeholder='"Click below for fetching address"' value={address} onChange={(e)=>setAddress(e.target.value)} aria-describedby="emailHelp" />
 87 |               </fieldset>
 88 |             </div>
 89 |             <div className="m-3">
 90 |               <button type="button" onClick={handleClick} name="geolocation" className=" btn btn-success">Click for current Location </button>
 91 |             </div>
 92 |             <div className="m-3">
 93 |               <label htmlFor="exampleInputPassword1" className="form-label">Password</label>
 94 |               <input type="password" className="form-control" value={credentials.password} onChange={onChange} name='password' />
 95 |             </div>
 96 |             <button type="submit" className="m-3 btn btn-success">Submit</button>
 97 |             <Link to="/login" className="m-3 mx-1 btn btn-danger">Already a user</Link>
 98 |           </form>
 99 |         </div>
100 |       </div>
101 |   )
102 | }


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


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