Example site, Dreamwod.app migrated to next.js and shadcn-ui

[eripe970]

Site: https://console.dreamwod.app/

Had an old React site that is now migrated to Next.js and shadcn-ui. Could maybe be design inspiration for others that are building similar things. May be open sourced later on.

Some highlights:

Step based onboarding flow:

Whiteboard/calendar view both in week and monthly overview

Sidebar + forms

Different table styles

Dialog with styles

Upload of images

Google map integration

[koohz]

Great work!. I'm curious to know how you managed not to make the dropdown user menu flash on every page load in the meantime it gets the data from the db.

[eripe970]

Thanks! I think that works out of the box with the next.js layout logic. So if you just add those parts to the layout.tsx file then it should work. For me the file looks like:

function Page({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {

  return (
    <>
      <DialogsProvider />
      <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
          <... menus etc...>
          </header>
          <div className="flex flex-1 flex-col gap-4 p-4 pt-0">{children}</div>
        </SidebarInset>
      </SidebarProvider>
    </>
  );
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
        <Page>{children}</Page>
  );
}