Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a folder structure for the travel planning app with the following organization:
- src/
  - components/          # Reusable components like buttons, forms, cards
  - pages/              # Main application pages (Home, Itinerary, Reviews, etc.)
  - services/           # API service calls and data fetching logic
  - utils/              # Utility functions for common tasks
  - styles/             # CSS or styled-components for global styles
  - App.js              # Main app entry point
  - index.js            # Entry file for React application
- public/
  - index.html          # Main HTML file
- package.json          # Project dependencies and scripts

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: Navigation bar with links to Home, Itinerary, Reviews, and Contact.
2. Footer: Information and links about the app, social media, and contact info.
3. Itinerary Card: Displays travel itinerary details (date, destination, activities).
4. Review Form: Allows users to submit travel reviews.
5. Review List: Displays submitted reviews from users.
6. Loading Spinner: Indicates loading status during API calls.

IMPLEMENTATION APPROACH
1. Install necessary packages: React, React Router, Axios for API calls, etc.
2. Create functional components for each core component.
3. Use React Router to manage page navigation.
4. Implement state management for user input and fetched data using React hooks.
5. Style components using CSS or styled-components, ensuring to follow the design requirements.

Example of a button component:
```javascript
import React from 'react';
import './Button.css';

const Button = ({ text, onClick }) => (
  <button className="custom-button" onClick={onClick}>
    {text}
  </button>
);

export default Button;
```

Example of CSS for the button:
```css
.custom-button {
  background-color: #1978E5;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 15px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
```

ARCHITECTURE CONSIDERATIONS
- Follow a component-based architecture to promote reusability and maintainability.
- Use functional components with hooks for state and lifecycle management.
- Manage side effects (like API calls) using custom hooks or within useEffect.

ERROR HANDLING
- Implement try-catch blocks for API calls to handle errors gracefully.
- Show user-friendly error messages when data cannot be fetched or submitted.

Example of error handling in an API call:
```javascript
const fetchItineraries = async () => {
  try {
    const response = await axios.get('/api/itineraries');
    setItineraries(response.data);
  } catch (error) {
    console.error("Error fetching itineraries:", error);
    setError("Failed to load itineraries. Please try again.");
  }
};
```

TESTING STRATEGY
- Use Jest and React Testing Library for unit and integration tests.
- Write tests for each component to ensure they render correctly and handle user interactions.
- Include snapshot testing for components where applicable.

Example of a simple test for the Button component:
```javascript
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renders button with text', () => {
  render(<Button text="Click Me" />);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});
```

This structured prompt provides a clear roadmap for building the travel planning app, incorporating all necessary specifications and details for effective implementation in Cursor.