"They don't do it like they used to..."

Open-source government transparency platform tracking quality decline and consumer protection issues across industries using real-time federal data and AI-powered analysis.

This project is built for Open Source Hackfest, competing in:

• 🏆 Code for Good - Using open source tools for consumer protection and social impact
• 🤖 Best Use of Gemini API - AI-powered complaint analysis and trend prediction
• 📚 Best Documentation - Comprehensive docs following government design standards

• Consumers lack centralized access to government complaint data across agencies
• Quality decline goes unnoticed until it's too late
• No AI-powered tools to predict emerging consumer issues and fraud patterns
• Fraud and scams are hard to track across multiple federal databases

• 📊 Live Data Dashboard - Real-time statistics from 4 major federal agencies (CFPB, NHTSA, CPSC, FTC)
• 🔍 Enhanced Smart Search - Advanced search with filtering, sorting, and live API integration
• 📈 Sector Analysis - Visual charts showing complaint trends by industry
• 🏢 Company Rankings - Grade-based rankings with detailed metrics
• ⚠️ Recent Alerts - Latest complaints and recalls with severity indicators

• 🎯 Advanced Filters - Filter by sector (Financial, Automotive, Consumer Products, Technology, Healthcare)
• 📊 Dynamic Sorting - Sort results by Most Complaints, Most Recalls, or Company Name
• 🔄 Real-Time Search - Instant results as you type with result counters
• ⌨️ Keyboard Navigation - Press Enter to search quickly
• 📡 Live API Integration - Fetches real-time data from CFPB, NHTSA, FTC, and CPSC federal databases
• 🎨 Collapsible Filters - Toggle advanced filters panel for cleaner interface
• ⚡ Loading States - Visual feedback during API calls and processing

• 🤖 AI Complaint Analyzer - Analyzes trends and identifies recurring issues
• 💬 Natural Language Search - Ask questions in plain English like "Which financial companies have the most complaints?"
• 🚨 Fraud Pattern Detection - Identifies emerging scam types and vulnerable demographics
• 🤝 Consumer Protection Chatbot - Personalized advice based on complaint data
• ✨ AI Search Toggle - Enable/disable AI-powered search with visual indicator
• 🧠 Smart Intent Detection - AI understands search context and provides relevant results

• 🎨 Government Design Systems - Follows USWDS, GOV.UK, and California DS standards
• ♿ WCAG 2.1 AA Compliant - Fully accessible interface
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile

• Node.js 18 or higher
• npm or yarn
• Google Gemini API Key - Get it here

1. Clone the repository

   git clone https://github.com/bruhdev1290/Quality-control-Portal-
   cd Quality-control-Portal

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

   Edit .env and add your API keys:

   VITE_GEMINI_API_KEY=your_gemini_api_key_here
   VITE_FTC_API_KEY=DEMO_KEY  # Optional

4. Start development server

   npm run dev

5. Open your browser Navigate to http://localhost:5173

npm run build

The production-ready files will be in the dist/ directory.

npm run preview

Click the button below to deploy this project to Netlify instantly:

1. Fork this repository to your GitHub account

2. Sign up/Login to Netlify

3. Create a new site from Git

   • Click "Add new site" → "Import an existing project"
   • Choose "GitHub" and authorize Netlify
   • Select your forked repository

4. Configure build settings (these are already set in netlify.toml):

   • Build command: npm install && npm run build
   • Publish directory: dist
   • Node version: 18

5. Deploy!

   • Click "Deploy site"
   • Your site will be live in minutes with a unique URL
   • You can customize the domain in site settings

Once connected to Netlify, every push to the main branch automatically triggers a new deployment. No manual intervention needed!

The search functionality has been completely overhauled with advanced features, live API integration, and AI-powered natural language processing.

• Sector Filter: Filter results by Financial, Automotive, Consumer Products, Technology, or Healthcare sectors
• Dynamic Sorting: Sort by Most Complaints, Most Recalls, or Company Name (A-Z)
• Collapsible Panel: Toggle advanced filters to keep the interface clean
• Real-time Updates: Filters apply instantly as you change selections

The search now queries real federal databases:

• CFPB API (src/services/cfpbAPI.ts): Fetches live consumer complaint data
• NHTSA API (src/services/nhtsaAPI.ts): Retrieves current vehicle recall information
• Automatic Fetching: APIs are called automatically when you search
• Error Handling: Graceful fallbacks if APIs are unavailable

When enabled (requires Gemini API key):

• Conversational Queries: Ask questions like "show me automotive recalls"
• Intent Detection: AI understands what you're looking for
• Smart Results: Get contextually relevant data
• Visual Feedback: See AI's interpretation of your search

• Keyboard Support: Press Enter to trigger search
• Loading States: Visual spinner during API calls
• Result Counters: See how many companies, events, and sectors match
• Empty States: Clear messaging when no results found
• Responsive Design: Works perfectly on mobile devices

Enhanced Search with Advanced Filters

Toggle filters to refine your search by sector and sort results dynamically

