Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to scrape and retrieve content from specified URLs, returning the results in Markdown format. It aims to provide users with a simple interface to input URLs and receive formatted text outputs, focusing on a clean and efficient user experience.

## CORE FEATURES
1. **URL Input**: A text input field where users can enter the URL they wish to scrape.
2. **Fetch Data Button**: A button that triggers the scraping process, sending the request to the backend.
3. **Markdown Output Display**: A section where the returned Markdown content is displayed after the fetch operation.
4. **Error Handling**: A mechanism to display error messages if the scraping fails or if no Markdown content is returned.
5. **Responsive Design**: Ensures the application is accessible and functional on various devices, including mobiles and tablets.
6. **User Authentication (optional)**: If needed, a simple login/signup feature to manage user sessions.

## 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 should consist of a centered form with the URL input at the top, followed by the fetch button, and below that, the output display area for the Markdown content. Ensure ample whitespace between elements for clarity and ease of use.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (for simple state management needs)

## IMPLEMENTATION STEPS
1. **Setup Project**: Create a new React application with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Design the Layout**: Structure the main layout as described in the design specifications, ensuring responsiveness.
3. **Create the URL Input Component**: Develop a component for users to input the URL they want to scrape.
4. **Implement the Fetch Data Button**: Add functionality to the button that captures the input value and sends a request to the backend using the provided curl command format.
5. **Display Markdown Output**: Create a component to display the returned Markdown content, ensuring proper styling and error handling.
6. **Test the Application**: Verify that the application works as intended, checking for proper handling of successful fetches and errors.

## USER EXPERIENCE
Users will be greeted with a minimalist interface featuring an input field to enter the target URL. Upon clicking the fetch button, the application will send a request to retrieve the Markdown content. Users will see the results displayed neatly below the input, with any errors clearly indicated if the fetch fails. The design will ensure that all elements are easy to navigate, with a focus on clarity and accessibility across devices.