React_14

In this blog, we will style our app using TailwindCSS and then deploy it.

Polishing the UI

Earlier our app used to look something like this:

After styling and polishing the UI, it looks something like this:

You can checkout the latest code here.

Deploying the app

We will have to deploy our app. Foodhouse is only a frontend app for the time being since we are using Swiggy's live API. Now the challenge that we faced while deploying this directly is CORS issue. To solve this issue, we went ahead and quickly built a Node server and called those live Swiggy APIs from our own server.

// server.js

import express from "express";
import cors from "cors";
import fetch from "cross-fetch";
import { FETCH_RESTAURANTS_URL, FETCH_MENU_URL } from "./constants.js";

const app = express();
const port = process.env.PORT || 3000;

app.use(cors());

// For Restaurants List API
app.get("/api/restaurants", async (req, res) => {
  await fetch(FETCH_RESTAURANTS_URL, {
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "User-Agent":
        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36",
    },
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    })
    .then((data) => {
      console.log(data);
      res.json(data);
    })
    .catch((error) => {
      console.error(error);
      res.status(500).send("An error occurred");
    });
});

// For Menu API
app.get("/api/menu", async (req, res) => {
  const { restaurantID } = req.query;
  console.log(req.query);

  await fetch(FETCH_MENU_URL + restaurantID, {
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "User-Agent":
        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36",
    },
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    })
    .then((data) => {
      console.log(data);
      res.json(data);
    })
    .catch((error) => {
      console.error(error);
      res.status(500).send("An error occurred");
    });
});

app.get("/", (req, res) => {
  res.json({ data: "Welcome to my server!" });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Here is the code for more reference.

Then we went ahead and deployed the server on Render. We used the free tier, for the time being, due to financial constraints. This has resulted in the deployed server not being able to serve API requests readily 24/7. The server takes some time to start up and then it can serve requests to the client.

Then we took the deployed API url and integrated it with our Foodhouse app. Everything runs smoothly as expected.

Now, since I already own a domain for my portfolio, I created a subdomain under it and deployed the build folder (dist) directly under that subdomain. Thus, Foodhouse is now live!

You can go and checkout Foodhouse here.

That's all for now folks. See you in the next blog!