frontend

Frontend Rules

Follow these rules when working on the frontend.

It uses Next.js, Tailwind, Shadcn, and Framer Motion.

General Rules

• Use lucide-react for icons
• useSidebar must be used within a SidebarProvider

Components

• Use divs instead of other html tags unless otherwise specified
• Separate the main parts of a component's html with an extra blank line for visual spacing
• Always tag a component with either use server or use client at the top, including layouts and pages

Organization

• All components be named using kebab case like example-component.tsx unless otherwise specified
• Put components in /_components in the route if one-off components
• Put components in /components from the root if shared components

Data Fetching

• Fetch data in server components and pass the data down as props to client components.
• Use server actions from /actions to mutate data.

Server Components

• Use "use server" at the top of the file.
• Implement Suspense for asynchronous data fetching to show loading states while data is being fetched.
• If no asynchronous logic is required for a given server component, you do not need to wrap the component in <Suspense>. You can simply return the final UI directly since there is no async boundary needed.
• If asynchronous fetching is required, you can use a <Suspense> boundary and a fallback to indicate a loading state while data is loading.
• Server components cannot be imported into client components. If you want to use a server component in a client component, you must pass the as props using the "children" prop
• params in server pages should be awaited such as const { courseId } = await params where the type is params: Promise<{ courseId: string }>

Example of a server layout:

"use server"

export default async function ExampleServerLayout({
  children
}: {
  children: React.ReactNode
}) {
  return children
}

Example of a server page (with async logic):

"use server"

import { Suspense } from "react"
import { SomeAction } from "@/actions/some-actions"
import SomeComponent from "./_components/some-component"
import SomeSkeleton from "./_components/some-skeleton"

export default async function ExampleServerPage() {
  return (
    <Suspense fallback={<SomeSkeleton className="some-class" />}>
      <SomeComponentFetcher />
    </Suspense>
  )
}

async function SomeComponentFetcher() {
  const { data } = await SomeAction()
  return <SomeComponent className="some-class" initialData={data || []} />
}