PresBot UI
PresBot UI is the frontend application for the PresBot presentation coaching platform.
GitHub Repository: https://github.com/dmsb-dash-labs/presbot-ui
Server Information
The server code is located on the Blackwell server.
| Environment | Path | Branch |
|---|---|---|
| Production | /home/dash_ra/dmsb-dash-labs/presbot-ui-prod | workingui-tanvi |
| UAT | /home/dash_ra/dmsb-dash-labs/presbot-ui-uat | release/uat |
URLs
| Environment | Application URL | API URL |
|---|---|---|
| Production | https://presbot.dashlab.studio | https://api.presbot.dashlab.studio |
| UAT | https://uat.presbot.dashlab.studio | https://uat.api.presbot.dashlab.studio |
Ports
| Environment | Port |
|---|---|
| Production | 3002 |
| UAT | 3009 |
Tech Stack
| Technology | Version | Description |
|---|---|---|
| Next.js | 14.x | React framework for production |
| React | 18.x | UI library |
| TypeScript | 5.x | Type-safe JavaScript |
| Tailwind CSS | 3.4.x | Utility-first CSS framework |
| Radix UI | latest | Accessible UI primitives |
| Framer Motion | latest | Animation library |
| React Hook Form | latest | Form handling |
| Zod | 3.x | Schema validation |
| Recharts | latest | Charting library |
| PM2 | - | Process manager for Node.js |
Folder Structure
presbot-ui/
├── app/ # Next.js App Router pages
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout component
│ ├── page.tsx # Home page
│ └── multi-speech/ # Multi-speech feature route
│ └── page.tsx
│
├── components/ # React components
│ ├── ui/ # shadcn/ui components (primitives)
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── dialog.tsx
│ │ └── ... # Other UI primitives
│ │
│ ├── AudioAnalysis.tsx # Audio analysis display
│ ├── AudioUpload.tsx # Audio file upload component
│ ├── AuthProvider.tsx # Authentication context provider
│ ├── ComparisonPlayback.tsx # Audio comparison player
│ ├── EnhancedInput.tsx # Enhanced input component
│ ├── ErrorBoundary.tsx # Error boundary wrapper
│ ├── FeedbackRubric.tsx # Feedback display component
│ ├── InitialLoader.tsx # Initial loading screen
│ ├── OriginalSampleList.tsx # Original samples list
│ ├── PresentationContext.tsx # Presentation context provider
│ ├── ProductionSecurity.tsx # Security component for prod
│ ├── ScriptAnalysis.tsx # Script analysis display
│ ├── Sidebar.tsx # Navigation sidebar
│ ├── StepIndicator.tsx # Step progress indicator
│ ├── theme-provider.tsx # Theme context provider
│ ├── VoiceCloneGenerator.tsx # Voice clone generation
│ └── WorkflowStepIndicator.tsx # Workflow step progress
│
├── hooks/ # Custom React hooks
│ ├── use-audio-recording.ts # Audio recording hook
│ ├── use-audio-upload.ts # Audio upload hook
│ ├── use-mobile.tsx # Mobile detection hook
│ ├── use-user.ts # User data hook
│ ├── use-voice-clones.ts # Voice clones management hook
│ └── use-voice-generation.ts # Voice generation hook
│
├── lib/ # Utility libraries
│ ├── api-client.ts # API client configuration
│ ├── api.ts # API functions
│ ├── audio-utils.ts # Audio utility functions
│ ├── cache-utils.ts # Caching utilities
│ ├── constants.ts # Application constants
│ ├── debug-utils.ts # Debug utilities
│ ├── types.ts # TypeScript type definitions
│ └── utils.ts # General utility functions
│
├── public/ # Static assets
│ └── *.png, *.svg, *.jpg # Images and icons
│
├── styles/ # Additional styles
│ └── globals.css # Global CSS overrides
│
├── .github/
│ └── workflows/
│ └── deploy.yml # CI/CD deployment workflow
│
├── ecosystem.config.js # PM2 configuration
├── next.config.mjs # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── package.json # Dependencies and scripts
└── components.json # shadcn/ui configuration
Folder Descriptions
| Folder | Description |
|---|---|
app/ | Contains Next.js 14 App Router pages. Each folder represents a route. |
components/ | Reusable React components. The ui/ subfolder contains shadcn/ui primitives. |
components/ui/ | Low-level UI components from shadcn/ui (buttons, inputs, dialogs, etc.) |
hooks/ | Custom React hooks for state management and side effects. |
lib/ | Utility functions, API clients, type definitions, and constants. |
public/ | Static files served directly (images, logos, favicons). |
styles/ | Global CSS styles and Tailwind customizations. |
.github/workflows/ | GitHub Actions CI/CD configuration. |
Key Configuration Files
| File | Purpose |
|---|---|
ecosystem.config.js | PM2 process manager configuration for running the app |
next.config.mjs | Next.js framework configuration |
tailwind.config.ts | Tailwind CSS theme and plugin configuration |
tsconfig.json | TypeScript compiler options |
components.json | shadcn/ui component configuration |
Environment Variables
| Variable | Description |
|---|---|
NEXT_PUBLIC_API_URL | Backend API URL |
NEXT_PUBLIC_FLASK_URL | Flask API URL |
NEXT_PUBLIC_DASH_PORTAL_URL | DASH Portal URL |
NEXT_PUBLIC_DISABLE_DEVTOOLS | Disable React DevTools (prod: true) |
NEXT_PUBLIC_ENABLE_CONSOLE_LOGS | Enable console logging (prod: false) |
NEXT_PUBLIC_ENABLE_SOURCE_MAPS | Enable source maps (prod: false) |
Quick Commands
Install Dependencies
npm install
Start Development Server
npm run dev
Build for Production
npm run build
Start Production Server
npm run start
Related Documentation
- Backend - PresBot backend services
- UI Deployment - Frontend deployment guide
- Server Deployment - Backend deployment guide