Add a user rating system to the platform.
Generated Prompt
## APPLICATION OVERVIEW The project is a web application designed to add a user rating system to an existing platform. This system allows users who have completed purchases to rate sellers on a scale of 1 to 10 stars, enhancing seller credibility and buyer trust without redesigning the current website. ## CORE FEATURES 1. **Purchase Verification**: Only users who have completed a purchase can rate the seller they purchased from, ensuring that ratings are reliable and legitimate. 2. **Single Rating per Transaction**: Each buyer can rate a seller only once per completed transaction, maintaining the integrity of the ratings. 3. **Rating Scale**: Users can provide ratings on a scale of 1 to 10 stars, allowing for nuanced feedback. 4. **Seller Profile Display**: The seller's average rating and total number of ratings will be displayed prominently on their user profile page. 5. **Self-Rating Prevention**: Users will be prevented from rating themselves, ensuring unbiased ratings. 6. **Automatic Score Updating**: Ratings will be stored and the seller's average score will be updated automatically as new ratings are submitted. ## 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 maintain the existing structure of the platform, integrating the rating system seamlessly into user profiles and purchase confirmations. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux or Context API as needed for managing rating states. ## IMPLEMENTATION STEPS 1. **Set Up Project Structure**: Create a React project with TypeScript and integrate Tailwind CSS for styling. 2. **Implement User Authentication Logic**: Ensure users are authenticated and have completed purchases before allowing ratings. 3. **Create Rating Component**: Develop a star rating component using shadcn/ui for consistent styling. 4. **Integrate Rating Logic**: Allow users to submit ratings and prevent self-rating through conditional checks in the submission process. 5. **Store Ratings**: Use a backend service (e.g., Firebase, Node.js) to store ratings and calculate average scores dynamically. 6. **Display Ratings**: Update the seller profile page to show the average rating and total ratings using React hooks for state management. ## USER EXPERIENCE Users will interact with the rating system after completing a purchase. They will see a prompt to rate the seller, select their rating using the star component, and submit their feedback. The seller's profile page will reflect the updated rating instantly, providing visual confirmation of their contribution. The interface will remain consistent with the current design, ensuring a smooth transition for users familiar with the platform. This prompt outlines a clear approach to implementing a user rating system within the existing platform, adhering to all specified requirements and maintaining the current design integrity.
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!
