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.
https://rawg-clone-56ssr7nqu-techrami.vercel.app/
- 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.
- 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.
These instructions will help you set up and run the project on your local machine for development and testing purposes.
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/
- Clone the repository to your local machine using the following command:
git clone https://github.com/your-username/rawg-clone.git
- Change to the project directory:
cd rawg-clone
- Install the dependencies using npm or yarn:
npm install
oryarn install
- 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
Replaceyour_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 - Start the development server:
npm start
oryarn start
- Open your web browser and go to
http://localhost:3000
to view the application running locally.
- 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.