Gamer Trackr

A simple frontend to keep track of the library of games that that I have played in my lifetime.

To view easteregg: Refresh any game details page once

🍳 Made with

           

Design Files: Game Trackr - Figma

⚡ Features

• OpenGraph and Twitter card metadata for social media sharing.
• Vimium / Tridactyl / Keyboard friendly navigation (ft. tabindex="0")
• Smartphone / Tablet friendly navigation.
• Generate raster gaussian blur for background instead of CSS blur filter (resource intensive)
• Ability to set custom user scroll position on Game Details throughout sidebar navigation.
• URLs without id attrib to avoid history spamming (not really needed as data is handed over to next page)
• Optimization: Data is handed over to routes to avoid data reloading
• Add/remove IGDB entries from all games at once
• IGDB API integration for game data
• Loads data one time and passes to other pages
• Optimization: Lazy loading images (on Cards and Workspace Icons only)

🚀 Quickstart

Step 1: Clone the project, cd into it and install dependencies

Using HTTPS:

git clone https://github.com/MidHunterX/Game-Trackr.git
cd Game-Trackr
npm install

Using SSH (Personal):

git clone [email protected]:MidHunterX/Game-Trackr.git
cd Game-Trackr
npm install

Step 2: Start Server (Make sure to have ng tool installed)

ng serve

Step 3: Navigate to development url

http://localhost:4200/

Step 4: Profit?

💽 Technologies Used

Technology	Description
Angular 18	Web Application Framework
HTML5	Frontend Markup Language
SASS	Better styling DX
TailwindCSS	CSS Framework
DaisyUI	Tailwind Component Library
angular-fontawesome	Font Awesome for Angular
free-solid-svg-icons	Solid Icons for Font Awesome
angular-cli-ghpages	Angular CI/CD Deploy Script

Personal Note

BG Blur = 19:6 + h-180 + Gaussian Blur 15px

Angular 18 Notes

Having favicon and a Public Directory:

/* angular.json */
{
  "projects": {
    "Project-Name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              {
                "glob": "**/*",
                "input": "public",
                "output": "public" /* add this */
              }
            ]
          }
        }
      }
    }
  }
}

Having normal scroll position behaviour (InMemoryScrolling):

// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
import { provideRouter, withComponentInputBinding, withInMemoryScrolling } from "@angular/router";

import { routes } from "./app.routes";

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(
      routes,
      withComponentInputBinding(),
      withInMemoryScrolling({
        scrollPositionRestoration: "enabled",
        anchorScrolling: "enabled",
      }),
    ),
  ],
};

Handling same url route navigation (OnSameUrlNavigation):

// app.config.ts
import { withRouterConfig } from "@angular/router";

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withRouterConfig({ onSameUrlNavigation: "reload" }))],
};

Fetching JSON:

/* tsconfig.json */
{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

Using for loop:

// component.ts
import { CommonModule } from "@angular/common";

<!-- component.html -->
<tag *ngFor="let item of items">
  <text>{{ item.name }}</text>
</tag>

Deploying:

ng deploy --message="" [email protected]:MidHunterX/Game-Trackr.git --base-href="/Game-Trackr/"

--repo: by default the repository is discovered from the current working directory.