Silk Road

AI-driven software engineering learning expedition trail

Comment

🌟 Inspiration

Online learning for software engineering is often a fragmented, solitary, and static experience. Students find themselves constantly switching between reading code tutorials, running scripts in external playgrounds, asking chat assistants for hints, and scrolling through community forums for help. This disconnected workflow results in high drop-off rates and cognitive fatigue.

Inspired by the historic trade journeys along the Silk Road, we set out to build a cohesive B2C learning portal. By transforming the software engineering learning path into a physical caravan trail of "Oases" nodes, we combine skill diagnostics, custom Bezier path traversal, sandbox execution, AI guidance, and community tipping into a single, unified, gamified ecosystem.

🗺️ What it does

Silk Road is a full-stack interactive portal that guides learners ("Travelers") through engineering trails using a desert-caravan theme:

  1. Timed Skill Diagnostics: Travelers begin with a conversational AI survey. The system administers a timed diagnostic coding test, scoring speed and correctness. Results are mapped on a custom SVG Radar Chart representing multi-dimensional Role IQ, allowing intermediate/advanced travelers to bypass foundational oases nodes.
  2. Dynamic Bezier Trails: Personalized roadmaps are rendered as a continuous, flowing path using SVG Cubic Bezier curves connecting Oasis coordinates. A bobbing camel caravan animates along the trail as travelers progress.
  3. Scroll-Synced Code Sandbox: Each Oasis features a programming challenge. The workspace provides a custom dual-column scroll-synced editor and a retro UNIX CRT console showing real-time execution outputs.
  4. AI Caravan Master (Co-pilot): When travelers get stuck, they can activate their guide, Master Marco Polo. Powered by Google Gemini, the Caravan Master streams helpful conceptual hints and pseudo-code directly into a sliding bottom drawer, following a strict behavioral rule: never spoil the direct code solution.
  5. Survival Canteen Streaks: Gamification is driven by a daily water canteen widget. Completed challenges replenish hydration, animated with CSS keyframe water waves. Travelers can buy "Streak Shields" using platform coins to save active streaks.
  6. The Great Bazaar: A B2C community marketplace where travelers can purchase certification badges, hire expert human guides (mentors) for 1-on-1 code reviews, and tip 10 coins to helpful forum posts—executing safe ACID transactions in our relational database ledger.
  7. v0 Oasis Component Generator: A premium feature leveraging Vercel's v0 API, allowing travelers to generate custom styled React + Tailwind CSS code boilerplates in real-time.

🛠️ How we built it

