Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Meal Log app is a web application designed to help users track their meals in a visually appealing and harmonious way inspired by Japanese Moritsuke aesthetics. The app emphasizes simplicity and balance while allowing users to rate their meals, fostering mindfulness in their eating habits.

## CORE FEATURES
1. **Meal Logging**: Users can log their meals with details such as name, ingredients, and portion sizes.
2. **Rating Functionality**: Users can rate each meal on a scale of 1 to 5, allowing for easy reflection on their food choices.
3. **Colorful Display**: Meals are displayed using a harmonious color palette of white, black, red, yellow, and green, enhancing the visual appeal.
4. **Off-Center Layout**: Each meal entry is intentionally placed off-center to create a visually interesting and balanced layout.
5. **Review History**: Users can view past meals and their ratings, helping them to track their dietary choices over time.
6. **User Profile**: A simple user profile section for personal settings and meal history management.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design should feature a clean and simple aesthetic with ample white space, utilizing a limited color palette centered around the specified five colors to enhance harmony and focus on the content.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and comfort.
- **Layout**: A grid layout that showcases meal entries with ample spacing, emphasizing off-center placements for visual interest.
- **Typography**: Use a clean sans-serif font for headings (e.g., "Roboto") and a slightly different serif font for body text (e.g., "Merriweather") to create a clear hierarchy and improve readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type checking and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling that aligns with the minimalist design approach.
- **UI Components**: Utilize shadcn/ui for pre-built UI components that match the aesthetic.
- **State Management**: Use React’s Context API or Zustand for managing global state, particularly for meal ratings and user profiles.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React app with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project.
3. **Create Component Structure**: Build components for meal logging, meal display, rating system, and user profile.
4. **Implement Routing**: Use React Router for navigating between different sections of the app (e.g., home, log meal, view history).
5. **Style Components**: Apply Tailwind CSS classes to components, ensuring adherence to the minimalist design and color specifications.
6. **Integrate State Management**: Implement Context API or Zustand for managing meal data and user ratings across components.
7. **Testing**: Conduct usability testing to ensure the app is accessible and user-friendly.

## USER EXPERIENCE
Users will experience a seamless and intuitive interface where they can easily log meals, rate them, and visually appreciate their meal history. The off-center layout provides an aesthetically pleasing browsing experience, while the harmonious color scheme enhances mood and engagement with the app. Users can interact with the rating system through simple click gestures, making the process of reflecting on meals quick and effortless. The design focuses on a responsive layout, ensuring usability on both desktop and mobile devices.