replit-prompt

### Updated MusicVerse: Basic Media Upload and Server with Next.js and Tailwind CSS

**Core Functionality**:
- A minimal media server allowing users to:
  - Upload media files (music, videos, images) via a web interface.
  - Store files in a local directory or cloud storage (e.g., AWS S3).
  - Stream or download media files.
  - List and browse uploaded media.
- Built with Next.js for server-side and client-side functionality, styled with Tailwind CSS for a modern, responsive UI, and optimized for Vercel deployment.
- No audio analysis, notation, or advanced features; focus solely on file upload and serving.

**Technical Scope**:
- **Framework**: Next.js (React-based, with API routes for backend).
- **Styling**: Tailwind CSS for responsive, utility-first styling.
- **Storage**: Local filesystem (for prototype simplicity) with optional S3 integration.
- **Frontend**: Next.js pages for upload form and media list.
- **Authentication**: None (for prototype; assume single-user access).
- **Deployment**: Optimized for Vercel (serverless, easy setup).

---

### Updated Prompt for Replit Agent (Next.js + Tailwind CSS)


Create a minimal media server prototype called "MusicVerse" using Next.js and Tailwind CSS on Replit, optimized for deployment to Vercel. The app should allow users to upload media files (music, videos, images) via a web interface, store them in a local directory (or AWS S3 if feasible), list all uploaded files, and stream or download them. Follow these requirements:

1. **Project Setup**:
   - Initialize a Next.js project using `create-next-app` with TypeScript disabled (for simplicity).
   - Install dependencies: `next`, `react`, `react-dom`, `tailwindcss`, `postcss`, `autoprefixer`, `multer` (for file uploads), `aws-sdk` (optional for S3).
   - Configure Tailwind CSS:
     - Run `npx tailwindcss init -p` to create `tailwind.config.js` and `postcss.config.js`.
     - Update `tailwind.config.js` to include content paths (`./pages/**/*.{js,jsx,ts,tsx}`, `./components/**/*.{js,jsx,ts,tsx}`).
     - Add Tailwind directives to `styles/globals.css`:
       ```
       @tailwind base;
       @tailwind components;
       @tailwind utilities;
       ```
   - Create a `.replit` file to run the app (`run = "npm run dev"`).
   - Ensure the app runs on Replit’s default port (use `process.env.PORT` or 3000).

2. **Backend (Next.js API Routes)**:
   - Create API routes in `pages/api/`:
     - `pages/api/upload.js`:
       - Handle POST requests for file uploads using `multer`.
       - Store files in a local `/uploads` directory (create if it doesn’t exist).
       - Return JSON with the uploaded file’s name and URL.
     - `pages/api/media.js`:
       - Handle GET requests to list all files in `/uploads`.
       - Return JSON with an array of file names and URLs.
     - `pages/api/media/[filename].js`:
       - Handle GET requests to serve a specific file for streaming/download.
       - Set appropriate `Content-Type` headers (e.g., `audio/mpeg`, `video/mp4`, `image/jpeg`).
   - Use `multer` for file uploads, configured to accept mp3, mp4, jpg, and png files (limit file size to 100MB).
   - Add optional AWS S3 integration (use `aws-sdk`), but comment it out for local testing. Include instructions in `README.md` to enable S3.
   - Handle errors (e.g., file too large, invalid file type) with appropriate status codes and messages.

3. **Frontend (Next.js Pages)**:
   - Create a single page in `pages/index.js` with:
     - A file upload form (input type `file`, accept `.mp3,.mp4,.jpg,.png`).
     - A list of uploaded media files with links to stream/download.
     - A loading spinner during uploads (use Tailwind classes or a simple CSS animation).
   - Style with Tailwind CSS:
     - Use a clean, responsive design (e.g., centered layout, card-like media list).
     - Example: Form with `bg-gray-100 p-6 rounded-lg`, buttons with `bg-blue-500 hover:bg-blue-600 text-white`, media list with `grid grid-cols-1 md:grid-cols-2 gap-4`.
     - Ensure mobile-friendly design (use Tailwind’s responsive classes like `sm:`, `md:`).
   - Use JavaScript (fetch API) to:
     - Send file uploads to `/api/upload` (POST).
     - Fetch the media list from `/api/media` (GET) and display it.
     - Render audio/video files with `<audio>`/`<video>` tags for streaming, images with `<img>`, and provide download links.
   - Handle errors (e.g., display “Upload failed” messages using Tailwind-styled alerts).

