Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a new directory for your project named "AirbnbForNigeria". Inside this directory, set up the following file structure:
- /src
  - /components
    - Header.jsx
    - Footer.jsx
    - PropertyCard.jsx
    - SearchBar.jsx
    - BookingForm.jsx
  - /pages
    - HomePage.jsx
    - PropertyDetailsPage.jsx
    - AboutPage.jsx
    - ContactPage.jsx
  - /utils
    - api.js
    - helpers.js
  - /styles
    - global.css
  - /tests
    - Header.test.js
    - PropertyCard.test.js
  - App.jsx
  - index.js
- package.json

Ensure that all components are named using PascalCase and files are named according to their functionality.

DESIGN REQUIREMENTS
- 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

CORE COMPONENTS
1. Header: Contains navigation links to Home, About, Contact, and Search functionality.
2. Footer: Displays contact information and links to social media.
3. PropertyCard: A card component to display individual property listings with an image, title, price, and booking button.
4. SearchBar: A component that allows users to search for properties based on location, date, and number of guests.
5. BookingForm: A form for users to fill out when they want to book a property, including user details and payment information.

IMPLEMENTATION APPROACH
1. Set up React Router for navigation between pages.
2. Create the Header component with navigation links and the SearchBar component.
3. Use the PropertyCard component in the HomePage to display a list of properties fetched from the API.
4. Implement the BookingForm component in the PropertyDetailsPage for booking functionality.
5. Style components using CSS modules or styled-components, applying the specified design guidelines.

Example code for the Header component:
```jsx
import React from 'react';
import './Header.css'; // Ensure to create this CSS file

const Header = () => {
  return (
    <header>
      <h1>Airbnb for Nigeria</h1>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;
```

ARCHITECTURE CONSIDERATIONS
Implement a component-based architecture where each component handles its own state and presentation logic. Use Context API or Redux for global state management, especially for user authentication and property booking data. 

ERROR HANDLING
Implement try-catch blocks around API calls in the utils/api.js file to handle network errors gracefully. Show user-friendly error messages in the UI when errors occur during property booking or fetching data.

TESTING STRATEGY
Use Jest and React Testing Library for unit testing your components. Ensure that each component has at least one test case that verifies its rendering and functionality. For example, test the PropertyCard component to ensure it displays the correct property information.

```javascript
import { render, screen } from '@testing-library/react';
import PropertyCard from './PropertyCard';

test('renders property title', () => {
  render(<PropertyCard title="Beautiful Home" price="100" />);
  const titleElement = screen.getByText(/Beautiful Home/i);
  expect(titleElement).toBeInTheDocument();
});
```

Follow these guidelines and use best practices to create a robust and scalable web application that serves as a marketplace for property rentals in Nigeria.