FreeGamesHub

React App for finding and playing the best Free-To-Play Games.

Table of Contents

• Project Requirements
• Installation
• Usage
• File Folder Structure
• Usage/Examples
• Build
• Demo

Project Requirements

This project is built with the following requirements:

• Node v18.7.0
• NPM v8.15.0
• React v18.2.0
• TypeScript v4.9.5
• NextUI v2.2.9
• Tailwindcss v3.3.5

For more information, please see the package.json file.

Installation

Clone the repository and run the following commands:

npm install

This will install all the dependencies required for the project.

Usage

To run the project, ensure you have the necessary environment variables set. Refer to the .env.example file for the required variables. Four of them are already provided and can be used as-is. However, you need to obtain the REACT_APP_GAMES_API_KEY from RapidAPI. Once you have the key, create a .env file in the root directory and paste all the variables there. You can use the provided variables in .env.example as a template for your .env file.

npm start

This will start the app in the localhost:3000 if the port is available.

File Folder Structure

Name	Type	Description
build	folder	build output generated by build command.
public	folder	All the static files like images and icons.
.env	file	Environment variables.
.env.example	file	Environment variable examples.
src	folder	All the source code.
src/components	folder	All the app components.
src/containers	folder	All the pages.
src/services	folder	All the API and redux stuff.
src/utils	folder	TypeScript types, helper functions, constant values, custom hooks.
src/App.tsx	file	Root component
src/index.tsx	file	Entry point for App

Usage/Examples

This app is built with Functional Components and Hooks, also using Redux Toolkit for state management and data fetching with RTK Query.

Creating a new page/component

You can create a new page in src/containers folder. For example, ExamplePage.tsx. You can import the page in src/App.tsx and add the route for the page. Similarly, you can create a new component in src/components folder. For example, ExampleComponent.tsx. Later you can import it anywhere you want. Please check any existing page/component for reference.

export const Example = () => {
  return <div>I am a component/Page</div>;
};

Styling

CSS can be used by global styles or by using CSS modules.
We're also using NextUI and Tailwindcss.

Global Styles

You can modify existing global stylesheet App.css.
Note - Utilize NextUI and Tailwindcss whenever possible.

CSS Modules

CSS modules can used by creating a new stylesheet with .module.css extension. For example, Example.module.css. You can import the stylesheet in the component and use it as shown below.
Note - Utilize NextUI and Tailwindcss whenever possible.

import { Button } from "@nextui-org/react";
import Styles from "./Example.module.css";

export const Example = () => {
  return (
    <Button color="primary" className={Styles.button}>
      Click Me
    </Button>
  );
};

Build

npm run build

Important: Utilizing react-snap for pre-rendering the application to enhance SEO. It's possible to encounter issues during the app-building process. If you face any challenges, consult the official react-snap documentation for guidance. I encountered problems while attempting to build the app on a Linux machine, primarily due to the absence of Chrome installation. Additionally, when using Vite, be aware that the build directory differs. Usually you are not going to have any problems untill you modify something. Once again, refer to the documentation for assistance.

Quick fix if you don't want to mess up with react-snap issues : Just remove it.