Skip to content

SKILL_BLUEPRINT_FEATURE.md

Latest commit

 

History

History
143 lines (107 loc) · 3.82 KB

SKILL_BLUEPRINT_FEATURE.md

File metadata and controls

143 lines (107 loc) · 3.82 KB
Raw

Skill Blueprint Feature Implementation

Overview

This document explains the implementation of the Skill Blueprint feature for the Karir.AI platform. The feature consists of:

  1. A React component that displays AI-generated career blueprints
  2. A Netlify function that simulates the AI API endpoint
  3. Proper routing and integration with the existing application

Files Created

1. SkillBlueprintPage Component

  • Location: src/pages/SkillBlueprintPage.tsx
  • Purpose: Main page component that fetches and displays career blueprints
  • Features:
    • Fetches data from the Netlify function endpoint
    • Uses ReactMarkdown to properly render the markdown response
    • Implements loading states and error handling
    • Responsive design using existing UI components

2. Netlify Function

  • Location: netlify/functions/forecast.js
  • Purpose: Simulates the AI career blueprint API endpoint
  • Features:
    • Accepts POST requests with a user query
    • Returns a markdown-formatted career blueprint
    • Simulates API processing delay
    • Generates content based on the requested profession

3. Test Page

  • Location: src/pages/TestSkillBlueprint.tsx
  • Purpose: Simple form to test the skill blueprint feature
  • Features:
    • Allows users to enter a profession
    • Redirects to the SkillBlueprintPage with the entered profession

4. Routing Updates

  • Location: src/App.tsx
  • Purpose: Integrates the new pages into the application routing
  • Routes Added:
    • /skill-blueprint → SkillBlueprintPage
    • /test-skill-blueprint → TestSkillBlueprint

5. Dependencies

  • Added: react-markdown for rendering markdown content
  • Updated: package.json to include the new dependency

API Specification

Endpoint

POST /.netlify/functions/forecast

Request Body

{
  "userQuery": "string"
}

Response

{
  "prediction": "markdown formatted string",
  "timestamp": "ISO timestamp"
}

Component Details

SkillBlueprintPage

Props

  • None (uses URL parameters via useLocation)

URL Parameters

  • profession: The profession to generate a blueprint for (defaults to "Data Scientist")

State

  • blueprintMarkdown: Stores the fetched markdown content
  • isLoading: Tracks loading state
  • error: Stores any error messages

Functions

  • fetchBlueprint: Makes the API call to the Netlify function
  • Various UI rendering functions for different states

Styling

  • Uses existing shadcn/ui components
  • Implements responsive design
  • Includes proper loading skeletons
  • Uses ReactMarkdown for content rendering

TestSkillBlueprint

State

  • profession: Tracks the entered profession

Functions

  • handleSubmit: Handles form submission and redirects to the blueprint page

Testing Instructions

  1. Start the development server:

    npm run dev

  2. Navigate to /test-skill-blueprint

  3. Enter a profession (e.g., "Data Scientist", "UX Designer")

  4. Click "View Career Blueprint"

  5. Observe the AI-generated blueprint with proper markdown formatting

Error Handling

The implementation includes comprehensive error handling:

  • Network errors
  • Invalid responses
  • Missing data
  • Loading states
  • User-friendly error messages

Future Improvements

  1. Add caching mechanism for previously fetched blueprints
  2. Implement pagination for long blueprints
  3. Add print/export functionality
  4. Include interactive elements in the blueprint
  5. Add user feedback mechanism
  6. Implement authentication for personalized blueprints

Deployment Notes

The Netlify function will automatically be deployed with the rest of the application. Ensure that:

  1. The function file is located at netlify/functions/forecast.js
  2. The function exports a handler with the correct signature
  3. Environment variables are properly configured if needed