We want to create a website.
Generated Prompt
## APPLICATION OVERVIEW This project is a web application designed to facilitate the interaction between copper suppliers and buyers. The platform will provide buyers with an interface to manage and analyze their supply chain, focusing on ecological and social metrics. Suppliers will share information on their production practices, allowing buyers to make informed decisions based on carbon footprints and social circumstances. ## CORE FEATURES 1. **Supplier Information Dashboard**: Buyers will have access to a dashboard displaying detailed profiles of suppliers, including country of origin, carbon footprint data, and social circumstances of production. 2. **Supply Chain Overview**: Buyers can input their procurement data (percentage or raw value from suppliers) to generate a comprehensive overview of their entire supply chain, complete with ecological and social scores. 3. **Filtering and Ranking**: Users can filter suppliers based on various criteria and rank them according to desired metrics such as carbon footprint or social responsibility. 4. **Interactive Maps**: The application will include color-density maps visualizing the geographical distribution of suppliers and their resources, enhancing the understanding of supply chain dynamics. 5. **User Accounts**: Users will be able to create accounts to save preferences, manage supplier lists, and maintain a personalized dashboard experience. 6. **Data Visualization**: The application will provide visual representations of ecological and social scores, helping users to easily interpret complex data. ## 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 main layout will consist of a top navigation bar, a sidebar for filtering options, and a central content area for dashboards and maps. Components will be arranged in a grid format for visual clarity and responsiveness. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript. - **Styling**: Tailwind CSS. - **UI Components**: shadcn/ui. - **State Management**: Redux Toolkit (if needed for complex state management). ## IMPLEMENTATION STEPS 1. **Set up the project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui. 2. **Create the main layout**: Develop the core structure using a top navigation bar, sidebar for filtering, and a central dashboard area. 3. **Design the dashboard**: Implement the supplier information dashboard, ensuring it displays relevant data and is responsive. 4. **Implement user authentication**: Create user registration and login functionalities to allow buyers to save their preferences and data. 5. **Build filtering and ranking functionality**: Allow users to filter suppliers based on various metrics and implement ranking logic. 6. **Integrate interactive maps**: Use a mapping library (like Leaflet or Google Maps) to display supplier locations with color-density features. 7. **Data visualization**: Integrate charting libraries (like Chart.js or D3.js) for displaying ecological and social scores visually. 8. **Testing and deployment**: Conduct thorough testing for usability and responsiveness before deploying the application. ## USER EXPERIENCE Users will begin by creating an account or logging in to access their personalized dashboard. From there, they can input their procurement data to visualize their supply chain, utilizing filtering and ranking features to assess suppliers. The interactive maps will allow users to explore the geographical aspects of their supply sources. Data visualizations will present complex information in an easily digestible format, promoting informed decision-making. This comprehensive prompt outlines a fully functional minimalist light application that meets the user's vision, ensuring a focus on user experience and responsiveness.
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!
