Frontend

The Raw Beats UI is a Nuxt 3 app with a dark marketplace aesthetic, global audio playback, and a producer dashboard.

Framework & runtime

• Nuxt 3 (3.3.3) — routing, SSR, auto-imports
• Vue 3 — Composition API with <script setup>
• TypeScript — in composables and newer components
• Node — >=20.19.0

Styling & design system

• Tailwind CSS — utilities via @nuxtjs/tailwindcss
• assets/css/design-system.css — tokens, glass cards, gradient buttons
• assets/css/main.css — base styles, form helpers
• Color schemes — runtime theme via plugins/color-scheme.client.ts
• Fonts — Inter (UI), JetBrains Mono (code)
• Icons — Heroicons through the Icon component

State & data fetching

• Pinia — global state (@pinia/nuxt, e.g. messages store)
• useApi — authenticated fetch wrapper with JWT from localStorage
• Composables — useAuth, useGlobalAudio, useSocket
• API base — same-origin /api on Vercel; dev proxy in nuxt.config.ts

Layouts

• default — public pages (header + footer)
• dashboard — producer area with sidebar
• docs — documentation with sidebar navigation

Key UI areas

• AppHeader / AppFooter — global chrome
• WaveformAudioPlayer + useGlobalAudio — persistent beat preview
• DashboardSidebar — producer navigation
• StorefrontBeatCard, HorizontalFilterBar — marketplace browsing

Nuxt modules

@nuxtjs/tailwindcss
@vueuse/nuxt
@pinia/nuxt