Silk Road: AI-Driven Software Engineering Trail

An interactive, gamified B2C educational platform that transforms software engineering learning into an epic caravan expedition powered by AWS Databases, Vercel v0, and Google Gemini.

Comment

🧭 Inspiration

Traditional software engineering tutorials are dry, static, and disconnected. They treat learning complex topics like memorizing a folder structure. At the same time, developers are overloaded with disjointed tools: online playgrounds, search guides, AI assistants, and community forums. We wanted to build a unified, highly immersive B2C experience that treats learning as an epic trade caravan trail. Inspired by historic trade routes, we created Silk Road—an interactive learning platform where developers are "Travelers" traversing custom trails, solving coding puzzles to replenish their survival canteens, and trading insights in the Great Bazaar.

🐫 What it Does

Silk Road offers a complete gamified learning ecosystem:

  • Conversational AI Onboarding & Timed Role IQ Tests: An interactive mascot guides travelers through goal assessment, followed by a timed diagnostic test (with circular SVG timers) that plots capability on a zero-dependency Radar Chart and Bell Curve, automatically skipping basic oases for advanced users.
  • Interactive SVG Trail Map: Draws custom Bezier curves connecting learning nodes, animating a bobbing camel caravan along the route upon completion.
  • Scroll-Synced Sandbox Workspace: Constrained-height code playground (h-[480px]) with vertical double-column scroll-synced line numbers, and retro scanline terminal consoles.
  • AI Caravan Master (Co-pilot): Streams conceptual tips and guidance from Master Marco Polo without spoiling direct code solutions.
  • Bazaar Marketplace & ACID Forum Tipping: Travelers purchase subscription tiers, certifications, and streak shields. They can tip coin purses to forum posts, executing an ACID transactional ledger write in AWS Aurora.
  • Synthesized Audio Engine: Looping low-pass ambient desert windscapes and tactile UI sounds synthesized client-side via the Web Audio API.

🛠️ How We Built It

We chose a high-performance stack to fit our dual database architecture:

  • AWS RDS Aurora (PostgreSQL Serverless v2 via Drizzle ORM): Handles critical relational integrity—such as coin purchases, bookings, user profile records, and forum tipping ledgers.
  • AWS DynamoDB (NoSQL): Handles high-throughput, low-latency telemetry—tracking active oases nodes, submission logs, and daily streak counts.
  • Next.js 14+ (App Router) & Tailwind CSS: Powering the frontend deployed on Vercel with a sand-and-midnight oasis aesthetic.
  • Vercel AI SDK & Google Gemini API (gemini-2.5-flash): Dynamically construct personalized roadmaps, stream co-pilot guidance, and write instant 30-second learning summary scrolls.
  • Vercel v0 Platform API: Integrates custom React + Tailwind component generation with an asynchronous polling loop.

⚠️ Challenges We Faced

  1. Serverless Function Duration Limits: v0 React boilerplate generations can take up to 2 minutes, exceeding standard Vercel serverless timeouts. We solved this by launching v0 in asynchronous mode, returning a live link instantly, and polling the status endpoint every 4 seconds.
  2. Secure Sandboxing & Freeze Loops: Running student scripts inside the main thread risks browser freezes from infinite loops (while(true)). We resolved this by executing student code inside isolated browser Web Worker threads, terminating them instantly if runtime exceeds 2000ms, and parsing inputs into Abstract Syntax Trees (AST) with Acorn to block forbidden APIs.
  3. Database Connection Limits: Serverless functions scale horizontally instantly, which can exhaust relational database pools. We set low local pool maximum limits and configured resilient mock fallback databases to ensure development remains offline-friendly.

🏆 Accomplishments We're Proud Of

  • Flawless Mobile Responsiveness: Redesigned all viewports—including timed radar charts, OTP grids, and dashboard sidebars—to adapt to 320px screens with 44x44px touch targets.
  • Tactile Sensory Feedback: Built a Web Audio synth engine from scratch, generating desert windscapes and chime events dynamically in the browser.
  • P2P Ledger Transactions: Implemented a secure community tipping mechanism backed by atomic Drizzle transactions.

🎓 What We Learned

We mastered single-table partition designs in DynamoDB, connection pooling management in serverless PostgreSQL environments, and non-blocking asynchronous UI generation paradigms.

🚀 What's Next for Silk Road

  • Multiplayer Caravans: Co-op learning trails where travelers solve challenges in teams.
  • Real-time Collaboration Sandbox: Shared playgrounds for mentors and mentees.
  • Custom Enterprise Tracks: B2B onboarding pathways for engineering teams.

Built With

Share this project:

Updates