Huephonics - Audio visualization powered by mood color (Astro, TypeScript, Drizzle, SCSS, Vercel AI SDK).

• Node.js >= 18.0.0
• Neon PostgreSQL account (database)
• API keys for OpenAI, ElevenLabs, and UploadThing

# Install dependencies
npm install

# Copy environment template
cp .env.example .env

# Configure your .env file with your credentials

Create a .env file with the following variables:

# Neon PostgreSQL (database)
DATABASE_URL="postgresql://user:password@host/database"

# OpenAI (for Vercel AI SDK)
OPENAI_API_KEY="sk-..."

# ElevenLabs (music generation)
ELEVENLABS_API_KEY="sk_..."

# UploadThing (file storage)
UPLOADTHING_TOKEN="..."

# Optional
VITE_APP_URL="http://localhost:5173"

# Start dev server
npm run dev

Visit http://localhost:4321

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run astro - Run Astro CLI commands
• npm run test - Run E2E tests

src/
├── components/         # Reusable Astro components
├── db/                 # Database client and types
│   ├── initialize.ts   # Drizzle client with Neon HTTP
│   ├── schema.ts       # Drizzle table definitions
│   ├── helpers.ts      # Database query helpers
│   └── validations.ts  # Zod schemas
├── layouts/            # Page layouts
│   └── Layout.astro
├── lib/                # Utility libraries
│   ├── config.ts       # App configuration
│   ├── content-converter.ts # Markdown/HTML conversion
│   └── dom-utils.ts    # DOM manipulation
├── pages/              # Routes and pages
│   ├── api/            # API endpoints
│   └── index.astro     # Home page
└── styles/             # SCSS stylesheets
    ├── variables/      # SCSS variables and mixins
    ├── components/     # Component styles
    ├── pages/          # Page styles
    ├── reset.scss      # CSS reset
    └── global.scss     # Global styles

This app uses a strict SCSS architecture:

• No inline <style> tags in .astro files
• All styles in external SCSS files for better maintainability
• Data attributes for modifiers (preferred over BEM)
• Semantic class names (no utility classes)

Example:

---
import '@/styles/components/button.scss';
---
<button class="btn" data-variant="primary" data-size="lg">
    Click Me
</button>

Database is handled by Drizzle ORM with Neon PostgreSQL. Define your schema in src/db/schema.ts:

import { pgTable, text, integer, timestamp } from 'drizzle-orm/pg-core';

export const music = pgTable('music', {
    id: text('id').primaryKey(),
    title: text('title'),
    duration: integer('duration'),
    createdAt: timestamp('created_at').defaultNow(),
});

Query and mutate data using helpers in src/db/helpers.ts.

Chat and text generation powered by Vercel AI SDK.

ElevenLabs API for music generation.

UploadThing for reliable file uploads and storage.

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Make sure to set these environment variables in your Vercel project settings:

• DATABASE_URL
• OPENAI_API_KEY
• ELEVENLABS_API_KEY
• UPLOADTHING_TOKEN

• Astro Documentation
• Drizzle ORM
• Neon PostgreSQL
• Vercel AI SDK
• Zod

import { htmlToMarkdown, markdownToHtml } from '@/lib/content-converter';

const markdown = htmlToMarkdown('<h1>Hello</h1>');
const html = markdownToHtml('# Hello');

import { createRecording, getRecording, updateRecording } from '@/db/helpers';

const music = await createRecording(data);
const existing = await getRecording(id);
await updateRecording(id, updates);

MIT