Remix

Make your own version of MR FESGO BOT

Get an exact, working copy in your account, then change anything with chat.

Original by Emma Francis

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

PROJECT: MR FESGO BOT
FOUNDER: Francis Emmanuel (Mr FESGO)

PRODUCT:
Build a professional, mobile-first, responsive AI-powered web application called MR FESGO BOT. It must work in Android and iPhone browsers, tablets, laptops, and desktops without requiring users to install an app.

IMPORTANT:
Continue an existing project if one exists. Otherwise, create the initial application. Do not unnecessarily rebuild working components. Do not fabricate data, AI results, payments, integrations, or processing outcomes.

TECHNOLOGY:
Use a maintainable frontend architecture with reusable components, clear routing, and secure backend integration points. Prepare for Supabase authentication, PostgreSQL, Row Level Security, cloud storage, and Edge Functions. Use a secure server-side integration for Groq text generation. Never expose API keys or privileged credentials in frontend code.

PHASE 1: APPLICATION FOUNDATION

Build a polished, functional web application with these pages:

1. Home Dashboard
2. AI Response
3. Video Studio
4. My Projects
5. AI Generator
6. Media Library
7. Subscription
8. Profile
9. Settings
10. Protected Admin Command Center

Use a premium cinematic dark-navy design with cyan-blue accents, elegant cards, readable typography, accessible forms, and professional spacing.

On mobile, implement compact navigation that works on small screens without overlapping page content. On desktop, provide a sidebar or expanded navigation.

Every button must have a meaningful action. Every navigation item must open the correct page. Include loading states, empty states, errors, and confirmation dialogs.

PHASE 2: DASHBOARD

Display a welcome message, quick actions, recent projects, editing jobs, AI usage, subscription status, and notifications.

Use real data when available. Otherwise, show honest empty states. Never invent statistics.

PHASE 3: AI RESPONSE

Build an AI chat interface with a message input, send button, conversation history, loading indicators, error handling, and a new-chat action.

Integrate Groq through a secure backend when credentials and backend configuration are available. Verify the integration before claiming it works.

Prepare integration points for official WhatsApp, Facebook, Instagram, and TikTok APIs. Provide connection status and configuration instructions. Never request social media passwords or send messages without proper authorisation.

PHASE 4: MY PROJECTS

Allow users to create, open, rename, and delete projects with confirmation.

Prepare persistent project storage using Supabase when configured. Include project titles, descriptions, scripts, scenes, episodes, characters, media references, editing instructions, and timestamps.

If the backend is unavailable, clearly label any local-only storage and its limitations.

PHASE 5: VIDEO STUDIO

Create a video workspace with upload controls, media previews, a timeline interface, trim and split controls where feasible, text overlays, audio controls, captions, aspect ratio settings, and project saving.

Clearly distinguish implemented editing operations from visual placeholders. Prepare integration points for a real video-processing engine.

PHASE 6: AI GENERATOR

Create separate interfaces for:
- Text-to-image
- Text-to-video
- Image-to-video
- AI voice-over
- Subtitle generation
- AI editing assistance

Provide prompt fields, supported settings, upload controls where appropriate, processing status, error handling, previews, and job history.

Use suitable external providers for image and video generation. Do not assume Groq supports every media-generation feature. Never fabricate generated results.

PHASE 7: MEDIA LIBRARY

Provide media uploads, file information, previews, deletion confirmation, and an empty state. Prepare cloud storage integration. Do not claim cloud persistence until tested.

PHASE 8: AUTHENTICATION AND MEMORY

Prepare Supabase Auth for registration, login, email verification, password reset, sessions, logout, and account deletion.

Prepare user-controlled AI memory with options to view, edit, delete, or disable saved preferences. Separate personal memory from project information.

Require authentication and enforce ownership checks for private data when the backend is configured.

PHASE 9: SUBSCRIPTIONS

Prepare configurable plans:
- One-month introductory trial
- Quarterly: NGN 800
- Annual: NGN 3,200

These are proposed prices and must remain configurable.

Prepare web-payment integration for later configuration. Verify payments server-side before granting paid access. Do not fabricate transactions or subscription revenue.

Keep future Android and iOS billing implementations separate.

PHASE 10: OWNER AND CREW

Implement secure role-based access for:
OWNER, ADMIN, CREW, PRO_USER, and FREE_USER.

Reserve OWNER for the authorised founder, Francis Emmanuel (Mr FESGO). Do not grant owner access to ordinary users or hard-code an owner password.

Prepare secure owner-account provisioning and a protected Admin Command Center.

Administrative features should include user management, crew invitations, complimentary access, subscription configuration, processing jobs, AI usage, verified revenue, estimated operating costs, support requests, and service health.

Enforce permissions on the backend, not merely by hiding frontend buttons.

PHASE 11: DATABASE AND SECURITY

Prepare Supabase data models for profiles, roles, projects, episodes, scenes, media assets, memories, social connections, conversations, subscriptions, payment transactions, credits, processing jobs, notifications, and audit logs.

Use appropriate relationships, timestamps, ownership checks, and Row Level Security.

Protect API keys, validate uploads, enforce permissions, and use secure storage access. Never expose service-role keys in browser code.

PHASE 12: IMPLEMENTATION RULES

Work incrementally.

FIRST: Build the responsive application shell, dashboard, navigation, and all page layouts.

SECOND: Make navigation and basic interactions work.

THIRD: Prepare authentication, database integration, and persistent projects.

FOURTH: Connect Groq securely for supported text-generation features.

FIFTH: Implement and test media uploads and suitable video, image, and social API integrations.

SIXTH: Implement subscriptions, secure owner permissions, and administration.

Do not attempt to simulate unfinished integrations as real services. Clearly identify features that require API credentials, backend configuration, paid providers, or additional implementation.

After each stage, check for build errors, broken routes, nonfunctional buttons, and mobile layout problems.

DELIVERABLE:
A professional, responsive MR FESGO BOT web application with working navigation, reusable components, maintainable code, honest feature status, and a clear path toward a secure commercial product and future Android/iOS applications.

Start with PHASES 1 and 2. Do not attempt every advanced integration in the initial build.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.