4. **File Storage**:
   - Store uploaded files in a local `/uploads` directory on Replit’s filesystem.
   - Serve files statically using Next.js’s static file serving (place `/uploads` in `/public/uploads` and access via `/uploads/filename`).
   - Ensure files are accessible for streaming (e.g., mp3/mp4) and downloading (e.g., jpg).

5. **Vercel Deployment**:
   - Structure the project for easy Vercel deployment:
     - Ensure `package.json` includes scripts: `"dev": "next dev", "build": "next build", "start": "next start"`.
     - Add a `vercel.json` file with basic configuration:
       ```
       {
         "version": 2,
         "builds": [{ "src": "pages/**/*", "use": "@vercel/next" }],
         "routes": [
           { "src": "/api/(.*)", "dest": "/api/$1" },
           { "src": "/(.*)", "dest": "/$1" }
         ]
       }
       ```
     - Include instructions in `README.md` for deploying to Vercel (e.g., link Replit repo to Vercel, set environment variables if using S3).

6. **Constraints**:
   - Keep it minimal; no authentication or database.
   - Support mp3, mp4, jpg, png files.
   - Ensure streaming works in browsers (test with audio/video tags).
   - Use Tailwind CSS exclusively for styling (no custom CSS unless necessary).
   - Handle Replit’s filesystem limitations (e.g., limited storage).

7. **Deliverables**:
   - Project structure:
     - `pages/index.js`: Main page with upload form and media list.
     - `pages/api/upload.js`, `pages/api/media.js`, `pages/api/media/[filename].js`: API routes.
     - `public/uploads/`: Directory for stored files.
     - `styles/globals.css`: Tailwind CSS setup.
     - `tailwind.config.js`, `postcss.config.js`: Tailwind configuration.
     - `vercel.json`: Vercel deployment config.
     - `README.md`: Instructions for running locally, testing, and deploying to Vercel.
   - Ensure all code is well-commented.

8. **Testing**:
   - Test uploading a small mp3, mp4, and jpg file.
   - Verify the media list displays all files with correct links.
   - Confirm streaming (mp3/mp4) and downloading (jpg) work in the browser.
   - Check responsiveness on mobile and desktop views.

9. **Optional**:
   - Add a simple progress bar for uploads using Tailwind classes.
   - Include commented S3 integration code with clear setup instructions.

Start the project in a new Replit environment, set up the Next.js boilerplate with Tailwind CSS, and build the app step-by-step. Provide a link to the running Replit app or share the code in a GitHub repository. Include a `README.md` with:
- Setup instructions (e.g., `npm install`, `npm run dev`).
- How to test the app (upload files, stream, download).
- Steps to deploy to Vercel (e.g., link repo, configure environment).


---

### Notes
- **Why Next.js**: Simplifies frontend and backend development with API routes, supports Vercel’s serverless platform, and integrates well with Tailwind CSS.
- **Why Tailwind CSS**: Provides rapid, responsive styling without writing custom CSS, ideal for a prototype.
- **Vercel Deployment**: The `vercel.json` config and Next.js structure ensure seamless deployment. You can link the Replit repo to Vercel or push to GitHub for automatic builds.
- **Replit Considerations**: Replit’s filesystem is temporary, so local storage is for prototyping. For production, uncomment S3 integration and configure environment variables.

Let me know if you need help setting up the Replit environment, refining the prompt, or adding specific features to the prototype!