BridgeLab AI

A bilingual (Arabic / English) STEM lab coach. Students upload a photo of their circuit and get hint-first guidance instead of an answer. Teachers get an anonymized class view of where students keep getting stuck.

Built as a demo-ready prototype: no backend, no auth, no paid APIs — all analysis is deterministic mock logic running in the browser.

Quick start

npm install
npm run dev

Open http://localhost:3000.

Script	Purpose
npm run dev	Local dev server
npm run build	Production build
npm start	Run the production build
npm run lint	ESLint via eslint-config-next

Routes

• / — landing (hero, problem, features, pipeline teaser, Responsible AI)
• /student — upload + animated 5-step analysis + structured result
• /teacher — KPIs, charts, recent submissions, learning gaps, interventions
• /how-it-works — full pipeline view and Responsible AI

How it works

The student flow runs five steps in sequence: upload → detect → diagnose → explain → hint. Each step is rendered live in AnalysisSteps; the underlying simulation is in lib/analyze.ts.

Scenario selection is deterministic:

• Sample chips map directly to a scenario.
• Uploaded filenames are matched against keywords (ground/arduino, led + rev, resistor, sensor/dht, motor/robot).
• Anything else hashes to one of the five scenarios, so re-uploading the same file always produces the same result.

Scenario payloads — title, confidence, explanation, hint, safety note, follow-up question, next action, teacher category, affected concept — are defined in both English and Arabic in data/scenarios.ts.

To swap in a real CV / LLM later, replace the body of runAnalysis — the rest of the app already speaks the Scenario shape.

Tech stack

• Next.js 14 App Router · React 18 · TypeScript
• Tailwind CSS + tailwindcss-animate + shadcn/ui-style primitives in components/ui/
• Radix UI (Dialog, Tabs, Progress, Tooltip, Slot)
• Framer Motion for step / entrance animations
• Recharts for the teacher dashboard
• lucide-react icons
• html-to-image to export the result share card

Project layout

app/
  layout.tsx               Root layout, I18nProvider, navbar/footer
  page.tsx                 Landing
  student/page.tsx         Student lab coach
  teacher/page.tsx         Teacher dashboard
  how-it-works/page.tsx    Pipeline + Responsible AI
  globals.css              Tailwind + custom utilities

components/
  i18n/I18nProvider.tsx    EN/AR context, persists in localStorage, sets <html dir>
  layout/                  Navbar, Footer, Logo, LanguageSwitcher
  landing/                 Hero, Problem, Features, HowItWorksTeaser, ResponsibleAI
  student/                 Uploader, SampleChips, AnalysisSteps, OverlayMarkers,
                           ResultPanel, ShareCard, StatusBadge
  teacher/                 KpiCards, ChartCard, Charts, RecentTable, LearningGaps,
                           Interventions
  ui/                      Button, Card, Badge, Progress, Dialog primitives

lib/
  analyze.ts               5-step deterministic analysis pipeline
  history.ts               localStorage-backed history with seed data
  aggregate.ts             KPI / chart / intervention helpers
  cn.ts                    Tailwind class merge

data/
  scenarios.ts             5 demo scenarios with full bilingual copy
  i18n.ts                  EN + AR dictionaries
  seedHistory.ts           Seed class history so the dashboard is alive on first load

types/index.ts             Lang, Scenario, AnalysisResult, HistoryEntry, etc.

public/
  logo.png · namelogo.png  Brand marks
  samples/                 SVG illustrations for each demo scenario

Demo scenarios

ID	Filename triggers	Status
arduino-ground-error	ground, arduino	Needs attention
reversed-led	led + rev	Safe to retry
missing-resistor	resistor	Needs attention
wrong-sensor-pin	sensor, dht	Teacher review
robot-motor-misconnection	motor, robot	Needs attention

Bilingual + RTL

Every visible string flows through the t() helper from components/i18n/I18nProvider.tsx. Picking Arabic from the navbar:

1. Switches the dictionary in data/i18n.ts.
2. Sets <html lang="ar" dir="rtl">.
3. Lets Tailwind's logical properties handle the layout flip.

The choice is persisted in localStorage.

Responsible AI

Surfaced on the landing page and /how-it-works:

• Hint-first, not answer-dumping.
• Teacher sees aggregated insights, not student-by-student surveillance.
• Minimal data — no auth, no PII, history stays in the browser.
• Safety-relevant issues are surfaced first in the result panel.

Branding

The brand logo lives at public/logo.png and is used in the navbar, the landing hero, the analysis loading state, the downloadable share card, and as the favicon (set in app/layout.tsx). Drop a new logo.png into public/ to replace it — nothing else to change.

Status

Prototype built for a competition submission video. Not production-ready and not intended for real lab diagnostics.