Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lucasdasilva96/gamehub

This React-based E-Shop for games, created as part of an assignment from The Odin Project.
https://github.com/lucasdasilva96/gamehub

api localstorage react react-query react-router

Last synced: 27 days ago
JSON representation

This React-based E-Shop for games, created as part of an assignment from The Odin Project.

Awesome Lists containing this project

README

        

# GameHub E-Shop with Game Collection, Search, and Fake Checkout

This React-based E-Shop for games, created as part of an assignment from The Odin Project, seamlessly integrates several key features to deliver an immersive gaming experience. The project showcases a combination of React Router DOM, React Query/Tanstack, and the RAWG API to provide users with a dynamic and engaging platform.

![Preview image 1](/public/img/preview-1.png)
![Preview image 2](/public/img/preview-2.png)
![Preview image 3](/public/img/preview-3.png)

## Key Features:

- Users can personalize their gaming experience by saving favorite games to their collection, which is stored locally using the localStorage feature. This ensures that users can easily revisit their favorite titles whenever they return to the platform.

- The project incorporates a search feature, allowing users to explore an extensive library of games available through the RAWG API.

- Users can add games to their fake shopping cart, simulating the process of building a personalized gaming selection. React Router DOM is utilized to seamlessly navigate between different sections of the website, including the shopping cart, providing an intuitive user experience.

- The project extends its simulation to include a fake checkout and payment process within the shopping cart. Users can experience the end-to-end process of reviewing their selected games, initiating a checkout, and completing a simulated payment—immersing them in a realistic E-Shop environment.

### Technologies Used:

##### React Router DOM:

- The powerful routing capabilities of React Router DOM enable fluid navigation between various sections of the E-Shop, ensuring a seamless and cohesive user experience.

##### React Query/Tanstack:

- The use of React Query, along with the Tanstack, enhances data fetching and management. Real-time updates and optimized API interactions contribute to a highly responsive and performant application.

##### RAWG API Integration:

- Leveraging the RAWG API enriches the platform with a vast array of game data. This integration enables users to access an extensive catalog of games, enhancing their exploration and search capabilities.

### This React GameHub E-Shop project not only provides a visually appealing interface for browsing and collecting games but also showcases the power of React Router DOM, React Query/Tanstack, and the RAWG API in creating a feature-rich and interactive gaming platform. Whether managing a personal collection, exploring new releases, or simulating the process of making a purchase, users can enjoy a comprehensive and immersive online gaming experience.