Skip to content

BilgeGates/Functional_Gaming-Site

BranchesTags

Repository files navigation

🎮 PlayGuide

Game information platform with 1000+ games database

React Tailwind CSS RAWG API Privacy License: MIT PRs Welcome

Live Demo · Report Bug · Request Feature

📖 Table of Contents

🌟 Overview

Web application for browsing 1000+ games with ratings, Metacritic scores, and genre information. Built with React and runs entirely in the browser.

✨ Features

  • Browse 1000 games with detailed information
  • View ratings, Metacritic scores, and genres
  • Add games to favorites
  • Rate games and submit reviews
  • Search and filter by name, genre, platform
  • View game details, screenshots, and statistics
  • Viewing history and recently viewed games
  • Responsive design

🖼 Demo & Screenshots

Live demo: https://playguide-site.vercel.app/

🚀 Quick Start

Prerequisites

Node.js >= 18
npm >= 8

Installation

# Clone the repository
git clone https://github.com/BilgeGates/Functional_Gaming-Site.git

# Navigate to project directory
cd Functional_Gaming-Site

# Install dependencies
npm install

# Start development server
npm start

The application will automatically open at http://localhost:3000

Production Build

# Create optimized production build
npm run build

📁 Project Structure

playguide/
│
├── 📂 public/
│   ├── index.html
│   └── assets/               # Static assets
│
├── 📂 src/
│   │
│   ├── 📂 assets/            # Images, fonts, icons
│   │
│   ├── 📂 components/
│   │   │
│   │   ├── 📂 common/        # Reusable components
│   │   │   ├── Controls.jsx
│   │   │   ├── FavoritesModal.jsx
│   │   │   ├── GameCard.jsx
│   │   │   ├── GameList.jsx
│   │   │   ├── MotionWrapper.jsx
│   │   │   ├── Pagination.jsx
│   │   │   ├── RatingModal.jsx
│   │   │   ├── RatingViewsModal.jsx
│   │   │   ├── RecentViewsModal.jsx
│   │   │   ├── SearchBar.jsx
│   │   │   ├── SearchGameItem.jsx
│   │   │   ├── Stats.jsx
│   │   │   └── index.js
│   │   │
│   │   ├── 📂 sections/      # Section components
│   │   │   │
│   │   │   ├── 📂 CategoriesSection/
│   │   │   │   └── CategoriesSection.jsx
│   │   │   │
│   │   │   ├── 📂 Header/
│   │   │   │   ├── Header.jsx
│   │   │   │   └── HeroSection.jsx
│   │   │   │
│   │   │   ├── 📂 TopRatedSection/
│   │   │   │   └── TopRatedSection.jsx
│   │   │   │
│   │   │   └── 📂 TrendingSection/
│   │   │       └── TrendingSection.jsx
│   │   │
│   │   └── 📂 ui/            # UI components
│   │       ├── ActionButton.jsx
│   │       ├── CardOverlay.jsx
│   │       ├── ErrorMessage.jsx
│   │       ├── ExploreButton.jsx
│   │       ├── GameStats.jsx
│   │       ├── GenreBadge.jsx
│   │       ├── LoadingSpinner.jsx
│   │       ├── MetacriticScore.jsx
│   │       ├── RatingBadge.jsx
│   │       ├── SectionHeader.jsx
│   │       └── index.js
│   │
│   ├── 📂 hooks/             # Custom React hooks
│   │   ├── index.js
│   │   ├── useDocumentTitle.js
│   │   ├── useFavorites.js
│   │   ├── useGameData.js
│   │   ├── useHandlers.js
│   │   ├── useInViewAnimation.js
│   │   ├── useLocalStorage.js
│   │   ├── useLogic.js
│   │   ├── useRating.js
│   │   ├── useRatingViews.js
│   │   ├── useRecentViews.js
│   │   ├── useSearch.js
│   │   ├── useSearchInteractions.js
│   │   ├── useSearchKeyboard.js
│   │   └── useSearchResults.js
│   │
│   ├── 📂 layout/            # Layout components
│   │   ├── 📂 Footer/
│   │   │   └── Footer.jsx
│   │   ├── 📂 Navbar/
│   │   │   └── Navbar.jsx
│   │   └── index.js
│   │
│   ├── 📂 pages/             # Application pages
│   │   ├── 📂 About/
│   │   │   └── About.jsx
│   │   ├── 📂 Contact/
│   │   │   └── Contact.jsx
│   │   ├── 📂 Home/
│   │   │   └── Home.jsx
│   │   ├── 📂 ProductDetails/
│   │   │   └── ProductDetails.jsx
│   │   └── 📂 Products/
│   │       └── Products.jsx
│   │
│   ├── 📂 routes/            # Routing configuration
│   │   └── router.jsx
│   │
│   ├── 📂 utils/             # Utility functions
│   │   ├── dateUtils.js
│   │   ├── formatUtils.js
│   │   ├── iconUtils.js
│   │   ├── searchUtils.js
│   │   └── index.js
│   │
│   ├── App.jsx               # Root component
│   ├── index.js              # Entry point
│   └── index.css             # Global styles
│
├── 📄 db.json                # Game database (1000+ games)
├── 📄 .gitignore
├── 📄 postcss.config.js
├── 📄 tailwind.config.js
├── 📄 package.json
├── 📄 package-lock.json
├── 📄 README.md
├── 📄 CONTRIBUTING.md
├── 📄 CODE_OF_CONDUCT.md
├── 📄 SECURITY.md
└── 📄 LICENSE

