React.js Video Game Discovery App Project

Setting up the project

				
					npm create vite@4.1.0

✔ Project name: … game-hub
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/shazdeh/Downloads/React-js/game-hub...

Done. Now run:

  cd game-hub
  npm install
  npm run dev
  
cd game-hub 
npm i

added 77 packages, and audited 78 packages in 7s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm run dev

				
					git init
git add .
git commit -m "Initial commit"

Installing Charka UI

Go to the Chakra UI website,
Click on the Get Started button.
Select Vite on the bottom of the page from the Framework Guide section.
Follow the instructions on the page.

				
					npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

main.tsx

				
					import React from "react";
import ReactDOM from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

App.tsx

				
					import { Button, ButtonGroup } from "@chakra-ui/react";

function App() {
  return <Button colorScheme="blue">Button</Button>;
}

export default App;

To remove the ugly border around the button, clear the index.css default contents for Vite

To check the commits use the following command.

				
					git log --oneline

Creating a responsive layout

Using the Grid System of Chakra UI to set the layout of the page

				
					import { Grid, GridItem } from "@chakra-ui/react";

function App() {
  return (
    <Grid templateAreas={`'nav nav' 'aside main'`}> {/* to add more than one string we use back ticks */}
      <GridItem area={"nav"} bg={"coral"}>
        Nav
      </GridItem>
      <GridItem area={"aside"} bg={"orange"}>
        Aside
      </GridItem>
      <GridItem area={"main"} bg={"blue"}>
        Main
      </GridItem>
    </Grid>
  );
}

export default App;

To make the layout responsive do the following changes in the code:

				
					import { Grid, GridItem, Show } from "@chakra-ui/react";

function App() {
  return (
    <Grid
      templateAreas={{
        base: `'nav' 'main'`,
        lg: `'nav nav' 'aside main'`,
      }}
    >
      <GridItem area={"nav"} bg={"coral"}>
        Nav
      </GridItem>
      <Show above="lg">
        <GridItem area={"aside"} bg={"orange"}>
          Aside
        </GridItem>
      </Show>
      <GridItem area={"main"} bg={"blue"}>
        Main
      </GridItem>
    </Grid>
  );
}

export default App;

Building the navigation bar

App.tsx

				
					import { Grid, GridItem, Show } from "@chakra-ui/react";
import NavBar from "./components/NavBar";

function App() {
  return (
    <Grid
      templateAreas={{
        base: `'nav' 'main'`,
        lg: `'nav nav' 'aside main'`,
      }}
    >
      <GridItem area={"nav"}>
        <NavBar />
      </GridItem>
      <Show above="lg">
        <GridItem area={"aside"} bg={"orange"}>
          Aside
        </GridItem>
      </Show>
      <GridItem area={"main"} bg={"blue"}>
        Main
      </GridItem>
    </Grid>
  );
}

export default App;

src/components/NavBar.tsx

				
					import { HStack, Image, Text } from "@chakra-ui/react";
import logo from "../assets/logo.webp";

const NavBar = () => {
  return (
    <HStack>
      <Image src={logo} boxSize={"60px"} />
      <Text>NavBar</Text>
    </HStack>
  );
};

export default NavBar;

Implementing the dark mode

Follow the Chakra color mode instruction from the following link:

https://chakra-ui.com/docs/styled-system/color-mode

src/theme.ts

				
					import { extendTheme, ThemeConfig } from "@chakra-ui/react";

const config: ThemeConfig = {
  initialColorMode: 'dark'
}

const theme = extendTheme({ config });

export default theme;

main.tsx

				
					import React from "react";
import ReactDOM from "react-dom/client";
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import App from "./App";
import theme from "./theme";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

Building the color mode switch

components/ColorModeSwitch.tsx

				
					import { HStack, Switch, Text, useColorMode } from "@chakra-ui/react";

const ColorModeSwitch = () => {
  const { toggleColorMode, colorMode } = useColorMode();

  return (
    <HStack>
      <Switch
        colorScheme={"green"}
        isChecked={colorMode === "dark"}
        onChange={toggleColorMode}
      />
      <Text>Dark mode</Text>
    </HStack>
  );
};

export default ColorModeSwitch;

components/NavBar.tsx

				
					import { HStack, Image } from "@chakra-ui/react";
import logo from "../assets/logo.webp";
import ColorModeSwitch from "./ColorModeSwitch";

const NavBar = () => {
  return (
    <HStack justifyContent={"space-between"} padding={"10px"}>
      <Image src={logo} boxSize={"60px"} />
      <ColorModeSwitch></ColorModeSwitch>
    </HStack>
  );
};

export default NavBar;

Fetching the Games

Go to RAWG website and get your API key after signing up. And copy the provided API key.

				
					import { HStack, Image } from "@chakra-ui/react";
import logo from "../assets/logo.webp";
import ColorModeSwitch from "./ColorModeSwitch";

const NavBar = () => {
  return (
    <HStack justifyContent={"space-between"} padding={"10px"}>
      <Image src={logo} boxSize={"60px"} />
      <ColorModeSwitch></ColorModeSwitch>
    </HStack>
  );
};

export default NavBar;