Rawg Clone

This is a clone of the popular video game discovery website, Rawg.io, built using ReactJS and TypeScript. The project includes generic hooks for fetching data, custom hooks for handling endpoints, and reusable components for building the user interface. The application allows users to search and filter games by genres and platforms, and it is fully responsive for optimal use on different devices.

Live Website

https://rawg-clone-56ssr7nqu-techrami.vercel.app/

Features

• Search for games: Users can search for games by typing in the search bar, and the results will be displayed in real-time.
• Filter games by genres: Users can select one or multiple genres from a list of genres to filter the games based on their genre.
• Filter games by platforms: Users can select one or multiple platforms from a list of platforms to filter the games based on their platform.
• Responsive design: The application is designed to be fully responsive and user-friendly on different devices, including desktops, tablets, and mobile devices.

Built With

• ReactJS - A popular JavaScript library for building user interfaces.
• TypeScript - A statically-typed superset of JavaScript that adds optional type annotations.
• TailwindCSS - TailwindCSS for styling the components.
• Rawg.io API - A free API for retrieving video game data, including game details, screenshots, and more.
• React Router - A declarative routing library for React.
• Zustand - A small, fast state management library for React.
• React Query - A library for managing and caching asynchronous data in React applications.
• Infinite Scroll Component - A component for infinite scrolling in React applications.

Getting Started

These instructions will help you set up and run the project on your local machine for development and testing purposes.

Prerequisites

You will need the following software installed on your local machine to run the project:

• Node.js: You can download and install Node.js from the official website: https://nodejs.org/

Installation

1. Clone the repository to your local machine using the following command: git clone https://github.com/your-username/rawg-clone.git
2. Change to the project directory: cd rawg-clone
3. Install the dependencies using npm or yarn: npm install or yarn install
4. Create a .env file in the root of the project and add the following environment variables: REACT_APP_RAWG_API_KEY=your_rawg_api_key Replace your_rawg_api_key with your own Rawg.io API key. You can obtain an API key by signing up on the Rawg.io website: https://rawg.io/apidocs
5. Start the development server: npm start or yarn start
6. Open your web browser and go to http://localhost:3000 to view the application running locally.

Acknowledgements

• Rawg.io - For providing the free API to retrieve video game data.
• ReactJS - For the powerful JavaScript library for building user interfaces.
• TypeScript - For the statically-typed superset of JavaScript that improves code quality and maintainability.