The Game Database

Build this project step by step with a detailed tutorial on Code Spirit YouTube.

📋 Table of Contents

1. 🎬 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🚀 Quick Start
5. 🕸️ Snippets (Code to Copy)
6. 🔗 Assets

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, Code Spirit.

⚙️ Tech Stack

• React.js
• Next.js
• Typescript
• TailwindCSS
• RAWG API
• ShadCN

🎬 Introduction

Welcome to The Game Database app! This web application allows you to discover games by genre with detailed information fetched from the RAWG API. It features a sleek and responsive design, including a dark/light mode toggler for an optimal user experience across devices.

🔋 Features

👉 Game Search by Genre: Find and explore games based on your favorite genres.

👉 Dark/Light Theme Mode: Toggle between dark and light themes for a comfortable viewing experience.

👉 Responsive Design: Ensures a seamless experience on all devices, whether desktop, tablet, or mobile.

🚀 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/code-spirit-369/the-game-db.git
cd the-game-db

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

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

RAWG_API_KEY=

Get your API key from RAWG.

Running the Project

npm run dev

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

🕸️ Code Snippets

/types.ts

interface Genre {
  id: number;
  name: string;
  slug: string;
  image_background: string;
}

interface Platform {
  platform: {
    id: number;
    name: string;
    slug: string;
  };
}

interface Game {
  id: number;
  slug: string;
  name: string;
  background_image: string;
  rating: number;
  parent_platforms: Platform[];
  genres: Genre[];
}

🔗 Assets

Public assets used in the project can be found here