Free Game Database

A modern React and TypeScript game discovery platform that allows users to browse, search, and explore a large collection of free-to-play games, with category filtering and detailed game information through an intuitive and responsive interface.

Live demo: https://maryam-rastin.github.io/Game-Database-TS-React/

Overview

Free Game Database is a frontend web application that consumes external game data APIs to provide users with a searchable and filterable database of free-to-play games.

The application focuses on delivering a seamless user experience through dynamic filtering, client-side routing, reusable components, and responsive design. Built with TypeScript and a custom Webpack configuration, the project demonstrates modern frontend engineering practices and scalable application architecture.

Features

• Browse a database of free-to-play games
• Search and filter games by category
• Explore detailed game information
• Discover related games
• Responsive and mobile-friendly design
• Dynamic data fetching from external APIs
• Fast client-side navigation
• Clean and user-friendly interface

Tech Stack

Frontend

• React
• TypeScript
• React Router DOM
• Styled Components

API & Data Management

• Axios
• REST API Integration

Build Tools

• Webpack
• Babel

Code Quality

• ESLint
• Prettier
• Stylelint
• Husky
• Lint-Staged

Deployment

• GitHub Pages

Screenshots

Installation

Clone the repository:

git clone https://github.com/Maryam-Rastin/Game-Database-TS-React.git

Navigate to the project directory:

cd Game-Database-TS-React

Install dependencies:

npm install

Start the development server:

npm run dev

Build for Production

Create an optimized production build:

npm run build

This generates a build folder containing the production-ready static files.

Deployment

This project is deployed to GitHub Pages. Deploy the latest build with:

npm run deploy

This runs the predeploy script (npm run build) automatically, then publishes the contents of the build folder to GitHub Pages.

Project Structure

Game-Database-TS-React/
├── src/
│   ├── components/        # Reusable UI components
│   ├── pages/              # Page-level views
│   ├── services/           # API and data-fetching logic
│   ├── routes/             # Client-side routing configuration
│   ├── styles/             # Styled Components and shared styles
│   ├── hooks/               # Custom React hooks
│   ├── utils/               # Helper functions and utilities
│   └── assets/              # Images, icons, and static assets
├── screenshot/            # Project screenshots for README
├── package.json
└── README.md

Learning Objectives

This project was built to strengthen skills in:

• TypeScript in React applications
• API integration and asynchronous programming
• Component-driven architecture
• Responsive design principles
• Modern frontend tooling
• Build and deployment workflows
• Code quality and development automation

Future Improvements

• User accounts and authentication
• Favorite games functionality
• Advanced filtering and sorting options
• Pagination and lazy loading
• Game ratings and reviews
• Dark mode support
• Personalized game recommendations

What I Learned

Through this project, I gained hands-on experience integrating external APIs, building dynamic client-side filtering, configuring a custom Webpack and TypeScript build environment, and enforcing code quality through ESLint, Stylelint, Prettier, and Husky pre-commit hooks.

Author

Maryam Rastin

GitHub: https://github.com/Maryam-Rastin