HUB Ocean Academy — Demo

A high-fidelity frontend prototype of HUB Ocean Academy, a course platform that teaches students and researchers how to discover, analyze, and contribute ocean data through the HUB Ocean data platform.

This is a demo built with placeholder/mock content to showcase the learner experience — not a production LMS.

Stack

• React 19 + TypeScript + Vite
• Tailwind CSS v4 (HUB Ocean color palette, custom design tokens)
• React Router for the six course sections
• Recharts for mock data visualizations
• Framer Motion for micro-interactions
• lucide-react icons

Structure

• Welcome → Explore → Analyze → Contribute → Final Project → Completion
• A persistent sidebar shows module progress, lesson-level completion, XP, and level.
• Modules unlock sequentially as prior modules reach 100% completion.
• Progress, XP, badges, and reflections are held in a React context (ProgressContext) and persisted to localStorage so the demo feels stateful across a session.

Getting started

npm install
npm run dev

Build

npm run build