Inkline Angular Frontend

Angular 22 implementation of the Inkline publishing platform. It uses the same Express, Prisma, PostgreSQL, and Better Auth backend as the Next.js client.

Stack

• Angular 22 standalone components and signals
• Angular SSR
• Spartan UI 1.3 application-owned Helm primitives and accessible Brain behavior
• Typed Angular reactive forms and validation
• Tailwind CSS 4 and tw-animate-css
• SCSS editorial design system using the same semantic light/dark tokens as the Next.js client
• Lucide icons through @ng-icons/lucide
• Spartan menus, tooltips, native selects, dialogs, buttons, inputs, labels, and skeletons
• Sonner success and error notifications
• Better Auth browser client
• RxJS and typed HttpClient services
• Vitest component tests
• Prettier formatting

Features

• Responsive home, About, story archive, and blog-details pages
• Story search, tags, featured filters, sorting, and pagination
• Email/password and Google authentication
• Email verification, resend, forgot-password, and reset-password flows
• Hydration-safe session state and functional route guards
• Writer dashboard with post create/edit/delete and status management
• Nested comments, replies, edit, and delete
• Admin statistics, post management, comment moderation, user search, role changes, suspension, and reactivation
• SSR rendering without requiring the API during the production build
• Lazy-loaded routed components
• Centralized HTTP error handling and expired-session redirects
• Reusable loading skeletons and a route-level API outage screen
• Administrator user/post pagination with role and status filters
• Canonical, Open Graph, X/Twitter, favicon, and theme metadata

Component organization

Each routed component has its own feature folder:

src/app/components/home/
  home.component.ts
  home.component.html
  home.component.scss
  home.component.spec.ts

Component SCSS is added only when styles are feature-specific. Shared Inkline layout and design tokens live in src/styles.scss to avoid duplication. The site header has its own HTML, TypeScript, SCSS, and spec files.

Generated Spartan Helm primitives are application-owned source under src/app/ui. Import them through the @inkline/ui/* aliases instead of editing third-party code in node_modules. Routed features live under src/app/components; cross-feature components live under src/app/shared; authentication, guards, HTTP, models, notifications, SEO, and theme services each have dedicated folders under src/app/core.

The single-story route remains /blogs/:id and is implemented by:

src/app/components/blog-details/
  blog-details.component.ts
  blog-details.component.html
  blog-details.component.scss
  blog-details.component.spec.ts

Backend configuration

The API runs on http://localhost:3000 and Angular runs on http://localhost:4200.

Backend .env:

APP_URL=http://localhost:4200
CLIENT_URLS=http://localhost:4000,http://localhost:4200

APP_URL selects the frontend used in verification and password-reset links. CLIENT_URLS allows both maintained frontends to make credentialed requests.

The Angular API and public application URLs are configured in:

• src/environments/environment.ts
• src/environments/environment.production.ts

Set the production file to the deployed HTTPS API origin before release. Set appUrl to the deployed Angular HTTPS origin so canonical and social-image URLs are absolute.

Setup

Use Node 22 LTS. Node 26 currently causes Vitest workers to exit unexpectedly on Windows.

nvm use 22
npm ci
npm start

Open http://localhost:4200.

Scripts

Command	Purpose
npm start	Development server
npm run build	Optimized browser and SSR production build
npm test -- --watch=false	Run unit/component tests once
npm run lint	Run TypeScript and Angular template linting
npm run format	Format the workspace with Prettier
npm run format:check	Verify Prettier formatting
npm run serve:ssr:blog-app-angular	Serve the compiled SSR application

Production checklist

1. Set the production API URL.
2. Configure backend HTTPS URLs, CLIENT_URLS, Better Auth secret, SMTP, and Google OAuth redirect URLs.
3. Install deterministic dependencies with npm ci on supported Node 22–24.
4. Run npm run format:check, npm run lint, npm test -- --watch=false, and npm run build.
5. Deploy the contents produced under dist/blog-app-angular using a Node-compatible Angular SSR host.

Monitoring and analytics

Error monitoring and product analytics are intentionally not installed yet. Before choosing a provider, define consent requirements, retention periods, data residency, whether authenticated user identifiers may be collected, and which routes or form fields must be scrubbed. Add a provider only after those privacy decisions are documented.