EssayBot UI
Frontend application for the EssayBot essay grading system.
GitHub Repository: https://github.com/dmsb-dash-labs/EssayBot-UI
Server Deployment
| Environment | Server | Path | Branch |
|---|---|---|---|
| Production | A6000 | /var/www/Essaybot-UI | main |
| UAT | A6000 | /var/www/Essaybot-UI-UAT | dynamic-update |
Tech Stack
| Category | Technology |
|---|---|
| Framework | Next.js 15 |
| Language | TypeScript 5 |
| UI Library | React 18 |
| Styling | Tailwind CSS 3.4 |
| State Management | Zustand |
| Data Fetching | TanStack React Query, Axios |
| UI Components | Radix UI, shadcn/ui |
| Forms | React Hook Form + Zod |
| Charts | Recharts |
| Animations | Framer Motion |
| Real-time | Socket.IO Client |
| Theming | next-themes |
Folder Structure
EssayBot-UI/
├── app/ # Next.js App Router pages
├── common/ # Shared utilities & constants
├── components/ # React components
├── data/ # Static data files
├── hooks/ # Custom React hooks
├── lib/ # Core library functions
├── public/ # Static assets
├── stores/ # Zustand state stores
├── styles/ # Global stylesheets
└── types/ # TypeScript type definitions
Directory Reference
/app
Next.js App Router directory containing all pages and layouts.
| Path | Description |
|---|---|
(main)/ | Main authenticated layout group |
(main)/dashboard/ | Dashboard page |
(main)/feedback/ | Feedback viewing page |
(main)/history/ | Grading history page |
(main)/playground/ | Essay grading playground with rubric editor |
(main)/reports/ | Reports and analytics page |
(main)/submissions/ | Submissions management page |
(main)/upload/ | Essay upload page |
terms/ | Terms of service page |
layout.tsx | Root layout |
page.tsx | Landing/login page |
providers.tsx | App-level context providers |
globals.css | Global CSS imports |
/components
Reusable React components.
| Path | Description |
|---|---|
ui/ | shadcn/ui base components (button, input, dialog, etc.) |
fallbacks/ | Loading states, error pages, and fallback UI |
Sidebar.tsx | Main navigation sidebar |
AuthProvider.tsx | Authentication context provider |
AIDetectionAlert.tsx | AI detection warning component |
BulkGradingProgressModal.tsx | Bulk grading progress indicator |
/stores
Zustand state management stores.
| File | Description |
|---|---|
useCourseStore.ts | Course selection state |
useRubricUndoStore.ts | Rubric undo/redo history |
useUserStore.ts | User authentication state |
/hooks
Custom React hooks.
| File | Description |
|---|---|
use-user.ts | User authentication hook |
use-bulk-grading-progress.ts | Bulk grading progress tracking |
use-toast.ts | Toast notification hook |
use-mobile.tsx | Mobile viewport detection |
/lib
Core utility functions and API layer.
| File | Description |
|---|---|
api.ts | Axios API client configuration |
utils.ts | General utility functions (cn, etc.) |
finalizeContent.ts | Content processing utilities |
/common
Shared utilities and constants.
| File | Description |
|---|---|
urls.ts | API endpoint URLs |
exportToPdf.ts | PDF export functionality |
/types
TypeScript type definitions.
| File | Description |
|---|---|
grading.ts | Grading-related types |
file-saver.d.ts | File saver type declarations |
/public
Static assets served at root path.
| File | Description |
|---|---|
DASH Logo Bloo.png | Application logo |
sample_essays.xlsx | Sample essays template |
manual.pdf | User manual |
Key Configuration Files
| File | Purpose |
|---|---|
next.config.mjs | Next.js configuration |
tailwind.config.ts | Tailwind CSS configuration |
tsconfig.json | TypeScript configuration |
components.json | shadcn/ui configuration |
ecosystem.config.js | PM2 deployment configuration |
nginx-config.conf | Nginx server configuration |
deploy.sh | Deployment script |
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 - EssayBot backend services
- UI Deployment - Frontend deployment guide
- Server Deployment - Backend deployment guide