Your task is to develop a comprehensive, fully functional MVP for a web application named 'Slap Sound FX' using Next.js 14 App Router, TypeScript, Drizzle ORM with PostgreSQL, NextAuth.js for authentication, and Tailwind CSS for styling. This application will allow authenticated users to create, manage, and share customizable 'device reaction' profiles, which involve associating unique sound effects and visual animations with user-defined trigger types.
Application Structure:
* The application must use the `app/` directory for all routing.
* Implement a multi-page structure for different sections (e.g., Home, Dashboard, Profile, Create Reaction, Settings).
Database Schema (Drizzle ORM for PostgreSQL):
1. **Users Table**:
* `id`: Primary key, UUID
* `name`: String
* `email`: String, unique
* `emailVerified`: Timestamp, nullable
* `image`: String, nullable (for profile picture)
* `hashedPassword`: String, nullable (for credential provider)
* `createdAt`: Timestamp, default `now()`
* `updatedAt`: Timestamp, default `now()`
2. **Accounts Table** (for NextAuth.js integration):
* `id`: Primary key, UUID
* `userId`: UUID, foreign key to `Users.id`
* `type`: String
* `provider`: String
* `providerAccountId`: String
* `refresh_token`: String, nullable
* `access_token`: String, nullable
* `expires_at`: Integer, nullable
* `token_type`: String, nullable
* `scope`: String, nullable
* `id_token`: String, nullable
* `session_state`: String, nullable
* Unique constraint on `provider`, `providerAccountId`
3. **Sessions Table** (for NextAuth.js integration):
* `id`: Primary key, UUID
* `sessionToken`: String, unique
* `userId`: UUID, foreign key to `Users.id`
* `expires`: Timestamp
4. **VerificationTokens Table** (for NextAuth.js integration):
* `identifier`: String
* `token`: String, unique
* `expires`: Timestamp
* Unique constraint on `identifier`, `token`
5. **Sounds Table**:
* `id`: Primary key, UUID
* `userId`: UUID, foreign key to `Users.id`
* `name`: String (e.g., 'Boing', 'Whoosh')
* `url`: String (URL to the stored audio file, e.g., S3 or Cloudinary. Placeholder for MVP.)
* `duration`: Integer (in seconds), nullable
* `createdAt`: Timestamp, default `now()`
* `updatedAt`: Timestamp, default `now()`
6. **VisualEffects Table**:
* `id`: Primary key, UUID
* `name`: String (e.g., 'Screen Shake', 'Flash Red', 'Confetti Burst')
* `description`: String, nullable
* `type`: String (e.g., 'animation', 'overlay')
7. **ReactionProfiles Table**:
* `id`: Primary key, UUID
* `userId`: UUID, foreign key to `Users.id`
* `name`: String (e.g., 'My Combo', 'Stress Reliever')
* `description`: String, nullable
* `soundId`: UUID, foreign key to `Sounds.id`, nullable
* `visualEffectId`: UUID, foreign key to `VisualEffects.id`, nullable
* `triggerType`: String (e.g., 'manual_button', 'slap_detection_placeholder' - `slap_detection` would require desktop app integration, currently for metadata only)
* `isActive`: Boolean, default `false` (for user's currently active profile)
* `isPublic`: Boolean, default `false` (for sharing)
* `createdAt`: Timestamp, default `now()`
* `updatedAt`: Timestamp, default `now()`
API Routes (Next.js App Router `route.ts` files):
Implement full CRUD operations for `Sounds` and `ReactionProfiles`.
* `/api/sounds`:
* `GET`: Fetch all sounds for the authenticated user.
* `POST`: Simulate sound file upload (store URL string) and create a `Sound` entry. (Actual file storage like S3 is out of scope for this MVP's prompt but should be noted as a future enhancement).
* `/api/sounds/[id]`:
* `GET`: Fetch a specific sound by ID.
* `PUT`: Update sound details.
* `DELETE`: Delete a sound.
* `/api/reaction-profiles`:
* `GET`: Fetch all reaction profiles for the authenticated user.
* `POST`: Create a new reaction profile.
* `/api/reaction-profiles/[id]`:
* `GET`: Fetch a specific reaction profile by ID.
* `PUT`: Update a reaction profile.
* `DELETE`: Delete a reaction profile.
Pages (React Components):
* **`/` (Home Page)**: Public landing page with a brief application description, key features, and clear call-to-action buttons for 'Sign Up' and 'Login'.
* **`/dashboard`**: (Authenticated access only)
* Displays a list of the user's created `ReactionProfiles` with options to 'Edit', 'Delete', and 'Activate/Deactivate'.
* A section for 'My Sounds' to manage uploaded audio files with upload functionality (simulated).
* A button to 'Create New Reaction Profile'.
* **`/profiles/create`**: (Authenticated access only)
* A form to create a new `ReactionProfile`.
* Allows selection of an uploaded sound and a pre-defined `VisualEffect` (fetched from `VisualEffects` table).
* Inputs for `name`, `description`, `triggerType` (select from predefined options like 'manual_button').
* Checkbox for `isPublic`.
* **`/profiles/edit/[id]`**: (Authenticated access only)
* A form to edit an existing `ReactionProfile`, pre-populated with current data.
* **`/settings`**: (Authenticated access only)
* User profile settings, allowing updates to `name` and `email`.
* **`/auth/login`, `/auth/register`**: Standard authentication pages using NextAuth.js. Implement a credential provider (email/password) and at least one social provider (e.g., Google).
Core Logic/Functionality:
* **Authentication**: Integrate NextAuth.js for user login, registration, and session management. Protect all private routes (`/dashboard`, `/profiles/*`, `/settings`).
* **Sound Management**: Allow users to 'upload' sounds (simulate by accepting a URL or a file input that doesn't persist the file, only its metad