Architecture

web/src/
├── App.tsx                 # Root component with routing
├── main.tsx               # Application entry point
├── components/
│   ├── layout/           # Header, Sidebar
│   ├── video/            # Video player and related components
│   ├── comments/         # Comment section and components
│   ├── ui/              # Reusable UI components (Avatar, Dialog)
│   └── icons/           # Icon components
├── pages/
│   ├── channel/         # Main channel page
│   ├── shorts/          # Shorts feed page
│   └── playlist/        # Playlist viewer page
├── hooks/               # Custom React hooks
├── contexts/            # React Context providers
│   ├── ThemeContext    # Dark/light mode
│   ├── DataContext     # Video data management
│   └── CaptchaContext  # reCAPTCHA integration
└── utils/              # Utility functions

<Routes>
  <Route path="/" element={<ChannelPage />} />
  <Route path="/watch/:videoId" element={<VideoPage />} />
  <Route path="/shorts" element={<ShortsPage />} />
  <Route path="/playlist/:playlistId/:videoId" element={<PlaylistVideoPage />} />
  <Route path="*" element={<NotFoundPage />} />
</Routes>

<StrictMode>
  <HelmetProvider>              {/* SEO/meta tags */}
    <PostHogProvider>           {/* Analytics */}
      <QueryClientProvider>     {/* Server state */}
        <CaptchaProvider>       {/* reCAPTCHA */}
          <DataProvider>        {/* Video data */}
            <ThemeProvider>     {/* Theme switching */}
              <BrowserRouter>   {/* Routing */}
                <App />
              </BrowserRouter>
            </ThemeProvider>
          </DataProvider>
        </CaptchaProvider>
      </QueryClientProvider>
    </PostHogProvider>
  </HelmetProvider>
</StrictMode>

server/src/
├── index.ts              # Main server entry point
├── logger.ts             # Pino logger configuration
├── db/
│   ├── index.ts         # Database connection
│   ├── schema.ts        # Drizzle schema definitions
│   └── seed.ts          # Database seeding script
├── routes/
│   ├── users.ts         # User endpoints
│   ├── videos.ts        # Video endpoints
│   ├── comments.ts      # Comment endpoints
│   └── videoLikes.ts    # Video like endpoints
└── scripts/
    └── query.ts         # Database query utilities

// 1. Logging middleware
app.use("*", honoLogger());

// 2. CORS middleware
app.use("*", cors());

// 3. Rate limiting (API routes only)
app.use("/api/*", rateLimiter({
  windowMs: 60 * 1000,     // 1 minute window
  limit: 50,               // 50 requests per window
  keyGenerator: (c) => c.req.header("x-forwarded-for") ?? "",
}));

// Example: Fetch all videos sorted by views
const allVideos = await db
  .select()
  .from(videos)
  .orderBy(desc(videos.views));

export default defineConfig({
  schema: "./src/db/schema.ts",
  out: "./drizzle",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.DATABASE_URL || 
         "postgres://jtube:jtube@localhost:5432/jtube",
  },
});

app.onError((err, c) => {
  logger.error({ err }, "unhandled error");
  return c.json({ error: "Internal server error" }, 500);
});