Senior Project Site

This is a Next.js project bootstrapped with create-next-app.

Tech Stack

• Framework: Next.js 15.5.3 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui
• React: 19.1.0
• Database: PostgreSQL (Neon) with Drizzle ORM
• Validation: Zod for runtime validation and type inference
• Authentication: JWT-based auth with httpOnly cookies

Project Setup

This project has been configured with:

Tailwind CSS

• Tailwind CSS v4 with PostCSS
• Provides pre-built CSS classes like flex, pt-4, text-center to style elements directly in HTML
• Tailwind Documentation

shadcn/ui

• Ready-to-use React components (buttons, forms, modals, etc.)
• Components you can copy and customize directly in your project
• Built for accessibility and customization
• shadcn/ui Documentation

Supporting Libraries

• lucide-react: SVG icon library (Browse icons)
• class-variance-authority: Helps create component variations (e.g., button sizes/colors)
• clsx & tailwind-merge: Tools for managing CSS classes in components

Database (Drizzle ORM + Neon PostgreSQL)

• Drizzle ORM: Type-safe database queries with full TypeScript support
• Neon: Serverless PostgreSQL
• Database schema is defined in src/db/schema.ts

Database Commands

• npm run db:generate - Generate migrations after schema changes
• npm run db:push - Push schema changes to database
• npm run db:studio - Open Drizzle Studio to view/edit data

AI Theme Generator

• Powered by the Vercel AI SDK (ai, @ai-sdk/react, and @ai-sdk/openai) configured to call OpenRouter
• Set OPENROUTER_API_KEY in .env (optionally override the defaults with OPENROUTER_THEME_MODEL, OPENROUTER_SITE_URL, etc.)
• The Advanced Theme Editor's Generate tab streams chat responses via /api/theme-generator, which returns a complete theme payload through a tool call
• When the tool call finishes, the preview automatically applies the generated colors, fonts, and spacing so you can fine-tune them in the other tabs

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page_old.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.