AuraSync

AuraSync is a Gamified Agentic AI interview practice platform built around live feedback, stress-aware coaching, and high-contrast neo-brutalist UI.

The product flow is:

1. Sign up or sign in
2. Pick a company and interview tier
3. Run a live mock interview with webcam + mic
4. Stream telemetry and transcript updates over WebSocket
5. Trigger real-time coaching when stress, pace, or filler words drift
6. Finish with an AI-reviewed session report
7. Unlock a collectible session badge when the session clears the validation thresholds

The current product no longer depends on on-chain minting. Reward badges are generated as web2 collectible images and saved into session history/profile.

What The App Does

• Authenticated interview practice with company-specific question sets
• Mixed question types: behavioral, technical, and coding
• Live session telemetry:
  • stress score
  • estimated heart rate
  • words per minute
  • filler words per minute
• Real-time coaching notes during the interview
• Automatic stress-pause intervention when the user spikes too hard
• Post-session AI review:
  • per-question scoring
  • overall recommendation
  • communication/composure score
  • answer-quality score
  • question-wise stress visibility
• Profile and streak tracking
• Collectible reward badges stored in session history
• Marketing pages for features, docs, pricing, and about

Tech Stack

Frontend

• React 19
• Vite
• React Router
• Recharts
• Plain JSX + inline styling with a neo-brutalist visual system

Backend

• Node.js
• Express 5
• TypeScript
• MongoDB + Mongoose
• WebSocket via ws
• RabbitMQ via amqplib for async coaching pipelines
• Google Gemini for answer evaluation and coaching text
• ElevenLabs for text-to-speech and legacy speech-to-text flow
• Stability AI for reward badge generation

Architecture(MIRO BOARD)

• overall flow

  

• presage's flow

Repository Structure

hacktropica-Stackedup/
├── Backend/
│   ├── src/
│   │   ├── ai/                 coaching worker, prompts, evaluator, Gemini helpers
│   │   ├── data/               # company/tier question banks and coding prompts
│   │   ├── db/                 # Mongo connection
│   │   ├── interview-agent/    # legacy unauthenticated practice flow
│   │   ├── middleware/         # JWT auth middleware
│   │   ├── models/             # User, Session, CoachingEvent
│   │   ├── rewards/            # collectible badge generation
│   │   ├── routes/             # auth, sessions, health
│   │   ├── text-to-speech/     # ElevenLabs TTS
│   │   └── ws/                 # WebSocket session handler
│   ├── dist/                   # compiled backend output
│   └── .env.example
├── frontend/
│   ├── src/
│   │   ├── components/         # mascot, back button, collectible card, marketing shell
│   │   ├── context/            # auth context
│   │   ├── hooks/              # websocket + biometric hooks
│   │   ├── pages/              # lobby, live session, report, profile, marketing pages
│   │   └── BLOKLanding.jsx     # landing page
│   └── .env.example
└── contracts/
    └── AuraSyncBadge.sol       # legacy NFT experiment, not used by current app flow

Core Product Flow

1. Auth

The frontend stores a JWT in localStorage and rehydrates the current user through /api/auth/me.

Backend auth routes:

• POST /api/auth/signup
• POST /api/auth/login
• GET /api/auth/me

2. Session Creation

The lobby lets users select:

• a company
• a tier: junior, mid, senior, staff

POST /api/sessions creates a session and preloads:

• a company opener
• behavioral questions
• tier-appropriate technical questions
• a coding question with starter code and test cases

Question generation lives in Backend/src/data/questions.ts.

3. Live Interview

The live session page:

• opens webcam/mic
• uses browser speech recognition for transcript capture
• sends telemetry to the backend every few seconds
• sends transcript segments over WebSocket
• shows live coaching notes in-session
• pauses the user if stress spikes too high

Frontend live session logic:

• frontend/src/pages/LiveSession.jsx
• frontend/src/hooks/useWebSocket.js
• frontend/src/hooks/useBiometric.js

Backend live session logic:

• Backend/src/ws/handler.ts
• Backend/src/ai/worker.ts

4. Coaching Pipeline

Coaching can trigger from:

• elevated stress
• filler-word surges
• WPM too low
• WPM too high
• periodic transcript-based checks

If RabbitMQ is configured, telemetry/transcript messages are queued and consumed by the AI worker.

If RabbitMQ is unavailable, the app falls back to direct coaching mode inside the backend process.

This makes local development simpler while still supporting async deployment.

5. Session Review

At the end of a session:

• answers are persisted
• a base session score is computed from live biometrics
• Gemini evaluates each answer
• Gemini generates an overall review and hiring recommendation

The report page then displays:

• overall interview score
• communication & composure score
• average answer quality
• average stress
• question-wise stress breakdown
• WPM timeline
• coaching interventions
• transcript / answer review cards

