Restaurant Recommendation using MERN

// App.js

import style from "./App.module.css";
import { Form } from "react-bootstrap";
import NavBar from "./components/NavBar/NavBar";
import { useState } from "react";
import CardItem from "./components/RestaurantCard/Card";
import useRestaurantContext from "./components/Hooks/useRestaurant";

function App() {


    const { selectedItems, setSelectedItems, setLocation, setRating } =
        useRestaurantContext();

    const options = [
        { value: "North Indian", label: "North Indian" },
        { value: "South Indian", label: "South Indian" },
        { value: "Chinese", label: "Chinese" },
        { value: "Desserts", label: "Desserts" },
        { value: "Italian", label: "Italian" },
        { value: "Oriental", label: "Oriental" },
        { value: "Pastas", label: "Pastas" },
        { value: "Pizzas", label: "Pizzas" },
        { value: "Japanese", label: "Japanese" },
        { value: "Sushi", label: "Sushi" },
        { value: "Barbecue", label: "Barbecue" },
        { value: "Steak", label: "Steak" },
        { value: "Seafood", label: "Seafood" },
    ];

    const handleCheckboxChange = (value) => {

        if (selectedItems.includes(value)) {

            setSelectedItems(selectedItems.filter((item) => item !== value));
        } else {

            setSelectedItems([...selectedItems, value]);
        }

        console.log("elements", selectedItems);
    };

    return (
        <div className="App">
            <NavBar />
            <div>
                <div className={style.headers}>
                    <div className={style.locationContainer}>
                        <Form.Select
                            aria-label="Location"
                            onChange={(e) => {
                                setLocation(e.target.value);
                            }}
                        >
                            <option hidden>Select Location</option>
                            <option value="Hyderabad">Hyderabad</option>
                            <option value="Banglore">Banglore</option>
                            <option value="Mumbai">Mumbai</option>
                            <option value="Delhi">Delhi</option>
                            <option value="Pune">Pune</option>
                            <option value="Chennai">Chennai</option>
                        </Form.Select>
                    </div>
                    <div className={style.cuisinesContainer}>
                        <Form>
                            <Form.Label>Select Cuisines:</Form.Label>
                            {options.map((option) => (
                                <Form.Check
                                    key={option.value}
                                    type="checkbox"
                                    id={option.value}
                                    label={option.label}
                                    checked={selectedItems?.includes(option.value)}
                                    onChange={() => handleCheckboxChange(option.value)}
                                />
                            ))}
                        </Form>
                    </div>
                    <div className={style.ratingContainer}>
                        <Form.Select
                            aria-label="Default select example"
                            onChange={(e) => {
                                setRating(e.target.value);
                            }}
                        >
                            <option hidden>Select Rating</option>
                            <option value="3">3 above</option>
                            <option value="4">4 above</option>
                        </Form.Select>
                    </div>
                </div>
            </div>
            <div className={style.restaurants}>
                <h3>Restaurants</h3>
                <CardItem />
            </div>
        </div>
    );
}

export default App;

// NavBar.js

import React from "react";
import { Nav, Navbar, Container } from "react-bootstrap";

export default function NavBar() {
    return (
        <div>
            <Navbar bg="dark" data-bs-theme="dark">
                <Container>
                    <Navbar.Brand href="#home">
                        Restro - find your restaurant
                    </Navbar.Brand>
                    <Nav className="me-auto"></Nav>
                </Container>
            </Navbar>
        </div>
    );
}

// Card.js

import Card from "react-bootstrap/Card";
import ListGroup from "react-bootstrap/ListGroup";
import useRestaurantContext from "../Hooks/useRestaurant";
import { useEffect, useState } from "react";
import axios from "axios";

