https://github.com/nicolasoyarce/rawg-game-library
A web application built with React, Vite, TypeScript, and Tailwind CSS that allows users to search and view information about video games using the RAWG API.
https://github.com/nicolasoyarce/rawg-game-library
api react tailwindcss typescript vercel vite
Last synced: 3 months ago
JSON representation
A web application built with React, Vite, TypeScript, and Tailwind CSS that allows users to search and view information about video games using the RAWG API.
- Host: GitHub
- URL: https://github.com/nicolasoyarce/rawg-game-library
- Owner: nicolasOyarce
- License: mit
- Created: 2025-03-18T05:29:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-20T05:55:11.000Z (over 1 year ago)
- Last Synced: 2025-03-20T06:30:39.449Z (over 1 year ago)
- Topics: api, react, tailwindcss, typescript, vercel, vite
- Language: TypeScript
- Homepage: https://rawg-game-library.vercel.app/
- Size: 923 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎮 RAWG GAME LIBRARY
A web application built with **React, Vite, TypeScript, and Tailwind CSS** that allows users to search and view information about video games using the RAWG API.
> [!IMPORTANT]
> You can visit the page with the following url => https://rawg-game-library.vercel.app/
## 🚀 Technologies Used
- **React + Vite**: Fast and efficient project setup.
- **TypeScript**: Ensures type safety and better code maintainability.
- **Tailwind CSS**: Provides a utility-first approach to styling.
- **Axios**: Handles API requests to RAWG.
## 📌 Features
✔️ **Homepage** displaying a list of video games sorted by **Metacritic score**.
✔️ **Advanced filters** to search by **year, genre, platform, tags, and developer**.
✔️ **Search bar** to find video games by name.
✔️ **Detail page** with comprehensive information, including:
- Title
- Genre
- Rating
- Cover image
- Platforms
- Release year
- Trailers (if available)
## 🎨 Screenshots
## 🔧 Installation & Setup
#### 1️⃣ Clone the repository
```bash
git clone https://github.com/nicolasOyarce/rawg-game-library.git
cd rawg-game-library
```
#### 2️⃣ Install dependencies
```bash
npm install
```
#### 3️⃣ Configure API Key
Create a .env file in the project root and add your RAWG API Key:
```env
VITE_RAWG_API_KEY=your_api_key_here
```
#### 4️⃣ Start the application
```bash
npm run dev
```
The application will be available at http://localhost:5173.
## 📁 Project Structure
```
📦 rawg-game-library
├── 📂 src
│ ├── 📂 components # Reusable UI components
│ ├── 📂 pages # Main application pages
│ ├── 📂 services # API calls
│ ├── 📂 hooks # Custom hooks
│ ├── 📂 types # TypeScript definitions
│ ├── App.tsx # Main application component
│ ├── main.tsx # React rendering entry point
│ ├── index.css # Global styles using Tailwind CSS
├── .env # Environment variables
├── package.json # Dependencies and scripts
```
## 🛠️ Additional Libraries
- React Router: For handling page navigation.
- React Query (optional): For better data fetching and caching management.
## 📜 Considerations
- The code is structured and documented for easy maintenance.
- The project follows a modular architecture, separating components, services, hooks, and types.
- The application is fully responsive thanks to Tailwind CSS.
## 📄 License
This project is licensed under the MIT License. Feel free to use and modify it.