Umów wizytę - Front end for my app - React, vite, tailwind. And prepare it for backend in Django. The app is a website for beauty saloon, it...
Generated Prompt
## APPLICATION OVERVIEW
This application is a web app designed for a beauty salon, allowing clients to book appointments while providing an administrative dashboard for salon owners and staff. The application will be built using React and Vite, with Tailwind CSS for styling, and will be developed in Polish to cater to the local audience.Remember that backend will be added later- it will be developed in Django Python. So only do Frontend.
## CORE FEATURES
1. **Home Page**: A welcoming homepage showcasing the salon's ambiance, services, and a gallery of images to attract potential clients.
2. **Services Section**: Detailed descriptions of each service offered, accompanied by images for better visualization.
3. **Pricing Page**: A clear and concise display of the pricing for all services, ensuring transparency for clients.
4. **Appointment Booking ("umów wizytę")**: A user-friendly interface for clients to select services, pick available dates and times, and fill out their personal information for appointment confirmation.
5. **Admin Panel**: A secure login for salon owners and staff to manage appointments, update services, and view customer details. This includes a calendar interface to visualize bookings.
6. **Notifications**: Automated reminders sent via email/SMS to clients regarding their appointments, enhancing customer experience.
## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean and simple design with plenty of white space, focusing on easy navigation and readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure clarity and comfort for users.
- **Layout**: The main layout will feature a top navigation bar, a hero section on the homepage, followed by services and pricing sections, and a footer with contact information. The admin dashboard will utilize a grid layout resembling a calendar with time slots for each day.
- **Typography**: Gentle, elegant fonts suitable for a beauty salon, ensuring legibility and a pleasant visual experience. Consider using rounded sans-serif fonts for a softer appearance.
## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type checking and maintainability.
- **Styling**: Tailwind CSS for utility-first styling, ensuring a responsive and modern design.
- **UI Components**: Utilize shadcn/ui components for consistent design and enhanced user experience.
- **State Management**: Use React's built-in state management or Context API if necessary for managing global state.
## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Vite and configure TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Pages**: Develop the following pages: Home, Services, Pricing, and Appointment Booking. Implement routing for navigation.
4. **Build Admin Panel**: Create a secure login feature, followed by a dashboard that displays a Google-like calendar for appointments.
5. **Implement Appointment Logic**: Build logic for clients to select services, dates, and times, with availability checking based on admin settings.
6. **Set Up Notifications**: Integrate a notification system to send reminders to clients via email or SMS.
7. **Test Functionality**: Conduct thorough testing of all features, ensuring a smooth user experience and fixing any bugs.
## USER EXPERIENCE
Key user interactions include the easy navigation through service offerings, a straightforward appointment booking process, and a seamless login experience for salon administrators. Clients will appreciate the clarity of the pricing and service descriptions, while salon staff will find the calendar interface intuitive for managing daily operations. The overall experience will be designed to create a sense of comfort and professionalism, aligning with the beauty salon's brand identity.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!
