Spaces:
Running
Running
| Project Title: CrispData – Unified Creator Platform | |
| Description: | |
| Build me a full-stack web system called CrispData where I can upload, organize, and publish all my creative work: music, videos, blogs, and voice overs. The platform should let me manage content in one place, process uploads automatically, stream audio/video, and showcase blogs/articles. It must also include analytics, user authentication, and a clean, modern interface. | |
| Core Features | |
| Authentication | |
| User sign up, login, logout (JWT or NextAuth). | |
| Role support (creator, admin, viewer). | |
| Content Management | |
| Upload music, videos, blogs, and voice overs. | |
| Metadata fields: title, description, tags, category, cover art, visibility (public/private/unlisted). | |
| Blog editor with markdown/MDX support. | |
| Draft & publish scheduling. | |
| Media Upload & Processing | |
| Direct-to-S3 (or S3-compatible) uploads using presigned URLs. | |
| Background processing with FFmpeg: | |
| Music: normalize audio, generate mp3/aac/ogg, create waveform. | |
| Videos: transcode to 1080p/720p, extract thumbnails, generate HLS (.m3u8). | |
| Voice overs: optimize clarity, generate waveform preview. | |
| Automatic thumbnails/posters for video/audio. | |
| Playback & Display | |
| Built-in media players (audio, video). | |
| Blog detail page with SEO-friendly rendering. | |
| Voice over player (simple audio with waveform). | |
| Adaptive streaming for video (HLS). | |
| Shareable links for public/unlisted content. | |
| Analytics | |
| Track views, plays, downloads. | |
| Dashboard with charts: top content, views over time, engagement breakdown. | |
| Storage & CDN | |
| Use S3 or equivalent object storage. | |
| Structure: /userId/contentId/{original,processed,thumbnails}. | |
| Integrate CDN (Cloudflare/CloudFront) for fast delivery. | |
| Search & Filters | |
| Search by title, tags, type. | |
| Filter by category, date, type (music/video/blog/voice). | |
| Admin Dashboard | |
| Overview stats. | |
| Content library with filters. | |
| Upload manager with progress. | |
| User & role management. | |
| Tech Stack | |
| Frontend: Next.js + TailwindCSS + TypeScript | |
| Backend/API: Node.js (Express or Next.js API routes) | |
| Database: PostgreSQL (content, users, analytics) | |
| Storage: AWS S3 or compatible (DigitalOcean Spaces, Backblaze B2) | |
| Processing: FFmpeg worker (Dockerized background job) | |
| Queue: Redis + BullMQ (job processing) | |
| Auth: NextAuth.js or JWT-based | |
| Analytics: custom events stored in DB + charts in dashboard | |
| Optional AI Add-on: Auto-generate blog intros/summaries or suggest voice-over transcripts. | |
| Pages / UI Requirements | |
| Landing Page: Hero banner, featured content, latest uploads. | |
| Sign Up / Sign In / Profile Settings. | |
| Dashboard: Uploads overview, analytics, quick links. | |
| Upload Page: Drag-and-drop, metadata form, visibility settings. | |
| Library: Grid/list view with search and filters. | |
| Content Detail Page: | |
| Music/Voice Over → audio player with waveform + metadata. | |
| Video → responsive player with quality selector + poster image. | |
| Blog → clean, SEO-friendly article layout. | |
| Analytics Page: Interactive charts (plays, views, downloads). | |
| Admin Settings: User roles, system preferences. | |
| Extras | |
| Responsive (desktop, tablet, mobile). | |
| SEO-optimized (blogs, videos, music pages). | |
| Open Graph + social share cards. | |
| Secure signed URLs for private content. | |
| Error monitoring + upload status indicators. | |
| Future-ready: add subscriptions, tips/donations, or podcast RSS feed. | |
| Deliverables | |
| Fully working system CrispData (frontend + backend). | |
| Database schema + migrations. | |
| FFmpeg worker setup with Dockerfile. | |
| API routes for upload, content management, analytics. | |
| Tailwind UI with modern, minimal design. | |
| Documentation: setup guide + how to deploy. | |
| 👉 Instruction for Deepsite: | |
| Build the complete CrispData system as described above. Include frontend, backend, database, storage integration, FFmpeg processing, and clean UI. Ensure music, video, blogs, and voice overs are fully supported. | |
| the system should be interactve | |
| ### Pricing | |
| Start your creative journey for as low as **$2/month**. | |
| Simple, transparent pricing — no hidden fees. Upgrade anytime. | |
| --- | |
| **Starter** | |
| 💵 $2/month | |
| Perfect for beginners exploring content publishing. | |
| - Upload up to 20 items (music, video, blogs, or voice overs) | |
| - Basic analytics (views, plays, reads) | |
| - Community support | |
| [ Subscribe ] | |
| --- | |
| **Pro** | |
| 💵 $3/month | |
| For active creators who want more freedom. | |
| - Unlimited uploads | |
| - Advanced analytics dashboard | |
| - Priority processing (faster video/audio conversion) | |
| - Email support | |
| [ Subscribe ] | |
| --- | |
| **Creator Plus** | |
| 💵 $5/month | |
| For professionals who want everything unlocked. | |
| - Unlimited uploads & storage | |
| - Custom branding (logo, colors, domain) | |
| - Team collaboration (invite contributors) | |
| - Premium support & early features | |
| [ Subscribe ] | |
| --- | |
| ### Subscription Management | |
| - After subscribing, users get a **Subscription Dashboard** under their profile. | |
| - They can view their plan, upgrade/downgrade, or cancel anytime. | |
| - Payments handled securely via **Stripe Checkout** (funds go directly to my Stripe account). | |
| ### Call-to-Action | |
| Add a **Pricing** link in the navbar & footer. | |
| On the homepage hero section, update the tagline to: | |
| **“Start creating for just $2/month — get started today.”** | |
| ### Pricing | |
| Start your creative journey for as low as **$2/month**. | |
| Simple, transparent pricing — no hidden fees. Upgrade anytime. | |
| --- | |
| **Starter** | |
| 💵 $2/month | |
| Perfect for beginners exploring content publishing. | |
| - Upload up to 20 items (music, video, blogs, or voice overs) | |
| - Basic analytics (views, plays, reads) | |
| - Community support | |
| [ Subscribe ] | |
| --- | |
| **Pro** | |
| 💵 $3/month | |
| For active creators who want more freedom. | |
| - Unlimited uploads | |
| - Advanced analytics dashboard | |
| - Priority processing (faster video/audio conversion) | |
| - Email support | |
| [ Subscribe ] | |
| --- | |
| **Creator Plus** | |
| 💵 $5/month | |
| For professionals who want everything unlocked. | |
| - Unlimited uploads & storage | |
| - Custom branding (logo, colors, domain) | |
| - Team collaboration (invite contributors) | |
| - Premium support & early features | |
| [ Subscribe ] | |
| --- | |
| ### Subscription Management | |
| - After subscribing, users get a **Subscription Dashboard** under their profile. | |
| - They can view their plan, upgrade/downgrade, or cancel anytime. | |
| - Payments handled securely via **Stripe Checkout** (funds go directly to my Stripe account). | |
| ### Call-to-Action | |
| Add a **Pricing** link in the navbar & footer. | |
| On the homepage hero section, update the tagline to: | |
| **“Start creating for just $2/month — get started today.”** | |
| Instruction: | |
| In the CrispData project, review all buttons (e.g., “Subscribe”, “Get Started”, “Upload”, “Save”, etc.). Some buttons are not responding when clicked. | |
| Please: | |
| Ensure every button has a valid onClick or href handler. | |
| Example: | |
| <button onClick={handleSubscribe}>Subscribe</button> | |
| If the button should navigate, use next/link in Next.js or router.push() correctly. | |
| Example: | |
| import Link from 'next/link' | |
| <Link href="/pricing"><button>See Pricing</button></Link> | |
| If the button should trigger a function (like upload, subscribe, checkout), connect it to the correct function in the codebase. | |
| Example: | |
| const handleSubscribe = async () => { | |
| const res = await fetch("/api/checkout", { method: "POST" }); | |
| const { url } = await res.json(); | |
| window.location.href = url; | |
| } | |
| Add loading states so when a button is clicked, the user sees feedback (spinner, disabled state). | |
| Example: | |
| <button disabled={loading}>{loading ? "Processing..." : "Subscribe"}</button> | |
| Run through every button in the app (Upload, Subscribe, Start Trial, etc.) and confirm they are interactive and functional. |