Back to projects
RAWG Clone

RAWG Clone

Seyed Keyvan Hosseini / September 16, 2024

This is a game discovery platform built with React 18, inspired by the RAWG video game database. It leverages modern React tools and libraries like React Query, Zustand, and ChakraUI for state management, data fetching, and UI design, respectively.

You can view the live project here and check out the code on GitHub here.

Features

  • Game Search and Filtering: Users can search for games by genre, platform, and other criteria.
  • Game Details Page: View detailed information about each game including ratings, screenshots, and trailers.
  • Infinite Scrolling: Browse through the game list with infinite scrolling for a seamless user experience.
  • Optimized Data Fetching: Data is fetched efficiently using react-query with built-in caching and refetching strategies.
  • Global State Management: Application state is managed globally with zustand, providing a clean and scalable architecture.
  • Responsive UI: Built with ChakraUI for a highly customizable and responsive design that looks great on all devices.

Technologies

  • React 18: The latest version of React with concurrent features for improved rendering.
  • React Query: A powerful data-fetching library that simplifies server state management.
  • Zustand: A small but flexible state management solution for React.
  • ChakraUI: A simple, modular component library for building responsive UIs.
  • Vercel: Deployed on Vercel for optimal performance and scalability.

Getting Started

To get started with this project, you can clone the repository and install the dependencies:

git clone https://github.com/skh113/rawg-clone.git
cd rawg-clone
npm install # installing dependencies
npm run dev # running the project

The development server will start at http://localhost:3000.

Deployment

To deploy this project, you can use Vercel. Simply connect your GitHub repository to Vercel and deploy the project seamlessly with minimal configuration.

Conclusion

This RAWG Clone project showcases the power of modern React tools and techniques. By using libraries like React Query for data fetching and Zustand for state management, the app remains highly performant and easy to maintain. It's a great example of building a scalable and responsive web application in the gaming space.