Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed to serve as an electronic agenda, allowing users to add reminders and receive notifications on their phones when these reminders are approaching their specified date and time. This app aims to enhance productivity and organization for users by providing a simple and intuitive interface for managing their schedules.

## CORE FEATURES
1. **Reminder Creation**: Users can easily create reminders with customizable titles, dates, and times.
2. **Notification System**: The app will send timely notifications to users' phones to alert them of upcoming reminders.
3. **User Authentication**: Users can create accounts to securely save and manage their reminders.
4. **Reminder List View**: A clean and organized view to display all active reminders, allowing easy access and management.
5. **Edit and Delete Reminders**: Users can modify or remove existing reminders as needed.
6. **Snooze Functionality**: Users can snooze reminders for a specified duration if they are not ready to act on them immediately.

## 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 reminders, and a footer. The content area will include sections for adding new reminders and displaying the list of existing reminders.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux for managing reminder state

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, TypeScript, Tailwind CSS, shadcn/ui).
2. **Create the Authentication Module**: Implement user registration and login functionality using Firebase Authentication or a similar service.
3. **Design the UI Components**: Build reusable components for buttons, forms, and notification displays using Tailwind CSS for styling.
4. **Implement Reminder CRUD Functionality**:
   - Create a form component for adding reminders.
   - Set up state management for storing reminders.
   - Implement editing and deleting functionalities.
5. **Integrate Notification System**: Use the browser's Notification API or a service like Firebase Cloud Messaging to send notifications to users.
6. **Test and Optimize**: Ensure that the application is responsive, user-friendly, and functions correctly across different devices and browsers.

## USER EXPERIENCE
Users will have a seamless experience from the moment they log in. The dashboard will prominently feature a "Create Reminder" button, encouraging interaction. Users can easily navigate through their list of reminders, edit or delete them, and receive timely notifications. The minimalist design will ensure that users can focus on their tasks without distractions, enhancing overall usability and satisfaction.