Live Search Results

Real-time filtering showing companies, events, and sectors matching your query

1. Basic Search: Type a company name or sector in the search box
2. Advanced Filters: Click the "Filters" button to show filtering options
3. AI Search: Click the sparkles ✨ button to enable natural language queries
4. Sort Results: Use the "Sort Results By" dropdown to organize data
5. View Results: See filtered companies, events, and sectors below

Standard Search:

• Wells Fargo - Find all data related to Wells Fargo
• Financial - Show all financial sector companies
• NHTSA recalls - Filter by NHTSA recall events

AI-Powered Search (requires Gemini API key):

• Which financial companies have the most complaints?
• Show me automotive recalls
• What are recent fraud reports?

Enshitification-V2/
├── src/
│   ├── enshitification-portal.tsx  # Main application component with enhanced search
│   ├── services/
│   │   ├── geminiAI.ts            # Google Gemini AI integration
│   │   ├── cfpbAPI.ts             # CFPB API service (live data)
│   │   ├── nhtsaAPI.ts            # NHTSA API service (live data)
│   │   ├── ftcAPI.ts              # FTC API service (live data)
│   │   ├── cpscAPI.ts             # CPSC Recall Retrieval API service (NEW!)
│   │   └── cpscAPI.demo.ts        # CPSC API usage examples
│   ├── main.tsx                    # Application entry point
│   └── index.css                   # Global styles
├── docs/
│   ├── API_INTEGRATION.md          # Complete API integration guide
│   ├── CPSC_API_INTEGRATION.md     # CPSC API documentation (NEW!)
│   └── CPSC_INTEGRATION_EXAMPLE.md # CPSC integration examples (NEW!)
├── dist/                           # Production build (generated)
├── index.html                      # HTML template
├── netlify.toml                    # Netlify configuration
├── package.json                    # Dependencies and scripts
├── vite.config.ts                  # Vite bundler configuration
├── tailwind.config.js              # Tailwind CSS configuration
├── tsconfig.json                   # TypeScript configuration
├── .env.example                    # Environment variables template
├── CODE_OF_CONDUCT.md              # Community standards
├── CONTRIBUTING.md                 # Contribution guidelines
├── DEPLOYMENT.md                   # Deployment guide
└── README.md                       # You are here!

• Framework: React 18 with TypeScript
• AI Integration: Google Gemini API for intelligent analysis
• Build Tool: Vite 5
• Styling: Tailwind CSS
• Charts: Recharts
• Icons: Lucide React
• APIs: CFPB, NHTSA, CPSC, FTC federal databases
• Deployment: Netlify (optimized configuration included)
• Design Systems: USWDS, GOV.UK, California DS, Massachusetts Mayflower

This platform aggregates data from four major U.S. federal agencies:

• API: CFPB Consumer Complaint Database API
• Data: Financial complaints, company responses, resolution rates
• Stats: 1.8M+ complaints tracked
• No API key required

• API: NHTSA Datasets and APIs
• Data: Vehicle safety recalls, defect investigations
• Stats: 14K+ recalls tracked
• No API key required

• API: CPSC Recall Retrieval API
• Data: Product recalls, hazards, injuries, manufacturer information
• Implementation: Full TypeScript support with XML/JSON formats in src/services/cpscAPI.ts
• Stats: 8K+ violations tracked
• No API key required
• Documentation: See CPSC API Integration Guide

• API: FTC Consumer Sentinel API
• Data: HSR Early Termination Notices and robocall complaints
• Stats: 5.8M+ fraud/scam complaints
• DEMO_KEY available for testing

To enable browser-based access to federal APIs, we use a CORS proxy service:

• Proxy Service: corsproxy.io
• Affected APIs: CFPB, FTC (and potentially CPSC for some endpoints)
• Why Needed: Federal government APIs don't include CORS headers, preventing direct browser access
• Implementation: See src/services/cfpbAPI.ts and src/services/ftcAPI.ts

For Production Deployment: Consider setting up your own CORS proxy or backend service for better reliability and performance. Alternative proxy services include:

• CORS Anywhere (self-hosted)
• AllOrigins
• Custom backend proxy (recommended for production)

All AI features are fully implemented in src/services/geminiAI.ts with complete error handling and graceful fallbacks.

Analyzes consumer complaints to identify:

• Top 3 recurring issues for any company
• Severity assessment (Low/Medium/High/Critical)
• Trend analysis (Improving/Stable/Worsening)
• Personalized consumer recommendations

Usage: Enable AI search toggle and query company complaint data

Ask questions in plain English and get intelligent results:

• "What are the most common complaints about Wells Fargo?"
• "Show me recent recalls in the automotive sector"
• "Which companies have the worst fraud records?"
• "Which financial companies have the most complaints?"

How it works: AI parses your natural language query, detects intent, and filters results accordingly

AI-powered analysis of FTC data to identify:

• Emerging scam types
• Geographic hotspots
• Most vulnerable demographics
• Preventive recommendations