We architected Silk Road to support high scalability by partitioning relational transactions and high-frequency telemetry logs across two distinct databases:

  • Database Layer:
    • AWS RDS Aurora (PostgreSQL Serverless v2) + Drizzle ORM: Used for critical relational, transactional ledgers. Tipping forum posts, wallet updates, mentor session bookings, and subscription status updates are executed using relational ACID transaction queries.
    • AWS DynamoDB NoSQL Client: Handles rapid, low-latency logs. User progression node arrays, daily challenge history arrays, and survival streak stats are stored in DynamoDB to minimize RDS connection overhead.
  • AI & Generative Layer:
    • Vercel AI SDK + Google Gemini API (gemini-2.5-flash): Powering the customized roadmap generator and the streaming Caravan Master chat guide.
    • Vercel v0 Platform API: Used for on-demand component rendering.
  • Frontend & UX:
    • Next.js 14+ (App Router), TypeScript, and Tailwind CSS.
    • A premium Desert Midnight color palette (#070F19 deep space background, #0D1B2A glassmorphic panels, #D4AF37 gold accents, #00A896 turquoise springs).
    • A zero-dependency Web Audio API sound synthesizer producing ambient desert winds and compiler chimes.
  • Security & Compilation:
    • Placed code checks inside an AST parser using acorn to verify syntactic structural correctness.
    • Student scripts execute in isolated browser Web Worker threads enforcing a strict 2000ms execution timeout barrier to prevent infinite loops from locking the main browser thread.

🧮 Mathematical Formulations & Algorithms

1. Canteen Hydration Level

The traveler's streak canteen hydration percentage $H(S)$ is calculated dynamically from the active streak count $S \ge 0$: $$H(S) = \min\left(15 + 12 \times S, 100\right)\%$$ At $S \ge 7$, the canteen glows gold, indicating maximum hydration and multiplier rewards.

2. Skill Radar Chart Coordinates

Multi-dimensional Role IQ (incorporating Frontend, Backend, Database, Security, and Cloud Architecture) is plotted on a 5-axis SVG Radar Chart. For each skill dimension $i \in {0, 1, 2, 3, 4}$, the vertex coordinate $P_i(x, y)$ in a chart of radius $R$ is calculated as: $$\theta_i = \frac{2\pi i}{5} - \frac{\pi}{2}$$ $$x_i = C_x + R \cdot \left(\frac{\text{score}_i}{100}\right) \cdot \cos(\theta_i)$$ $$y_i = C_y + R \cdot \left(\frac{\text{score}_i}{100}\right) \cdot \sin(\theta_i)$$ where $(C_x, C_y)$ is the center of the SVG canvas container.

⚡ Challenges we faced

  1. Asynchronous Generative UI Over Timeouts: Serverless API functions hosted on Vercel have a 10-second timeout. Generating customized React component code through the v0 Platform API regularly takes over 30 seconds. To solve this, we implemented an asynchronous polling mechanism: the backend triggers the v0 generation, immediately returns a session tracking ID, and the client polls the status via GET /api/v0/generate?chatId=... every 4 seconds.
  2. Safe Code Evaluation: Standard eval() execution is highly vulnerable and can crash the user's browser tab with an infinite loop. We resolved this by spawning code execution inside a client-side Web Worker and establishing a 2-second timeout termination boundary.
  3. Database Dual-Write Syncing: Maintaining database consistency between PostgreSQL (RDS Aurora) and NoSQL (DynamoDB) was resolved by writing custom transaction helpers that ensure streak updates and marketplace checkouts update and sync gracefully.

🎉 Accomplishments that we're proud of

  1. Interactive Path Traversal: Transitioning between learning nodes animates the caravan camel smoothly along custom SVG Bezier paths, giving users a high-fidelity visual representation of their progress.
  2. Offline Database Mock Fallbacks: In the absence of live AWS or PostgreSQL credentials in .env.local, the application falls back automatically to local file-backed stores (in-memory-db.json and in-memory-dynamodb.json). This allows the entire codebase to run fully offline, ensuring judges can test the full pipeline out of the box!
  3. Zero-Dependency Sound Synthesizer: Using the browser's Web Audio API to synthesize ambient soundscapes, success chimes, and failure thuds, eliminating the need for heavy audio asset files.

📚 What we learned

  • How to orchestrate heterogeneous databases (PostgreSQL + DynamoDB) in a Next.js serverless architecture.
  • Syntactic checkups using Acorn AST parsing prior to runtime execution.
  • Custom math coordinates generation inside React to draw responsive SVG charts.

🚀 What's next for Silk Road

  • Multiplayer Guilds: Allowing travelers to band together into cooperative caravans, sharing collective survival hydration pools and undertaking group coding challenges.
  • Bazaar Algorithm Trading: Introducing custom sandboxes where users write trading bot scripts to optimize marketplace prices in a simulated trade route game.
  • Broad Learning Tracks: Expanding the AI roadmap generator to cover systems design, machine learning, and DevOps pipelines.

Built With

  • acorn-ast
  • aws-dynamodb
  • aws-rds-aurora
  • drizzle-orm
  • google-gemini
  • next.js
  • react
  • tailwindcss
  • typescript
  • vercel
  • vercel-ai-sdk
  • vercel-v0
  • web-audio-api
  • web-workers
Share this project:

Updates