Full StackLive Deployment: Hosted on RenderVisualizations: Custom D3.js

Skill Ascend — AI-Powered Career Mentorship Platform

Personalized career roadmaps, skill-gap analysis, D3.js progress graphs, and AI mock interviews.

Verified Milestone:Interactive D3.js XP visualization · AI mock interviews · Live on Render
Launch Live ApplicationView Repository
Technologies:ReactTypeScriptD3.jsNode.jsExpress.jsGemini AITailwind CSS
Skill Ascend
Skill Ascend System Interface

Problem Statement

Static career advice and generic roadmaps fail to address individual student skill deficits or provide actionable, hands-on project milestones.

Engineering Goals

  • Create dynamic, adaptive skill roadmaps generated by LLMs based on user diagnostic scores.
  • Build an engaging, interactive D3.js visualization for XP and milestone progress.
  • Provide realistic AI technical interview simulations with constructive feedback.
  • Deploy a responsive, accessible web application.

Execution Pipeline & Mechanics

01

Diagnostic Assessment

Users complete diagnostic quizzes across languages, algorithms, and system design.

02

Skill-Gap Synthesis

Identifies weak foundational areas and suggests high-leverage learning milestones.

03

Personalized Roadmap Graph

D3.js renders an interactive milestone tree with progress tracking and XP nodes.

04

AI Mock Interviewer

Engages in voice/text technical interview scenarios with post-session rubric scoring.

Engineering Challenges & Design Decisions

Decision: D3.js for roadmap visualization over static cards

Rationale: Interactive graph nodes provide clear visual dependency chains (prerequisites before advanced topics) that encourage progression.

Alternative Rejected: Simple linear checklists.

Core Architectural Highlights

The React frontend communicates with an Express.js backend. User skill profiles are analyzed by Gemini AI to synthesize tailored curricula, while D3.js renders interactive hierarchical graphs on canvas/SVG.

•Engineered custom D3.js force-directed and tree graphs that smoothly transition as users complete tasks.
•Integrated structured JSON output generation from Gemini AI to ensure predictable UI rendering.
•Deployed to Render with full responsive styling.

Testing & Empirical Evaluation

User journey testing across diverse target engineering roles (Full Stack, Data Science, DevOps).

Result #1
Live deployment operational on Render
Result #2
Sub-100ms client-side graph render latency

Security & Reliability Defenses

Input sanitization on all user survey responses.
JWT-based session authentication.

Key Engineering Learnings

  • •D3.js integration with React state requires strict separation between React DOM reconciliation and D3's imperative SVG selections.