https://github.com/midhunterx/game-trackr
🅰️ Played Games List 2.0 built using Angular
https://github.com/midhunterx/game-trackr
angular18 daisyui game-library games-list sass tailwindcss time-tracker
Last synced: about 1 year ago
JSON representation
🅰️ Played Games List 2.0 built using Angular
- Host: GitHub
- URL: https://github.com/midhunterx/game-trackr
- Owner: MidHunterX
- License: mit
- Created: 2024-09-12T11:57:41.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-09T19:07:50.000Z (over 1 year ago)
- Last Synced: 2025-03-25T22:41:26.045Z (about 1 year ago)
- Topics: angular18, daisyui, game-library, games-list, sass, tailwindcss, time-tracker
- Language: TypeScript
- Homepage: https://midhunterx.github.io/Game-Trackr/
- Size: 30 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://www.figma.com/design/8O0MrwPahKFqxLz0STEKD6/Game-Trackr?node-id=0-1&t=TYBgrdCRQ3dTyy1q-1)
## ⚡ Features
- [x] OpenGraph and Twitter card metadata for social media sharing.
- [x] Vimium / Tridactyl / Keyboard friendly navigation (ft. tabindex="0")
- [x] Smartphone / Tablet friendly navigation.
- [x] Generate raster gaussian blur for background instead of CSS blur filter (resource intensive)
- [x] Ability to set custom user scroll position on Game Details throughout sidebar navigation.
- [x] URLs without id attrib to avoid history spamming (not really needed as data is handed over to next page)
- [x] Optimization: Data is handed over to routes to avoid data reloading
- [x] Add/remove IGDB entries from all games at once
- [x] IGDB API integration for game data
- [x] Loads data one time and passes to other pages
- [x] Optimization: Lazy loading images (on Cards and Workspace Icons only)
## 🚀 Quickstart
Step 1: Clone the project, cd into it and install dependencies
Using **HTTPS**:
```bash
git clone https://github.com/MidHunterX/Game-Trackr.git
cd Game-Trackr
npm install
```
Using **SSH** (Personal):
```bash
git clone git@github.com:MidHunterX/Game-Trackr.git
cd Game-Trackr
npm install
```
Step 2: Start Server (Make sure to have ng tool installed)
```bash
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:
```json
/* 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):
```ts
// 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):
```ts
// app.config.ts
import { withRouterConfig } from "@angular/router";
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes, withRouterConfig({ onSameUrlNavigation: "reload" }))],
};
```
Fetching JSON:
```json
/* tsconfig.json */
{
"compilerOptions": {
"resolveJsonModule": true
}
}
```
Using for loop:
```ts
// component.ts
import { CommonModule } from "@angular/common";
```
```html
{{ item.name }}
```
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.