GetAlphaBit is a full-stack, AI-driven assessment application designed to generate technical placement tests, grade candidate submissions automatically, and present structured analysis dashboards. The platform features an elegant, high-performance client interface and a robust Express backend integrated with OpenAI and MongoDB, all secured via Clerk Authentication.
The frontend client utilizes custom hooks and Axios interceptors to retrieve Clerk session tokens dynamically and attach them as Bearer tokens in headers. The backend validates these tokens on protected routes, manages database states, and coordinates with OpenAI to generate and grade tests.
graph TD
Client[React Frontend] -->|Axios Interceptor + JWT Bearer| ExpressServer[Express.js Server]
ExpressServer -->|Sync / RBAC Check| Clerk[Clerk Auth Provider]
ExpressServer -->|Read/Write Data| MongoDB[(MongoDB Database)]
ExpressServer -->|Dynamic Prompts / Grading| OpenAI[OpenAI API Engine]
subgraph Frontend Views
Landing[Landing Page]
StudentDashboard[Student Dashboard: /]
TestArena[Test Arena: /test]
ResultReview[Result Review: /result]
AdminDashboard[Admin Dashboard: /admin]
end
Client --- FrontendViews
- Generates exactly 10 comprehensive interview questions (5 JavaScript, 5 Node.js) across 5 distinct styles (
MCQ,Output,UseCase,Theory,Code). - Idempotency & Resuming: If a candidate starts a test, their active session is stored in the database. Returning to the Test Arena resumes their current test rather than consuming rate limits.
- Rate Limiting: Restricts users to a maximum of 2 test generations per 24 hours to prevent API abuse.
- Parses and grades answers automatically upon submission, scoring them out of 10 points.
- Evaluates code structures, theoretical analysis, and scenarios via the OpenAI API.
- Generates detailed markdown-formatted reasoning and constructive feedback for each answer.
- Dashboard: Syncs candidate progress. Shows previous scores, test completion dates, and options to review detailed feedback or request a retake.
- Arena: Renders markdown syntax (code blocks, monospace quotes) using
react-markdown. Includes a single-question viewport, progress bars, and a navigation matrix. - Robust Error Interceptors: Features inline warning banners for rate limits (429) and backend connection errors (502).
- Restricted to authenticated users with
role: adminin Clerk metadata. - Displays real-time metrics (Total Candidates, Completion Rate, Average Scores).
- Features a searchable database table listing all candidate attempts, status badges, and scores.
- Dossier Inspector Modal: Allows admins to inspect any student's multiple attempts, including their exact questions, submitted code/answers, and AI feedback.
- Framework & Build Tools: React 19 (Functional Hooks), Vite 8
- Styling: Tailwind CSS v4, PostCSS, Custom CSS variables
- Routing: React Router DOM 7
- Authentication: Clerk React SDK
- HTTP Client: Axios (with authorization header interceptor)
- Content Rendering: React Markdown 10 (with GFM support)
- Icons: Lucide React
- Runtime & Framework: Node.js, Express.js
- Database: MongoDB & Mongoose ODM
- Authentication: Clerk Node/Express SDK (
@clerk/express) - AI Integration: OpenAI API (custom prompts for generation and grading)
- Server Utilities: CORS, dotenv, express-rate-limit, express-async-errors
Create a .env file in the backend root directory:
MONGODB_URI=mongodb://localhost:27017/placement_test
CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
OPENAI_API_KEY=sk-proj-...
PORT=3000Create a .env file in the frontend root directory:
VITE_API_BASE_URL=http://localhost:3000
VITE_CLERK_PUBLISHABLE_KEY=pk_test_...- Navigate to the backend directory:
cd mytestbackend - Install dependencies:
npm install
- Start the Express server in development mode:
The server runs at
npm run dev
http://localhost:3000(or the configuredPORT).
- Navigate to the frontend directory:
cd gitalphabit - Install dependencies:
npm install
- Start the Vite development server:
The client runs at
npm run dev
http://localhost:5173.
Since Render's free tier web services spin down after 15 minutes of inactivity, several mechanisms are implemented to maintain uptime:
- Self-Pinging Hook: The backend detects
RENDER_EXTERNAL_URLorPING_URLenvironment variables on startup and pings itself every 13 minutes. - Standalone Script: An external node script can be run locally or on a VPS to keep the server awake:
npm run ping https://your-app-name.onrender.com
- Cron Job Services: Configurable on cron-job.org or UptimeRobot to ping the
/healthroute periodically.
.
├── mytestbackend/ # Express.js Server
│ ├── middleware/ # Token authentication & error handlers
│ ├── models/ # MongoDB Mongoose schemas
│ ├── routes/ # API controllers (auth, test, admin)
│ ├── scripts/ # Keep-alive ping worker
│ ├── utils/ # OpenAI helpers & self-ping utilities
│ ├── server.js # Server entry point
│ └── API_DOCUMENTATION.md # Complete REST endpoint specifications
│
└── gitalphabit/ # React Frontend (Vite)
├── public/ # Static assets
├── src/
│ ├── assets/ # Brand logos & imagery
│ ├── pages/ # View components (Test Arena, Dashboards, Auth)
│ ├── utils/ # Axios client interceptor hook
│ ├── App.jsx # Routing hierarchy
│ ├── index.css # Tailwind CSS styles
│ └── main.jsx # React initialization entry point
└── vite.config.js