Mon projet d'appele HyperBien.
Generated Prompt
## APPLICATION OVERVIEW HyperBien is a web application designed to facilitate the reservation of cargo bikes equipped for varroa treatment for beekeepers. Users can easily book treatments through an intuitive interface, while the back-office allows for efficient resource management, including availability tracking and reservation oversight. ## CORE FEATURES - **User Reservations**: Beekeepers can view available cargo bikes and book treatments directly through the site, selecting dates and times. - **Resource Management**: Admin users can manage cargo bikes by adding names, descriptions, photos, and setting availability for each bike. - **Reservation Tracking**: Admins can view and manage all reservations, including the ability to add comments and change statuses (requested, confirmed, completed). - **Live Calendar Sync**: A live calendar feature allows users to synchronize their bookings with preferred calendar applications for easy tracking. - **Batch Input**: Efficiently manage resource details and availability via batch input capabilities in the back-office. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability and focus on content. - **Color Mode**: Light theme with dark text on light backgrounds for a clear and accessible viewing experience. - **Layout**: - A clear hero section at the top featuring a prominent call-to-action for booking. - Followed by a section highlighting key features of the cargo bike and benefits of the treatment. - A section for testimonials from satisfied beekeepers. - A footer with contact information and links to social media. - **Typography**: Use a modern sans-serif font for headings and body text to ensure clarity and easy readability. Maintain a clear hierarchy with larger font sizes for headings and consistent spacing. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust type checking and component-based architecture. - **Styling**: Tailwind CSS for utility-first styling, enabling rapid UI development and customization. - **UI Components**: Utilize shadcn/ui for pre-built, customizable components that align with the minimalist design. - **State Management**: Use React Context or Redux as needed for managing application state and user sessions. ## IMPLEMENTATION STEPS 1. **Set up the React Application**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Create the User Interface**: Build the landing page layout with a hero section, features section, and testimonials. 3. **Implement User Reservations**: Develop the booking functionality, allowing users to select dates and times and submit their reservations. 4. **Back-Office Management**: Create an admin panel for managing resources, including input forms for adding/editing bike details and availability. 5. **Reservation Tracking**: Implement the feature to view and manage reservations, including comments and status updates. 6. **Calendar Integration**: Develop the live calendar synchronization feature using a suitable API to allow users to sync bookings. 7. **Testing and Optimization**: Conduct thorough testing of all features for usability and ensure responsiveness across devices. ## USER EXPERIENCE Users will have a smooth experience booking their treatments through a simple, guided process. Beekeepers can quickly navigate through available bikes, select their preferred treatment times, and confirm bookings with minimal clicks. The back-office will provide admins with a streamlined interface for managing resources effectively, ensuring that all operations run smoothly and efficiently. The live calendar feature will enhance usability, making it easy for users to keep track of their appointments.
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!
