Website based on the Chinese 24 Solar Terms
Generated Prompt
## APPLICATION OVERVIEW This project is a web application focused on well-being centered around the Chinese 24 Solar Terms. Users will be able to explore diet and meal recommendations tailored to each solar term, with the ability to switch between English and Chinese. The application will provide personalized meal suggestions based on users' regions (United States, China, and UK) and will feature interactive elements for enhanced user engagement. ## CORE FEATURES 1. **Today**: A dynamic page showcasing the current solar term with relevant ingredients, activities, and a suggested meal of the day. 2. **Weekly**: A section that outlines the weekly activities and meals, featuring 5 main meals, 2 soups, 1 dessert, and 3 side dishes, all aligned with the current solar term. 3. **Calendar**: An interactive wheel displaying all 24 solar terms. Users can click on each term to reveal detailed information about that specific term. 4. **Shopping List**: A feature allowing users to add ingredients and meals to a shopping list. Users can export this list for convenience. 5. **Profile Management**: Users can update their profile details, including name and image, and save their favorite meals and ingredients. 6. **Language Toggle**: A header toggle for switching between English and Chinese translations seamlessly. ## 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 top navigation bar for easy access to all pages, a central content area showcasing the current solar term, and clearly defined sections for the weekly meals and calendar. Ample white space will be utilized to create a serene and focused user experience. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript. - **Styling**: Tailwind CSS. - **UI Components**: shadcn/ui for consistent UI elements. - **State Management**: Use React Context API or Zustand as needed for managing user preferences and state. ## IMPLEMENTATION STEPS 1. **Set up the development environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Create the main components**: Build components for the Today, Weekly, Calendar, Shopping List, and Profile pages. 3. **Implement routing**: Use React Router to navigate between the different application pages. 4. **Develop the language toggle feature**: Implement functionality to switch between English and Chinese content. 5. **Design the layout**: Apply Tailwind CSS classes to achieve the minimalist design and ensure responsive behavior. 6. **Implement the shopping list feature**: Create functionality for adding, managing, and exporting shopping lists. 7. **Test functionality**: Conduct thorough testing of all features to ensure a smooth user experience. 8. **Deploy the application**: Host the web application on a suitable platform (e.g., Vercel, Netlify). ## USER EXPERIENCE Users will have a seamless experience, starting from the landing page where they can easily navigate to different sections. The language toggle will allow for effortless switching between English and Chinese. Each feature will be intuitively laid out, encouraging users to explore their diet and well-being aligned with the 24 Solar Terms. The use of minimalist design principles will ensure that users can focus on the content without distractions, enhancing their overall engagement with the application.
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!
