80566bf0a2
Complete implementation of the Goa Government e-Licensing platform with: Backend: - NestJS API with JWT authentication - PostgreSQL database with Knex ORM - Redis caching and session management - MinIO document storage - Hyperledger Besu blockchain integration - Multi-department workflow system - Comprehensive API tests (266/282 passing) Frontend: - Angular 21 with standalone components - Angular Material + TailwindCSS UI - Visual workflow builder - Document upload with progress tracking - Blockchain explorer integration - Role-based dashboards (Admin, Department, Citizen) - E2E tests with Playwright (37 tests) Infrastructure: - Docker Compose orchestration - Blockscout blockchain explorer - Development and production configurations
126 lines
3.3 KiB
Markdown
126 lines
3.3 KiB
Markdown
# Goa GEL Frontend
|
|
|
|
Government of Goa - e-Licensing Blockchain Platform (Frontend)
|
|
|
|
Built with [Angular CLI](https://github.com/angular/angular-cli) version 21.1.2.
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js v20+ (LTS recommended)
|
|
- npm v10+
|
|
- Backend API running on `http://localhost:3001`
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start development server
|
|
ng serve
|
|
```
|
|
|
|
Open `http://localhost:4200/` in your browser.
|
|
|
|
## Environment Configuration
|
|
|
|
Environment files are located in `src/environments/`:
|
|
|
|
| File | Purpose |
|
|
|------|---------|
|
|
| `environment.ts` | Development configuration |
|
|
| `environment.prod.ts` | Production configuration |
|
|
|
|
### Configuration Variables
|
|
|
|
```typescript
|
|
{
|
|
production: false, // Build mode flag
|
|
apiBaseUrl: 'http://localhost:3001/api/v1', // Backend API endpoint
|
|
tokenStorageKey: 'goa_gel_token', // JWT token storage key
|
|
refreshTokenStorageKey: 'goa_gel_refresh_token', // Refresh token storage key
|
|
userStorageKey: 'goa_gel_user', // User data storage key
|
|
apiKeyStorageKey: 'goa_gel_api_key', // API key storage key
|
|
apiSecretStorageKey: 'goa_gel_api_secret', // API secret storage key
|
|
}
|
|
```
|
|
|
|
### Modifying API URL
|
|
|
|
To connect to a different backend:
|
|
|
|
```typescript
|
|
// src/environments/environment.ts
|
|
apiBaseUrl: 'http://YOUR_BACKEND_HOST:PORT/api/v1'
|
|
```
|
|
|
|
### Token Storage (Authentication)
|
|
|
|
The application uses localStorage for authentication tokens. These are **not values you configure** - they are automatically managed:
|
|
|
|
| Storage Key | Source | Description |
|
|
|-------------|--------|-------------|
|
|
| `goa_gel_token` | Backend `/auth/login` | JWT access token (set after login) |
|
|
| `goa_gel_refresh_token` | Backend `/auth/login` | Refresh token (set after login) |
|
|
| `goa_gel_user` | Backend `/auth/login` | User profile data (JSON) |
|
|
|
|
**How it works:**
|
|
1. User logs in → Backend returns JWT tokens
|
|
2. Frontend stores tokens in localStorage using these keys
|
|
3. Tokens are sent with API requests via `Authorization` header
|
|
4. On logout, tokens are cleared from localStorage
|
|
|
|
**To inspect stored tokens:**
|
|
1. Open browser DevTools → Application → Local Storage
|
|
2. Look for keys prefixed with `goa_gel_`
|
|
|
|
## Building
|
|
|
|
```bash
|
|
# Development build
|
|
ng build
|
|
|
|
# Production build (uses environment.prod.ts)
|
|
ng build --configuration=production
|
|
```
|
|
|
|
Build artifacts are stored in `dist/goa-gel-frontend/`.
|
|
|
|
## Testing
|
|
|
|
```bash
|
|
# Run unit tests
|
|
ng test
|
|
|
|
# Run tests once (CI mode)
|
|
ng test --watch=false
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── app/
|
|
│ ├── api/ # API models and interfaces
|
|
│ ├── core/ # Core services (auth, API, storage)
|
|
│ ├── features/ # Feature modules (dashboard, requests, workflows)
|
|
│ ├── layouts/ # Layout components (main layout)
|
|
│ └── shared/ # Shared components and utilities
|
|
├── environments/ # Environment configurations
|
|
└── styles/ # Global styles
|
|
```
|
|
|
|
## Key Features
|
|
|
|
- Visual Workflow Builder
|
|
- License Request Management
|
|
- Document Upload with Blockchain Verification
|
|
- Department-based Approval Workflows
|
|
- Admin Dashboard with Analytics
|
|
- DBIM v3.0 & GIGW 3.0 Compliant UI
|
|
|
|
## Additional Resources
|
|
|
|
- [Angular CLI Documentation](https://angular.dev/tools/cli)
|
|
- [Angular Material](https://material.angular.io/)
|