Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
MB World is a fullstack web application designed for media storage and sharing, allowing users to upload videos and photos while managing hierarchical folders. The application features a private admin panel for content management and a public viewing experience, ensuring responsive design for both mobile and desktop devices.

## CORE FEATURES
1. **Admin Panel**: A secure, private area for the owner to authenticate and manage folders, subfolders, and uploads, including options for creating, editing, and deleting content.
   
2. **Public Viewing**: Users can explore and view media in a structured folder hierarchy without the ability to upload or modify content.

3. **Responsive Design**: The application is designed to be fully functional across mobile and desktop devices, ensuring a seamless user experience.

4. **Watermark Integration**: A visible watermark is present on every page, providing brand consistency and protection for uploaded media.

5. **Folder Management**: Users can navigate through a tree-structured menu of folders, supporting subfolders for organized media storage.

6. **Performance Optimization**: The application is built for optimal loading times with features like lazy loading for images and videos.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: A vertical navigation menu for folder structure on the left, main content area for media display on the right, and responsive adjustments for smaller screens.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (if complexity increases)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install required dependencies (React Router, Tailwind CSS).
   
2. **Create Folder Structure**: Organize the project into components, pages, and services to manage files effectively.

3. **Develop Admin Panel**: Implement authentication logic, create routes for the admin panel, and set up folder management features.

4. **Build Public Viewing Area**: Create components to display the folder structure and media content, ensuring public users can only view.

5. **Integrate Watermark**: Implement a watermark component that overlays on all pages, ensuring it is styled correctly.

6. **Ensure Responsiveness**: Utilize Tailwind CSS's responsive utilities to adjust layouts and components for various screen sizes.

7. **Optimize Performance**: Implement lazy loading for images and videos, and ensure file validation is in place.

8. **Testing and Deployment**: Write tests to verify functionality and deploy the application to a cloud service.

## USER EXPERIENCE
Users will start by accessing the homepage, greeted with a welcome message. The public can navigate through folders and view media without any upload options. Admin users will log in to access their private panel, where they can manage folders, upload files, and adjust visibility settings. The design will ensure a straightforward and intuitive flow, with a focus on providing a clean interface for both viewing and management tasks.