How toilabau/trello-clone works
Tasker B is a React task-board frontend. Users can register or log in, verify an OTP, then enter a protected app shell containing board and settings pages; the board is the task-focused destination. Authentication screens call a shared HTTP client, while the app shell provides sidebar navigation and a top bar with theme controls. The tree and excerpts support these frontend stages, but do not establish backend behavior or detailed board operations; those are not inferred here.
Main entry points: ui UI primitives · route.tsx Protected app · main.tsx App bootstrap · app-sidebar.tsx App navigation
Components 18
User flows
- Auth pages
src/routes/(auth) - Session gate
src/routes/(auth)/route.tsx - Protected app
src/routes/app/route.tsx - Board page
src/routes/app/board.tsx - App pages
src/routes/app
App shell
- App navigation
src/components/widgets/app-sidebar.tsx - Top bar
src/components/widgets/topbar.tsx - Theme control
src/features/theme-button.tsx - Navigation links
src/config/navlink.config.ts
Shared services
- API client
src/lib/api.ts - Theme state
src/providers/theme-provider.tsx - Cookie auth
src/lib/auth.ts - App bootstrap
src/main.tsx - Query client
src/lib/queryClient.ts
UI components
- UI primitives
src/components/ui - Empty board view
src/components/others/board-empty.tsx
Other components
- User
- Backend API
Connections 18
- User → Auth pages: uses auth
- Auth pages → API client: calls API
src/routes/(auth)/login.tsx - API client → Backend API: sends requests
src/lib/api.ts - Protected app → Cookie auth: checks token
src/routes/app/route.tsx - Protected app → App navigation: renders
src/routes/app/route.tsx - Protected app → Top bar: renders
src/routes/app/route.tsx - Protected app → App pages: outlet routes
src/routes/app/route.tsx - App navigation → UI primitives: uses sidebar
src/components/widgets/app-sidebar.tsx - App navigation → Navigation links: reads links
src/components/widgets/app-sidebar.tsx - Top bar → Theme control: renders control
src/components/widgets/topbar.tsx - Top bar → UI primitives: uses controls
src/components/widgets/topbar.tsx - Theme control → Theme state: sets theme
src/features/theme-button.tsx - Board page → UI primitives: uses components
src/routes/app/board.tsx - Empty board view → UI primitives: uses button
src/components/others/board-empty.tsx - App bootstrap → Theme state: provides theme
src/main.tsx - App bootstrap → Query client: provides queries
src/main.tsx - App bootstrap → UI primitives: provides tooltips
src/main.tsx - Session gate → Cookie auth: checks session
src/routes/(auth)/route.tsx