Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a searchable database connected to Supabase, allowing extreme weather survivors to track resources, grants, and tools available nationwide. The application will prioritize ease of use and clarity, ensuring users can navigate and find important information without feeling overwhelmed.

## CORE FEATURES
1. **Search Functionality**: Users can easily search for resources based on keywords, categories, or location, facilitating quick access to relevant information.
2. **Resource Listings**: A comprehensive list of resources that includes detailed information such as descriptions, eligibility criteria, and application links.
3. **Filter and Sort Options**: Users can filter results by type, state, or funding availability, and sort by date or relevance to find the most pertinent resources.
4. **User Feedback System**: Survivors can provide feedback on resources they’ve used, helping to enhance the database and assist other users.
5. **Responsive Design**: The application will be optimized for various devices, ensuring accessibility for all users, regardless of their platform.
6. **Contact and Support Section**: A dedicated area where users can reach out for help or report issues regarding resource listings.

## 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 prominent search bar, followed by resource listings presented in card format, with filters on the left sidebar for easy access.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a React application with TypeScript and install required dependencies such as Tailwind CSS and Supabase client.
2. **Create Database Schema**: Set up the Supabase database schema to accommodate resource listings, including fields for title, description, eligibility, and links.
3. **Build UI Components**: Create reusable components for the layout, including the navigation bar, search bar, resource cards, and filters using Tailwind CSS for styling.
4. **Implement Search and Filter Logic**: Add functionality to allow users to search and filter resources dynamically, integrating with Supabase to fetch data.
5. **Add User Feedback System**: Implement a simple form for users to submit feedback on resources, which can be stored back into Supabase.
6. **Test Responsiveness**: Ensure all components are responsive and provide a seamless experience on both desktop and mobile devices.
7. **Deploy Application**: Set up hosting for the application and deploy it, ensuring all Supabase configurations are correctly applied.

## USER EXPERIENCE
Users will start by entering the application, greeted by a clean interface and a prominent search bar. They can begin searching for resources immediately, with options to filter results based on their specific needs. Resource listings will be presented in an easily digestible format, with clear calls-to-action (CTAs) for further information or application links. Users can provide feedback on resources they've accessed, contributing to the robustness of the database. The responsive design ensures that users have a consistent experience whether they are on a desktop or mobile device.