Usage: Query fraud-related data from FTC database

Get personalized advice based on real complaint data:

• Risk assessments for specific companies
• Guidance on filing complaints
• Understanding your consumer rights

Usage: Ask questions about specific companies or consumer protection topics

To enable AI-powered features:

1. Get API Key: Sign up for Google Gemini API
2. Add to .env: Set VITE_GEMINI_API_KEY=your_key_here
3. Toggle AI Search: Click the sparkles ✨ icon in the search interface
4. Ask Questions: Use natural language queries

Note: The app works without AI features but provides enhanced intelligence when configured.

Built following government design system principles inspired by:

• U.S. Web Design System (USWDS)
• GOV.UK Design System
• California Design System
• Massachusetts Mayflower Design System

• Color Palette: Unit-Connect green gradient hero, CFPB professional tables, Massachusetts bay blue accents
• Typography: Public Sans (California DS standard)
• Accessibility: WCAG 2.1 AA compliance
• Components: UK GOV.UK beta banner, left-bordered cards, government-style data tables

Focus on:

• ✅ Accessibility (WCAG 2.1 AA compliance)
• ✅ Usability and clarity
• ✅ Trust and transparency
• ✅ Mobile-first responsive design

• Real consumer protection - Helps vulnerable populations avoid fraud and unsafe products
• Open source tools - Built entirely with open source technologies
• Social impact - Empowers millions of consumers with government data
• Community driven - Welcomes contributors and scales to additional data sources

• First of its kind - Only platform combining 4 federal agencies with AI analysis
• Predictive insights - Gemini AI identifies emerging issues before they escalate
• Natural language - Makes complex government data accessible to everyone
• Personalized advice - Tailored recommendations based on real complaint patterns

• No user data collection
• No tracking or analytics
• All data sourced from public government databases
• Open source and transparent

Contributions are welcome! We're building a platform to empower consumers through transparency.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• 🔌 Additional data source integrations (FDA, EPA, etc.)
• 🤖 AI model improvements and new Gemini features
• ♿ Accessibility enhancements
• 🌍 Translation/internationalization
• 📊 Data visualization improvements
• 🧪 Test coverage expansion

See CONTRIBUTING.md for detailed guidelines.

Problem: Access to fetch has been blocked by CORS policy

Solution: The application now uses a CORS proxy (corsproxy.io) to handle this automatically. If you still see CORS errors:

1. Check your browser's network tab to ensure the proxy is being used
2. Try clearing browser cache and reloading
3. For production deployments, consider setting up a custom backend proxy

Problem: Error 404: models/gemini-2.5-flash is not found for API version v1

Solution: This has been fixed by updating to @google/generative-ai v0.24.1+ and using the gemini-2.5-flash model. To enable AI features:

1. Get an API key from Google Gemini
2. Add it to your .env file: VITE_GEMINI_API_KEY=your_key_here
3. Restart the development server

Problem: Gemini API not configured

Solution: This is expected behavior when no API key is provided. The app will work without AI features using standard search.

Problem: ERR_CERT_AUTHORITY_INVALID when accessing FTC API

Solution: This has been fixed by routing FTC API calls through the CORS proxy, which also handles SSL certificate issues.

Problem: Too many requests to federal APIs

Solution:

• CFPB, NHTSA: No rate limits on public APIs
• FTC: Use DEMO_KEY for testing, get a real API key for production
• Gemini: Free tier has usage limits, upgrade for production use

Problem: "Some chunks are larger than 500 kB after minification"

Solution: This is a warning, not an error. The app builds successfully. To optimize:

• Consider code splitting with dynamic imports (future enhancement)
• Use build.rollupOptions.output.manualChunks in vite.config.ts

We are committed to providing a welcoming and inclusive environment for all contributors. Please read our Code of Conduct before participating.

This project is licensed under the MIT License - see the LICENSE file for details.

• Data provided by U.S. federal agencies (CFPB, NHTSA, CPSC, FTC)
• AI powered by Google Gemini API
• Design inspired by government design systems (USWDS, GOV.UK, California DS, Massachusetts Mayflower)
• Built for Open Source Hackfest 2024
• Built for transparency and citizen empowerment

Watch our 2-minute demo showcasing the platform's features and AI capabilities: https://vimeo.com/1128404863?fl=pl&fe=sh

This project was created for Open Source Hackfest 2024 with these goals:

1. Empower Consumers - Provide free access to critical government safety and complaint data
2. Democratize AI - Make advanced AI analysis accessible for consumer protection
3. Open Source Impact - Build a scalable, community-driven platform for social good
4. Government Transparency - Aggregate and visualize data from multiple federal agencies
5. Prevent Harm - Help consumers avoid fraud, recalls, and unsafe products

If you have questions or need help:

• 💬 Open an issue on GitHub
• 📖 Check our documentation
• 🤝 Read our contributing guidelines

Made for government transparency and citizen empowerment 🇺🇸

Built for Open Source Hackfest 2024 | Version 2.0.0