Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redayzarra/gamehub
Game Hub is a comprehensive web application, built as part of a Code with Mosh course, which provides an engaging platform for users to explore and discover a variety of video games. Using the RAWG API, it offers detailed game information, including screenshots and gameplay videos.
https://github.com/redayzarra/gamehub
backend frontend react react-hooks react-router reactjs website
Last synced: 20 days ago
JSON representation
Game Hub is a comprehensive web application, built as part of a Code with Mosh course, which provides an engaging platform for users to explore and discover a variety of video games. Using the RAWG API, it offers detailed game information, including screenshots and gameplay videos.
- Host: GitHub
- URL: https://github.com/redayzarra/gamehub
- Owner: redayzarra
- Created: 2023-05-14T09:21:53.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-02T11:00:15.000Z (over 1 year ago)
- Last Synced: 2025-01-26T09:44:30.345Z (20 days ago)
- Topics: backend, frontend, react, react-hooks, react-router, reactjs, website
- Language: TypeScript
- Homepage: https://game-hub-flame-two.vercel.app
- Size: 63.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Game Hub - Video Game Showcase
[Game Hub](https://game-hub-flame-two.vercel.app/) is a comprehensive web application built using React and TypeScript. This project is part of a project-based course offered by [Code with Mosh](https://codewithmosh.com/p/ultimate-react-part1), aiming to provide practical experience in developing modern web applications. The application is designed to create an engaging platform for gamers to explore and discover various video games.
The application consumes data from the [RAWG API](https://rawg.io/apidocs), one of the largest video game databases that provides comprehensive details about games including titles, thumbnails, screenshots, videos, and many more. As part of the course, the project incorporates essential aspects of a modern web application including responsiveness, accessibility, and efficient state management, among others.
With this application, users can browse through a vast library of video games. Each game on the platform is presented with detailed information, including high-quality screenshots and videos, offering a sneak peek into the gameplay.
Home Page
Game Details Page
## Features
- **Game Grid:** An organized display of video games in a grid layout for easy browsing. Each cell in the grid represents a game with its corresponding thumbnail.
- **Game Details:** Clicking on a game directs the user to a page with more detailed information about the game, including screenshots and gameplay videos.
- **Genre List:** Users can explore games based on their favorite genres. The Genre List component presents a list of genres that users can choose from.
- **Platform Selector:** Users can filter games based on the gaming platform of their choice. The Platform Selector allows users to choose a gaming platform to refine their search.
- **Sort Selector:** Users can sort games based on different criteria such as popularity, release date, etc. using the Sort Selector.
- **Search Input:** A powerful search feature that allows users to search for their favorite games directly.
- **Color Mode Switch:** Users can switch between dark mode and light mode based on their preference.
- **Responsive Design:** The application is built with a mobile-first approach and is responsive to different screen sizes.
## Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
### Prerequisites
Before you begin, ensure you have met the following requirements:
- You have installed the latest version of npm and Node.js.
- You have a Windows/Linux/Mac machine.
### Installing
1. Clone the repository
```bash
git clone https://github.com/username/projectname.git
```
2. Move into the new project
```bash
cd projectname
```
3. Install the dependencies
```bash
npm install
```
4. Start the development server
```bash
npm start
```
Open http://localhost:3000, or any link that shows up in the terminal, with your browser to see the result.
## Tech Stack
* React.js: Frontend web library
* TypeScript: A superset of JavaScript adding static types and modern features
* RAWG API: API service providing the game data
* Chakra UI: UI library for designing the interface
* react-router-dom: For routing and navigation in the app