next.js migration

.gitignore

@@ -28,3 +28,9 @@ yarn-error.log*
 
 # Certs
 *.pem
+
+# NextJS
+.next
+
+# Old public folder
+public-old/

README.md

@@ -21,9 +21,10 @@ This repo contains code related to frontend that serves that uses APIs from back
 
 - [React](https://reactjs.org/): Front-end library
 - [TypeScript](https://www.typescriptlang.org/): Programming language
+- [NextJS](https://nextjs.org/): Production ready react framework for SSR, SSG et.,
 - [MUI](https://mui.com/): Design library
 - [Netlify](https://www.netlify.com/): Hosting and Deployment platform
-- [React Redux](https://react-redux.js.org/): Global state management (Probably overkill for this project)
+- [React Redux](https://react-redux.js.org/): Global state management (Probably overkill for this project). Update: Removed redux from this project
 
 ## Project Setup
 
@@ -40,12 +41,11 @@ yarn
 ### Set environment variables
 
 Create a `.env` file at the root of the project folder and populate appropriate values for below keys.
-REACT_APP_FLDB_API_BASE_URL is the URL of [backend API server](https://github.com/Mr-SKR/fldb-apis)
+NEXT_PUBLIC_FLDB_API_BASE_URL is the URL of [backend API server](https://github.com/Mr-SKR/fldb-apis)
 
 ```
-REACT_APP_FLDB_API_BASE_URL=<YOUR FLDB_API_BASE_URL>
-REACT_APP_GOOGLE_MAPS_KEY=<YOUR_GOOGLE_MAPS_API_KEY>
-REACT_APP_DISQUS_SHORTNAME=<YOUR_DISQUS_SHORTNAME>
+NEXT_PUBLIC_FLDB_API_BASE_URL=<YOUR FLDB_API_BASE_URL>
+NEXT_PUBLIC_DISQUS_SHORTNAME=<YOUR_DISQUS_SHORTNAME>
 ```
 
 For Localhost only:

src/components/cards/card.tsx → components/cards/card.tsx

@@ -18,6 +18,8 @@ interface FoodCardProps {
  description: string;
  displacement: number;
  hasVeg: boolean;
+ useLocation: boolean;
+ setUseLocation: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export default function FoodCard(props: FoodCardProps): JSX.Element {
@@ -43,10 +45,19 @@ export default function FoodCard(props: FoodCardProps): JSX.Element {
  </Typography>
  </CardContent>
  </CardActionArea>
+
  <CardActions sx={{ justifyContent: "center" }}>
- <Button size="medium" sx={{ textTransform: "none" }}>
+ <Button
+ size="medium"
+ sx={{ textTransform: "none" }}
+ onClick={() => {
+ if (!props.useLocation) props.setUseLocation(true);
+ }}
+ >
  Displacement:{" "}
- {props.displacement ? `${props.displacement} Km` : "N/A"}
+ {props.displacement
+ ? `${props.displacement} Km`
+ : "Enable location"}
  </Button>
  {props.hasVeg && (
  <Button

components/headers/Header.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { useRouter } from "next/router";
+
+export default function SearchAppBar() {
+ const router = useRouter();
+ return (
+ <Box sx={{ flexGrow: 1 }}>
+ <AppBar position="static">
+ <Toolbar>
+ <Box sx={{ flexGrow: 1 }}>
+ <IconButton
+ size="large"
+ edge="start"
+ color="inherit"
+ aria-label="FLDb"
+ sx={{
+ mr: 2,
+ "&.MuiButtonBase-root:hover": {
+ bgcolor: "transparent",
+ },
+ }}
+ onClick={() => {
+ router.push("/");
+ }}
+ >
+ <Typography variant="h6" noWrap component="div">
+ FLDb
+ </Typography>
+ </IconButton>
+ </Box>
+
+ <IconButton
+ size="large"
+ edge="start"
+ color="inherit"
+ aria-label="about"
+ sx={{
+ ml: 2,
+ "&.MuiButtonBase-root:hover": {
+ bgcolor: "transparent",
+ },
+ }}
+ onClick={() => {
+ router.push("/about");
+ }}
+ >
+ <InfoOutlinedIcon />
+ </IconButton>
+ </Toolbar>
+ </AppBar>
+ </Box>
+ );
+}

src/components/ui/Theme.ts → components/ui/Theme.ts

@@ -10,6 +10,24 @@ const customTheme = createTheme({
  main: green[500],
  },
  },
+ components: {
+ MuiTypography: {
+ defaultProps: {
+ variantMapping: {
+ h1: "h1",
+ h2: "h2",
+ h3: "h3",
+ h4: "h4",
+ h5: "h1",
+ h6: "h2",
+ subtitle1: "h5",
+ subtitle2: "h6",
+ body1: "p",
+ body2: "p",
+ },
+ },
+ },
+ },
  // custom: {
  // drawerWidth: 240,
  // appbarHeight: { small: 56, large: 64 },

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+ reactStrictMode: true,
+};

package.json

@@ -25,20 +25,20 @@
  "eslint-plugin-react": "^7.31.8",
  "linkify-react": "^3.0.4",
  "linkifyjs": "^3.0.5",
+ "next": "^12.3.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-player": "^2.9.0",
- "react-redux": "^8.0.4",
  "react-router-dom": "^6.0.2",
  "react-scripts": "5.0.1",
  "typescript": "^4.8.3",
  "web-vitals": "^1.0.1"
  },
  "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "next lint"
  },
  "eslintConfig": {
  "extends": [

pages/_app.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { ThemeProvider } from "@mui/system";
+import CssBaseline from "@mui/material/CssBaseline";
+import type { AppProps } from "next/app";
+import HEAD from "next/head";
+
+import customTheme from "../components/ui/Theme";
+
+function MyApp({ Component, pageProps }: AppProps) {
+ return (
+ <React.Fragment>
+ <HEAD>
+ <title>FLDB: Food Lovers Database</title>
+ <meta charSet="utf-8" />
+ <meta
+ name="description"
+ content="Food Lovers Database (FLDb)"
+ key="description"
+ />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="theme-color" content="#000000" />
+ <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+ {/* <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> */}
+ </HEAD>
+ <CssBaseline />
+ <ThemeProvider theme={customTheme}>
+ <Component {...pageProps} />
+ </ThemeProvider>
+ </React.Fragment>
+ );
+}
+
+// Only uncomment this method if you have blocking data requirements for
+// every single page in your application. This disables the ability to
+// perform automatic static optimization, causing every page in your app to
+// be server-side rendered.
+//
+// MyApp.getInitialProps = async (appContext) => {
+// // calls page's `getInitialProps` and fills `appProps.pageProps`
+// const appProps = await App.getInitialProps(appContext);
+//
+// return { ...appProps }
+// }
+
+export default MyApp;

pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+ return (
+ <Html lang="en">
+ <Head />
+ <body>
+ <Main />
+ <NextScript />
+ </body>
+ </Html>
+ );
+}

src/pages/About.tsx → pages/about.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Box, Grid, Container } from "@mui/material";
+import Head from "next/head";
 
 import ResponsiveDrawer from "../components/headers/Header";
 import CustomAccordion from "../components/accordion/accordion";
@@ -108,6 +109,14 @@ const faqs = [
 function About(): JSX.Element {
  return (
  <React.Fragment>
+ <Head>
+ <title>About FLDb</title>
+ <meta
+ name="description"
+ content="About Food Lovers Database (FLDb)"
+ key="description"
+ />
+ </Head>
  <ResponsiveDrawer />
  <Box
  component={Container}