Stellar

A visual learning-growth tracker for college students. Small accomplishments accumulate over time and become visible, credible proof of skill — shown two ways from the same data:

• Constellation — an atmospheric, interactive star map of every accomplishment. Stars are sized by significance and colored by type; lines trace how skills compound; a timeline scrubs the record as it grows. Zoom/pan to explore dense clusters.
• Dashboard — a recruiter-facing view of the same data: summary stats, a skills chart (click a skill to see its proof timeline), cumulative-growth chart, project highlights, and a filterable proof ledger. Only public accomplishments appear here, and it's shareable.

Add new accomplishments from the constellation, toggle each one public/private, and use the ✦ AI Draft button to have Claude write a recruiter-facing "professional translation" of an accomplishment.

---

Tech stack

Area	Technology
UI framework	React 18
Build tool / dev server	Vite 5 (@vitejs/plugin-react)
Charts	Recharts (skills bar chart, cumulative-growth area chart)
Constellation rendering	Hand-rolled SVG (stars, links, grid, vignette) + pointer/wheel zoom & pan
Styling	Plain CSS with CSS custom properties (src/index.css) — no UI library; dark, editorial design system
AI translations	Anthropic SDK (@anthropic-ai/sdk), model claude-opus-4-8
AI endpoint	Vite dev-server middleware (vite.config.js) — keeps the API key server-side
Data	Seeded in-memory (src/data/seed.js); React state, no backend/database
Language	JavaScript (JSX), ES modules

Project layout

src/
  App.jsx                         # top-level state (accomplishments, view, modals)
  data/seed.js                    # the one fake user + all seeded accomplishments
  components/
    Navigation.jsx                # top nav + view switcher + share
    constellation/
      ConstellationView.jsx       # SVG star map, timeline, zoom/pan
      StarDetailPanel.jsx         # per-star detail + public/private toggle
      AddStarModal.jsx            # create a star (+ ✦ AI Draft)
      AIGuidance.jsx              # next-step recommendations
    dashboard/
      DashboardView.jsx           # stats, charts, skill timeline, proof ledger
      ShareModal.jsx              # shareable profile
vite.config.js                    # React plugin + /api/professional-translation middleware

---

Getting started

Requires Node 18+ (developed on Node 22).

npm install

# For the AI Draft feature (optional — it falls back to a template without a key):
cp .env.example .env
#   then paste your key:  ANTHROPIC_API_KEY=sk-ant-...

npm run dev      # http://localhost:5173

.env is gitignored — never commit your key. Other scripts: npm run build, npm run preview.

---

Roadmap / next steps (and the tech to use)

The app is intentionally frontend-only. To turn it into a real product:

1. Persist data instead of seeding it in memory. Set up a database with Postgres (hosted on Supabase or Neon) or SQLite for local dev. Use Prisma as the ORM. Replace the seedAccomplishments array with a fetch from your tables so new stars survive a refresh.

2. Make the AI endpoint work in production. Move the /api/professional-translation handler out of the Vite dev middleware into a serverless function (Vercel Functions or Netlify Functions) or a small Express server, with ANTHROPIC_API_KEY set as a server-side environment variable. Then npm run build deployments get real AI, not just the fallback.

3. Add accounts so each student has their own ledger. Add auth with Clerk or Auth0 (or Supabase Auth if you use Supabase above). Scope accomplishments to a user_id.

4. Real shareable profiles. Today the share link is a mock. Give each public profile a real route (e.g. /u/:handle) served from the database, behind a Next.js or React Router app.

5. Import accomplishments automatically. Pull real signals via the GitHub REST API (merged PRs, repos), or let users paste a résumé and parse it with Claude into structured accomplishments.

6. Grow client state as needed. If prop-drilling from App.jsx gets heavy, adopt Zustand for UI state and TanStack Query (React Query) for server data + caching.

7. Testing & quality. Add Vitest + React Testing Library for component tests and Playwright for an end-to-end happy path (add a star → see it on the dashboard).

8. Deploy. Ship the static frontend to Vercel or Netlify (both detect Vite automatically); point the AI/API routes at the serverless functions from step 2.

9. Responsive polish. The layout is tuned for laptop. Make the constellation rail and dashboard grids collapse gracefully on mobile (CSS container queries / a breakpoint pass).

---

Notes

• No real backend, database, auth, or onboarding by design — it's a polished prototype around one preloaded fake user.
• The constellation deliberately avoids game-y space art: thin grid lines, restrained accent colors, editorial typography.

---

Screenshots

Constellation View

• 

Dashboard View

• 

Add Star

•