Next.js web application similar to Steam focused on giving users access to view information for over 850,000+ games. Visitors can browse virtually all games in the world via searchbar or through the sidebar containing over 19 genres and 51 platforms to choose from. Users can see their childhood favorites and new releases with frequently updated information.
| Feature | Description |
|---|---|
| Login | Clean beautiful login component that captures that game theme feel while also being relatively minimal to make the process quick and easy! Demo Credentials are also provided with copy link buttons provided for those who would like to view the application quickly without the need for a signup. |
| Signup | Clean beautiful signup component that captures that game theme feel while also being relatively minimal to make the process quick and easy! Redirect link back to the login screen is provided for a seamless transition. |
| Game Searchbar | Access to over 850,000+ games! Once the user inputs a game name into the field, games that start with those characters will do be used to fetch from RAWG API DB and retrieve all the game information. Games will then be displayed with an infinite scroll. Implemented debounce to prevent unecessary search requests each character, the search will be delayed for 300ms until the user's last input before sending the request. This dramatically improves the performance of the application! |
| Sidebar | A responsive sidebar containing an organized collection of available pages for users to choose from. The sidebar also features dropdown menus for various platforms organized by the parent company. |
| View Genres | 19 available game genres to browse through. |
| View Platforms | 51 available platforms to browse through. |
| View Stores | The stores page features links directly to available digital distribution services such as Steam, Playstation, Xbox, Epic Games, etc. |
| View Developers | Access to over 420,000+ developers. Navigate to the developer page using the sidebar. |
| Game Page | The individual game page features valuable game information for users such as the following: About Description, Game Screenshots, Available Platforms, Metascore, Genre, Release Date, Developer(s), Publisher(s), Tags, Publisher Website, Reddit Game Posts, Available Stores for Game Purchase(i.e. Xbox, Steam, etc.) |
| Infinite Scroll | As the user reaches the bottom of the page, another 6-20 results(# varies depending on page) will be rendered. This was implemented for an improved user experience(UX) over navigation buttons. |
- Next.js
- TypeScript
- Tailwind CSS
- Postman
- Shadcn UI
To run the application locally, follow the steps below(commands added for additional help):
- Create an empty directory on your desktop
- Clone the repository into the folder locally by using git clone:
- Navigate into the directory:
- cd game-website
- Install the necessary packages inside package.json:
- npm install
- Navigate to RAWG API to get your API KEY(REQUIRED) -
- IMPORTANT: Create an free account with RAWG API to receive your API KEY(REQUIRED FOR DATA TO BE FETCHED)
- Create a .env.local file inside the root of your directory to paste our API KEY
- Inside the .env.local file, add your API KEY with the line below:
- RAWG_API_KEY=[YOUR API KEY]
- Start the app:
- npm run dev
You're all set! The app is ready to go, that's all you have to do to get the app running locally. Enjoy!
The Sign In page allows registered users to securely access their accounts and the wide range of site features in store for them. Note: Demo Account Credentials are provided for those who would like to quickly view the application without requiring a signup. Simply click the copy button icons, paste them in the input fields, and you're good to go!
The Sign Up page welcomes new users to join the platform, offering a straightforward registration process to create an account. Login redirect included for easy navigation back to the login screen.
- Home page contains quick links for Genres, Developers, Platforms, and Stores. Users can also access these sections(and more!) through the sidebar menu if they have a specific topic in mind.
- Game page has an extensive amount of valuable information regarding the game that can prove useful to the user who wants an in-depth overview of the game.
- User can browse 19 different genres, upon choosing, the user will be redirected to games based on that genre.
- User can browse 51 platforms, upon choosing, the user will be redirected to the games page with that platform(additional platforms that are available for that game are also included as an icon list)
- Games within the chosen genre are rendered with infinite scroll functionality to increase user experience(UX) to load more games without the need of navigation buttons.
- Games within the chosen platform are rendered with infinite scroll functionality to increase user experience(UX) to load more games without the need of navigation buttons.
