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!