Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a modern, premium, fully responsive web application designed for private personal storage, termed “Personal Vault.” It enables users to securely store, manage, and access their files with a sleek, futuristic UI focused on user privacy and security.

## CORE FEATURES
1. **Authentication**: A secure login system allowing users to access their private storage with email and password, including loading states and notifications for success or error.
2. **Dashboard**: A premium dashboard featuring sidebar navigation, user profile, and storage statistics, presenting an overview of total uploaded files, images, videos, and used storage space.
3. **File Upload System**: A comprehensive file upload feature with drag & drop support, progress indicators, file validation, and alerts for successful or erroneous uploads.
4. **Gallery View**: An elegant gallery displaying files in a masonry/grid layout, with previews, file details, and smooth animations enhancing the viewing experience.
5. **Search System**: An instant search capability allowing users to find files by name in real-time, designed with a clean UI and effective empty state handling.
6. **Private Storage Security**: Robust security measures ensuring that users only see their files, utilizing Supabase Row Level Security and secure authenticated requests.

## 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**: The main layout consists of a sidebar for navigation, a top navbar for user actions, and content sections for displaying the dashboard, file gallery, and upload functionalities.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: [Specify if needed, e.g., React Context, Redux]

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript template.
2. **Install Tailwind CSS** by following the official setup guide.
3. **Integrate Supabase** by creating a Supabase project and configuring authentication, storage, and database settings.
4. **Develop the authentication flow** with a secure login page, utilizing Supabase for user management.
5. **Create the dashboard layout** implementing sidebar and navbar components, displaying user statistics and profile.
6. **Implement the file upload system** with drag & drop functionality and progress tracking, storing files in Supabase Storage.
7. **Design the gallery view** using a masonry/grid layout to present files with smooth animations and lazy loading.
8. **Set up the search functionality** for instant filename searching with real-time updates.
9. **Ensure security measures** are in place, including Row Level Security and private storage buckets in Supabase.
10. **Conduct thorough testing** to ensure responsiveness and functionality across devices.

## USER EXPERIENCE
The application provides a seamless user experience where users can effortlessly log in, upload files with intuitive drag & drop features, view their files in a visually appealing gallery, and search for specific files quickly. Notifications and loading states enhance user feedback, ensuring a professional and high-end interaction throughout the application. The dark elegant UI, combined with smooth animations and glassmorphism, creates a modern experience that feels premium and secure.