Customization

Theme Customization

Colors

Edit oklch color tokens in app/globals.css:

:root {
  --primary: oklch(0.65 0.18 250);    /* Change hue for brand color */
  --secondary: oklch(0.68 0.12 180);  /* Complementary accent */
}

Fonts

Swap fonts in app/layout.tsx:

import { Poppins } from "next/font/google"

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-poppins"
})

Update the CSS variable references in globals.css to match.

Border Radius

Adjust --radius in globals.css for sharper or rounder corners:

:root {
  --radius: 0.5rem;   /* Rounder */
  --radius: 0.25rem;  /* Sharper */
}

Adding a New Course Feature

1. Update the Schema

Add a column to the courses table:

ALTER TABLE courses ADD COLUMN difficulty_rating integer DEFAULT 0;

2. Create a Server Action

Add to lib/actions/courses.ts:

export async function updateDifficultyRating(courseId: string, rating: number) {
  const admin = createAdminClient()
  const { data, error } = await admin
    .from("courses")
    .update({ difficulty_rating: rating })
    .eq("id", courseId)
    .select()
    .single()

  if (error) return { error: error.message, data: null }
  revalidatePath(`/courses/${courseId}`)
  return { error: null, data }
}

3. Update the Mapper

Add to the mapper function in lib/queries.ts:

difficultyRating: (row.difficulty_rating as number) ?? 0,

4. Wire to the UI

Use the action in a client component:

import { updateDifficultyRating } from "@/lib/actions/courses"

<Button onClick={() => updateDifficultyRating(courseId, 5)}>
  Rate Difficulty
</Button>

Extending the Schema

When adding new tables:

1. Create a migration file in supabase/migrations/
2. Add RLS policies for the new table
3. Create Server Actions in a new or existing action file
4. Add mapper functions in lib/queries.ts
5. Wire to page components

Modifying Navigation

Student Portal

Edit the studentNavItems array in data/seed.ts or the layout file at app/(student)/layout.tsx.

Instructor Portal

Edit app/(instructor)/layout.tsx sidebar navigation.

Admin Portal

Edit app/(admin)/layout.tsx sidebar navigation.

Adding a New Portal Page

1. Create app/(student)/new-page/page.tsx (server component)
2. Create a client component if interactivity is needed
3. Fetch data via Server Actions in the server component
4. Pass data as props to the client component
5. Add the route to the sidebar navigation