CleanCode Scaffold — Angular 20+ Frontend

A production-ready Angular 20+ frontend scaffold and the client-side counterpart to the CleanCodeScaffold .NET Clean Architecture backend.

It ships with authentication (JWT + refresh tokens), a signals-based state layer, HTTP interceptors, route guards, a reusable data-table + CRUD pattern (Weather Forecast feature), a dashboard, and a polished dark UI built entirely with TailwindCSS.

---

✨ What's inside

• Angular 20+ standalone architecture — no NgModules anywhere.
• Signals everywhere — signal(), computed(), effect() for all reactive state.
• inject() DI — no constructor injection.
• Functional HTTP interceptors — auth (Bearer token), global error handling, loading indicator.
• Functional route guards — authGuard, adminGuard.
• JWT auth service — login / register / forgot-password / refresh, token decode & storage.
• Reusable UI — generic DataTableComponent, confirmation dialog, toast notifications, loading spinner.
• Feature-based folders — auth, dashboard, weather (full CRUD example).
• TailwindCSS dark theme — cyan accent (#00e5ff) on navy (#0d1117).
• Strict TypeScript + ESLint + Prettier.

---

🚀 Getting started

# 1. Install dependencies
npm install

# 2. Start the dev server (proxies /api -> https://localhost:5001)
npm start

# App runs at http://localhost:4200

Available scripts

Script	Description
npm start	Dev server on port 4200 with API proxy
npm run build	Production build
npm run build:prod	Explicit production build
npm run lint	ESLint over src/**/*.{ts,html}
npm run format	Prettier write over src/**/*

---

🔌 Backend pairing

This frontend expects the CleanCodeScaffold .NET API. During development, requests to /api/* are proxied to the backend defined in proxy.conf.json:

{
  "/api/*": {
    "target": "https://localhost:5001",
    "secure": false,
    "changeOrigin": true
  }
}

1. Clone & run the backend:

   git clone https://github.com/waleed415/CleanCodeScaffold
   cd CleanCodeScaffold
   dotnet run --project src/CleanCodeScaffold.Api

2. Confirm the API is listening on https://localhost:5001.
3. Run npm start here — all /api/* calls are forwarded to the backend, avoiding CORS issues.

For production, set the API URL in src/environments/environment.prod.ts.

Expected API contracts

• POST /api/auth/login → { token, refreshToken, expiresAt }
• POST /api/auth/register
• POST /api/auth/forgot-password
• POST /api/auth/refresh
• GET/POST/PUT/DELETE /api/weatherforecast → wrapped in ApiResponse<T> / PagedResult<T>

---

🗂️ Project structure

src/
├── app/
│   ├── core/                     # Singletons: auth, interceptors, guards, cross-cutting services
│   │   ├── auth/                 # auth.service, token.service
│   │   ├── interceptors/         # auth, error-handler, loading (functional)
│   │   ├── guards/               # auth.guard, admin.guard (functional)
│   │   └── services/             # api, notification, loading, logger, config
│   ├── shared/                   # Reusable, feature-agnostic building blocks
│   │   ├── models/               # api-response, auth, weather, crud interfaces
│   │   ├── components/           # data-table, confirmation-dialog, toast-container, loading-spinner
│   │   ├── directives/           # has-role structural directive
│   │   └── pipes/                # temperature, date-format
│   ├── layout/                   # main-layout, sidebar, topbar
│   ├── features/                 # Lazy-loaded feature areas
│   │   ├── auth/                 # login, register, forgot-password
│   │   ├── dashboard/            # stats dashboard
│   │   └── weather/              # full CRUD (list + form + service)
│   ├── app.component.ts
│   └── app.routes.ts
├── assets/
│   ├── icons/                    # logo.png, icon.png
│   └── styles/                   # variables.css
├── environments/                 # environment.ts, environment.prod.ts
├── index.html
├── main.ts
└── styles.css

Path aliases

Alias	Points to
@core/*	src/app/core/*
@shared/*	src/app/shared/*
@features/*	src/app/features/*
@layout/*	src/app/layout/*

---

🧱 Tech stack

• Angular 20+ (standalone, signals)
• TypeScript 5.5 (strict)
• TailwindCSS 3.4
• RxJS 7.8
• ESLint + Prettier

---

🎨 Theme

Token	Value
Background	#0d1117
Surface	#161b22
Border	#21262d
Accent	#00e5ff
Text	#ffffff
Text muted	#a0aec0

---

📄 License

MIT — use freely as a starting point for your own projects.