Folder Structure

This document provides a guided tour of the codebase to help you find your way around.

import { File, Folder, Files } from 'fumadocs-ui/components/files';

Top-Level Directories

This is where the magic happens. Here's a breakdown of the key folders:

This folder follows the Next.js App Router convention.

page.tsx: The Homepage. Contains the UI for creating or joining a room.
layout.tsx: The main wrapper for the app. It holds the <body> tag and global styles.
globals.css: Tailwind CSS imports and global styles.
api/[[...slugs]]/route.ts: The ONLY API route in the project. It acts as a gateway to the Elysia server.
room/[roomId]/page.tsx: The Chat Room page. This is a dynamic route where roomId is the unique ID of the chat room.

Contains reusable React components.

providers.tsx: Wraps the application with necessary context providers (like React Query) to manage state.

Utilities and helper functions.

redis.ts: Configures the connection to Upstash Redis database.
realtime.ts: structured schemas and setup for Upstash Realtime (Pub/Sub).
client.ts: The "Eden" client configuration. It gives the frontend type-safe access to the backend API.
proxy.ts: (Likely helpers for proxying requests if used, or internal logic).

Custom React hooks.

(File list depends on project state, typically contains hooks for chat logic or fetching data).

If you want to change...	Look in...
The Homepage UI	`src/app/page.tsx`
The Chat Interface	`src/app/room/[roomId]/page.tsx`
Backend API Logic	`src/app/api/[[...slugs]]/route.ts`
Database/Message Models	`src/app/api/[[...slugs]]/route.ts` (Inline models) or `src/lib/realtime.ts`
Styling	`src/app/globals.css` or Tailwind classes in component files