https://github.com/pa4080/game-hub
https://github.com/pa4080/game-hub
nextjs rawg rawg-api react reactjs typescript vercel
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pa4080/game-hub
- Owner: pa4080
- License: gpl-3.0
- Created: 2023-03-16T18:49:00.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-13T07:48:22.000Z (over 2 years ago)
- Last Synced: 2025-04-02T03:35:16.518Z (about 1 year ago)
- Topics: nextjs, rawg, rawg-api, react, reactjs, typescript, vercel
- Language: TypeScript
- Homepage: https://game-hub.metalevel.tech/
- Size: 2.75 MB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Game hub
This is a simplified replica of the [RAWG's site](https://rawg.io/), which uses the non-commercial access of their [API](https://rawg.io/apidocs).
[](https://game-hub.metalevel.tech/)
The project is based on the Mosh Hamedani's course [React 18 and TypeScript](https://codewithmosh.com/p/ultimate-react-part1) but with a couple of improvements. For example: This is a Next.js 13.6 implementation, also instead of [Bootstrap](https://getbootstrap.com/) and [Chakra UI](https://chakra-ui.com/) are used [Tailwind CSS](https://tailwindcss.com/) and [Shadcn/UI](https://ui.shadcn.com/), and more.
## References and credits
- [React 18 and TypeScript: Code with Mosh Course](https://codewithmosh.com/p/ultimate-react-part1)
- [Mosh at GitHub: **The Ultimate React Course - Part 1**](https://github.com/mosh-hamedani/react-course-part1)
- [Mosh at GitHub: **GameHub**](https://github.com/mosh-hamedani/game-hub)
- [RAWG API Docs](https://rawg.io/apidocs) | [RAWG Home](https://rawg.io/)
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) and hosted on [Vercel](https://vercel.com/).
Because the application exhaust too quickly the the image optimization quota of Vercel the optimization on production is disabled.
## Final touches (to do)
- [x] Fancy game card hover behavior, like RAWG.
- [x] 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.
- [x] Improve the behaviour of the "color theme selector".
- [x] Clear all filters and show all games, when click on the logo. A little bit ugly solution which uses `` is applied.
- [x] Create game-images gallery.
- [x] Scroll to top button. Fix the known issue of the mobile browsers 100vh bug, see: [`globals.css`](app/globals.css#L14) and [`Games_Navigation_Float.tsx`](components/Games_Navigation_Float.tsx#L26)
## Getting Started Dev
Install the dependencies:
```bash
npm install
```
Checkout the [`.env.example`](.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:
```bash
npm run dev
```
Open [http://localhost:3001](http://localhost:3001) with your browser to see the result.