View all projects
Forge
Mobile
Forge
Live WebsiteGitHub
React NativeEXPOTypeScriptPostgreSQLTailwindClerkVercel
Developed2025-09-01
RoleFull stack developer
TypeTeam project
Overview

A gamified AI-powered career guide for high school students

Contributions

Integrated an AI-driven chat system and implemented interactive animations and Lottie-based micro-interactions to enhance engagement for younger users and personalize career exploration. Built full-stack features by connecting frontend chat and onboarding experiences to backend endpoints, handling user state and conversation flows, and ensuring reliable data handling for personalized recommendations.

Product Walkthrough

Details

Product Walkthrough

A step-by-step look at how the product works through real interactions.

01

AI-Based Career Matching

  • Designed and implemented a structured questionnaire with decision logic and reusable UI components to analyze user responses and generate personalized career matches

Background

Why This System Was Built

The motivation behind creating this system and the key problems it was designed to solve for real users.

Many students were interested in skilled trades but struggled to understand where to start. Existing platforms provided large amounts of information, but the experience often felt overwhelming, static, and difficult to navigate without guidance

  • AI-supported trade simulation for exploring real-life work scenarios
  • Gamified progress system with levels, badges, and instant feedback
  • Interactive simulations replacing static reading
Engagement Time
by ~2.3x
stronger retention
Compared to traditional career resources
~65%
Reduced initial career exploration confusion
helping users identify suitable trade paths faster
  • Guided, step-by-step career exploration flow
  • Centralized view of training, career levels, salary growth, and job demand

Target Users

User Personas

Detailed user profiles showing the real needs, motivations, and challenges that directly shaped Forge’s product decisions.

Primary Persona

Wilson Danderson

Wilson Danderson

18 years oldHigh School StudentVancouver, BC

Wilson is a Grade 12 student preparing for graduation and trying to decide what career path to pursue. He feels overwhelmed by too many options and wants structured, beginner-friendly guidance that helps him explore careers with confidence.

“I want clear guidance so I can make the right decision about my future.”

Goals

  • Explore realistic career paths before graduation
  • Understand the skills required for each path
  • Find clear next steps for education and learning
  • Make more confident decisions about his future

Pain Points

  • Too many career options with unclear differences
  • Online information feels scattered and inconsistent
  • Does not know which step to take first
  • Has limited exposure to real career journeys

Motivations

  • Wants to avoid choosing the wrong path
  • Wants guidance that feels simple and practical
  • Wants to discover careers that match his strengths

Needs

  • Clear step-by-step guidance
  • Accessible career exploration content
  • Simple explanations without jargon
  • Visual learning paths and examples

Secondary Persona

Jamilla Sanderson

Jamilla Sanderson

21 years oldRecent Graduate / Part-Time BaristaBurnaby, BC

Jamilla recently completed her studies and is now looking for direction toward a stable career. She wants practical guidance, skill-building recommendations, and a clearer understanding of how to move from uncertainty into employment.

“I need step-by-step direction that helps me move toward a stable career.”

Goals

  • Identify realistic career opportunities
  • Build relevant skills quickly
  • Improve job readiness and confidence
  • Follow a structured path toward employment

Pain Points

  • Feels unsure about the next step after graduation
  • Finds many career resources too broad or generic
  • Feels overwhelmed by job market expectations
  • Needs more practical guidance, not just inspiration

Motivations

  • Wants to secure stable employment
  • Wants to feel more confident entering the workforce
  • Wants practical tools that lead to action

Needs

  • Practical career roadmaps
  • Skill recommendations based on goals
  • Real-world examples and guidance
  • Actionable next steps she can follow immediately

Technical Overview

System Architecture

A structured view of how the frontend, backend, and database components connect to deliver a seamless product experience.

Frontend

  • React Native & Expo
  • NativeWind CSS
  • Mobile-first UI

API Layer

API preview
  • Career Matching Logic
  • AI Chat (Gemini API)
  • State-Based Progress

Database

  • PostgreSQL (Neon)
  • Drizzle ORM
  • User Progress Data
  • Career Content Storage

Platform

  • Authentication (Clerk)
  • Vercel Deployment
  • CI/CD (GitHub)
  • Agile (Jira)
Flow
Frontend → API Layer → Database / Platform

Research

Competitive Analysis

A comparison of existing solutions to identify gaps, opportunities, and areas where this product could deliver stronger value.

Existing trade and career platforms provide useful information, but many rely on static resources, fragmented navigation, and limited interactive learning experiences.

Most competitors focus on listings, institutional data, or general information delivery. However, these approaches often lack guided exploration and real-time engagement for early-stage learners.

Forge differentiates itself by introducing guided career discovery, AI-supported simulation, and gamified progression that transforms passive browsing into an active learning journey.

Actionable Guidance
Static Information
Manual
AI-powered
Career.io
TradeUpBC
SkilledTradesBC
STEP
Skills Ontario
Forge

Platforms were positioned based on how effectively they support guided learning and actionable career exploration.

Visual Foundation

Design System

The visual language, logo, typography and colors that ensure consistency across the entire product.

Forge Style

Interaction Journey

User Flow

A step-by-step visualization of how users navigate through the product from entry to completing key actions.

Final Interface

High-Fidelity Design

Polished interface designs that demonstrate the final visual appearance and interactive details of the product.

Forge Highfi

Next Steps

Future Improvements

Planned enhancements and ideas that could further improve usability, performance, and overall user experience.

Advanced AI Personalization

Refine recommendation quality by adapting career suggestions to user interests, preferences, and prior interactions.

Persistent User Journey Tracking

Support long-term progress saving so users can return to their pathway, milestones, and career matches at any time.

Deeper Interactive Simulations

Expand the simulation experience with more scenario-based content tailored to different skilled trades and career paths.

Learning Path & Resource Suggestions

Provide follow-up recommendations such as certifications, training programs, and practical next steps for each career path.