Complete documentation for the Next.js 16 application with Keycloak authentication and backend API integration.
ui/docs/
├── README.md # This file
├── ARCHITECTURE.md # System architecture
├── ROADMAP.md # Future plans
│
├── guides/ # Development Guides
│ ├── README.md
│ ├── API_INTEGRATION.md # API Client Guide
│ ├── ASSETS_API_INTEGRATION.md # Assets API Guide
│ ├── CUSTOMIZE_TYPES_GUIDE.md # Type Customization
│ └── ORGANIZING_TYPES_AT_SCALE.md # Type Organization
│
├── features/ # Feature Documentation
│ ├── README.md
│ ├── auth/ # Authentication (Keycloak)
│ └── ACCESS_CONTROL.md # Access Control
│
├── ops/ # Operations & Deployment
│ ├── README.md
│ ├── DEPLOYMENT.md # Deployment Guide
│ ├── DOCKER_SENTRY_SETUP.md # Docker & Sentry
│ ├── ENVIRONMENT_VARIABLES.md # Env Vars
│ └── PRODUCTION_CHECKLIST.md # Production Checklist
│
└── examples/ # Code Examples
└── types.custom.example.ts
1. Setup Project
- Read root CLAUDE.md - Project overview & architecture
- Read root README.md - Setup instructions
- Configure environment variables (ops/ENVIRONMENT_VARIABLES.md)
2. Setup Authentication
- features/auth/KEYCLOAK_SETUP.md - Setup Keycloak server
- features/auth/AUTH_USAGE.md - Implement login/logout
3. Connect to Backend
- guides/API_INTEGRATION.md - Setup API client
- guides/CUSTOMIZE_TYPES_GUIDE.md - Customize types
4. Deploy to Production
- ops/PRODUCTION_CHECKLIST.md - Pre-deployment checklist
- ops/DEPLOYMENT.md - Deployment guide
- System architecture overview
- Frontend + Backend interaction
- State management
- Setup HTTP client with auto auth headers
- Configure SWR hooks for data fetching
- Match TypeScript types to your backend schema
- Override default types
- Organize types for large projects
- Domain-driven structure
- Group-based permissions
- Role management
- Deploy to Vercel, Docker, or VP
- Nginx & SSL configuration
NEXT_PUBLIC_*vs server-only variables- Security best practices
- Docker multi-stage build
- Sentry error tracking
- Go-live verification steps
| Task | Documentation |
|---|---|
| Setup project | README.md |
| Understand system | ARCHITECTURE.md |
| Configure env vars | ops/ENVIRONMENT_VARIABLES.md |
| Add login/logout | features/auth/AUTH_USAGE.md |
| Call backend API | guides/API_INTEGRATION.md |
| Customize types | guides/CUSTOMIZE_TYPES_GUIDE.md |
| Deploy | ops/DEPLOYMENT.md |
- Next.js 16: nextjs.org/docs
- React 19: react.dev
- Tailwind CSS: tailwindcss.com
- Keycloak: keycloak.org/documentation