Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to provide a complete authentication module, enabling users to register and log in using their email addresses from various providers such as Gmail and Outlook. It includes a dashboard for managing API keys securely and integrates an Edge Function for external geocoding API consumption, ensuring that only authorized requests are processed with valid API keys.

## CORE FEATURES
1. **User Authentication**: Implement registration and login functionalities using JWT-based authentication for secure access.
2. **Settings Dashboard**: A dedicated tab for users to create, view, and manage their API keys, enhancing user control over their integrations.
3. **API Key Authorization**: All external API requests will require a valid API key generated from the Settings tab, ensuring secure access to the geocoding API.
4. **Edge Function Implementation**: Develop an Edge Function to facilitate external consumption of the geocoding API, restricted by valid API keys.
5. **Responsive Design**: The application will be fully responsive, adapting to different screen sizes for an optimal user experience across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean and simple design with plenty of white space, focusing on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds for a modern and fresh look.
- **Layout**: The main layout will feature a top navigation bar, a sidebar for the Settings tab, and a content area that displays relevant information and actions.
- **Typography**: Use sans-serif fonts such as Inter or Roboto for body text, with larger weights for headings to establish a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component-based architecture.
- **Styling**: Tailwind CSS to facilitate rapid styling and maintain consistency across components.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: Implement Context API or a state management library like Redux if necessary for managing global state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Authentication Module**: Implement user registration and login functionalities, ensuring JWT-based authentication for secure sessions.
3. **Develop Settings Dashboard**: Create a new Settings tab where users can generate and manage API keys. This tab should include forms for creating new keys and lists for viewing existing keys.
4. **Implement Edge Function**: Set up the Edge Function to handle requests to the geocoding API, ensuring it validates the API key before processing.
5. **Apply Responsive Design**: Ensure that all components are styled to be responsive, testing on various devices to ensure a seamless user experience.
6. **Testing and Debugging**: Conduct thorough testing, including unit tests for authentication and integration tests for API key management and Edge Function interactions.

## USER EXPERIENCE
Users will start by visiting the authentication page to register or log in. Upon successful login, they will be directed to the dashboard, where they can access the Settings tab to generate and manage their API keys. When using the geocoding API, they will input their requests, which will be validated against their provided API keys, ensuring security and proper functionality. The interface will be intuitive and responsive, providing a smooth experience across all devices.