https://github.com/code-spirit-369/the-game-db

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.
https://github.com/code-spirit-369/the-game-db

nextjs rawg-api shadcn-ui tailwindcss typescript

Last synced: 5 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/code-spirit-369/the-game-db
• Owner: code-spirit-369
• Created: 2024-08-07T18:57:39.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-07T20:40:28.000Z (6 months ago)
• Last Synced: 2024-08-09T04:24:07.327Z (5 months ago)
• Topics: nextjs, rawg-api, shadcn-ui, tailwindcss, typescript
• Language: TypeScript
• Homepage:
• Size: 375 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  


    

      

    

  


  


    

    

    

    

  


  
The Game Database




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

    



## 📋 Table of Contents

1. 🎬 [Introduction](#introduction)

2. ⚙️ [Tech Stack](#tech-stack)

3. 🔋 [Features](#features)

4. 🚀 [Quick Start](#quick-start)

5. 🕸️ [Snippets (Code to Copy)](#snippets)

6. 🔗 [Assets](#links)

## 🚨 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](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)

**Cloning the Repository**

```bash

git clone https://github.com/code-spirit-369/the-game-db.git

cd the-game-db

```

**Installation**

Install the project dependencies using npm:

```bash

npm install

```

**Set Up Environment Variables**

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

```env

RAWG_API_KEY=

```

Get your API key from [RAWG](https://rawg.io/).

**Running the Project**

```bash

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.

## 🕸️ Code Snippets

/types.ts

```typescript

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](https://drive.google.com/file/d/1etCa7Aidnv0GGrkwscWoz_rlhGr82l4w/view?usp=sharing)