🛠️ Technology Stack

Core Technologies


React 18+
UI Framework
JavaScript ES6+
Language
Tailwind CSS 3.x
Styling
Node.js 18+
Runtime

Additional Libraries

  • React Router - Client-side routing
  • localStorage - User data persistence
  • RAWG API - Game data source (pre-fetched)

🌐 Browser Support

Browser Version Status
Chrome 90+ ✅ Tested
Firefox 88+ ✅ Tested
Safari 14+ ✅ Expected to work
Edge 90+ ✅ Expected to work
Opera 76+ ✅ Expected to work

Required Browser Features

  • ES6+ JavaScript
  • CSS Grid & Flexbox
  • localStorage API
  • Responsive viewport support

🎮 Game Data

PlayGuide stores all game data locally in db.json. This data was originally sourced from the RAWG API and includes:

Data Structure

{
  id: Number,                    // Unique game ID
  name: String,                  // Game title
  slug: String,                  // URL-friendly name
  released: String,              // Release date (YYYY-MM-DD)
  background_image: String,      // Main image URL
  rating: Number,                // Average rating (0-5)
  rating_top: Number,            // Top rating value
  ratings_count: Number,         // Number of ratings
  metacritic: Number,            // Metacritic score (0-100)
  playtime: Number,              // Average playtime (hours)
  genres: Array                  // Array of genre objects
}

Data Features

  • 1000+ pre-loaded games
  • Ratings and Metacritic scores
  • Multiple genres per game
  • Release dates and playtime statistics

Data Attribution

RAWG API data is used for educational and non-commercial purposes only.

🔐 Security & Privacy

Zero-backend architecture - all functionality runs in the browser.

🔒 Security Highlights

  • ✅ No server-side data storage
  • ✅ Client-side processing only
  • ✅ No cookies, trackers, or fingerprinting
  • ✅ No third-party analytics or telemetry
  • ✅ No user data is collected, stored, or transmitted

🛡️ Data Safety

All favorites, ratings, and viewing history are stored locally using localStorage.

For security concerns, see SECURITY.md.

🤝 Contributing

Contributions welcome.

Quick Contribution Guide

# 1. Fork the repository
# 2. Create your feature branch
git checkout -b feature/amazing-feature

# 3. Commit your changes
git commit -m 'feat: add amazing feature'

# 4. Push to the branch
git push origin feature/amazing-feature

# 5. Open a Pull Request

Please read CONTRIBUTING.md for detailed guidelines on:

  • Code standards and best practices
  • Pull request process
  • Bug reporting
  • Feature requests

Code of Conduct

This project adheres to the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code.

Contributors

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2026 Khatai Huseynzada

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

👨‍💻 Author

Khatai Huseynzada

Front-End Web Developer | Open Source Contributor

GitHub LinkedIn Email

🙏 Acknowledgments


React Team
Framework
Tailwind Labs
CSS Framework 		RAWG API
Game Database

📧 Community & Support

Channel Link
🐛 Bug Reports GitHub Issues
💡 Feature Requests GitHub Discussions
📧 Email darkdeveloperassistant@gmail.com

Responses on a best-effort basis

❓ FAQ

How do I report a bug?
  1. Check if the issue already exists in GitHub Issues
  2. If not, create a new issue with:
    • Clear description of the problem
    • Steps to reproduce
    • Expected vs actual behavior
    • Screenshots (if applicable)
    • Browser and OS information
Can I use this commercially?

Yes! The source code is MIT licensed and can be used commercially.
However, game data originally sourced from the RAWG API is intended for educational and non-commercial use only. If you plan to use this project commercially, you must replace the data source with a licensed provider.

How do I add more games?
  1. Games are stored in db.json
  2. Follow the existing data structure
  3. Add new game objects to the array
  4. Submit a pull request with your changes
Where does the game data come from?

Game data was originally sourced from the RAWG API and is now maintained locally in db.json.
The application does not fetch data at runtime.

How is my data stored?

All user data (favorites, ratings, viewing history) is stored locally in your browser using localStorage.
No data is sent to any server.

© 2026 Khatai Huseynzada. Licensed under MIT.

About

A comprehensive game information platform featuring 1000 games with detailed statistics, user ratings, favorites system, and advanced search capabilities. Built with React, Tailwind CSS, and localStorage for a privacy-first experience.

playguide-site.vercel.app/

Topics

react javascript gaming frontend web-app game-library game-database responsive-design tailwind-css game-platform game-ratings game-search rawg-api game-information- game-catolog

Resources

Readme

License

MIT license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 2

v2.0.0 - Complete Rewrite: From Template to Functional Platform Latest
Jan 9, 2026
+ 1 release

Contributors

Languages