SprachBrücke
A German language academy, rebuilt as a product — from public site to student portal.
A1–C2
Full CEFR ladder mapped
6
Portal screens designed & built
4
Phase delivery roadmap
Live
Marketing site in production
The academy had a real teaching business and no software to run it. Enrolments arrived over WhatsApp, batch schedules lived in a spreadsheet, and class recordings were shared as raw links that spread beyond the students who paid for them. The public presence didn’t reflect the quality of the teaching, and there was no system of record for attendance, assignments, or a student’s progress through the CEFR ladder. Everything that scaled the business also broke it.
We started with the surface that earns trust: a production marketing site mapping the full A1–C2 journey, the course tracks, and transparent pricing. In parallel we designed the student portal end to end and built it as a working front-end — dashboard, live class schedule, chaptered recordings library, assignments, and CEFR progress — so the academy could click through the real product and correct it before any backend was committed to. Underneath, we architected the full platform: data model, video pipeline, payments, and notifications, sequenced into four phases.
The marketing site is live in production. The student portal is built and navigable as a front-end running on a fixture data layer — every screen designed, every flow validated, no backend wired yet. That’s deliberate: the architecture is settled and phase one, which brings up auth, the database, enrolment, and Razorpay billing, is the current sprint. Roughly 12–15% of the finished platform surface exists today, and it is the presentation layer.
Scope of engagement
Stack
6 systems, one product.
Conversion-first public site
The full A1–C2 journey, four course tracks, transparent per-level pricing, and an enrolment path that routes to WhatsApp — where this audience actually replies. Live in production.
Student dashboard
Next live class with a join countdown, attendance against batch average, learning streak, hours studied, and CEFR progress — the whole state of a student’s enrolment on one screen.
Chaptered recordings library
Every session published with chapters and attached resources, filterable by level, skill, and watch state, with per-recording progress so a student resumes where they stopped.
Batch schedule
Live classes, speaking labs, and grammar clinics across a batch, rendered in the student’s own timezone — the constraint that quietly breaks India–Germany scheduling twice a year.
Assignments & grading
Submission state, deadlines, and instructor feedback in one place, designed for inline annotation of written German rather than file attachments traded over chat.
Platform architecture
A 40–60 table domain model, 80–120 endpoints, and 8–12 third-party integrations specified and sequenced into four phases before phase one was written — so the build order follows the risk, not the enthusiasm.
Screens from the live product.
The calls that decide whether it survives contact.
Razorpay, not Stripe
Stripe India has restricted onboarding, and UPI is roughly 60% of Indian digital payments. Recurring course fees need UPI Autopay mandates, which Stripe handles poorly. Picking the globally familiar processor here would have quietly cost the academy most of its collections.
Live video and recorded video are two systems
They get conflated constantly. Live streaming is WebRTC and an SFU — real-time, latency-bound. VOD is transcoding, HLS, and CDN — throughput-bound. Different infrastructure, different cost curves, different failure modes. The pipeline runs live session to egress recording to adaptive-bitrate transcode to thumbnail to transcript to published library, and every stage needs its own retry and webhook.
The recordings library is the product, so it has to be defended
Plain playback URLs reach a WhatsApp group within a week and the academy is competing with its own content. The design calls for short-lived signed URLs bound to the session, per-student watermarking, and concurrent-stream limits — with Widevine and FairPlay DRM as the escalation if piracy justifies the cost jump.
Attendance is an audit log, not a boolean
It sounds trivial until a certificate is disputed. Students drop and rejoin on flaky mobile connections, sessions are attended partially, and the 90%-attendance rule for certification has to survive a challenge. So it stores join and leave events rather than a checkbox, and derives attendance from them.
Timezones will break silently, twice a year
Teachers sit in Germany, students in India. IST does not observe daylight saving; CET does. A Mon/Wed/Fri 7pm slot therefore shifts by an hour twice a year without anyone changing a setting. Everything is stored in UTC and rendered in the viewer’s zone, with the March and October boundaries tested deliberately.
Admin tooling is 40% of the build, and always underestimated
Batch scheduling, material upload, grading with inline annotation, attendance override, revenue reporting, refunds. None of it is student-facing and all of it decides whether the academy actually runs on the software or quietly goes back to spreadsheets.
Sequenced by risk, not enthusiasm.
Foundation
Auth, database schema, enrolment, Razorpay and GST invoicing, class links, manual recording upload.
Video
Embedded live classes, transcode pipeline, signed playback, assignments and grading, WhatsApp notifications.
Operations
Teacher console, admin reporting, attendance audit trail, certificate generation.
Intelligence
Transcription, in-video search, auto-chaptering, written-German feedback.
Architected for the full platform
Building thisThe front end is approved and signed off. This is the production platform now in build.
Next.js 15 (App Router)
SSR for marketing SEO, server components for the portal
TypeScript
End-to-end types across a 40–60 table domain
Tailwind + shadcn/ui
Design system without a component-library dependency
TanStack Query
Cache invalidation across schedule and attendance views
tRPC / server actions
Typed calls without a separate API repo
Postgres
Enrolments, batches, and attendance are all joins
Drizzle ORM
Typed SQL and cheap migrations
Phone-OTP auth
India is phone-first, not email-first
Upstash Redis
OTP rate limiting and session cache
Inngest / Trigger.dev
Transcode webhooks, reminders, streak rollups, dunning
100ms
India-based SFU, materially cheaper than Twilio or Agora
Cloudflare Stream
Signed playback URLs with Indian CDN presence
Cloudflare R2
Zero egress fees for PDFs and certificates
Razorpay
UPI, netbanking, EMI, and UPI Autopay mandates
WhatsApp Business API
Beats email on open rates in India, decisively
Resend
Invoices, receipts, and password flows
Sentry + Betterstack
Error tracking and uptime once real money moves