zwiqler94/jz-portfolio

How zwiqler94/jz-portfolio works

JzPortfolio is an Angular personal portfolio with a news/blog feed and a protected editor, backed by Express/Firebase Functions APIs and PostgreSQL. Visitors navigate portfolio, hobbies, contact, and blog content; the editor creates posts, while feed and link-preview endpoints read or update stored content. The graph includes documented UI areas and the sampled API/database path. Several frontend service-to-page calls are not visible in the excerpts, so those links are omitted rather than inferred.

Main entry points: app.routes.ts Page routing · api.routes.ts API routes · db.controller.ts Database controller · app.ts Express app

Components 23

Portfolio web app

Angular bootstrap src/main.ts
Application shell src/app/app.component.ts
Page routing src/app/app.routes.ts
Authentication service src/app/services/auth-service/auth.service.ts
Environment configuration src/environments/environment.ts

Content experience

Home and projects src/app/pages/home-page
Hobbies pages src/app/pages/hobbies/hobbies.component.ts
Photography gallery src/app/pages/hobbies/photography-tab/photography-tab.component.ts
Photo gallery component src/app/components/photo-gallery/photo-gallery.component.ts
News feed page src/app/pages/news/news.component.ts
Post feed src/app/components/feed/feed.component.ts
Blog editor src/app/pages/editor-page/editor-page.component.ts
Post composition src/app/components/new-post-dialog/new-post-dialog.component.ts
Post models src/app/components/models/post.model.ts

Functions API

Express app functions/src/app.ts
API routes functions/src/routes/api.routes.ts
API middleware functions/src/middleware/general.middleware.ts
Post controller functions/src/controllers/post.controller.ts
Link preview controller functions/src/controllers/link-preview.controller.ts

Persistence

Database controller functions/src/controllers/db.controller.ts
PostgreSQL

Other components

Visitor or editor
Cloudinary

Connections 23

Visitor or editor → Angular bootstrap: opens app src/main.ts
Angular bootstrap → Application shell: bootstraps src/main.ts
Application shell → Page routing: hosts routes src/app/app.component.ts
Page routing → Authentication service: guards pages src/app/app.routes.ts
Page routing → Home and projects: loads src/app/app.routes.ts
Page routing → Hobbies pages: loads src/app/app.routes.ts
Page routing → News feed page: loads src/app/app.routes.ts
Page routing → Blog editor: loads src/app/app.routes.ts
Photography gallery → Photo gallery component: uses src/app/pages/hobbies/photography-tab/photography-tab.component.ts
News feed page → Post feed: renders src/app/pages/news/news.component.ts
Environment configuration → Express app: configures API URL src/environments/environment.ts
Express app → API middleware: sets middleware functions/src/app.ts
Express app → API routes: mounts routes functions/src/app.ts
API routes → API middleware: registers guards functions/src/routes/api.routes.ts
API routes → Post controller: registers handlers functions/src/routes/api.routes.ts
API routes → Link preview controller: registers handlers functions/src/routes/api.routes.ts
API routes → Database controller: constructs functions/src/routes/api.routes.ts
Post controller → Database controller: queries functions/src/controllers/post.controller.ts
Link preview controller → Database controller: queries functions/src/controllers/link-preview.controller.ts
Database controller → PostgreSQL: reads and writes functions/src/controllers/db.controller.ts
Post composition → Post models: uses model
Post feed → Post models: uses model
Photography gallery → Cloudinary: loads images

Drawn by GitDiagram on November 15, 2026 from the repository's file tree, README and source files. Read as Markdown ·