Game hub

This is a simplified replica of the RAWG's site, which uses the non-commercial access of their API.

The project is based on the Mosh Hamedani's course React 18 and TypeScript but with a couple of improvements. For example: This is a Next.js 13.6 implementation, also instead of Bootstrap and Chakra UI are used Tailwind CSS and Shadcn/UI, and more.

References and credits

• React 18 and TypeScript: Code with Mosh Course
• Mosh at GitHub: The Ultimate React Course - Part 1
• Mosh at GitHub: GameHub
• RAWG API Docs | RAWG Home

This is a Next.js project bootstrapped with create-next-app and hosted on Vercel.

Because the application exhaust too quickly the the image optimization quota of Vercel the optimization on production is disabled.

Final touches (to do)

• Fancy game card hover behavior, like RAWG.
• When the Next.js' image optimization is disabled: Proxy the RAWG Media files to avoid issues related to CORS and private networks with restrictions. In addition cache them for better application performance.
• Improve the behaviour of the "color theme selector".
• Clear all filters and show all games, when click on the logo. A little bit ugly solution which uses <a href="/"> is applied.
• Create game-images gallery.
• Scroll to top button. Fix the known issue of the mobile browsers 100vh bug, see: globals.css and Games_Navigation_Float.tsx

Getting Started Dev

Install the dependencies:

npm install

Checkout the .env.example file and create a .env.local file with an actual value of RAWG_API_KEY.

In addition you may want to create a Vercel project and link it to the repository then you can manage the environment variables from the Vercel admin panel.

Run the development server:

npm run dev

Open http://localhost:3001 with your browser to see the result.