https://github.com/baguilar6174/angular-videogame-app

Este proyecto utiliza los servicios de Rapidapi y la mayor base de datos de videojuegos RAWG para obtener videojuegos, mostrar sus detalles, capturas de pantalla, trailers, plataformas, descripciones y sitios web oficiales.
https://github.com/baguilar6174/angular-videogame-app

angular rapidapi rawg-api typescript

Last synced: about 2 months ago
JSON representation

Este proyecto utiliza los servicios de Rapidapi y la mayor base de datos de videojuegos RAWG para obtener videojuegos, mostrar sus detalles, capturas de pantalla, trailers, plataformas, descripciones y sitios web oficiales.

• Host: GitHub
• URL: https://github.com/baguilar6174/angular-videogame-app
• Owner: baguilar6174
• Created: 2021-05-19T03:55:34.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2022-09-23T19:29:55.000Z (over 3 years ago)
• Last Synced: 2025-06-07T00:05:21.040Z (about 1 year ago)
• Topics: angular, rapidapi, rawg-api, typescript
• Language: TypeScript
• Homepage:
• Size: 6.22 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# [Angular Video Games App](https://videogames-app.netlify.app/)

This project presents an application to display and filter video games. This project was generated with [Angular](https://github.com/angular/angular-cli) version 11.2.5.

## Description

This project uses Rapidapi services and the largest RAWG video game database to obtain video games, show their details, screenshots, trailers, platforms, descriptions and official websites.

## Installation

To use this project, I recommend creating and using your own credentials in case the repository's are expired.

To generate your credentials you can visit [Rapiapi](https://rapidapi.com "Rapiapi") and [RAGW](https://rawg.io/ "RAGW"). Create your account and get your keys. Replace these values in the `app/core/interceptors/headers.interceptor.ts` file.

Run `npm i` and `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

### Links

Solution URL: [Live demo](https://videogames-app.netlify.app/)

## My process

### Built with

- Semantic HTML5 markup

- SCSS custom properties

- Flexbox

- Angular Material

## What I learned

- Good practices in angular code

- Angular Material customization

- Using interceptors for HTTP requests

- Correct structure of an Angular project with best practices ([see this article to know more](https://bryanaguilar6174.medium.com/estructura-base-para-cualquier-proyecto-de-angular-6a035a27bfcf "see this article to know more"))

## Author

- Website - [www.bryan-aguilar.com](https://www.bryan-aguilar.com/)

- Medium - [baguilar6174](https://baguilar6174.medium.com/)

- LinkeIn - [baguilar6174](https://www.linkedin.com/in/baguilar6174)

- Email - [bryan.aguilar6174@gmail.com](mailto:bryan.aguilar6174@gmail.com)

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## Project status

New improvements will be made to the website to allow new functions and improve the design of the application.

## Video Games App

![Home Page](https://github.com/bryanAguilar001/angular-videogame-app/blob/main/media/home.PNG?raw=true)

> Home page

![About tab](https://github.com/bryanAguilar001/angular-videogame-app/blob/main/media/detail.PNG?raw=true)

> Detail page - About Tab

![Screnshots tab](https://github.com/bryanAguilar001/angular-videogame-app/blob/main/media/screenshots.PNG?raw=true)

> Detail page - Screnshots Tab

![Trailers tab](https://github.com/bryanAguilar001/angular-videogame-app/blob/main/media/trailers.PNG?raw=true)

> Detail page - Trailers Tab

![Footer](https://github.com/bryanAguilar001/angular-videogame-app/blob/main/media/footer.PNG?raw=true)

> Home page - Footer