Skip to content

LuisMSuarez/React-GameHub

Repository files navigation

Game hub using React + TypeScript + Chakra + Vite + RAWG api

Portal powered by React (using Vite scaffolding) and a custom API to browse the RAWG game database. Visit the production endpoint at: https://gamers-hub.azurewebsites.net

Visit Api backend source code at my GamersHub-Api repo

Design highlights

  • Responsive UX: Great browsing experience on mobile, tablet and desktop
  • Usage of Chakra UX layout and components
  • Dark mode switch
  • Content pagination with infinite scrolling
  • Usage of popular libraries such as Zustand, React router, React icon
  • Client-side API retries and caching using React Query (Tanstack Query)
  • Game recommendations based on user tagging and LLM OpenAI integration
  • Translation of game description to 137 languages using Azure AI cognitive services
  • CI/CD github action to run build, execute tests, build and publish container images and deploy to Azure App Service
  • Authenticated experience (OAuth2+OpenID connect) for users to tag their favorite games
  • AI-based Game recommendations
  • CosmosDb store of user preferences

Architecture diagram:

image

Screenshots

Homepage

image

Game details page

image

Game discovery

screenshot-discovery

About

Portal to browse the RAWG game catalog. Built on React + Typescript, C# back-end.

Topics

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors