plan.md

Plan

Detailed plans for accomplishing tasks.

Setup

• init project with shadcn
  • npx shadcn@latest init
  • see: shadcn doc
• add shadcn components which we're going to use
  • npx shadcn@latest add
    • and then select those components: alert, avatar, badge, button, card, collapsible, dialog, dropdown-menu, form, input, label, popover, select, separator, sheet, sidebar, skeleton, sonner, textarea
• install some dependencies we needed
  • npm i uuid date-fns nuqs @remixicon/react zustand @tanstack/react-query
• update app/layout.tsx
  • suppressHydrationWarning
  • update font
  • update Metadata
  • add providers
• add Toaster
• add dark mode feature
• custom theme with shadcnstudio
  • see: shadcn studio theme generator
• initialize application file structure
  • app/(routes)
    • app/(routes)/(dashboard)
      • app/(routes)/(dashboard)/billing
      • app/(routes)/(dashboard)/chat
      • app/(routes)/(dashboard)/home
      • app/(routes)/(dashboard)/settings
      • app/(routes)/(dashboard)/layout.tsx
    • app/(routes)/(web)
      • app/(routes)/(web)/layout.tsx
      • app/(routes)/(web)/page.tsx
        • move app/page.tsx into app/(routes)/(web)
    • app/(routes)/auth
      • app/(routes)/auth/layout.tsx
  • app/api
  • app/actions
• update app/(routes)/(dashboard)/layout.tsx
  • sidebar
  • NuqsAdapter
  • Suspense
• add Logo component

Database(Neon, Prisma ORM)

• set up Neon
• set up Prisma

Authentication(Better Auth)

• integrate Better Auth
  • see:
    • Better Auth Installation
    • Better Auth CLI
    • baseline your database
    • set config to use Prisma Migrate with Prisma Accelerate
• use session on the server side
  • see: basic usage
• add sign in/sign up pages
• add bearer and openAPI plugins
  • see:
    • Bearer Token Authentication
    • Open API
  • Use Bearer Tokens
    • see: How to Use Bearer Tokens
• add useAuthToken hook with zustand
  • see: Persisting a state

Dashboard UI

• sidebar
• main content

Hono Setup

• setup
  • npm install hono @hono/zod-validator
  • see: Zod Validator Middleware
• add middleware for Better Auth
• add the RPC feature
  • Server
  • Client
  • see: RPC

Note API & UI

• develop Note API
• add create/update note UI
• add recent notes UI

Chat API

• develop Chat API

Chat Interface

• develop Chat Input component