Website made for Monterey Bay scuba divers that measures wind, water currents from swells, and water temperature using the windy website:...
Generated Prompt
## APPLICATION OVERVIEW Create a web application specifically designed for Monterey Bay scuba divers, featuring real-time data on wind, water currents, and water temperature. The application will also include a dedicated section for tracking sea lion gatherings and Territorial Bulls, alongside a contact page and a fun fake store for a sea lion plush toy. ## CORE FEATURES 1. **Real-Time Weather Data**: Integrate with Windy API to display current wind, water currents, and temperature data for Monterey Bay. 2. **Sea Lion Tracking**: A dedicated page that shows the latest locations and groupings of sea lions, including any reported Territorial Bulls in the area. 3. **Photo Gallery**: A curated gallery showcasing images of sea lions and marine life, enhancing the visual appeal and user engagement. 4. **Contact Page**: A simple contact form with four empty fields for users to get in touch, including name, email, message, and subject. 5. **Fake Store Page**: An e-commerce styled page featuring a plush sea lion, with explicit text stating that it is not a real product, adding a humorous touch to the site. ## 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 layout will feature a hero section at the top, followed by sections for features, the sea lion tracking page, photo gallery, contact form, and the fake store. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Context API or Zustand for managing global state (if needed). ## IMPLEMENTATION STEPS 1. **Set up the React app**: Initialize a new project using Create React App with TypeScript. 2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components. 3. **Create Pages**: Set up the main components for each feature: Home, Sea Lion Tracking, Gallery, Contact, and Fake Store. 4. **Integrate Windy API**: Implement API calls to fetch real-time weather data and display it on the homepage. 5. **Build Sea Lion Tracking**: Create a dynamic page that updates with the latest data on sea lion locations and groupings. 6. **Design the Contact Form**: Implement form validation and submission handling for the contact page. 7. **Develop Fake Store**: Create a page that displays the plush toy with clear disclaimers about it being a fake product. 8. **Responsive Design**: Ensure all components are responsive and look good on various devices. 9. **Final Testing**: Conduct thorough testing to fix any bugs and ensure a smooth user experience. ## USER EXPERIENCE Users will land on a visually appealing homepage featuring the latest weather information and an engaging layout. They can easily navigate to the sea lion tracking page to view current groupings, browse the photo gallery to enjoy marine life images, fill out the contact form to reach out, and visit the fake store page for a lighthearted shopping experience. The clean design and intuitive navigation will enhance user engagement and satisfaction.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
