Components structure in deerflow codebase - Part 1.1

#opensource #bytedance #codebase #architecture

Inspired by BulletProof React, I applied its codebase architecture concepts to the bytedance/deerflow.

This article focuses only on the components structure in bytedance/deerflow codebase.

Prerequisite

Components structure in Deerflow codebase — Part 1.1

Approach

The approach we take is simple:

Pick a route.
Locate this route in DeerFlow codebase.
Review how the components are imported and organized.
We repeat this process for 3–4 pages to establish a common pattern, see if there’s any exceptions.

In this part 1.1, we review the components structure in the DeerFlow’s demo workspace feature. When you visit https://deerflow.tech/ and open any case study, you will be taken to this route — https://deerflow.tech/workspace/chats/4f3e55ee-f853-43db-bfb3-7d1a411f03cb

I got curious about how the components behind this feature are organized and I looked at it’s source code.

We will look at components structure in:

ChatsPage

ChatsPage shows a list of chats.

In ChatsPage, I noticed the following components that make up this page.

import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  WorkspaceBody,
  WorkspaceContainer,
  WorkspaceHeader,
} from "@/components/workspace/workspace-container";

That’s it. Nothing complicated hereui folder contains the standards Shadcn/ui related components. workspace folder has workspace related components.

WorkspacePage

WorkspacePage is defined as shown below:

import fs from "fs";
import path from "path";

import { redirect } from "next/navigation";

import { env } from "@/env";

export default function WorkspacePage() {
  if (env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true") {
    const firstThread = fs
      .readdirSync(path.resolve(process.cwd(), "public/demo/threads"), {
        withFileTypes: true,
      })
      .find((thread) => thread.isDirectory() && !thread.name.startsWith("."));
    if (firstThread) {
      return redirect(`/workspace/chats/${firstThread.name}`);
    }
  }
  return redirect("/workspace/chats/new");
}

There is no specific page to list workspaces but the logic above tells me you are redirected to the first thread or /new route depending on the flag, NEXT_PUBLIC_STATIC_WEBSITE_ONLY

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

DEV Community