A Next.js 14 application delivering the creator → upload → library → play loop with authentication, Prisma/Postgres, S3-compatible storage, search, and analytics.

Getting started
Install dependencies
pnpm install
Copy the environment template and fill in values
cp .env.example .env
Populate .env with your database connection, NextAuth secrets, and S3-compatible storage credentials.

Apply database schema and seed demo data
pnpm exec prisma migrate deploy
pnpm exec prisma db seed
Run the development server
pnpm run dev
Visit http://localhost:3000.

Available scripts
pnpm run dev – start Next.js in development mode.
pnpm run build – create a production build.
pnpm run start – run the production build.
pnpm run lint – run ESLint.
pnpm run test – execute Vitest unit tests.
pnpm run test:e2e – run Playwright end-to-end tests.
pnpm run prisma:migrate – deploy Prisma migrations.
pnpm run prisma:generate – regenerate the Prisma Client.
pnpm run prisma:seed – seed the database.
Project structure
src/app – Next.js app router pages and API routes.
src/components – UI and interactive components.
src/lib – utilities (Prisma client, auth, search helpers, storage, etc.).
prisma – Prisma schema, migrations, and seeds.
tests – Vitest unit tests and Playwright e2e specs.
CI
GitHub Actions workflow .github/workflows/ci.yml checks formatting, runs linting, type checking, Prisma validation, unit tests, and a headless Next.js build.

Demo data
The seed script provisions a demo creator profile with five futuristic tracks tagged for search. Use demo@ruido.dev to sign in via m

.env.example

@@ -0,0 +1,23 @@
+```bash
+# Database
+DATABASE_URL="postgresql://user:password@localhost:5432/ruido?schema=public"
+
+# NextAuth
+NEXTAUTH_SECRET=""
+NEXTAUTH_URL="http://localhost:3000"
+
+# S3 Compatible Storage
+S3_ENDPOINT=""
+S3_REGION=""
+S3_ACCESS_KEY=""
+S3_SECRET_KEY=""
+S3_BUCKET_NAME=""
+
+# Google OAuth (optional)
+GOOGLE_CLIENT_ID=""
+GOOGLE_CLIENT_SECRET=""
+
+# GitHub OAuth (optional)
+GITHUB_CLIENT_ID=""
+GITHUB_CLIENT_SECRET=""
+```

prisma/schema.prisma

@@ -0,0 +1,60 @@
+```prisma
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id            String    @id @default(uuid())
+  email         String    @unique
+  name          String?
+  image         String?
+  emailVerified DateTime?
+  role          Role      @default(CREATOR)
+  createdAt     DateTime  @default(now())
+  updatedAt     DateTime  @updatedAt
+  tracks        Track[]
+
+  @@map("users")
+}
+
+enum Role {
+  CREATOR
+  LISTENER
+  ADMIN
+}
+
+model Track {
+  id          String    @id @default(uuid())
+  title       String
+  description String?
+  duration    Int
+  fileUrl     String    @unique
+  coverImage  String?
+  tags        String[]
+  isPublic    Boolean   @default(true)
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+  userId      String
+  user        User      @relation(fields: [userId], references: [id])
+
+  @@map("tracks")
+}
+
+model Play {
+  id        String   @id @default(uuid())
+  trackId   String
+  track     Track    @relation(fields: [trackId], references: [id])
+  userId    String?
+  user      User?    @relation(fields: [userId], references: [id])
+  playedAt  DateTime @default(now())
+  device    String?
+  location  String?
+
+  @@map("plays")
+}
+```

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,26 @@
+```typescript
+import NextAuth from "next-auth"
+import GoogleProvider from "next-auth/providers/google"
+import GitHubProvider from "next-auth/providers/github"
+import { PrismaAdapter } from "@auth/prisma-adapter"
+import { prisma } from "@/lib/prisma"
+
+export const authOptions = {
+  adapter: PrismaAdapter(prisma),
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+    }),
+    GitHubProvider({
+      clientId: process.env.GITHUB_CLIENT_ID,
+      clientSecret: process.env.GITHUB_CLIENT_SECRET,
+    }),
+  ],
+  secret: process.env.NEXTAUTH_SECRET,
+}
+
+const handler = NextAuth(authOptions)
+
+export { handler as GET, handler as POST }
+```

src/components/Navbar.tsx

@@ -0,0 +1,56 @@
+```typescript
+"use client"
+
+import Link from "next/link"
+import { useSession } from "next-auth/react"
+import { SignInButton } from "./auth/SignInButton"
+
+export function Navbar() {
+  const { data: session } = useSession()
+
+  return (
+    <nav className="bg-gray-900 p-4 border-b border-gray-800">
+      <div className="container mx-auto flex justify-between items-center">
+        <Link href="/" className="text-xl font-bold">
+          Ruido
+        </Link>
+        <div className="flex items-center gap-4">
+          {session ? (
+            <>
+              <Link href="/upload" className="hover:text-indigo-400">
+                Upload
+              </Link>
+              <Link href="/library" className="hover:text-indigo-400">
+                Library
+              </Link>
+              <img
+                src={session.user?.image || "/avatar.png"}
+                alt="Profile"
+                className="w-8 h-8 rounded-full"
+              />
+            </>
+          ) : (
+            <SignInButton />
+          )}
+        </div>
+      </div>
+    </nav>
+  )
+}
+```
+
+Let me know if you'd like me to continue with more files such as:
+1. Homepage (src/app/page.tsx)
+2. Upload page (src/app/upload/page.tsx) 
+3. Library page (src/app/library/page.tsx)
+4. Player component
+5. Prisma seed script
+6. Analytics components
+7. Search implementation
+8. Playwright tests
+9. GitHub Actions workflow
+
+Would you like me to proceed with any of these specific parts next? I can create them as separate new files following the same format.
+___METADATA_START___
+{"repoId":"kingarnica/echosphere-audio-visualizer","isNew":false,"userName":"kingarnica"}
+___METADATA_END___

src/components/auth/SignInButton.tsx

@@ -0,0 +1,16 @@
+```typescript
+"use client"
+
+import { signIn } from "next-auth/react"
+
+export function SignInButton() {
+  return (
+    <button
+      onClick={() => signIn()}
+      className="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition"
+    >
+      Sign In
+    </button>
+  )
+}
+```

src/lib/prisma.ts

@@ -0,0 +1,11 @@
+```typescript
+import { PrismaClient } from "@prisma/client"
+
+declare global {
+  var prisma: PrismaClient | undefined
+}
+
+export const prisma = global.prisma || new PrismaClient()
+
+if (process.env.NODE_ENV !== "production") global.prisma = prisma
+```

src/lib/storage.ts

@@ -0,0 +1,25 @@
+```typescript
+import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3"
+import { v4 as uuidv4 } from "uuid"
+
+const s3Client = new S3Client({
+  endpoint: process.env.S3_ENDPOINT,
+  region: process.env.S3_REGION,
+  credentials: {
+    accessKeyId: process.env.S3_ACCESS_KEY,
+    secretAccessKey: process.env.S3_SECRET_KEY,
+  },
+})
+
+export async function uploadFile(file: File) {
+  const fileKey = `tracks/${uuidv4()}${file.name}`
+  await s3Client.send(
+    new PutObjectCommand({
+      Bucket: process.env.S3_BUCKET_NAME,
+      Key: fileKey,
+      Body: Buffer.from(await file.arrayBuffer()),
+    })
+  )
+  return fileKey
+}
+```