-
released this
2026-09-10 22:48:00 +00:00 | 74 commits to main since this releaseNextcraft v0.1.0 — UI/UX Prototype Milestone Release
What This Is
High-fidelity interactive prototype of all 4 Nextcraft surfaces with realistic mock data, navigation flows, responsive layouts, and a shared component library. No backend, no business logic — everything static/mocked.
Surfaces (4)
Learner Surface (7 pages)
- Landing page with hero, Byte→Build→Demonstrate→Defend flow, program highlights, testimonials
- Program catalog with 5 competency stacks (70 total competencies)
- Competency stack view with status indicators, progress bars, microcredential badges
- Learner dashboard with 6 panels including AI tutor chat mockup and recharts progress graph
- Byte tutorial viewer with concept panel and tabbed worked examples
- Build sandbox mockup with IDE layout (toolbar, file explorer, editor, telemetry)
- Assessment/defense mockup with rubric, AI reviewer, oral defense, process trace timeline
Marketplace Surface (5 pages)
- Job board with 20 mock AI-era job listings, match scores, skill tags
- Client-side search and filter (skills, seniority, remote, salary range)
- Job detail with competencies, AI-matched skills breakdown, employer info, related jobs
- Employer profiles with culture section and open positions
- Pricing page with 6 tiers and feature comparison table
Employer Dashboard (4 pages)
- Dashboard overview: 4 metric cards, applicant pipeline (5 columns), 3 recharts analytics charts
- Talent search: 15 candidate cards with client-side filtering
- Candidate profiles: artifact gallery, process trace, defense transcripts, microcredential verification
- Posting management: posting list + detail form + applicant table
Admin Surface (4 pages)
- Admin overview: 5 platform metrics, activity feed (10 events), system health (6 services)
- Learner management: searchable table with detail panel (15 mock learners)
- Competency graph viewer: interactive @xyflow/react graph (20 nodes, clickable, minimap)
- Marketplace moderation: 3 tabbed queues with action buttons
Tech Stack
- Next.js 15 (App Router, Server Components)
- Tailwind CSS v4 (@theme, dark mode via @custom-variant)
- TypeScript 5.x (strict)
- pnpm 12 + turborepo (monorepo)
- lucide-react (icons)
- recharts (charts)
- @xyflow/react (competency graph viewer)
- Inter font (next/font)
- Storybook 10 (6 stories)
Structure
nextcraft/ apps/web/ # Next.js app (19 routes) packages/ui/ # Shared component library (5 primitives + tokens) packages/types/ # Shared TypeScript types packages/mock-data/ # Typed mock data (5 stacks, 20 jobs, 15 candidates, 10 employers)Requirements: 28/28 complete
- Infrastructure: REQ-001 to REQ-005 ✅
- Learner Surface: REQ-006 to REQ-012 ✅
- Marketplace Surface: REQ-013 to REQ-017 ✅
- Employer Dashboard: REQ-018 to REQ-021 ✅
- Admin Surface: REQ-022 to REQ-025 ✅
- Polish & Integration: REQ-026 to REQ-028 ✅
Phases (7)
- P0 Pre-execution → v0.0.1
- P1 Project Scaffolding → v0.0.2
- P2 Learner Surface → v0.0.3
- P3 Marketplace Surface → v0.0.4
- P4 Employer Dashboard → v0.0.5
- P5 Admin Surface → v0.0.6
- P6 Polish + Integration → v0.0.7
- P7 Final Review + Ship → v0.1.0 (this release)
Verification
- ✅ pnpm build: 4/4 packages, 19 routes
- ✅ pnpm typecheck: 7/7 tasks
- ✅ storybook build: all stories compile
- ✅ 104 TypeScript files, 19,536 lines of code
- ✅ 26 decisions logged (D-001 through D-026)
- ✅ Dark mode on all surfaces
- ✅ Breadcrumbs on all 20 routes
- ✅ Responsive (375px / 768px / 1280px)
- ✅ WCAG AA contrast verified
Downloads