GameHub is your one-stop destination for everything gaming. Whether you're an avid gamer or just starting your journey, GameHub offers a platform where you can explore, connect, and conquer.
View Site
·
Report Bug
·
Request Feature
Table of Contents
🎮 Discover Games: Dive into a vast collection of games from various genres, categories, and themes. Our curated selection ensures you never miss the next gaming masterpiece.
📊 Track Your Progress: Stay on top of your gaming achievements with our progress tracking system. You can watch your gaming journey unfold in real-time.
👥 Connect with Friends: Finding like-minded gamers is a breeze on GameHub. Connect with friends, see their library and write your own game reviews.
For Server Side Rendering
For Type Safety
For Authentication
For Form Handling
For Form Validation
For Data Fetching
For State Management
With
For UI Components
For Realtime Chat
For Database
For Database Hosting
For Hosting
- One of the challenges I faced was finding out how to fetch the IGDB Api correctly, which included using axios interceptors to keep the token updated, Next.js rewrites to avoid proxy issues and writing custom functions to create body for requests.
- Another challenge was to handle the data from IGDB Api, which was not always consistent and required a lot of data manipulation.
- It was also challenging to handle the cache correctly, when and how to invalidate it, how to use it with realtime chat and how to use it with IGDB Api.
- Another challenge was to implement import from Steam, which required a lot of research and testing. I had to find a way to get the user's Steam games, then find a way to get the game's data from IGDB Api and then find a way to import it into the database.
- Lastly, it was challenging to implement the realtime chat, which required a lot of research and testing. Especially, I tried to implement infinite scroll for messages, but it was not working correctly with the cache, so I had to abandon it.
In the future I plan to:
- Write tests with probably playwright
To get a local copy up and running follow these simple example steps.
- Clone the repo
git clone https://github.com/v-mokhun/gamehub.git . - Install NPM packages
npm install
- Run the app (Will not work without environment variables)
npm run dev
- Create a .env file in the root of the project and copy all contents from .env.example file.
- Register on Clerk and create a new application, then grab your publishable key and secret key. Then go to webhooks and grab your webhook secret. For local testing you can use ngrok to create a tunnel to your localhost. Important: make sure to add your ngrok url to the webhook url in Clerk.
- In Clerk Dashboard go to Users & Authentication -> Social Connections and enable Google, GitHub and Twitch. Here is an detailed guide on how to do it.
- Register on Twitch and create a new application, then grab your client id and client secret and as OAuth Redirect URLs insert your Clerk OAuth Callback.
- Register on PlanetScale and create a new database, then grab your database url by clicking on Connect button.
- Register on Pusher and create a new channel, then grab your app id, key, secret and cluster.
- Register on Cloudinary and grab your cloud name. Furthermore, you will need to create a new preset and make it unsigned and also put its name in .env file. You can also use your own image hosting service, just make sure to change the code accordingly.
- Go to Steam and grab your api key.
- Go to RapidAPI and register if needed, then grab your api key for image moderation.
- For tests to work properly, create test user and fill in the username and password in .env file
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Project Link: https://gamehub-proj.vercel.app