How frereriku/my-goals-app works
1. Project type and runtime
- This is an Angular 21 application built as a single-page UI with server-side rendering support.
- The repo includes both browser and server entry points (src/main.ts, src/main.server.ts, src/server.ts) plus separate app configs/routes for client and server.
2. Top-level app structure
- The application is organized around a small set of feature components under src/app/components/.
- The main user-facing flow appears to be a goals tracker: users register, then view/manage goals, with a progress modal/dialog for status updates.
3. Core UI shell
- app.ts, app.html, app.scss, and app.routes.ts define the root application shell and route composition.
- main.component is likely the central landing/dashboard component that orchestrates the feature views.
4. Feature boundaries
- register.component handles account creation or first-time onboarding.
- view.component is the primary authenticated goals display screen.
- progress-dialog.component is a focused UI overlay for showing or editing goal progress without leaving the main view.
- This suggests a clear split between shell/navigation and task-specific feature panels.
5. Data and persistence layer
- The src/app/services/ directory contains the application’s non-UI logic.
- database.ts is the persistence adapter, and based on the README it likely talks to Supabase for cloud storage/sync.
- auth.service.ts handles identity/session state and likely gates access to the goal data.
6. Service-driven architecture
- UI components should depend on services rather than directly on remote APIs.
- That creates a boundary where:
- components manage presentation and interaction,
- services manage auth state, data fetch/update, and persistence concerns.
7. Client/server rendering split
- app.config.ts and app.routes.ts define the browser-side app composition.
- app.config.server.ts and app.routes.server.ts define the server-side counterparts used during SSR.
- server.ts is the Node server entry used to render the app on the server before hydration in the browser.
8. Environment and configuration
- src/environment/environment.ts centralizes environment-specific settings, likely including Supabase endpoints/keys and build-time flags.
- This keeps deployment-specific values out of the feature code and allows different behavior for local dev versus production.
9. Deployment and infrastructure
- The README says deployment is via Vercel, so the architecture likely relies on Vercel’s build/deploy pipeline for the Angular app and SSR output.
- The repo also includes Docker and devcontainer files, indicating a reproducible containerized development environment rather than a custom backend runtime.
10. Local development model
- Development is container-first: .devcontainer/ and docker-compose.yaml support opening the repo in VS Code and running npm install / npm start.
- The Angular dev server is the main local entrypoint; it serves the client app and refreshes on source changes.
11. Static assets and styling
- public/ holds static assets, while src/styles.scss and per-component SCSS files provide global and scoped styling.
- Styling is component-oriented, which supports modular UI composition across the feature components.
12. Testing boundaries
- Each major component and service has co-located spec files (*.spec.ts), showing that the repo is structured for unit-level verification around UI and service logic.
- The test surface aligns with the architecture: components for interaction, services for business/data behavior.
13. Likely end-to-end data flow
- A user loads the app → SSR/client bootstraps the Angular shell → auth state is resolved through auth.service → goal data is read/written through database.ts → the main/view components render the current goal list/state → the progress dialog updates an item and persists it back to Supabase.
14. Key architectural boundaries to draw
- Presentation layer: Angular components under src/app/components/
- Application shell/routing: root app files and route configs
- Domain/data services: auth.service.ts, database.ts
- External backend: Supabase
- Deployment/runtime: Vercel + Angular SSR/server entry points
Main entry points: app.ts App shell · main.component.ts Main view · auth.service.ts Auth service · database.ts Database
Components 17
Presentation
User-facing Angular components for onboarding and goal management.
- Main view · Primary authenticated screen for viewing and managing goals.
src/app/components/main/main.component.ts - Register · Account creation or first-time user onboarding view.
src/app/components/register/register.component.ts - Goals view · Screen that displays and manages the user’s goals.
src/app/components/view/view.component.ts - Progress dialog · Modal dialog for editing or reviewing goal progress.
src/app/components/progress-dialog.component/progress-dialog.component.ts
App Shell
Root Angular composition, routing, and platform entry points.
- App shell · Root application component and composition shell.
src/app/app.ts - Client config · Browser-side app configuration.
src/app/app.config.ts - Client routes · Browser route composition for the app.
src/app/app.routes.ts
Services
Stateful auth and persistence logic used by the UI.
- Auth service · Handles identity and access state for the app.
src/app/services/auth.service.ts - Database · Persistence adapter for goal data and sync operations.
src/app/services/database.ts - Environment · Build-time environment settings and external endpoint configuration.
src/environment/environment.ts
Runtime
SSR and deployment/runtime boundaries.
- Server config · Server-side app configuration for SSR.
src/app/app.config.server.ts - Server routes · Server-side route definitions used during rendering.
src/app/app.routes.server.ts - Browser entry · Client bootstrap entry point.
src/main.ts - Server entry · Server bootstrap entry point for pre-rendering.
src/main.server.ts - Node server · Node runtime server used to render the Angular app.
src/server.ts - Supabase · Cloud backend for authentication and data persistence.
- Vercel · Hosting and SSR deployment platform.
Connections 20
- Browser entry → App shell: bootstraps · Client bootstrap starts the Angular app.
- Server entry → Node server: starts · SSR entry starts the Node rendering host.
- Node server → App shell: renders · Server renders the Angular shell before hydration.
- App shell → Client config: uses · Root shell uses browser configuration.
- App shell → Client routes: uses · Root shell composes browser routes.
- App shell → Server config: uses · SSR shell uses server configuration.
- App shell → Server routes: uses · SSR shell uses server route definitions.
- App shell → Main view: hosts · Root shell mounts the main dashboard flow.
- Main view → Register: navigates · Onboarding path leads into registration.
- Main view → Goals view: navigates · Main dashboard routes to the goals screen.
- Goals view → Progress dialog: opens · Goals screen opens the progress modal.
- Register → Auth service: authenticates · Registration flow writes session state through auth service.
- Main view → Auth service: reads auth · Main flow depends on resolved session state.
- Goals view → Database: loads/saves · Goals screen reads and updates goal data.
- Progress dialog → Database: updates · Progress changes persist through the data layer.
- Auth service → Environment: configures · Auth behavior is driven by environment settings.
- Database → Environment: configures · Persistence adapter uses environment-specific settings.
- Auth service → Supabase: connects · Identity/session state is backed by Supabase.
- Database → Supabase: syncs · Goal data is stored and synchronized via Supabase.
- Node server → Vercel: deployed on · SSR server is hosted through Vercel deployment.