You are an expert AI assistant tasked with generating the entire codebase for a single-page application (SPA) called "TrustPilot AI". This application aims to help investors and startup ecosystem players quickly identify potentially fraudulent or untrustworthy startup founders by leveraging public data and curated lists. The goal is to provide a risk assessment tool that flags individuals or companies with a history of questionable practices, thereby reducing investment risk and protecting stakeholders.
PROJECT OVERVIEW:
- **Purpose:** To create a web application that allows users to search for startup founders and companies and instantly see an aggregated risk score and associated flags related to potential fraud or untrustworthiness.
- **Problem Solved:** The current process of vetting startup founders is often manual, time-consuming, and relies on scattered information. This application centralizes critical risk data, providing a quick, data-driven insight.
- **Value Proposition:** Empower investors and ecosystem players with timely, actionable intelligence to make more informed decisions, mitigate risks, and avoid fraudulent actors.
TECH STACK:
- **Frontend Framework:** React (using Vite for fast development)
- **Styling:** Tailwind CSS for utility-first styling and rapid UI development.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for client-side navigation.
- **API Client:** Axios for making HTTP requests.
- **Form Handling:** React Hook Form with Zod for validation.
- **Icons:** Lucide React for a consistent icon set.
- **Deployment:** Basic instructions for Vercel or Netlify.
CORE FEATURES:
1. **Search Functionality:**
- **User Flow:** The user encounters a prominent search bar on the homepage. They type a founder's name or a company name. Upon submitting the search (e.g., pressing Enter or clicking a search button), the application queries its backend (simulated for MVP) and displays the results.
- **Details:** Search should be debounced to avoid excessive requests. Clear loading states and error messages should be displayed.
2. **Risk Profile Display:**
- **User Flow:** After a search, the user is presented with a dedicated results page or a modal. This page shows the founder/company name, a prominent overall Risk Score (e.g., 1-100), and categorized flags (e.g., 'Past Fraud Allegations', 'Regulatory Actions', 'Negative Media Mentions', 'Disputed Funding Rounds').
- **Details:** The score should be visually represented (e.g., color-coded bar or gauge). Each flag should have a brief explanation and, if possible, a link to the source data.
3. **Data Source Integration (Simulated):**
- **User Flow:** The application displays data points attributed to specific sources (e.g., 'Forbes Fraud List', 'SEC Filings', 'News Archives'). For the MVP, this data will be mock data.
- **Details:** Clearly indicate the origin of each piece of information to maintain transparency.
4. **Basic User Authentication (Optional for MVP, but good to consider for prompt):**
- **User Flow:** A simple sign-up/login process allows users to save searches or receive basic notifications.
- **Details:** For MVP, focus on the core search and display; authentication can be a future enhancement.
UI/UX DESIGN:
- **Layout:** Single-page application. A clean, modern, and professional design. A prominent hero section with the search bar on the landing page. Subsequent views (search results) should be accessible via routing without full page reloads.
- **Color Palette:** Primary: Dark blue (#1E3A8A), Secondary: Teal (#14B8A6), Accent: Orange (#F97316) for alerts/scores. Neutral: Grays (#F3F4F6, #9CA3AF, #1F2937).
- **Typography:** Use a clean sans-serif font like Inter or Poppins. Clear hierarchy for headings, body text, and labels.
- **Responsive Design:** Mobile-first approach. Layouts must adapt seamlessly to various screen sizes (mobile, tablet, desktop). Use Tailwind CSS's responsive prefixes (sm:, md:, lg:).
- **Key Components:** Navbar, SearchBar, RiskScoreDisplay, FlagList, Footer, LoadingSpinner, ErrorMessage.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing.
- `Layout.jsx`: Wrapper component for consistent Navbar and Footer.
- `Navbar.jsx`: Contains logo and navigation links (if any).
- `HomePage.jsx`: Landing page with the hero section and primary search bar.
- `SearchBar.jsx`: Input component for founder/company search. Props: `onSearch` (callback function).
- `SearchResultsPage.jsx`: Displays search results. Receives search query via route params. Fetches data and renders `RiskProfileDisplay`.
- `LoadingSpinner.jsx`: Displays a loading indicator. Props: `size` (string).
- `ErrorMessage.jsx`: Displays error messages. Props: `message` (string).
- `RiskProfileDisplay.jsx`: Shows the detailed risk profile for a founder/company. Props: `profileData` (object).
- `RiskScoreGauge.jsx`: Visual representation of the risk score (e.g., a circular gauge or progress bar). Props: `score` (number).
- `FlagList.jsx`: Renders a list of risk flags. Props: `flags` (array of objects, each with `title`, `description`, `source`, `link`).
- `Footer.jsx`: Contains copyright and essential links.
DATA MODEL:
- **`SearchResult` Type:**
```json
{
"id": "string",
"name": "string", // Founder or Company Name
"overallRiskScore": number, // e.g., 0-100
"riskFlags": [
{
"id": "string",
"title": "string", // e.g., "Alleged Fraudulent Activity"
"description": "string", // Brief explanation
"source": "string", // e.g., "Forbes Fraud List", "Regulatory Filing"
"sourceUrl": "string | null" // Link to original source if available
}
],
"companyInfo": {
"foundedDate": "string | null",
"investors": "array<string> | null",
"fundingRounds": "array<string> | null"
}
}
```
- **State Management (Zustand):**
- `searchStore`: Contains `searchQuery` (string), `searchResults` (array of `SearchResult`), `isLoading` (boolean), `error` (string | null).
- `fetchSearchResults(query)`: Action to fetch data.
- **Local Storage:** For storing simple user preferences or recent searches (optional for MVP).
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between routes using `Framer Motion` or similar.
- **Search Bar:** Slight scale-up effect on focus. Clear button appears on input.
- **Hover Effects:** Buttons and clickable elements should have subtle hover states (e.g., slight background color change or scale).
- **Loading States:** Use the `LoadingSpinner` component. Overlay the search results area with the spinner while data is fetching. Make button clicks indicate loading.
- **Micro-interactions:** Smooth expansion/collapse of flag details if applicable.
EDGE CASES:
- **No Search Results:** Display a clear message like "No results found for '[query]'. Please try a different name."
- **API Errors:** Show a user-friendly error message (e.g., "Could not retrieve data. Please try again later."). Avoid exposing raw error details.
- **Empty Search Query:** Disable search button or show inline validation message.
- **Data Missing:** Gracefully handle missing fields in `SearchResult` data (e.g., display 'N/A' or omit the section).
- **Accessibility (a11y):** Use semantic HTML. Ensure proper ARIA attributes where needed. Keyboard navigation should be fully supported. Sufficient color contrast.
- **Rate Limiting:** If simulating API calls, consider potential rate limits (though less critical for mock data).
SAMPLE DATA (Mock Data Format - `SearchResult` object):
1. **Founder with Flags:**
```json
{
"id": "fndr_001",
"name": "Alex Mercer",
"overallRiskScore": 85,
"riskFlags": [
{
"id": "flag_001",
"title": "Prior SEC Investigation",
"description": "Investigated for securities fraud in 2019 related to an ICO.",
"source": "SEC Filings Database",
"sourceUrl": "https://www.sec.gov/"
},
{
"id": "flag_002",
"title": "Forbes 'Most Fraudulent' Mention",
"description": "Named in Forbes' 2022 list of founders with alleged fraudulent practices.",
"source": "Forbes",
"sourceUrl": "https://www.forbes.com/sites/example/most-fraudulent"
}
],
"companyInfo": {
"foundedDate": "2018-05-15",
"investors": ["Angel Investor X", "VC Fund Y"],
"fundingRounds": ["Seed", "Series A"]
}
}
```
2. **Company with Moderate Risk:**
```json
{
"id": "cmpny_002",
"name": "Innovate Solutions Ltd.",
"overallRiskScore": 60,
"riskFlags": [
{
"id": "flag_003",
"title": "Class Action Lawsuit Filed",
"description": "Facing a class-action lawsuit over product misrepresentation.",
"source": "Court Records",
"sourceUrl": null
}
],
"companyInfo": {
"foundedDate": "2020-01-10",
"investors": ["VC Fund Z"],
"fundingRounds": ["Seed"]
}
}
```
3. **Founder with No Major Flags:**
```json
{
"id": "fndr_003",
"name": "Sarah Chen",
"overallRiskScore": 35,
"riskFlags": [],
"companyInfo": {
"foundedDate": "2021-11-20",
"investors": [],
"fundingRounds": []
}
}
```
4. **Company with Limited Public Data:**
```json
{
"id": "cmpny_004",
"name": "Quantum Leap Corp",
"overallRiskScore": 20,
"riskFlags": [],
"companyInfo": {
"foundedDate": null,
"investors": null,
"fundingRounds": null
}
}
```
5. **Founder with Negative Media Mentions:**
```json
{
"id": "fndr_005",
"name": "Ben Carter",
"overallRiskScore": 70,
"riskFlags": [
{
"id": "flag_005",
"title": "Negative Media Coverage",
"description": "Multiple news articles questioning business ethics and practices.",
"source": "Major News Outlets",
"sourceUrl": null
}
],
"companyInfo": {
"foundedDate": "2019-03-01",
"investors": ["Angel Investor Y"],
"fundingRounds": ["Pre-Seed"]
}
}
```
DEPLOYMENT NOTES:
- **Build Command:** `npm run build` or `yarn build`.
- **Environment Variables:** Use `.env` file for API keys (if external APIs were used) or base URLs. For Vercel/Netlify, these are configured in the project settings.
- **Performance Optimizations:** Ensure code splitting (handled by Vite/React Router). Optimize images. Minimize bundle size. Implement lazy loading for components/routes where appropriate.
- **HTTPS:** Ensure the deployed application uses HTTPS.
- **CORS:** If a real backend is used, ensure proper CORS configuration.
- **Favicon & Manifest:** Include a favicon and a web app manifest for better PWA experience.