Discover Games Galore: Welcome to NexGen Nexus

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 📸 Screenshots

🤖 Introduction

Welcome to NexGen Nexus, your ultimate game discovery platform, powered by React, React Query, Chakra UI, TypeScript, Axios, and Zustand, where we seamlessly integrate the RAWG API to provide gamers with a comprehensive collection of the latest and greatest titles for an immersive and effortless browsing experience.

⚙️ Tech Stack

• React.js
• TypeScript
• React Query
• Chakra UI
• Axios
• Zod
• Zustand

🔋 Features

👉 Extensive Game Library: Explore a diverse collection of games across various genres.

👉 Dynamic Content Loading: Experience seamless loading of game content with React Query and Infinite Scroll Component for a continuously refreshing experience.

👉 Responsive Design: Delight in a visually appealing and responsive design crafted with Chakra UI and Framer Motion, ensuring an optimal experience across devices.

👉 Filter Functionality: Users can access various games covering diverse genres such as action, indie, adventure, RPG, shooting, strategy, and more.

👉 Sort by Platform: Allow users to sort games by platform, including PC, Xbox, Android, Nintendo, PlayStation, and more, providing tailored experiences for different gaming preferences.

👉 User-Friendly Search: Enable users to easily search for specific games, making it convenient to find their favorites or discover new titles.

👉 Detailed Game Page: Implement a detailed game page providing developers access to comprehensive game descriptions, screenshots, and more.

👉 Light and Dark Mode: Implement both light and dark themes to provide users with a personalized and visually comfortable experience.

👉 React Query Integration: Incorporate the React Query (Tanstack Query) data fetching library for, Auto caching to enhance performance and parallel queries for efficient data retrieval.

👉 Developer-Friendly Integration: Ensure seamless integration of game data into developer projects through well-documented APIs and developer tools, facilitating efficient development workflows and customization, leveraging the RAWG API for backend fetching of game data.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/TarakaKoda/NexGenNexus.git
cd NexGenNexus

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

VITE_DATABASE_URL="https://api.rawg.io/api"
VITE_RAWG_API_KEY=""

Replace the placeholder values with your actual RAWG API credentials. You can obtain these credentials by signing up on the RAWG API.

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.

📸 Screenshots

Games 🎮
Desktop View 💻
Tablet View 📱	Mobile View 📱

Infinite Scrolling ♾️

FILTER BY GENRE 🗄️
Desktop View 💻
Tablet View 📱	Mobile View 📱

FILTER BY PLATFORM🔍
Desktop View 💻
Tablet View 📱	Mobile View 📱

SORTING GAMES 🔡
Desktop View 💻
Tablet View 📱	Mobile View 📱

SEARCH NEW GAMES 🔍
Desktop View 💻
Tablet View 📱	Mobile View 📱

DETAILED GAME 🎮
Desktop View 💻
Tablet View 📱	Mobile View 📱

LIGHT MODE ☀️

Games 🎮
Desktop View 💻
Tablet View 📱	Mobile View 📱

Infinite Scrolling ♾️

FILTER BY GENRE 🗄️
Desktop View 💻
Tablet View 📱	Mobile View 📱

FILTER BY PLATFORM🔍
Desktop View 💻
Tablet View 📱	Mobile View 📱

SORTING GAMES 🔡
Desktop View 💻
Tablet View 📱	Mobile View 📱

SEARCH NEW GAMES 🔍
Desktop View 💻
Tablet View 📱	Mobile View 📱

DETAILED GAME 🎮
Desktop View 💻
Tablet View 📱	Mobile View 📱