function CardItem() {
    const { location, rating, selectedItems } = useRestaurantContext();
    const [restaurants, setRestaurants] = useState([]);

    useEffect(() => {
        getAllRestaurants();
    }, [location, rating, selectedItems]);

    const getAllRestaurants = async () => {
        axios
            .post("http://localhost:4000/api/restaurants", {
                location: location,
                rating: rating,
                cuisines: selectedItems,
            })
            .then(
                (response) => {
                    console.log("response is", response);
                    if (response.data.success) {
                        setRestaurants(response.data.data);
                    }
                },
                (error) => {
                    console.log("error is ", error);
                }
            );
    };

    return (
        <div style={{ display: "flex", flexWrap: "wrap", marginLeft: "2vw" }}>
            {restaurants.map((item) => (
                <Card style={{ width: "18rem", marginLeft: "4vw", marginTop: "4vh" }}>
                    <Card.Img
                        variant="top"
                        src={item.image}
                        style={{ height: "20vh", backgroundCover: "cover" }}
                    />
                    <Card.Body>
                        <Card.Title>{item.name}</Card.Title>
                        <Card.Text>
                            Types of food we offer :{" "}
                            {item.cuisines?.map((foodItem) => foodItem + ",  ")}
                        </Card.Text>
                    </Card.Body>
                    <ListGroup className="list-group-flush">
                        <ListGroup.Item>Address:{item.address}</ListGroup.Item>
                        <ListGroup.Item>City:{item.location}</ListGroup.Item>
                        <ListGroup.Item>Rating:{item.rating}</ListGroup.Item>
                    </ListGroup>
                </Card>
            ))}
        </div>
    );
}

export default CardItem;

// useContext.js

import { createContext, useContext, useState } from "react";

const RestaurantContext = createContext();

const Provider = ({ children }) => {
    const [selectedItems, setSelectedItems] = useState([]);
    const [location, setLocation] = useState();
    const [rating, setRating] = useState();

    const data = {
        selectedItems,
        setSelectedItems,
        location,
        setLocation,
        rating,
        setRating,
    };

    return (
        <RestaurantContext.Provider value={{ selectedItems, setSelectedItems }}>
            {children}
        </RestaurantContext.Provider>
    );
};

export { Provider };

export default RestaurantContext;

// useRestaurant.js
import React, { useContext } from 'react';
import { RestaurantContext } from '../Context/RestaurantContext'; // Import the correct context

const useRestaurantContext = () => {
    const restaurantContext = useContext(RestaurantContext);

    if (!restaurantContext) {
        // Handle missing context (optional)
        throw new Error('RestaurantContext not found');
    }

    return restaurantContext;
};

export default useRestaurantContext;

// index.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const cors = require('cors');

require('dotenv').config();

// create a express app
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

// Connect to mongodb using mongoose

// Please use process.env.MONGO_URL instead of my mongodb url
mongoose
    .connect(YOURS_URI, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
    })
    .then(() => {
        console.log('Connected to MongoDB');
    })
    .catch((error) => {
        console.log('Failed to connect to MongoDB', error);
    });

app.get('/health', (req, res) => {
    res.status(200).json('Server is up and running');
});

// Start server
const PORT = process.env.PORT || 4000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

const restaurantRoutes = require('./routes/restaurant.route');

app.use('/api', restaurantRoutes);

// Restaurant.model.js
const mongoose = require('mongoose');

const restaurantSchema = new mongoose.Schema({
  name: String,
  address: String,
  contact: String,
  location: String,
  rating: Number,
  offers: Boolean,
  cuisines: [String],
  image: String,
});

module.exports = mongoose.model('restaurant', restaurantSchema);

//restaurant.route.js

const express = require('express');
const router = express.Router();

const {
  getRestaurantsByFilters,
} = require('../controllers/restaurant.controller');

router.route('/restaurants').post(getRestaurantsByFilters);

module.exports = router;

// restaurant.controller.js

const RestaurantModel = require('../models/Restaurant.model');

const getRestaurantsByFilters = async (req, res) => {
  console.log('request body is', req.body);
  try {
    const { location, rating, cuisines } = req.body;
    const query = {};
    if (location) {
      query.location = location;
    }

    if (rating?.length > 0) {
      if (rating == 3) {
        query.rating = { $gte: 3, $lte: 5 };
      } else {
        query.rating = { $gte: 4, $lte: 5 };
      }
    }

    if (cuisines?.length > 0) {
      query.cuisines = { $in: cuisines };
    }

    const restaurants = await RestaurantModel.find(query);
    if (restaurants.length > 0) {
      res.json({ success: true, data: restaurants });
    } else {
      res.json({ success: false, message: 'No such data found!' });
    }
  } catch (error) {
    res.json({ success: false, error: error.message });
  }
};

module.exports = { getAllRestaurants, getRestaurantsByFilters };