Modernization Initiative: Frontend and Backend Codebase Improvements

Summary

A comprehensive modernization initiative to improve the Darkan website's frontend and backend codebases. This initiative focuses on leveraging the latest features of Next.js 16, React 19, NestJS 11, and TypeScript 5 while improving code quality, maintainability, security, and developer experience.

Current State Analysis

Frontend (Next.js 16 + React 19)

  • Framework: Already using Next.js 16.1.1 with Turbopack and React 19.2.3
  • Styling: Bulma CSS framework with inline styles in some components
  • State Management: Local component state with custom hooks (useAuth, useWebsocket)
  • API Client: Manual fetch wrapper with OpenAPI TypeScript for type generation
  • Components: Mix of client and server components, some with inline styles
  • TypeScript: Strict mode enabled but some areas could use better typing

Backend (NestJS 11)

  • Framework: Already using NestJS 11.1.11 with Mongoose 9
  • Authentication: JWT-based with Passport, using custom encryption
  • API Documentation: Swagger/OpenAPI with SwaggerModule
  • WebSockets: Using ws library via NestJS platform-ws
  • Rate Limiting: ThrottlerModule with basic configuration
  • Error Handling: Basic validation pipe, limited custom error responses
  • Testing: Jest configured but minimal test coverage

Goals

Frontend Modernization

  1. Component Architecture: Establish consistent patterns for client/server components
  2. State Management: Improve global state handling with React 19 features
  3. TypeScript Improvements: Strengthen type safety across the codebase
  4. Error Handling: Implement consistent error boundaries and user feedback
  5. Performance: Optimize bundle size and implement proper code splitting
  6. Accessibility: Ensure WCAG compliance across all components
  7. Testing: Add unit and integration tests for critical components

Backend Modernization

  1. API Patterns: Standardize response formats and error handling
  2. Security Enhancements: Review and improve authentication/authorization
  3. Code Quality: Improve service layer architecture and reduce coupling
  4. Error Handling: Implement global exception filters with proper logging
  5. Validation: Strengthen DTO validation and sanitization
  6. Testing: Increase test coverage for services and controllers
  7. Documentation: Improve OpenAPI documentation with examples

Infrastructure/Tooling

  1. CI/CD Improvements: Enhance build and deployment pipelines
  2. Development Environment: Improve local development experience
  3. Monitoring: Add better logging and observability

Technical Tickets to Create

Frontend (darkanrs/website)

  • Refactor component architecture and establish patterns
  • Implement centralized state management solution
  • Improve API client with better error handling and caching
  • Add error boundaries and loading states
  • Implement comprehensive TypeScript improvements
  • Add frontend testing infrastructure

Backend (darkanrs/api)

  • Standardize API response format and error handling
  • Implement global exception filter with logging
  • Security audit and improvements
  • Strengthen DTO validation across all endpoints
  • Improve service layer architecture
  • Add comprehensive test coverage

Success Criteria

  • All technical tickets completed and reviewed
  • Build passes with no TypeScript errors
  • Test coverage meets minimum threshold (70% for backend, 50% for frontend)
  • No critical security vulnerabilities
  • Improved developer experience and code maintainability

Priority

MEDIUM - This is an improvement initiative that should be completed incrementally alongside other work.

Related Links