init commit

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+.env
+.git

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "react-hooks/exhaustive-deps": "warn",
+    "react/display-name": "warn"
+  }
+}

.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+/src/generated/prisma
+
+/src/generated/prisma

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false
+}

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM node:18-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=7860
+
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
+
+EXPOSE 7860
+CMD ["node", "server.js"]

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  output: "standalone",
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,79 @@
+{
+  "name": "byte-riot",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "db:generate": "prisma generate",
+    "db:push": "prisma db push",
+    "db:pull": "prisma db pull",
+    "db:migrate": "prisma migrate dev",
+    "db:studio": "prisma studio",
+    "db:reset": "prisma migrate reset"
+  },
+  "dependencies": {
+    "@prisma/adapter-pg": "^7.4.1",
+    "@prisma/client": "^7.4.1",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "@tanstack/react-query": "^5.90.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.525.0",
+    "next": "15.4.2",
+    "pg": "^8.18.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.68.0",
+    "recharts": "^3.4.1",
+    "sharp": "^0.34.5",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/pg": "^8.16.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@typescript-eslint/eslint-plugin": "^8.56.0",
+    "@typescript-eslint/parser": "^8.56.0",
+    "eslint": "^9.39.3",
+    "eslint-config-next": "^15.4.2",
+    "prisma": "^7.4.1",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

prisma.config.ts

@@ -0,0 +1,13 @@
+import path from "node:path";
+import { defineConfig } from "prisma/config";
+import { PrismaPg } from "@prisma/adapter-pg";
+
+export default defineConfig({
+  earlyAccess: true,
+  schema: path.join("prisma", "schema.prisma"),
+  migrate: {
+    async adapter(env) {
+      return new PrismaPg({ connectionString: env.DATABASE_URL });
+    },
+  },
+});

prisma/schema.prisma

@@ -0,0 +1,136 @@
+generator client {
+  provider = "prisma-client-js"
+  output   = "../src/generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+model cv_file {
+  file_id       String    @id @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
+  user_id       String    @db.Uuid
+  file_type     String    @db.VarChar
+  filename      String    @db.VarChar
+  url           String    @db.VarChar
+  is_extracted  Boolean
+  uploaded_at   DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+  date_modified DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+}
+
+model cv_filter {
+  criteria_id     String    @id @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
+  gpa_edu_1       Float?
+  gpa_edu_2       Float?
+  gpa_edu_3       Float?
+  univ_edu_1      String?   @db.VarChar
+  univ_edu_2      String?   @db.VarChar
+  univ_edu_3      String?   @db.VarChar
+  major_edu_1     String?   @db.VarChar
+  major_edu_2     String?   @db.VarChar
+  major_edu_3     String?   @db.VarChar
+  domicile        String?   @db.VarChar
+  yoe             Int?
+  hardskills      String[]  @db.VarChar
+  softskills      String[]  @db.VarChar
+  certifications  String[]  @db.VarChar
+  business_domain String[]  @db.VarChar
+  created_at      DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+}
+
+model cv_matching {
+  matching_id     String    @id @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
+  profile_id      String?   @db.Uuid
+  criteria_id     String?   @db.Uuid
+  gpa_edu_1       Boolean?
+  gpa_edu_2       Boolean?
+  gpa_edu_3       Boolean?
+  univ_edu_1      Boolean?
+  univ_edu_2      Boolean?
+  univ_edu_3      Boolean?
+  major_edu_1     Boolean?
+  major_edu_2     Boolean?
+  major_edu_3     Boolean?
+  domicile        Boolean?
+  yoe             Boolean?
+  hardskills      Boolean?
+  softskills      Boolean?
+  certifications  Boolean?
+  business_domain Boolean?
+  created_at      DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+}
+
+model cv_profile {
+  profile_id      String    @id @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
+  fullname        String    @db.VarChar
+  gpa_edu_1       Float?
+  univ_edu_1      String?   @db.VarChar
+  major_edu_1     String?   @db.VarChar
+  gpa_edu_2       Float?
+  univ_edu_2      String?   @db.VarChar
+  major_edu_2     String?   @db.VarChar
+  gpa_edu_3       Float?
+  univ_edu_3      String?   @db.VarChar
+  major_edu_3     String?   @db.VarChar
+  domicile        String?   @db.VarChar
+  yoe             Int?
+  hardskills      String[]  @db.VarChar
+  softskills      String[]  @db.VarChar
+  certifications  String[]  @db.VarChar
+  business_domain String[]  @db.VarChar
+  filename        String    @unique @db.VarChar
+  file_id         String?   @db.Uuid
+  created_at      DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+}
+
+model cv_score {
+  scoring_id  String    @id @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
+  matching_id String?   @db.Uuid
+  score       Int?
+  created_at  DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+}
+
+model cv_tenant {
+  tenant_id     String    @id @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
+  tenant_name   String    @unique @db.VarChar
+  created_at    DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+  date_modified DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+  notes         String?   @db.VarChar
+}
+
+model cv_user {
+  user_id         String    @id @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
+  username        String    @unique @db.VarChar
+  hashed_password String    @db.VarChar
+  email           String    @unique @db.VarChar
+  full_name       String    @db.VarChar
+  role            String    @db.VarChar
+  is_active       Boolean
+  tenant_id       String?   @db.Uuid
+  created_at      DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+  date_modified   DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+  notes           String?   @db.VarChar
+}
+
+model cv_weight {
+  weight_id       String    @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
+  criteria_id     String    @db.Uuid
+  gpa_edu_1       Float?
+  gpa_edu_2       Float?
+  gpa_edu_3       Float?
+  univ_edu_1      Float?
+  univ_edu_2      Float?
+  univ_edu_3      Float?
+  major_edu_1     Float?
+  major_edu_2     Float?
+  major_edu_3     Float?
+  domicile        Float?
+  yoe             Float?
+  hardskills      Float?
+  softskills      Float?
+  certifications  Float?
+  business_domain Float?
+  created_at      DateTime? @default(dbgenerated("timezone('Asia/Jakarta'::text, now())")) @db.Timestamptz(6)
+
+  @@id([weight_id, criteria_id])
+}

src/app/api/agentic/create_weight/route.ts

@@ -0,0 +1,24 @@
+import { NextRequest, NextResponse } from "next/server"
+
+export async function POST(request: NextRequest) {
+  const token = request.headers.get("Authorization")
+  const { searchParams } = new URL(request.url)
+  const criteria_id = searchParams.get("criteria_id")
+
+  const body = await request.json()
+
+  const res = await fetch(
+    `https://byteriot-candidateexplorer.hf.space/CandidateExplorer/agentic/create_weight?criteria_id=${criteria_id}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: token ?? "",
+      },
+      body: JSON.stringify(body),
+    }
+  )
+
+  const data = await res.json()
+  return NextResponse.json(data, { status: res.status })
+}

src/app/api/cv-profile/options/route.ts

@@ -0,0 +1,52 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+
+export async function GET() {
+  console.log("DATABASE_URL:", process.env.DATABASE_URL);
+  try {
+    const profiles = await prisma.cv_profile.findMany({
+      select: {
+        domicile: true,
+        softskills: true,
+        certifications: true,
+        business_domain: true,
+        univ_edu_1: true,
+        univ_edu_2: true,
+        univ_edu_3: true,
+        major_edu_1: true,
+        major_edu_2: true,
+        major_edu_3: true,
+      },
+    });
+
+    // Flatten and deduplicate array fields
+    const unique = (arr: (string | null)[]) =>
+      [...new Set(arr.filter(Boolean))].sort() as string[];
+
+    const flatArray = (key: keyof typeof profiles[0]) =>
+      unique(profiles.flatMap((p) => p[key] as string[]));
+
+    const options = {
+      domicile: unique(profiles.map((p) => p.domicile)),
+      softskills: flatArray("softskills"),
+      certifications: flatArray("certifications"),
+      business_domain: flatArray("business_domain"),
+      univ_edu: unique([
+        ...profiles.map((p) => p.univ_edu_1),
+        ...profiles.map((p) => p.univ_edu_2),
+        ...profiles.map((p) => p.univ_edu_3),
+      ]),
+      major_edu: unique([
+        ...profiles.map((p) => p.major_edu_1),
+        ...profiles.map((p) => p.major_edu_2),
+        ...profiles.map((p) => p.major_edu_3),
+      ]),
+    };
+
+    return NextResponse.json(options);
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ error: "Failed to fetch options" }, { status: 500 });
+  }
+}

src/app/api/cv-profile/route.ts

@@ -0,0 +1,198 @@
+import { prisma } from "@/lib/prisma";
+import { NextRequest, NextResponse } from "next/server";
+
+async function getMatchingArrayValues(
+  column: string,
+  search: string,
+  prisma: any
+): Promise<string[]> {
+  const result = await prisma.$queryRawUnsafe<{ val: string }[]>(`
+    SELECT DISTINCT unnest(${column}) as val
+    FROM cv_profile
+    WHERE EXISTS (
+      SELECT 1 FROM unnest(${column}) AS elem
+      WHERE elem ILIKE '%' || $1 || '%'
+    )
+  `, search);
+
+  // Filter in JS for partial match
+  return result
+    .map((r) => r.val)
+    .filter((v) => v.toLowerCase().includes(search.toLowerCase()));
+}
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+
+  // --- PAGINATION ---
+  const page = Number.parseInt(searchParams.get("page") ?? "1");
+  const limit = Number.parseInt(searchParams.get("limit") ?? "10");
+  const skip = (page - 1) * limit;
+
+  // --- SEARCH ---
+  const search = searchParams.get("search");
+
+  // --- FILTERS ---
+  const domicile = searchParams.get("domicile");
+  const yoe_min = searchParams.get("yoe_min");
+  const yoe_max = searchParams.get("yoe_max");
+  const softskills = searchParams.getAll("softskills");
+  const certifications = searchParams.getAll("certifications");
+  const business_domain = searchParams.getAll("business_domain");
+
+  const univ_edu_1 = searchParams.get("univ_edu_1");
+  const univ_edu_2 = searchParams.get("univ_edu_2");
+  const univ_edu_3 = searchParams.get("univ_edu_3");
+  const major_edu_1 = searchParams.get("major_edu_1");
+  const major_edu_2 = searchParams.get("major_edu_2");
+  const major_edu_3 = searchParams.get("major_edu_3");
+  const gpa_min_1 = searchParams.get("gpa_min_1");
+  const gpa_max_1 = searchParams.get("gpa_max_1");
+  const gpa_min_2 = searchParams.get("gpa_min_2");
+  const gpa_max_2 = searchParams.get("gpa_max_2");
+  const gpa_min_3 = searchParams.get("gpa_min_3");
+  const gpa_max_3 = searchParams.get("gpa_max_3");
+
+  // --- SORT ---
+  const sortBy = searchParams.get("sortBy") ?? "created_at";
+  const sortOrder = searchParams.get("sortOrder") === "asc" ? "asc" : "desc";
+
+  const allowedSortFields = [
+    "fullname", "domicile", "yoe", "gpa_edu_1", "gpa_edu_2", "gpa_edu_3",
+    "univ_edu_1", "univ_edu_2", "univ_edu_3", "major_edu_1", "major_edu_2",
+    "major_edu_3", "created_at",
+  ];
+
+  const orderBy = allowedSortFields.includes(sortBy)
+    ? { [sortBy]: sortOrder }
+    : { created_at: "desc" as const };
+
+// --- BUILD WHERE ---
+const where: any = {
+  // Search across all text columns
+  ...(search ? {
+    OR: [
+      { fullname: { contains: search, mode: "insensitive" } },
+      { domicile: { contains: search, mode: "insensitive" } },
+      { univ_edu_1: { contains: search, mode: "insensitive" } },
+      { univ_edu_2: { contains: search, mode: "insensitive" } },
+      { univ_edu_3: { contains: search, mode: "insensitive" } },
+      { major_edu_1: { contains: search, mode: "insensitive" } },
+      { major_edu_2: { contains: search, mode: "insensitive" } },
+      { major_edu_3: { contains: search, mode: "insensitive" } },
+      { filename: { contains: search, mode: "insensitive" } },
+
+      // ✅ Array partial + case-insensitive search using raw filter
+      {
+        hardskills: {
+          hasSome: await getMatchingArrayValues("hardskills", search, prisma),
+        },
+      },
+      {
+        softskills: {
+          hasSome: await getMatchingArrayValues("softskills", search, prisma),
+        },
+      },
+      {
+        certifications: {
+          hasSome: await getMatchingArrayValues("certifications", search, prisma),
+        },
+      },
+      {
+        business_domain: {
+          hasSome: await getMatchingArrayValues("business_domain", search, prisma),
+        },
+      },
+
+      // GPA — only search if input is a valid number
+      ...(Number.isNaN(Number.Number.parseFloat(search)) ? [] : [
+        { gpa_edu_1: { equals: Number.Number.parseFloat(search) } },
+        { gpa_edu_2: { equals: Number.Number.parseFloat(search) } },
+        { gpa_edu_3: { equals: Number.Number.parseFloat(search) } },
+      ]),
+
+      // YOE — only search if input is a valid integer
+      ...(Number.isNaN(Number.parseInt(search)) ? [] : [
+        { yoe: { equals: Number.parseInt(search) } },
+      ]),
+    ],
+  } : {}),
+
+    ...(domicile && { domicile }),
+
+    ...(yoe_min || yoe_max
+      ? {
+          yoe: {
+            ...(yoe_min && { gte: Number.parseInt(yoe_min) }),
+            ...(yoe_max && { lte: Number.parseInt(yoe_max) }),
+          },
+        }
+      : {}),
+
+    ...(softskills.length > 0 && {
+      softskills: { hasSome: softskills },
+    }),
+
+    ...(certifications.length > 0 && {
+      certifications: { hasSome: certifications },
+    }),
+
+    ...(business_domain.length > 0 && {
+      business_domain: { hasSome: business_domain },
+    }),
+
+    ...(univ_edu_1 && { univ_edu_1 }),
+    ...(major_edu_1 && { major_edu_1 }),
+    ...((gpa_min_1 || gpa_max_1) && {
+      gpa_edu_1: {
+        ...(gpa_min_1 && { gte: Number.parseFloat(gpa_min_1) }),
+        ...(gpa_max_1 && { lte: Number.parseFloat(gpa_max_1) }),
+      },
+    }),
+
+    ...(univ_edu_2 && { univ_edu_2 }),
+    ...(major_edu_2 && { major_edu_2 }),
+    ...((gpa_min_2 || gpa_max_2) && {
+      gpa_edu_2: {
+        ...(gpa_min_2 && { gte: Number.parseFloat(gpa_min_2) }),
+        ...(gpa_max_2 && { lte: Number.parseFloat(gpa_max_2) }),
+      },
+    }),
+
+    ...(univ_edu_3 && { univ_edu_3 }),
+    ...(major_edu_3 && { major_edu_3 }),
+    ...((gpa_min_3 || gpa_max_3) && {
+      gpa_edu_3: {
+        ...(gpa_min_3 && { gte: Number.parseFloat(gpa_min_3) }),
+        ...(gpa_max_3 && { lte: Number.parseFloat(gpa_max_3) }),
+      },
+    }),
+  };
+
+  try {
+    const [profiles, total] = await Promise.all([
+      prisma.cv_profile.findMany({
+        where,
+        orderBy,
+        skip,
+        take: limit,
+      }),
+      prisma.cv_profile.count({ where }),
+    ]);
+
+    return NextResponse.json({
+      data: profiles,
+      pagination: {
+        total,
+        page,
+        limit,
+        totalPages: Math.ceil(total / limit),
+        hasNext: page < Math.ceil(total / limit),
+        hasPrev: page > 1,
+      },
+    });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ error: "Failed to fetch profiles" }, { status: 500 });
+  }
+}

src/app/api/me/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from "next/server"
+
+export async function GET(request: NextRequest) {
+  const token = request.headers.get("Authorization")
+
+  if (!token) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const res = await fetch("https://byteriot-candidateexplorer.hf.space/CandidateExplorer/admin/me", {
+    headers: {
+      Authorization: token,
+    },
+  })
+
+  if (!res.ok) {
+    return NextResponse.json({ error: "Failed to fetch user" }, { status: res.status })
+  }
+
+  const data = await res.json()
+  return NextResponse.json(data)
+}

src/app/globals.css

@@ -0,0 +1,185 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-poppins: var(--font-poppins);
+  --font-mono: var(--font-geist-mono);
+  --color-primary: #18AF4A;
+  --color-primary-dark: #000f24;
+  --color-primary-darker: #010725;
+  /* --color-accent: #297c9d; */
+  --color-accent-dark: #2b2b8e;
+  --color-accent-darker: #3C260A;
+
+  --color-transparent: transparent;
+
+  --color-neutral-50: #2a292e;
+  --color-neutral-100: #3a3941;
+  --color-neutral-200: #43414b;
+  --color-neutral-300: #4e4c58;
+  --color-neutral-400: #5f5d6c;
+  --color-neutral-500: #767483;
+  --color-neutral-600: #92919f;
+  --color-neutral-700: #b9b8c1;
+  --color-neutral-800: #dad9de;
+  --color-neutral-900: #efeef0;
+  --color-neutral-950: #f7f7f8;
+
+  --color-effect-color-glow-neutral: rgba(145, 158, 171, 0.15);
+
+  --animate-shine: shine 2s infinite;
+  --animate-wiggle: wiggle 1s ease-in-out infinite; 
+
+  @keyframes shine {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+
+  @keyframes wiggle {    
+  0%,    
+  100% {      transform: rotate(-3deg);    }    
+  50% {      transform: rotate(3deg);    }  
+  }
+
+  --gradient-radial-to-b: circle farthest-side at top center;
+  --gradient-radial-to-t: circle farthest-side at bottom center;
+  --gradient-radial-to-r: circle farthest-side at center right;
+  --gradient-radial-to-l: circle farthest-side at center left;
+  --shine-effect: linear-gradient(30deg, transparent 25%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.1) 50%, rgba(124,150,253,0.2) 58%, rgba(255,255,255,0.05) 60%, transparent 75%);
+
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+.nav-shadow {
+  box-shadow: 0px 4px 6px -1px var(--color-effect-color-glow-neutral, rgba(145, 158, 171, 0.15)), 0px 2px 4px -1px var(--color-effect-color-glow-neutral, rgba(145, 158, 171, 0.15));
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-poppins);
+}
+
+nav {
+  padding: 12px;
+}
+
+h1 {
+  font-weight: 700;
+  /* font-family: var(--font-poppins); */
+  line-height: 32px;
+}
+/* p {
+  font-family: var(--font-poppins);
+} */
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: #2C3947;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;}
+  body {
+    @apply bg-background text-foreground;}}

src/app/layout.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono, Poppins } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+const poppins = Poppins({
+  variable: "--font-poppins",
+  subsets: ["latin"],
+  // choose only the weights you need — lighter is better for perf
+  weight: ["300", "400", "500", "600", "700"],
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "ByteRiot",
+  description: "ByteRiot yooo",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} ${poppins.className} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/learning/layout.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { useEffect, useState } from "react";
+import { RoadmapsRoot } from "../onboarding/learningPath";
+
+function CourseContentAccordion({
+  competencies,
+}: {
+  competencies: { skill: string; description: string; resources: string[] }[];
+}) {
+  return (
+    <div className="flex flex-col w-full gap-6">
+      {competencies.map((c, idx) => (
+        <Accordion
+          type="single"
+          collapsible
+          className="w-full rounded-[8px]"
+          key={c.skill}
+        >
+          <AccordionItem value={c.skill}>
+            <AccordionTrigger className="focus:cursor-pointer p-0">
+              <div className="flex flex-row items-start gap-4">
+                <div className="flex flex-col gap-2.5">
+                  <h2 className="text-[16px] font-bold leading-6">{c.skill}</h2>
+                </div>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="flex flex-col gap-4 text-balance mt-4">
+              <div className="flex flex-col w-full gap-4">
+                {c.resources.map((c, idx) => (
+                  <p
+                    className="text-[#637381] text-[14px] leading-5"
+                    key={`${c}-${idx}`}
+                  >
+                    {c}
+                  </p>
+                ))}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      ))}
+    </div>
+  );
+}
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const [roadmaps, setRoadmaps] = useState<RoadmapsRoot | null>();
+  useEffect(() => {
+    const data = localStorage.getItem("roadmap");
+    if (data) setRoadmaps(JSON.parse(data));
+  }, []);
+  return (
+    <div className="flex flex-row">
+      <header>
+        <nav className="w-full bg-white text-black items-center nav-shadow fixed z-10">
+          <div className="flex flex-row justify-between">
+            <div className="flex items-center">
+              <img
+                src="/logo.svg"
+                alt="ByteRiot Logo"
+                width={200}
+                height={50}
+                className=""
+              />
+            </div>
+            <div className="flex flex-row gap-4 items-center space-x-4">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 21.759C13.1 21.759 14 20.859 14 19.759H10C10 20.859 10.9 21.759 12 21.759ZM18 15.759V10.759C18 7.68903 16.37 5.11903 13.5 4.43903V3.75903C13.5 2.92903 12.83 2.25903 12 2.25903C11.17 2.25903 10.5 2.92903 10.5 3.75903V4.43903C7.64 5.11903 6 7.67903 6 10.759V15.759L4 17.759V18.759H20V17.759L18 15.759ZM16 16.759H8V10.759C8 8.27903 9.51 6.25903 12 6.25903C14.49 6.25903 16 8.27903 16 10.759V16.759Z"
+                  fill="#01A3FF"
+                />
+              </svg>
+              <img src="/avatar.png" width={50} height={50} />
+            </div>
+          </div>
+        </nav>
+      </header>
+      <main className="pt-[75px] flex flex-row max-h-screen overflow-scroll w-full">
+        <div className="flex flex-col items-center justify-start w-[360px] px-8 gap-6 overflow-scroll border-r-1 border-r-[#DFE3E8]">
+          <h1 className="leading-8 font-bold text-[24px] py-6 text-[#01A3FF]">
+            Course Content
+          </h1>
+          <div className="border-1 w-full"></div>
+          <CourseContentAccordion
+            competencies={roadmaps?.roadmaps.roadmap_1.competencies ?? []}
+          />
+        </div>
+        {children}
+      </main>
+    </div>
+  );
+}

src/app/learning/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { RoadmapsRoot } from "../onboarding/learningPath";
+import Button from "@/components/button";
+
+function Breadcrumbs({ path }: { path: string }) {
+  const crumbs = path.split("/");
+  return (
+    <>
+      {crumbs.map((c) => (
+        <div key={c} className="flex flex-row items-center gap-2">
+          <div className="text-[14px] items-center justify-center w-fit h-fit">
+            {c}
+          </div>
+          <div>/</div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export default function Learning({}) {
+  const [roadmaps, setRoadmaps] = useState<RoadmapsRoot | null>();
+  useEffect(() => {
+    const data = localStorage.getItem("roadmap");
+    if (data) setRoadmaps(JSON.parse(data));
+  }, []);
+
+  return (
+    <div className="flex flex-col h-full overflow-scroll px-8 gap-6 pb-2 bg-[#FAFAFA] w-full flex-1">
+      <div className="py-8 gap-2 flex flex-row items-center">
+        <Breadcrumbs path="Dashboard/Stage1/Course1" />
+      </div>
+      <div className="flex flex-col bg-white border-1 border-[#DFE3E8] gap-4 p-6 rounded-[8px]">
+        <h2 className="leading-6 text-[16px] font-bold">Your Progress</h2>
+        <div className="flex flex-row gap-4 items-center">
+          <div className="flex flex-row gap-3 items-center">
+            <img src={"/duration.svg"} width={24} height={24} />
+            <p className="text-[14px] leading-5 text-[#637381]">
+              Duration: 48 weeks
+            </p>
+          </div>
+          <div className="flex flex-row gap-3 items-center">
+            <img src={"/video.svg"} width={24} height={24} />
+            <p className="text-[14px] leading-5 text-[#637381]">
+              12 Learning video
+            </p>
+          </div>
+          <div className="flex flex-row gap-3 items-center">
+            <img src={"/description.svg"} width={24} height={24} />
+            <p className="text-[14px] leading-5 text-[#637381]">8 courses</p>
+          </div>
+          <div className="flex flex-row gap-3 items-center">
+            <img src={"/book.svg"} width={24} height={24} />
+            <p className="text-[14px] leading-5 text-[#637381]">5 books</p>
+          </div>
+        </div>
+      </div>
+      <div className="w-full h-fit">
+        <iframe
+          className="min-h-[512px]"
+          width="100%"
+          height="100%"
+          src="https://www.youtube.com/embed/XU5pw3QRYjQ?si=oJdWTisd-04KyDAC"
+          title="YouTube video player"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+        ></iframe>
+      </div>
+      <div className="flex flex-col border-1 border-[#DFE3E8] gap-4 p-6 rounded-[8px]">
+        <div className="flex flex-row items-center">
+          <div className="flex w-fit px-3">
+            <p className="font-bold h-full items-center justify-center border-b-1 py-3 border-b-[#01A3FF] w-fit">
+              My Notes
+            </p>
+          </div>
+          <div className="flex w-fit px-3">
+            <p className="h-full items-center justify-center w-fit text-[#637381]">
+              Resources & Downloads
+            </p>
+          </div>
+        </div>
+
+        <div className="w-full border-1"></div>
+
+        <div className="flex flex-col gap-2.5">
+          <h2 className="leading-6 text-[16px] font-bold">Important Notes</h2>
+          <textarea
+            className="w-full min-h-[100px] bg-white border-1 border-[#DFE3E8] rounded-[8px] p-2 text-[14px]"
+            placeholder="Write down your notes here"
+          />
+          <Button
+            label="Save Notes"
+            className="w-fit self-end"
+            onClick={() => {}}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/onboarding/layout.tsx

@@ -0,0 +1,46 @@
+export default function OnboardingLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="font-sans flex flex-col min-h-screen">
+      <header>
+        <nav className="w-full bg-white text-black items-center nav-shadow fixed z-10">
+          <div className="flex flex-row justify-between">
+            <div className="flex items-center">
+              <img
+                src="/logo.svg"
+                alt="ByteRiot Logo"
+                width={200}
+                height={50}
+                className=""
+              />
+            </div>
+            <div className="flex flex-row gap-4 items-center space-x-4">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 21.759C13.1 21.759 14 20.859 14 19.759H10C10 20.859 10.9 21.759 12 21.759ZM18 15.759V10.759C18 7.68903 16.37 5.11903 13.5 4.43903V3.75903C13.5 2.92903 12.83 2.25903 12 2.25903C11.17 2.25903 10.5 2.92903 10.5 3.75903V4.43903C7.64 5.11903 6 7.67903 6 10.759V15.759L4 17.759V18.759H20V17.759L18 15.759ZM16 16.759H8V10.759C8 8.27903 9.51 6.25903 12 6.25903C14.49 6.25903 16 8.27903 16 10.759V16.759Z"
+                  fill="#01A3FF"
+                />
+              </svg>
+              <img src="/avatar.png" width={50} height={50} />
+            </div>
+          </div>
+        </nav>
+      </header>
+      {children}
+      <footer className="w-full bg-white text-black items-center nav-shadow">
+        <div className="flex flex-row justify-between p-4">
+          <span className="text-sm">© 2025 ByteRiot</span>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/app/onboarding/learningPath.tsx

@@ -0,0 +1,206 @@
+import { useState } from "react";
+import Loading from "./loading";
+import Button from "@/components/button";
+import { ResumeData } from "./upload";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export interface RoadmapsRoot {
+  roadmaps: Roadmaps;
+}
+
+export interface Roadmaps {
+  roadmap_1: Roadmap1;
+  roadmap_2: Roadmap2;
+  roadmap_3: Roadmap3;
+}
+
+export interface Roadmap1 {
+  competencies: Competency[];
+  insight: string;
+}
+
+export interface Competency {
+  skill: string;
+  description: string;
+  resources: string[];
+}
+
+export interface Roadmap2 {
+  competencies: Competency2[];
+  insight: string;
+}
+
+export interface Competency2 {
+  skill: string;
+  description: string;
+  resources: string[];
+}
+
+export interface Roadmap3 {
+  competencies: Competency3[];
+  insight: string;
+}
+
+export interface Competency3 {
+  skill: string;
+  description: string;
+  resources: string[];
+}
+
+function LearningAccordion({
+  competencies,
+}: {
+  competencies: { skill: string; description: string; resources: string[] }[];
+}) {
+  return (
+    <div className="flex flex-col w-full gap-6">
+      {competencies.map((c, idx) => (
+        <Accordion
+          type="single"
+          collapsible
+          className="w-full border-1 border-[#DFE3E8] rounded-[8px] p-6"
+          key={c.skill}
+        >
+          <AccordionItem value={c.skill}>
+            <AccordionTrigger className="focus:cursor-pointer p-0">
+              <div className="flex flex-row items-start gap-4">
+                <div className="flex w-[40px] p-2 gap-2-5 items-center justify-center rounded-3xl bg-[#D5EBFF]">
+                  <p className="leading-6 font-bold text-[16px] text-[#01A3FF]">
+                    {idx + 1}
+                  </p>
+                </div>
+                <div className="flex flex-col gap-2.5">
+                  <h2 className="text-[16px] font-bold leading-6">{c.skill}</h2>
+                  <p className="text-[#637381] text-[14px] leading-5">
+                    {c.description}
+                  </p>
+                </div>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="flex flex-col gap-4 text-balance">
+              <div className="w-full border-1 my-4"></div>
+              <div className="flex flex-col w-full gap-4">
+                <h2 className="text-[16px] leading-6 font-bold">
+                  Key Topics & Resources:
+                </h2>
+                {c.resources.map((c, idx) => (
+                  <p
+                    className="text-[#637381] text-[14px] leading-5"
+                    key={`${c}-${idx}`}
+                  >
+                    {c}
+                  </p>
+                ))}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      ))}
+    </div>
+  );
+}
+
+export default function LearningPath({
+  onNext,
+  userProfile,
+}: {
+  onNext: () => void;
+  userProfile: ResumeData | null;
+}) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [resumeData, setResumeData] = useState<null>(null);
+  const [progress, setProgress] = useState<number>(0);
+  const [textValue, setTextValue] = useState("");
+  const [roadmap, setRoadmap] = useState<RoadmapsRoot>();
+
+  if (isLoading)
+    return (
+      <Loading
+        title="Our AI is making a secret magic formula"
+        desc="Crafting the best learning path for your career..."
+        progress={progress}
+        imgSrc="/loading2.png"
+      />
+    );
+
+  const onContinue = async () => {
+    setIsLoading(true);
+    try {
+      const body = {
+        user_profile: userProfile,
+        user_target: textValue,
+      };
+      setProgress(10);
+      const response = await fetch("http://localhost:8000/roadmaps", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+      });
+
+      if (!response.body) return;
+
+      console.log(response.body);
+      setProgress(70);
+      const roadmaps = await response.json();
+      setRoadmap(roadmaps);
+      localStorage.setItem("roadmap", JSON.stringify(roadmaps));
+      setProgress(80);
+    } catch (error) {
+      console.error("Processing error:", error);
+    }
+    setIsLoading(false);
+    setProgress(100);
+  };
+
+  if (roadmap)
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 p-6 w-[720px]">
+        <div className="flex">
+          <h1 className="text-2xl font-bold leading-8">
+            Recommended Learning Path
+          </h1>
+        </div>
+        <div className="p-6 gap-2.5 flex flex-col items-start bg-[#EAF5FF] border-l-4 border-l-[#01A3FF]">
+          <h2 className="text-[16px] leading-5 font-bold">Why this path?</h2>
+          <p className="text-[16px] leading-5">
+            {roadmap.roadmaps.roadmap_1.insight}
+          </p>
+        </div>
+        <LearningAccordion
+          competencies={roadmap.roadmaps.roadmap_1.competencies}
+        />
+        <a href="/learning">
+          <Button
+            label="Start Learning"
+            onClick={onNext}
+            className="self-end"
+          />
+        </a>
+      </div>
+    );
+
+  return (
+    <div className="flex flex-col gap-2.5 items-center justify-center">
+      <div className="flex flex-col justify-center items-center p-6 gap-2.5">
+        <h1 className="text-2xl font-bold leading-8">
+          Describe your target or goals:
+        </h1>
+        <p className="text-[18px] leading-[28px]">
+          Write down your specific goals or career target for the future.
+        </p>
+      </div>
+      <textarea
+        onChange={(e) => setTextValue(e.target.value)}
+        className="p-6 w-[720px] h-[158px] border-1 rounded-[8px] border-[#DFE3E8] focus:outline-[1px] focus:outline-[#DFE3E8]"
+      ></textarea>
+      <Button label="Continue" onClick={onContinue} className="self-end" />
+    </div>
+  );
+}

src/app/onboarding/loading.tsx

@@ -0,0 +1,38 @@
+import Image from "next/image";
+
+type LoadingProps = {
+  title: string;
+  desc: string;
+  imgSrc: string;
+  progress: number;
+};
+
+const LoadingBar = ({ progress }: { progress: number }) => {
+  // Ensure the progress value is between 0 and 100
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+
+  return (
+    <div className="flex flex-row w-full items-center gap-2">
+      <div className="w-full bg-[#E6F6FF] rounded-sm h-1 overflow-hidden">
+        <div
+          className="h-full bg-[#01A3FF] rounded-sm transition-[width] ease-in-out duration-300"
+          style={{ width: `${clampedProgress}%` }}
+        ></div>
+      </div>
+      <p>{clampedProgress}%</p>
+    </div>
+  );
+};
+
+export default function Loading(props: LoadingProps) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2.5 w-full">
+      <h1 className="py-6 text-[32px]">{props.title}</h1>
+      <Image alt="Loading Image" src={props.imgSrc} width={360} height={360} />
+      <div className="flex flex-col lg:w-[70%] w-[90%] gap-2.5 items-center justify-center">
+        <p className="font-normal text-[14px] text-[#637381]">{props.desc}</p>
+        <LoadingBar progress={props.progress} />
+      </div>
+    </div>
+  );
+}

src/app/onboarding/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useState } from "react";
+import Page1 from "./page1";
+import UploadCV, { ResumeData } from "./upload";
+import LearningPath from "./learningPath";
+
+export default function Onboarding() {
+  const [step, setStep] = useState(1);
+  const [resumeData, setResumeData] = useState<ResumeData | null>(null);
+
+  return (
+    <main className="flex flex-col items-center justify-center pt-[75px] text-black min-h-screen">
+      {step === 1 && <Page1 onChoose={() => setStep(2)} />}
+      {step === 2 && <UploadCV onNext={() => setStep(3)} resumeData={resumeData} setResumeData={setResumeData} />}
+      {step === 3 && <LearningPath onNext={() => {}} userProfile={resumeData} />}
+    </main>
+  );
+}

src/app/onboarding/page1.tsx

@@ -0,0 +1,80 @@
+import Button from "@/components/button";
+
+type Props = {
+    onChoose?: () => void;
+};
+
+export default function Page1({onChoose}: Props) {
+  const cards = [
+    {
+      title: "Upload CV",
+      description:
+        "The fastest option if you have an up-to-date CV. Let our AI analyze it automatically.",
+      imageUrl: "/doc.svg",
+    },
+    {
+      title: "Use a Text Prompt",
+      description:
+        "Describe your goals and background in your own words. Ideal if you know exactly what you want.",
+      imageUrl: "/paragraph.svg",
+    },
+    {
+      title: "Take a Guided Questionnaire",
+      description:
+        "Not sure where to begin? We'll guide you with a few short questions.",
+      imageUrl: "/chat.svg",
+    },
+  ];
+
+  return (
+    <>
+      <div className="mb-8">
+        <img src="/robot-1.png" alt="Logo" className="max-w-full h-auto" />
+      </div>
+      <div className="font-sans flex flex-col gap-2.5 items-center justify-center">
+        <h1 className="text-[32px]">How would you like to start?</h1>
+        <p>
+          Our AI needs to understand you to create the best recommendation.
+          Choose the method that's most convenient for you.
+        </p>
+      </div>
+      <div className="grid grid-cols-3 gap-8 mt-8">
+        {cards.map((card) => (
+          <Card key={card.title} {...card} classname="max-w-[360px]" onChoose={onChoose} />
+        ))}
+      </div>
+    </>
+  );
+}
+
+type CardProps = {
+  title: string;
+  description: string;
+  imageUrl: string;
+  classname?: string;
+  onChoose?: () => void;
+};
+
+function Card({ title, description, imageUrl, classname, onChoose = () => {} }: CardProps) {
+  return (
+    <div
+      className={`flex flex-col items-center justify-between p-4 border-1 rounded-[8px] border-[#DFE3E8] ${classname}`}
+    >
+      <div className="flex flex-col items-center justify-center gap-3">
+        <div className="flex items-center w-full justify-center px-8 py-4 rounded-[8px] border-1 border-[#DFE3E8] bg-[#EAF5FF]">
+          <img src={imageUrl} alt={title} className="w-[82px] h-[82px]" />
+        </div>
+        <div className="flex flex-col items-start text-left gap-4">
+          <h1 className="text-[16px] font-semibold">{title}</h1>
+          <p className="text-[14px] text-gray-600 text-justify">
+            {description}
+          </p>
+        </div>
+      </div>
+      <div className="flex items-center w-full self-end">
+        <Button onClick={() => onChoose()} label="Choose" buttonType="primary">
+        </Button>
+      </div>
+    </div>
+  );
+}

src/app/onboarding/upload.tsx

@@ -0,0 +1,316 @@
+"use client";
+import Button from "@/components/button";
+import {
+  Dropzone,
+  DropZoneArea,
+  DropzoneDescription,
+  DropzoneFileList,
+  DropzoneFileListItem,
+  DropzoneMessage,
+  DropzoneRemoveFile,
+  DropzoneTrigger,
+  useDropzone,
+  UseDropzoneReturn,
+} from "@/components/ui/dropzone";
+import { CloudUploadIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import Loading from "./loading";
+
+export interface ResumeData {
+  personal_info: PersonalInfo;
+  summary: string;
+  yoe: number;
+  work_experience: WorkExperience[];
+  education: Education[];
+  skills: Skills;
+  projects: Project[];
+  certifications: Certification[];
+  languages: Language[];
+  awards_honors: AwardsHonor[];
+  publications: any[];
+  interests: any[];
+  character_traits_keywords: string[];
+}
+
+interface WorkExperience {
+  company_name: string;
+  job_title: string;
+}
+
+export interface PersonalInfo {
+  full_name: string;
+  email: string;
+  phone: string;
+  linkedin_profile: string;
+  portfolio_url: string;
+  address: Address;
+}
+
+export interface Address {
+  street: any;
+  city: any;
+  state: any;
+  zip_code: any;
+  country: any;
+}
+
+export interface Education {
+  degree: string;
+  major: string;
+  institution: string;
+  location: string;
+  start_date: string;
+  end_date: string;
+  gpa: string;
+}
+
+export interface Skills {
+  technical_skills: string[];
+  soft_skills: string[];
+  tools_technologies: any[];
+}
+
+export interface Project {
+  project_name: string;
+  description: string;
+  technologies_used: string[];
+  project_url: any;
+  start_date?: string;
+  end_date?: string;
+}
+
+export interface Certification {
+  name: string;
+  issuing_organization: string;
+  issue_date: string;
+  expiration_date: any;
+}
+
+export interface Language {
+  language: string;
+  proficiency: string;
+}
+
+export interface AwardsHonor {
+  name: string;
+  issuing_organization: string;
+  date: string;
+}
+
+export function CVDropzone({
+  dropzone,
+}: {
+  dropzone: UseDropzoneReturn<string, string>;
+}) {
+  return (
+    <div className="not-prose flex flex-col gap-4">
+      <Dropzone {...dropzone}>
+        <div>
+          <div className="flex justify-between min-h-0">
+            <DropzoneMessage />
+          </div>
+          <DropZoneArea className="min-h-[300px] border-1 border-dashed border-[#57ADFF] rounded-[8px] bg-[#EAF5FF] hover:bg-[#EAF5FF] h-full">
+            <DropzoneTrigger className="flex flex-col items-center gap-4 bg-transparent p-10 text-center text-sm h-full hover:bg-[#EAF5FF]">
+              <CloudUploadIcon className="size-8" />
+              <div>
+                <p className="text-[16px] font-bold leading-6">
+                  Drag & drop files or click to browse
+                </p>
+                <p className="text-sm text-[#676767] font-normal">
+                  Click here or drag and drop to upload
+                </p>
+              </div>
+            </DropzoneTrigger>
+          </DropZoneArea>
+        </div>
+
+        <DropzoneFileList className="grid gap-3 p-0 grid-cols-1 w-full">
+          {dropzone.fileStatuses.map((file) => (
+            <DropzoneFileListItem
+              className="overflow-hidden rounded-md bg-secondary p-0 shadow-sm w-full"
+              key={file.id}
+              file={file}
+            >
+              {file.status === "pending" ? (
+                <div className="flex items-center w-full justify-between p-2 pl-4 animate-pulse" />
+              ) : (
+                <div className="flex items-center w-full justify-between p-2 pl-4">
+                  <div className="min-w-0">
+                    <p className="truncate text-sm">{file.fileName}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {(file.file.size / (1024 * 1024)).toFixed(2)} MB
+                    </p>
+                  </div>
+                  <DropzoneRemoveFile
+                    variant="destructive"
+                    className="shrink-0 hover:outline"
+                  >
+                    <Trash2Icon className="size-4" />
+                  </DropzoneRemoveFile>
+                </div>
+              )}
+            </DropzoneFileListItem>
+          ))}
+        </DropzoneFileList>
+      </Dropzone>
+    </div>
+  );
+}
+
+export default function UploadCV({
+  onNext,
+  resumeData,
+  setResumeData
+}: {
+  onNext: () => void;
+  resumeData: ResumeData | null;
+  setResumeData: React.Dispatch<React.SetStateAction<ResumeData | null>>;
+}) {
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
+
+  const dropzone = useDropzone({
+    onDropFile: async (file: File) => {
+      await new Promise((resolve) => setTimeout(resolve, 700));
+      return {
+        status: "success",
+        result: URL.createObjectURL(file),
+      };
+    },
+    validation: {
+      accept: {
+        "application/*": [".pdf", ".docx", ".txt"],
+      },
+      maxSize: 5 * 1024 * 1024,
+      maxFiles: 1,
+    },
+  });
+
+  const extractJsonFromString = (text: string) => {
+    const match = text.match(/```json\s*([\s\S]*?)\s*```/);
+    // The captured group (in parentheses) is the JSON content itself
+    return match ? match[1] : null;
+  };
+
+  const uploadFile = async () => {
+    setIsUploading(true);
+    let fullResponse = "";
+    for (let i = 0; i < 5; i++) {
+      console.log(`try number ${i}`);
+      try {
+        const response = await fetch("http://localhost:8000/autograder", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/octet-stream",
+          },
+          body: dropzone.fileStatuses[0].file,
+        });
+
+        setProgress(10);
+
+        if (!response.body) return;
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder("utf-8");
+
+        setProgress(70);
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+          fullResponse += chunk;
+        }
+
+        // The crucial step: parse the extracted JSON string
+        let resumeData = JSON.parse(extractJsonFromString(fullResponse) || "");
+        console.log(resumeData);
+        setResumeData(resumeData);
+        setProgress(80);
+        break;
+      } catch (error) {
+        console.log(extractJsonFromString(fullResponse));
+        console.error("Processing error:", error);
+        continue;
+      }
+    }
+    setIsUploading(false);
+    setProgress(100);
+  };
+
+  if (resumeData) {
+    return (
+      <div className="flex flex-col p-6">
+        <h1 className="text-2xl font-bold py-6 my-2.5 leading-8">
+          Does this look right? We found these key points in your CV:
+        </h1>
+        <div className="grid grid-cols-[120px_500px] grid-rows-[auto_auto_auto_auto_auto] p-6 rounded-[8px] gap-2.5 text-[14px] leading-[20px] border-1 border-[#DFE3E8]">
+          <p className="font-bold">Name:</p>
+          <p>{resumeData?.personal_info.full_name}</p>
+          <p className="font-bold">Last Position:</p>
+          <p>
+            {resumeData?.work_experience.length === 0
+              ? "Fresh Graduate"
+              : `${resumeData?.work_experience[0].job_title}, ${resumeData?.work_experience[0].company_name}`}
+          </p>
+          <p className="font-bold">Years of Experience:</p>
+          <p>
+            {resumeData.yoe}
+          </p>
+          <p className="font-bold">Key Skills:</p>
+          <div className="flex flex-row flex-wrap gap-2">
+            {resumeData?.skills.technical_skills.map(skill => (
+              <p key={skill} className="bg-[#7765e3] rounded-[8px] p-1 text-white leading-5 font-medium">
+                {skill}
+              </p>
+            ))}
+            {resumeData?.skills.soft_skills.map(skill => (
+              <p key={skill} className="bg-[#dcbba9] rounded-[8px] p-1 text-white leading-5 font-medium">
+                {skill}
+              </p>
+            ))}
+          </div>
+          <p className="font-bold">Education:</p>
+          <p>
+            {resumeData?.education.length === 0
+              ? ""
+              : resumeData?.education[0].degree}
+          </p>
+        </div>
+        <div className="flex flex-row w-full justify-end gap-2 items-center">
+          <Button label="Edit" buttonType="secondary" onClick={() => {}} />
+          <Button label="Yes, continue" buttonType="primary" onClick={onNext} />
+        </div>
+      </div>
+    );
+  }
+
+  if (isUploading)
+    return (
+      <Loading
+        title="Our AI is analyzing your CV"
+        desc="Extracting your profile..."
+        progress={progress}
+        imgSrc="/loading1.png"
+      />
+    );
+
+  return (
+    <div className="flex flex-col items-center justify-center w-full">
+      <img src="/logo.svg" alt="SkillSync logo" width={268} height={67} />
+      <h1 className="text-2xl font-bold py-6 my-2.5 leading-8">
+        Drag & drop your CV here, or click to browse files.
+      </h1>
+      <div className="flex flex-col gap-2.5 p-6 border-1 rounded-[8px] border-[#DFE3E8] w-full max-w-[445px] items-center justify-center">
+        <h1 className="text-[22px] font-bold leading-8">Upload</h1>
+        <CVDropzone dropzone={dropzone} />
+        <Button
+          className="w-full"
+          label="Upload File"
+          buttonType="primary"
+          onClick={uploadFile}
+        ></Button>
+      </div>
+    </div>
+  );
+}