StrandPath

A student pathway guidance web application for exploring possible Senior High School pathways, college fields, and career areas.

Prototype 1 — Initial Functional Prototype

Overview

StrandPath is designed to help students explore possible academic and career directions through information about their interests, skills, strengths, and preferences.

The system focuses on exploration and guidance rather than making decisions for students.

Prototype 1

The current prototype includes:

• Student pathway exploration
• Skills and interests assessment
• Assessment results
• Pathway information
• College and career exploration
• Guidance-oriented recommendations
• Public website prototype
• Web application prototype
• Mobile application prototype

Technologies

• React — user interface
• TypeScript — application development
• Vite — development and production build tool
• Tailwind CSS — styling
• React Router DOM — client-side routing
• Lucide React — interface icons
• Emotion React — styling support

Dependencies

Runtime

react ^18.3.1
react-dom ^18.3.1
@emotion/react ^11.13.3
react-router-dom ^6.26.2
lucide-react 0.522.0

Development

typescript ^5.5.4
vite ^5.2.0
@vitejs/plugin-react ^4.2.1
tailwindcss 3.4.17
postcss latest
autoprefixer latest
eslint ^8.50.0
eslint-plugin-react-hooks ^4.6.0
eslint-plugin-react-refresh ^0.4.1
@typescript-eslint/eslint-plugin ^5.54.0
@typescript-eslint/parser ^5.54.0
@types/node ^20.11.18
@types/react ^18.3.1
@types/react-dom ^18.3.1

Development

Install dependencies:

npm install

Start the development server:

npm run dev

Build the project:

npm run build

Run linting:

npm run lint

Project Structure

src/
├── components/
├── contexts/
├── pages/
├── App.tsx
└── ...

The project contains public website pages, application screens, mobile prototype screens, and supporting UI components.

Current Stage

Prototype 1

This version establishes the initial functional and visual foundation of StrandPath. Later development can expand the system's research basis, data, recommendation methodology, testing, and production implementation.

Purpose

StrandPath is intended to give students a clearer way to explore their options and understand possible directions.

---

StrandPath · Prototype 1