Ravexa AI

Your AI-powered career evolution.

Ravexa AI is an AI career copilot for university students, fresh graduates, junior developers, and job seekers. It combines resume analysis, skill gap mapping, personalized learning roadmaps, mock interviews, and career coaching into a single product, so a job seeker always knows exactly what to do next instead of guessing.

This repository currently contains Step 1: the marketing landing page, built on the architecture the full product will use. Steps 2–4 (auth, dashboard, AI modules) plug into the same foundation — see What's Next below.

npm install
npm run dev

Then open http://localhost:3000.

Other useful scripts:

npm run build      # production build
npm run start       # run the production build
npm run lint        # ESLint
npm run typecheck   # tsc --noEmit

This build has been verified end-to-end in CI-equivalent conditions: clean tsc --noEmit, clean next lint, and a successful next build producing a static landing page (~143 kB first-load JS).

prisma/
  schema.prisma          # Full target schema for the whole product (see below)

src/
  app/
    layout.tsx            # Root layout: fonts, metadata, <html> shell
    page.tsx               # Composes the landing page from feature sections
    globals.css            # Tailwind layers + base styles + font CSS variables
    (auth)/
      layout.tsx           # Shared chrome for login/signup/onboarding
      login/page.tsx
      signup/page.tsx
      onboarding/page.tsx  # 3-step wizard: level → goal/field → review
    (app)/
      dashboard/page.tsx   # Placeholder — real dashboard arrives in Step 3

  components/
    ui/                    # Reusable primitives: button, badge, card, reveal, section-heading, form-field
    layout/                # navbar, footer

  features/
    landing/components/    # Landing-page-specific sections (hero, problem, solution, etc.)

  services/
    ai/                    # resumeAnalyzer.ts, interviewCoach.ts, roadmapGenerator.ts
                            # — typed stubs today; real implementations land in Step 4.
                            # UI code will only ever import from here, never call an LLM directly.

  hooks/                   # use-active-section.ts (navbar scroll-spy)
  types/                   # Shared TypeScript types, mirroring the Prisma schema
  lib/                     # utils.ts (cn() helper); db.ts and auth.ts arrive in Steps 2–3

The app is split into three layers on purpose, so the codebase scales cleanly as Steps 2–4 are added:

1. UI layer (components/, features/) — renders props and calls functions. It never knows how an AI response is generated or how a database query is built.
2. Service layer (services/ai/*) — owns all AI logic: building prompts, calling the model, validating the JSON shape that comes back. This is the only place that talks to an LLM provider.
3. Data layer (lib/db.ts + Prisma, arriving in Step 3) — the only place that touches the database.

API routes stay thin: check the session, call a service, persist with Prisma, return JSON. Once auth lands, the App Router will split into route groups — (marketing) for the public site, (auth) for /login /signup /onboarding, and (app) for everything behind the dashboard.

The visual language was chosen deliberately to avoid generic "AI startup" defaults (no cream-and-terracotta, no single neon-on-black gradient, no stock broadsheet layout).

• Color — obsidian (#0A0B0D, background), graphite (#14161B, surface), paper (#F4F5F7, text), with two signature accents: signal (#6E5BFF, violet — represents the user's current state) and evolve (#2FD9C4, teal — represents the growth state). The violet→teal gradient is reserved for CTAs and the signature graphic, not used as a background wash.
• Typography — Space Grotesk for headlines, Inter for body copy, JetBrains Mono for data points, labels, and eyebrow text — three distinct voices instead of one font doing everything.
• Signature motif — an animated "Career Trajectory" line graph (violet → teal stroke, four nodes: Today → Skills mapped → Interview-ready → Offer), used as the hero's centerpiece and echoed as a smaller connector line in the How It Works section. Built with Framer Motion's pathLength animation and respects prefers-reduced-motion throughout.
• Honesty over polish — the testimonials section is an honest "coming soon" skeleton state rather than fabricated quotes, since the product is pre-launch.

• Full marketing landing page: hero, problem framing, solution/feature showcase, how-it-works, testimonials (honest placeholder state), pricing (Free / Pro / Campus), final CTA, navbar with scroll-spy, footer.
• Authentication UI: /login, /signup, and a 3-step /onboarding wizard (career level → goal & target field → review), all built under src/app/(auth)/ with shared chrome in layout.tsx. Forms have real client-side validation (required fields, email format, password length and match, terms checkbox) and a polished submit/loading state.
• A /dashboard placeholder under src/app/(app)/ so the signup → onboarding → dashboard flow has somewhere real to land, rather than a 404, while Step 3 builds the real dashboard.
• Complete design system as reusable Tailwind tokens and UI primitives, including a new FormField primitive (components/ui/form-field.tsx) shared by every auth form.
• Self-hosted fonts (no external font CDN call at runtime).
• The target Prisma schema for the entire product, so later steps build against a stable data model from day one.
• Typed service-layer stubs for the three AI features, so the import paths and function signatures the UI will eventually call are already locked in.

Important — the auth pages are UI only. Submitting login or signup does not create or check a real account; it validates the form, then simulates a short delay and navigates to the next page in the flow (signup → onboarding → dashboard, login → dashboard directly). Nothing is persisted yet — that's exactly what Step 3 wires up.

• Step 3 — Real auth + dashboard: wire lib/auth.ts (Auth.js with the Prisma adapter) and lib/db.ts (Prisma client) for real, so signup/login actually create and check User rows, protect (app) routes with middleware, and replace the /dashboard placeholder with the real career score, recommended actions, and progress-over-time view.
• Step 4 — AI modules: implement resumeAnalyzer.ts, interviewCoach.ts, and roadmapGenerator.ts against a real LLM provider with Zod-validated structured output, plus the resume upload flow, roadmap UI, and mock interview UI.

The schema (prisma/schema.prisma) is written for the full product up front, even though only a fraction of it is wired to a UI yet. A few choices worth flagging:

• CareerScoreSnapshot is a one-to-many table, not a single mutable field on User — it's what powers the "progress over time" chart on the dashboard.
• InterviewSession and InterviewQuestion are separate models so a session can be evaluated question-by-question, not just with one final score.
• UserSkill is a join table between User and Skill with a proficiency score and a source field, so the system can later distinguish a skill detected from a resume vs. one added manually vs. one earned by completing a roadmap milestone.