Inspiration
Career planning is broken for our generation. High schoolers face unprecedented anxiety about where they are headed, what careers exist, and how AI will impact their future. At the
same time, technology education remains inaccessible to many. We were inspired by Ashwika and the Youth Code Foundation's mission to flip this narrative—equipping students with confidence, real-world skills, and supporting causes like the Akhil Autism Foundation.
We built **Horizon AI** to act as a unified, accessible, and highly immersive career navigator. It enables students to discover their AI tracks, map custom educational roadmaps,
upgrade high-school resumes, and practice technical questions with a real-time semantic AI Coach.
## How We Built It
We structured the application as a highly responsive Single Page Application using **React**, **TypeScript**, and **Vite** for the frontend, styled entirely in **Vanilla CSS** with a
premium glassmorphic HUD layout, auto-dark mode, and responsive mobile overrides.
To make the AI Coach genuinely intelligent:
1. We set up a **Node.js Express backend proxy** to securely parse user answers and communicate with Google's Gemini API, keeping the API key hidden.
2. We utilized the `@google/generative-ai` SDK and configured Gemini to return structured JSON data representing the score, feedback text, and concept alignments.
3. We implemented a **Procedural Synthesizer** using the native browser **Web Audio API** to generate all UI feedback sounds and a soft, lowpass-filtered lo-fi arpeggio background
track without loading heavy audio assets.
### Mathematical Foundation & Scoring Models
Horizon AI relies on two major mathematical modeling pipelines:
**1. Career Explorer Quiz Alignment:**
The affinity score for a career \\( c \\) is computed by summing the weights of selected answers:
N
q
S(c) = ∑ W (c) q=1 q
where \\( W_q(c) \\) is the weight of the answer option for question \\( q \\) mapped to career \\( c \\), and \\( N_q = 5 \\) is the number of quiz questions.
The final matching percentage \\( M(c) \\) displayed to the student is:
⎛ ⎛ lS(c)r r⎞⎞
M(c) = max ⎜20,min ⎜100,l────r× 100r⎟⎟ ⎜ ⎜ lSloor r⎟⎟ ⎝ ⎝ lfmaxr r⎠⎠
where \\( S_{\text{max}} = 15 \\) is the maximum possible score (5 questions with a maximum weight of 3).
**2. Semantic Evaluation & Concept Alignment:**
The semantic alignment ratio \\( A \\) determines which portion of the ideal curriculum concepts have been verified in the interview answer:
│C │
│ matched│
A = ────────── │C │ │ ideal│
where \\( C_{\text{ideal}} \\) is the set of required domain structural concepts, and \\( C_{\text{matched}} \\) is the subset of concepts semantically validated in the user's answer
by the Gemini model. The rating score \( R \in [0, 100] \) is assigned based on structural alignment combined with depth. If the response length in characters, \( L = \text{length}(\text{userAnswer}) \), is under 15 characters, a penalty constraint is applied:
R ≤ 15 if L < 15 lor userAnswer ∈ Dodges
## Challenges We Faced
Our biggest challenge was environment-specific API configurations in the year 2026. The standard `gemini-1.5-flash` model has been deprecated on newer Google AI Studio endpoints,
resulting in 404 errors.
To resolve this, we wrote diagnostic scripts to fetch and filter the API's supported models under our project's quota. We discovered that direct newer endpoints (like gemini-2.0-
flash) were hitting 429 quota limits, but the stable model alias gemini-flash-latest was fully approved and active. Tweaking our backend to use this alias resolved all rate
limits.
## What We Learned
We learned how to design a secure decoupled client-proxy architecture, the power of procedural audio synthesis to reduce web load footprint, and how to write strict JSON-schema
instructions to get stable structured outputs from LLMs. Most importantly, we learned that AI is not a replacement for human creativity—it is a co-creator that makes our ideas happen 10x faster.
Built With
- express.js
- google-gemini-api
- html5-semantic-layout
- node.js
- react
- typescript
- vanilla
- vite
- web-audio-api
Log in or sign up for Devpost to join the conversation.