A full on Angular revamp of my very first web development project Played Games List 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
π Design File: Game Trackr - Figma
- OpenGraph and Twitter card metadata for social media sharing.
- Vimium / Tridactyl / Keyboard friendly navigation
- 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)
Step 1: Clone the project, cd into it and install dependencies
git clone git@github.com:MidHunterX/Game-Trackr.git
cd Game-Trackr
npm installStep 2: Start Server (Make sure to have ng tool installed)
ng serve
Step 3: Navigate to development url
http://localhost:4200/
Step 4: Profit?
| 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 |
BG Blur = 19:6 + h-180 + Gaussian Blur 15px
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="" --repo=git@github.com:MidHunterX/Game-Trackr.git --base-href="/Game-Trackr/"
--repo: by default the repository is discovered from the current working directory.