How qassimaltarhouni/unibot-frontend works
UniBot Frontend is a Next.js application for student-facing chatbot access and administrative management of institutions and analytics. Users can enter through the public landing page, authenticate or register, then use the chatbot; administrators use dashboard pages to manage institutions and view metrics. API requests are centralized in a mutation hook, while chat uses a socket connection. The README also documents UI-kit examples and form patterns. Relationships reflect the sampled source and index; unsampled route internals are represented without inferred call edges.
Main entry points: useMutateApi.ts API mutation hook · AuthContext.tsx Session state · layout.tsx Dashboard shell · page.tsx Login
Components 26
Entry and chat
- Public landing
src/app/page.tsx - Chat widget
src/UI/Chatbot.tsx - Chat page
src/app/chatbot/page.tsx - Chat API
src/pages/api/chat.ts
Authentication
- Login
src/app/(auth)/login/page.tsx - Registration
src/app/(auth)/register/page.tsx - Password reset
src/app/(auth)/reset-password/page.tsx - Session state
src/context/AuthContext.tsx - Route guard
src/components/ProtectedRoute.tsx
Administration
- Dashboard overview
src/app/dashboard/page.tsx - Add institution
src/app/dashboard/(institution)/add-institution/page.tsx - Edit institution
src/app/dashboard/(institution)/edit-institution/[id]/page.tsx - Institution list
src/app/dashboard/(institution)/institutions/page.tsx - Analytics
src/app/dashboard/analytics/page.tsx - Dashboard shell
src/app/dashboard/layout.tsx
Shared services
- API mutation hook
src/Hooks/useMutateApi.ts - Theme provider
src/context/ThemeContext.tsx - MUI theme
src/Style/theme.ts - Color palette
src/Style/GlobalColors.ts - App root
src/app/layout.tsx - Color showcase
src/app/(ui-kit)/colors-mui-components/page.tsx - Form example
src/app/(ui-kit)/form-usage/page.tsx - Socket example
src/app/(ui-kit)/socket-example/page.tsx
Other components
- Visitor
- Chat socket service
- UniBot backend
Connections 23
- Visitor → Public landing: visits
src/app/page.tsx - Public landing → Chat widget: renders
- Chat widget → Chat socket service: connects to
src/UI/Chatbot.tsx - Visitor → Login: signs in
src/app/(auth)/login/page.tsx - Visitor → Registration: registers
src/app/(auth)/register/page.tsx - Login → API mutation hook: submits through
src/app/(auth)/login/page.tsx - Registration → API mutation hook: submits through
src/app/(auth)/register/page.tsx - Session state → API mutation hook: checks sessions
src/context/AuthContext.tsx - Login → Session state: uses session
src/app/(auth)/login/page.tsx - Route guard → Session state: checks access
src/components/ProtectedRoute.tsx - API mutation hook → UniBot backend: sends requests
src/Hooks/useMutateApi.ts - Dashboard shell → Session state: uses session
src/app/dashboard/layout.tsx - Dashboard shell → Theme provider: uses theme
src/app/dashboard/layout.tsx - Dashboard shell → API mutation hook: requests data
src/app/dashboard/layout.tsx - Dashboard overview → API mutation hook: requests data
src/app/dashboard/page.tsx - Add institution → API mutation hook: submits through
src/app/dashboard/(institution)/add-institution/page.tsx - Edit institution → API mutation hook: submits through
src/app/dashboard/(institution)/edit-institution/[id]/page.tsx - Institution list → API mutation hook: requests data
src/app/dashboard/(institution)/institutions/page.tsx - Theme provider → MUI theme: creates theme
src/context/ThemeContext.tsx - MUI theme → Color palette: uses palette
src/Style/theme.ts - App root → Session state: provides context
src/app/layout.tsx - App root → Theme provider: provides theme
src/app/layout.tsx - Form example → API mutation hook: demonstrates use
src/app/(ui-kit)/form-usage/page.tsx