An Angular application that displays video game information from the RAWG Video Games Database. Browse, search, and filter games by platform and other criteria.

• Browse video game database
• Search games by title
• Filter by platform, genre, and other attributes
• View detailed game information
• Signal-based state management
• Responsive design with SCSS styling

• Node.js 20+ and npm 10+
• Angular CLI 19+
• Valid API keys from:
  • RapidAPI - for RAWG Video Games Database API
  • RAWG.io - Optional direct API access

git clone https://github.com/adekams/ng-video-games.git
cd ng-video-games

npm install

1. Add your API keys to src/environments/environment.ts:

   • Get RAPIDAPI_KEY from RapidAPI
   • Get RAWG_API_KEY from RAWG.io

   export const environment = {
     production: false,
     API_URL: "https://rawg-video-games-database.p.rapidapi.com",
     RAPIDAPI_KEY: "YOUR_RAPIDAPI_KEY_HERE",
     RAWG_API_KEY: "YOUR_RAWG_API_KEY_HERE",
   };

⚠️ Important: Never commit environment.ts with real API keys. The file can be in .gitignore for security.

ng serve

Navigate to http://localhost:4200/. The application will automatically reload if you change any source files.

Generate a new component:

ng generate component component-name

You can also use: ng generate directive|pipe|service|class|guard|interface|enum|module

ng build

Build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build:

ng build --prod

ng test

Execute unit tests via Karma.

ng e2e

Execute end-to-end tests via Protractor.

src/
├── app/
│   ├── components/          # Angular components
│   ├── services/            # Application services
│   ├── interceptors/        # HTTP interceptors
│   ├── models/              # Data models
│   └── app.config.ts        # App configuration
├── environments/            # Environment-specific settings
├── assets/                  # Static assets
└── styles.scss             # Global styles

• Angular 19 - Frontend framework
• TypeScript 5.8+ - Programming language
• RxJS 6.6 - Reactive programming
• SCSS - Styling
• Karma - Unit testing
• Protractor - E2E testing
• ESLint - Code linting

• Angular CLI Overview
• RAWG API Documentation
• Angular Documentation