Cross-Platform VibeShare Preview Iframe Development
Budget: $250 – $750 USD
VibeShare — Universal Preview Iframe
Goal
We need a browser-based preview system for VibeShare that works for any uploaded project (Next.js, Vite, React, Vue, plain HTML, etc).
When a user uploads their project files, the app should install dependencies, boot the dev server (or equivalent), and display the running app inside an iframe on our Remix page.
⸻
Requirements
1. Universal Project Support
• Handle plain HTML/CSS/JS projects.
• Handle Vite, React, Next.js, Vue.
• If project has package.json:
• Install dependencies automatically.
• Run the project with the correct npm run dev or equivalent.
• If no package.json (like plain HTML):
• Serve it with a lightweight static server.
2. Iframe Preview
• Render the running project inside an <iframe> without leaving our domain.
• Must show live output of the project (not just source files).
• Auto-detect which port the dev server started on (e.g. 5173 for Vite, 3000 for Next.js) and route iframe there.
3. Integration with Upload Flow
• Whatever files the user uploads → that’s what gets run.
• If files are incomplete (e.g. missing index.html), scaffold a minimal one so preview still works.
• Errors during build/startup should display in a branded error overlay inside the preview, not crash the app.
Goal
We need a browser-based preview system for VibeShare that works for any uploaded project (Next.js, Vite, React, Vue, plain HTML, etc).
When a user uploads their project files, the app should install dependencies, boot the dev server (or equivalent), and display the running app inside an iframe on our Remix page.
⸻
Requirements
1. Universal Project Support
• Handle plain HTML/CSS/JS projects.
• Handle Vite, React, Next.js, Vue.
• If project has package.json:
• Install dependencies automatically.
• Run the project with the correct npm run dev or equivalent.
• If no package.json (like plain HTML):
• Serve it with a lightweight static server.
2. Iframe Preview
• Render the running project inside an <iframe> without leaving our domain.
• Must show live output of the project (not just source files).
• Auto-detect which port the dev server started on (e.g. 5173 for Vite, 3000 for Next.js) and route iframe there.
3. Integration with Upload Flow
• Whatever files the user uploads → that’s what gets run.
• If files are incomplete (e.g. missing index.html), scaffold a minimal one so preview still works.
• Errors during build/startup should display in a branded error overlay inside the preview, not crash the app.