Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to facilitate the creation and management of video and audio notes. Users will be able to record, upload, and organize their media notes in a clean and intuitive interface, making it easy to access and utilize their content for various purposes, such as studying, brainstorming, or personal reflection.

## CORE FEATURES
1. **Media Recording**: Users can record audio and video notes directly within the application, allowing for quick capture of ideas and thoughts.
2. **Media Upload**: Users can upload existing video and audio files from their devices, enabling easy integration of previously recorded content.
3. **Note Organization**: A system for categorizing and tagging notes, allowing users to easily find and manage their media files.
4. **Playback Functionality**: Users can play back their audio and video notes within the app, with controls for play, pause, and skip.
5. **Search Functionality**: A search bar that enables users to quickly locate specific notes based on keywords or tags.
6. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across various devices, including desktops, tablets, and smartphones.

## 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 will feature a top navigation bar, a central content area for media notes, and a sidebar for organization and search functionalities.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (if needed for complex state management)

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for UI components and styling.
3. **Create Layout Structure**: Develop the main layout with a top navigation bar, sidebar, and content area using Tailwind CSS for styling.
4. **Implement Media Recording**: Integrate audio and video recording functionalities using the MediaRecorder API or a library like RecordRTC.
5. **Develop Upload Functionality**: Create a file upload component that allows users to select and upload media files.
6. **Build Note Organization**: Implement a tagging and categorization system for media notes, utilizing React state or a backend service if necessary.
7. **Add Playback Functionality**: Integrate audio and video playback components, ensuring controls are user-friendly.
8. **Implement Search Functionality**: Develop a search bar and functionality to filter notes based on user input.
9. **Ensure Responsiveness**: Test and optimize the layout on various devices to ensure a seamless user experience.
10. **Testing and Deployment**: Conduct thorough testing of all features and deploy the application using platforms like Vercel or Netlify.

## USER EXPERIENCE
Users will interact with the application through a straightforward interface. They can quickly access the media recording feature from the main page, utilize the upload functionality to bring in existing notes, and organize their content using tags. The playback feature will allow users to review their notes easily, while the search functionality enables them to find specific content without hassle. The responsive design ensures that users have a consistent experience whether they are on a desktop or mobile device.