Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
The project will be structured with a clear separation of concerns to enhance maintainability and scalability. The file organization will be as follows:
- src/
  - components/  // Reusable components (buttons, cards, etc.)
  - pages/      // Main application pages (home, menu, blog)
  - styles/     // Global styles and theme
  - utils/      // Utility functions and helpers
  - services/   // API calls and data fetching
  - App.js      // Main application entry point
  - index.js    // Application rendering

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 that includes links to Home, Menu, Blog, and Contact.
2. Menu Section: A dynamic section where the chef can add, edit, and remove menu items with their prices.
3. Blog Section: A section to display articles and recipes, with CRUD functionalities for the chef to manage posts.
4. Footer: Contains contact information and links to social media.
5. Admin Dashboard: A back-office interface for the chef to manage menus and blog posts.

IMPLEMENTATION APPROACH
1. Set up the project using Create React App.
2. Install necessary dependencies, including React Router for navigation and Axios for API calls.
3. Create components as per the structure defined above.
4. Implement state management, possibly using Context API or Redux.
5. Create forms for adding/editing menu items and blog posts.
6. Use Fetch or Axios for API calls to a backend service that manages data.
7. Ensure responsiveness using CSS Flexbox or Grid.

Example of a Menu Item Component:
```javascript
import React from 'react';

const MenuItem = ({ item, onEdit, onDelete }) => {
  return (
    <div className="menu-item">
      <h3>{item.name}</h3>
      <p>{item.price}</p>
      <button onClick={() => onEdit(item.id)}>Edit</button>
      <button onClick={() => onDelete(item.id)}>Delete</button>
    </div>
  );
};

export default MenuItem;
```

ARCHITECTURE CONSIDERATIONS
Utilize a component-based architecture to promote reusability. Each feature should be encapsulated in its component, making the application modular. For state management, consider using Context API or Redux to manage the global state of the application. For the backend, you can use Node.js with Express and MongoDB to handle data storage and retrieval.

ERROR HANDLING
Implement error handling in your API calls by using try-catch blocks and displaying user-friendly error messages. Additionally, validate user inputs and ensure the application can gracefully handle unexpected states.

TESTING STRATEGY
Adopt a testing strategy that includes unit tests for components using Jest and React Testing Library. Implement integration tests for API calls and end-to-end tests using Cypress to ensure the application works as intended in a real-world scenario. 

Please provide detailed, production-ready code that follows best practices for Cursor.