Frontends
Frontends
ng-ui (Angular UI)
Tech Stack
- Framework: Angular 17+ with TypeScript
- Styling: SASS with multiple theme support
- Package Manager: pnpm
- Features: Multiple UI modes (Classic, Material Design, New, Mock)
- Server-Side Rendering: Supported
Architecture
- Component Structure: Modular component-based architecture
- State Management: RxJS for reactive data streams
- Routing: Angular Router with hierarchical navigation
- Dependency Injection: Angular's DI system
- Design Patterns: Service layer for backend communication
UI Themes
- Classic: Traditional Angular UI
- Material Design (mat): Material UI components and styling
- New: Modern, refreshed UI design
- Mock: For testing and development
Key Features
- Authentication: Login/logout flows, user authentication
- Team Management: Create teams, view team details, team member management
- Task Management: Create tasks, task scheduling, task completion
- Scoring System: Score tracking, leaderboard views
- Awards & Competitions: Award management, competition tracking
- Rulesets: Team rule configuration
- Artifact Management: Artifact creation and tracking
- Settings: User preferences, team settings
- Notifications: Alert system with banners
- Admin Features: Health checks, changelog viewing, issue tracking
- Documentation: Integration with external docs
Services Provided
- Comprehensive service layer covering all backend operations
- Local storage management
- Modal and notification services
- Theme and style management
- HTTP request handling with caching
react-ui (React UI)
Tech Stack
- Framework: React 19 with TypeScript
- Router: React Router v7 (Server-side rendering)
- Styling: TailwindCSS
- Package Manager: Bun
- Build Tool: Vite
- UI Components: Radix UI primitives
- Error Handling: React Error Boundary
Architecture
- Component-Based: Modern React functional components
- Routing: File-based routing with React Router
- State Management: React Context API
- Form Management: React Hook Form with Zod validation
- Charts: Custom chart components (Bar, Pie, Mixed)
Key Features
- Authentication: Secure login/logout with JWT
- Team Management: Full CRUD operations for teams
- Task Management: Task creation, scheduling, and completion
- Task Calendar: Visual calendar view for tasks
- Task Details: Detailed task information and status
- User Settings: Profile and preference management
- Search: Context-based search functionality
- Navigation: Breadcrumb navigation
- Quick Actions: Sidebar quick task access
- Charts & Analytics: Visual data representation
- Error Handling: Graceful error boundaries
- Notifications: Toast notifications
Component Structure
- Common Components: Reusable UI primitives
- React Components: Main application components
- Context Providers: Auth, Team, User, Task contexts
- Hooks: Custom hooks for navigation and utilities
- Libraries: Request handlers, utility functions, schemas
Routes
/ui/v3/login- Authentication/ui/v3/logout- Logout/ui/v3/user-settings- User settings/ui/v3/home- Dashboard/ui/v3/calendar- Task calendar/ui/v3/teams- Team listing/ui/v3/teams/:teamid- Team details/ui/v3/tasks- Task listing/ui/v3/tasks/:taskid- Task details
Comparison
| Aspect | ng-ui (Angular) | react-ui (React) |
|---|---|---|
| Framework | Angular 17+ | React 19 |
| Routing | Angular Router | React Router v7 |
| Styling | SASS/Tailwind | TailwindCSS |
| Package Mgr | pnpm | Bun |
| Themes | 4 modes (Classic, Material, New, Mock) | Single modern theme |
| SSR | Supported | Supported |
| Component Lib | Custom components + Material UI | Radix UI primitives |
| Charts | Custom implementation | Custom implementation |
| Forms | Angular Forms | React Hook Form + Zod |
| State | RxJS + DI | React Context |
| Deployment | Angular CLI build | React Router build |
| Error Handling | Custom interceptors | Error Boundaries |
Both UIs provide comprehensive frontend functionality for the chore management system, with ng-ui offering more theme flexibility while react-ui provides a more modern, lightweight approach with TailwindCSS styling.