jctiru/gamewatch-frontend

A game information and news source website. Java microservices using Spring Boot and Spring Cloud for backend and React SPA for frontend. Hosted on AWS.

GameWatch

Live Link

• Frontend - https://gamewatch.jctiru.com
• Backend - https://api.gamewatch.jctiru.com

Overview

A game information and news source website. Java microservices using Spring Boot and Spring Cloud for backend and React SPA for frontend. Microservices environment is simulated as multiple containers inside a single EC2 instance.

Backend hosted on AWS Elastic Beanstalk with multi-docker config. Frontend assets on AWS S3. S3 bucket is behind AWS CloudFront CDN and is not directly accessible except only through AWS CloudFront by using Origin Access Identity. AWS Cloudfront SSL/TLS certificate for custom domain is provided by AWS ACM. Domain registration and DNS service handled by AWS Route53.

Frontend repo goes through TravisCI pipeline which builds the assets and uploads to S3 bucket. Backend repos also goes through TravisCI pipeline which builds and uploads the docker images to Docker Hub, then triggers a central GitlabCI pipeline which handles deployment to Elastic Beanstalk for all projects (includes other projects which are also hosted in the same single EC2 instance). Traefik is used as reverse proxy for multiple containers and to automate Let's Encrypt SSL/TLS certificate generation/management.

Project Flow Diagram

Inside Elastic Beanstalk

Backend Microservices

• Discovery Server - https://github.com/jctiru/gamewatch-discovery-server
• API Gateway - https://github.com/jctiru/gamewatch-api-gateway
• Game Catalog Service - https://github.com/jctiru/gamewatch-game-catalog-service
• Game News Service - https://github.com/jctiru/gamewatch-game-news-service

Features

• View popular games right now, recently released games, coming soon games and most anticipated games
• View game information like release date, publisher, platforms, videos, screenshots, artworks, similar games, etc.
• View latest gaming news

Overall Project Tech Stack

Frontend

• React - JS library for building user interfaces
• React Router - Routing for react
• Redux - JS library for managing application state
• Redux-Saga - Redux middleware for handling side effects
• Bootstrap - CSS framework
• Bootswatch - Bootstrap themes
• Axios Promise based HTTP client

Backend

• Spring Boot - Preconfigured spring framework
• Eureka - Client-side service discovery
• Zuul - API Gateway
• Feign - Java to HTTP client binder
• Twitch API - Get OAuth token for IGDB API
• IGDB API - Gaming database site recently acquired by Twitch
• GameSpot API - Used for gaming news

AWS

• AWS Elastic Beanstalk - PaaS for hosting webapp
• AWS S3 - File storage for static front-end assets
• AWS Cloudfront - CDN for S3
• AWS Route53 - Domain registrar and DNS service
• AWS ACM - SSL/TLS certificates for cloudfront with custom domain
• AWS IAM - Manage permissions to allow and deny access to AWS resources

Misc/Others

• OpenJ9 - JVM for OpenJDK for low memory footprint, used for building docker images of backend
• Docker - Containerization
• TravisCI - CI/CD for building the frontend assets and deploying to S3; CI/CD for building docker images of backend and pushing to dockerhub
• GitlabCI - CI/CD for aggregating projects for deployment to AWS
• git-secret - Encrypt git files at rest and decrypt during CI/CD on Gitlab private repo that deploys to AWS
• Traefik - Reverse proxy and automatic SSL/TLS management
• Let's Encrypt - SSL/TLS certificate

Overall Project To-Do List

General

• Code refactoring
• Code cleanup
• Add tests
• Etc...

Frontend Specific

• Improve design a bit
• Change carousels arrows design
• Change release date presentation for no-fixed release dates
• Add lightbox for media carousel in game page
• Add captions for media carousel in game page
• Add captions for recommended games carousel in game page
• Etc...

Backend Specific

• Add game search microservice
• Add game reviews microsevice
• Rewrite fetching of IGDB API from v3 to v4
• Change news source to GameSpot API because of IGDB API breaking changes
• Change most popular and most anticipated games query logic because of IGDB API breaking changes
• Add retryer on feignclient of IGDB API calls due to new rate limits
• Add redis to cache results due to new rate limits
• Add feign error decoder
• Add hystrix circuit breaker
• Add config server
• Add zipkin and sleuth
• Add filebeat that sends to external ELK Stack
• Add swagger documentation
• Improve error messages
• Add simple response on http get on root url
• Etc...