Frontend Documentation
This directory contains technical documentation for the frontend components of the arolariu.ro platform.
Overview
The frontend is built using:
- Framework: Next.js 16.1.6 with App Router
- Language: TypeScript 5.9.3 (strict mode)
- UI Library: React 19.2.4 with Server Components
- Styling: Tailwind CSS v4.1.18
- State Management: Zustand v5.0.11
- Testing: Jest + Playwright
RFCs (Request for Comments)
Frontend RFCs are numbered 1000-1999 and located in /docs/rfc/.
Implemented RFCs
| RFC # | Title | Status | Date | Description |
|---|---|---|---|---|
| 1001 | OpenTelemetry Observability System | ✅ Implemented | 2025-10-11 | Comprehensive observability system using OpenTelemetry SDK for Next.js |
| 1002 | JSDoc/TSDoc Documentation Standard | ✅ Implemented | 2025-01-26 | Comprehensive JSDoc documentation standard for TypeScript/React |
| 1003 | next-intl Internationalization System | ✅ Implemented | 2025-10-25 | Multi-language support with next-intl and type-safe translations |
| 1004 | Metadata and SEO System | ✅ Implemented | 2025-10-25 | Centralized metadata management and SEO optimization |
| 1005 | State Management with Zustand | ✅ Implemented | 2025-12-25 | Client-side state management using Zustand with IndexedDB persistence |
| 1006 | Component Library Architecture | ✅ Implemented | 2025-12-25 | Shared React component library (@arolariu/components) |
Proposed RFCs
None currently.
Draft RFCs
None currently.
Quick Start Guides
Practical, developer-focused guides for implementing common patterns:
- JSDoc Guide - How to document TypeScript/React code (RFC 1002)
- i18n Guide - How to add translations and multi-language support (RFC 1003)
- Metadata Guide - How to implement SEO and metadata (RFC 1004)
- OpenTelemetry Guide - How to implement distributed tracing and observability (RFC 1001)
Key Topics
Architecture
- Next.js App Router patterns
- Server vs Client component patterns
- React Server Components usage
- API route handlers
- Middleware implementation
State Management
- Zustand stores for global state
- React Context for component trees
- Server Actions for mutations
- Form state management
Performance
- Code splitting strategies
- Image optimization
- Lazy loading
- Caching strategies
- Bundle size optimization
Testing
- Unit testing with Jest
- Integration testing strategies
- E2E testing with Playwright
- Component testing best practices
Observability
- OpenTelemetry integration (see OpenTelemetry Guide (RFC 1001))
- Logging strategies
- Error tracking
- Performance monitoring
Security
- Authentication with Clerk
- Authorization patterns
- Input validation
- XSS prevention
- CSRF protection
Related Documentation
- Site README:
/sites/arolariu.ro/README.md- Development setup guide - Component Library:
/packages/components/readme.md- Shared UI components - API Documentation:
/sites/docs.arolariu.ro/api/arolariu/Frontend/- Generated API docs - Copilot Instructions:
/.github/copilot-instructions.md- Coding standards
Creating Frontend RFCs
When creating a new frontend RFC:
- Use the RFC template from
/docs/RFC_TEMPLATE.md - Number it in the 1000-1999 range (1002, 1003, etc.)
- Place in
/docs/rfc/ - Update this README with the new RFC entry
- Submit for review
Suggested Topics for Future RFCs
- Server Actions patterns and best practices
- Component library architecture
- Form handling strategy
- Progressive Web App (PWA) features
- Client-side caching strategy
Questions?
For frontend-specific questions:
- Check existing RFCs
- Review site README
- Open a GitHub issue
- Contact: admin@arolariu.ro
Last Updated: 2025-10-25 Maintained By: Frontend team
// was this page useful?