6. Reward Badge Generation

Passed sessions can unlock a collectible reward badge if they also clear the validation gates.

Current unlock thresholds:

• average answer quality must be at least 50/100
• average stress must be 65% or lower

Reward generation flow:

1. Session passes
2. AI review exists
3. Validation thresholds are met
4. Backend generates a reward image with Stability AI
5. If Stability is unavailable, backend generates a fallback SVG collectible card
6. Badge metadata is stored directly on the session document
7. Badge appears in report, lobby reward locker, and profile vault

The reward system lives in Backend/src/rewards/badge.ts.

Important Implementation Notes

Biometric Data Is Simulated

The biometric hook is a simulation layer driven by webcam frame variance plus transcript-derived metrics.

It is useful for product prototyping and UX experimentation, but it is not medical-grade or hardware-grade biometric sensing.

RabbitMQ Is Optional

The backend supports two coaching modes:

• queued mode with RabbitMQ
• direct in-process fallback

That means you can run the app locally without RabbitMQ and still get coaching behavior.

Current Reward System Is Web2

The contracts/ folder contains a previous NFT experiment, but the current application flow uses session-stored collectible badges instead of minting to a blockchain wallet.

Environment Variables

Backend

Copy Backend/.env.example to Backend/.env and fill in the values you need.

Required for basic app flow:

• MONGODB_URI
• JWT_SECRET
• FRONTEND_URL

Needed for AI features:

• GEMINI_API_KEY
• ELEVENLABS_API_KEY
• ELEVENLABS_VOICE_ID

Needed for reward image generation:

• STABILITY_API_KEY

Optional:

• RABBITMQ_URL

• PINATA_JWT

• PINATA_API_KEY

• PINATA_SECRET_KEY

• PINATA_GATEWAY_URL

• ALCHEMY_API_URL

• TREASURY_PRIVATE_KEY

• NFT_CONTRACT_ADDRESS

Frontend

Copy frontend/.env.example to frontend/.env.

Required:

• VITE_API_URL
• VITE_WS_URL

Local Development

1. Install dependencies

cd Backend
npm install

cd ../frontend
npm install

2. Configure environment files

Backend:

cp Backend/.env.example Backend/.env

Frontend:

cp frontend/.env.example frontend/.env

3. Start the backend

cd Backend
npm run dev

The backend builds to dist/ and runs on port 3000 by default.

4. Start the frontend

cd frontend
npm run dev

Vite runs on port 5173 by default.

5. Open the app

http://localhost:5173

Production Deployment

The repo is already shaped for split deployment:

• frontend on Vercel
• backend on Railway

Backend on Railway

Backend/railway.toml uses:

• build command: npm install && npm run build
• start command: npm start
• health check: /health

Frontend on Vercel

frontend/vercel.json rewrites all routes to index.html so React Router works with deep links.

Remember to set:

• VITE_API_URL
• VITE_WS_URL

in Vercel project settings, and:

• FRONTEND_URL

in Railway/backend env.

API Summary

Health

• GET /health

Auth

• POST /api/auth/signup
• POST /api/auth/login
• GET /api/auth/me

Sessions

• POST /api/sessions
• GET /api/sessions
• GET /api/sessions/:id
• PATCH /api/sessions/:id/complete
• POST /api/sessions/:id/review
• POST /api/sessions/:id/reward
• GET /api/sessions/leaderboard/top

Legacy Practice Endpoint

• POST /api/interview/process

This route is still present for the older practice/interviewer flow and is separate from the main authenticated session pipeline.

Main Screens

• Landing page: marketing site + entry point
• Lobby: company/tier selection and recent reward locker
• Live Session: webcam interview, transcript, coding editor, biometrics, coaching feed
• Report: score breakdown, graphs, transcript review, collectible badge
• Profile: XP, streak board, completed session archive, badge vault
• Marketing pages: features, docs, pricing, about

Known Caveats

• The frontend bundle is currently large enough to trigger the Vite chunk-size warning during build.
• Backend/.env.example still contains legacy web3-related variables even though the current reward system is web2.
• The contracts/ folder is not part of the active runtime path.
• The biometric layer is simulated and should not be treated as a real physiological measurement system.

Build Commands

Backend:

cd Backend
npm run build
npm start

Frontend:

cd frontend
npm run build
npm run preview

Recommended Next Cleanup

• Remove leftover legacy web3 environment variables from Backend/.env.example
• Remove or archive unused contract/web3 artifacts
• Add automated tests for:
  • auth routes
  • session creation/review
  • reward eligibility logic
  • WebSocket coaching events
• Split the frontend bundle to reduce the Vite chunk warning

Credits

AuraSync combines:

• AI evaluation
• real-time coaching
• biometric-style session feedback
• streak and reward mechanics
• neo-brutalist frontend design

into a single interview-prep product prototype.