{"id":31658167,"url":"https://github.com/hk-dev13/envoyou-page-react","last_synced_at":"2026-04-02T01:03:08.307Z","repository":{"id":312734658,"uuid":"1048498957","full_name":"hk-dev13/envoyou-page-react","owner":"hk-dev13","description":"Environmental Data Verification API-Landing-page","archived":false,"fork":false,"pushed_at":"2025-09-30T00:38:08.000Z","size":1240,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-07T15:25:35.398Z","etag":null,"topics":["api","css","html5","javascript","landingpage","permit","react","reactjs","tailwindcss","tailwindcss-v4","vitejs","website"],"latest_commit_sha":null,"homepage":"https://www.envoyou.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hk-dev13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-01T14:36:16.000Z","updated_at":"2025-09-30T00:38:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"003419b7-14a8-440e-a5cd-bf6c371291cb","html_url":"https://github.com/hk-dev13/envoyou-page-react","commit_stats":null,"previous_names":["hk-dev13/envoyou-page-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hk-dev13/envoyou-page-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hk-dev13%2Fenvoyou-page-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hk-dev13%2Fenvoyou-page-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hk-dev13%2Fenvoyou-page-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hk-dev13%2Fenvoyou-page-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hk-dev13","download_url":"https://codeload.github.com/hk-dev13/envoyou-page-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hk-dev13%2Fenvoyou-page-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31293631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T21:15:39.731Z","status":"ssl_error","status_checked_at":"2026-04-01T21:15:34.046Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","css","html5","javascript","landingpage","permit","react","reactjs","tailwindcss","tailwindcss-v4","vitejs","website"],"created_at":"2025-10-07T15:13:56.473Z","updated_at":"2026-04-02T01:03:07.527Z","avatar_url":"https://github.com/hk-dev13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Envoyou - Global Environmental Data API Landing Page\n\nA modern, high-performance React landing page for the Envoyou environmental data verification API, built with Vite and optimized for production with **full FastAPI backend integration**.\n\n![License](https://img.shields.io/badge/license-MIT-blue.svg)\n![React](https://img.shields.io/badge/React-19-blue.svg)\n![Vite](https://img.shields.io/badge/Vite-Latest-green.svg)\n![Tailwind](https://img.shields.io/badge/Tailwind-v4-blue.svg)\n\n## Features\n\n### **Core Features**\n- **Modern React 19** with Vite for lightning-fast development\n- **Tailwind CSS v4** for beautiful, responsive design\n- **AOS (Animate On Scroll)** for smooth scroll animations\n- **Chart.js Integration** for data visualizations\n- **React Router** for seamless navigation\n- **🔄 Full Backend Integration** - Connected to FastAPI backend with real data\n- **🔑 Demo API Key System** - Instant access to real environmental data\n- **📊 Real-time API Testing** - Built-in API tester with connection monitoring\n\n### ⚡ **Performance Optimizations**\n- **Lazy Loading** - Components load only when needed\n- **Code Splitting** - Optimized bundle chunks for better caching\n- **Error Boundaries** - Graceful error handling with user-friendly UI\n- **Optimized Build** - Production-ready with source maps\n\n### 🔍 **SEO \u0026 Accessibility**\n- **Structured Data (JSON-LD)** for rich search results\n- **Open Graph \u0026 Twitter Cards** for social sharing\n- **ARIA Labels \u0026 Keyboard Navigation** for accessibility\n- **Canonical URLs** and meta tags for SEO\n- **DNS Prefetching** for faster resource loading\n\n### 📊 **Analytics Ready**\n- **Google Analytics 4** integration\n- **Custom Event Tracking** setup\n- **Performance Monitoring** configuration\n\n### 🌐 **Backend Integration Features**\n- **🔍 CEVS Score Lookup** - Real company environmental scores\n- **📈 Emissions Data** - EPA power plant data with filtering\n- **🌍 Global ISO Certifications** - ISO 14001 environmental certifications\n- **🎯 Demo API Keys** - Instant access without registration\n- **📡 Connection Status** - Real-time backend monitoring\n- **🔧 API Testing Tools** - Built-in endpoint testing interface\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js 18+\n- npm or yarn\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/hk-dev13/ENVOYou-page.git\n   cd envoyou-page-react\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Set up environment variables**\n   ```bash\n   cp .env.example .env\n   # Edit .env with your actual values\n   ```\n\n4. **Start FastAPI Backend** (Required for full functionality)\n   ```bash\n   # Make sure FastAPI backend is running on http://localhost:8000\n   # Backend should have the demo API key endpoint: /admin/request-demo-key\n   ```\n\n5. **Start development server**\n   ```bash\n   npm run dev\n   ```\n\n6. **Open your browser**\n   ```\n   http://localhost:5173\n   ```\n\n7. **Get Demo API Key**\n   - Click the floating API status button (bottom-right)\n   - Use \"Get Demo API Key\" to access real data\n   - Test all endpoints with real environmental data\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/\n│   ├── ErrorBoundary.jsx         # Error handling component\n│   ├── Header.jsx               # Navigation header\n│   ├── Footer.jsx               # Site footer\n│   ├── HeroSection.jsx          # Hero/landing section\n│   ├── FeaturesSection.jsx      # Features showcase\n│   ├── PricingSection.jsx       # Pricing plans\n│   ├── CodeExampleSection.jsx   # API examples\n│   ├── VisualizationsSection.jsx # Data charts\n│   ├── CevsLookupSection.jsx    # CEVS lookup tool (connected to backend)\n│   ├── APITester.jsx            # Real-time API testing interface\n│   ├── DemoKeyManager.jsx       # Demo API key management\n│   ├── ScrollToTop.jsx          # Auto scroll-to-top on navigation\n│   └── BackToTop.jsx            # Back to top button\n├── pages/\n│   ├── HomePage.jsx             # Main landing page\n│   ├── DocumentationPage.jsx    # API documentation\n│   ├── AboutPage.jsx            # About us page\n│   ├── ContactPage.jsx          # Contact page\n│   └── FreeAPIKeyPage.jsx       # API key registration\n├── services/\n│   └── apiService.js            # Backend API integration service\n├── App.jsx                      # Main app component\n└── main.jsx                     # App entry point\n```\n\n## � Backend Integration\n\n### Features\n- **🔄 Real-time Data**: Connected to FastAPI backend with live environmental data\n- **🎯 Demo API Keys**: Get instant access without registration\n- **📊 Connection Monitor**: Real-time backend status indicator\n- **🧪 API Testing**: Built-in testing interface for all endpoints\n\n### API Endpoints Available\n- **Health Check**: `/health` - No authentication required\n- **CEVS Data**: `/global/cevs/{company_name}` - Company environmental scores\n- **Emissions**: `/global/emissions` - EPA power plant emissions data\n- **ISO Certifications**: `/global/iso` - Global ISO 14001 certificates\n- **Demo Keys**: `/admin/request-demo-key` - Get temporary API access\n\n### Getting Started with API\n1. **Start the application** - Frontend connects automatically\n2. **Click API status button** - Green circle in bottom-right corner\n3. **Get Demo API Key** - Click \"Get Demo API Key\" button\n4. **Test endpoints** - Use built-in testing interface\n5. **Try CEVS lookup** - Search real company data on homepage\n\n### API Response Examples\n\n#### CEVS Score Response\n```json\n{\n  \"status\": \"success\",\n  \"company\": \"Shell\",\n  \"score\": 50.0,\n  \"components\": {\n    \"base\": 50.0,\n    \"iso_bonus\": 0.0,\n    \"epa_penalty\": 0.0,\n    \"renewables_bonus\": 0.0\n  },\n  \"sources\": {\n    \"epa_matches\": 0,\n    \"iso_count\": 40\n  }\n}\n```\n\n#### Demo API Key Response\n```json\n{\n  \"status\": \"success\",\n  \"data\": {\n    \"api_key\": \"ae21b9776a23b7e7fa28856dd9810544\",\n    \"client_name\": \"Demo User\",\n    \"tier\": \"basic\",\n    \"requests_per_minute\": 30\n  }\n}\n```\n\n## �🛠️ Available Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm run preview` - Preview production build\n- `npm run lint` - Run ESLint\n\n## 🔧 Configuration\n\n### Environment Variables\n\nCreate a `.env` file with:\n\n```env\n# Backend API Configuration\nVITE_API_URL=http://localhost:8000\nVITE_API_KEY=your_production_api_key\n\n# Analytics\nVITE_GA_TRACKING_ID=G-YOUR-GA4-ID\n\n# App Settings\nVITE_APP_NAME=Envoyou\nVITE_APP_DESCRIPTION=Global Environmental Data API\n```\n\n### Backend Integration\n\nThis frontend is designed to work with the FastAPI backend. Make sure:\n\n1. **Backend Running**: FastAPI server at `http://localhost:8000`\n2. **Demo Endpoint**: `/admin/request-demo-key` available\n3. **CORS Enabled**: Frontend origin `http://localhost:5173` allowed\n4. **All Endpoints**: Health, CEVS, Emissions, ISO data available\n\n#### Quick Backend Test\n```bash\n# Test if backend is running\ncurl http://localhost:8000/health\n\n# Test demo API key endpoint\ncurl -X POST http://localhost:8000/admin/request-demo-key \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\"client_name\":\"Test User\"}'\n```\n\n### Google Analytics Setup\n\n1. Replace `G-XXXXXXXXXX` in `index.html` with your GA4 ID\n2. Update the tracking configuration as needed\n\n## 🎨 Customization\n\n### Colors \u0026 Branding\n- Primary: Emerald (`emerald-500`)\n- Background: Dark slate (`slate-900`)\n- Accent: Sky blue (`sky-300`)\n\n### Animations\n- AOS library configured with:\n  - Duration: 1200ms\n  - Offset: 100px\n  - Once: true (animations trigger once)\n\n## 📈 Performance Features\n\n### Lazy Loading\nComponents are lazy-loaded for better initial page load:\n```jsx\nconst HeroSection = lazy(() =\u003e import('../components/HeroSection'));\n```\n\n### Error Boundaries\nGraceful error handling prevents app crashes:\n```jsx\n\u003cErrorBoundary\u003e\n  \u003cApp /\u003e\n\u003c/ErrorBoundary\u003e\n```\n\n### Bundle Optimization\nAutomatic code splitting and chunk optimization for production builds.\n\n## 🔍 SEO Features\n\n### Structured Data\nJSON-LD schema for better search engine understanding:\n- SoftwareApplication schema\n- Organization information\n- Feature lists\n\n### Meta Tags\nComprehensive meta tags for:\n- Search engines\n- Social media sharing\n- Browser optimization\n\n## ♿ Accessibility\n\n- ARIA labels on interactive elements\n- Keyboard navigation support\n- Focus management\n- Screen reader friendly\n\n## 📊 Analytics \u0026 Monitoring\n\n### Google Analytics 4\n- Page view tracking\n- Custom event tracking setup\n- Performance monitoring\n\n### Error Tracking\n- Console error logging\n- Development error details\n- Production error boundaries\n\n## 🚀 Deployment\n\n### Build for Production\n```bash\nnpm run build\n```\n\n### Preview Production Build\n```bash\nnpm run preview\n```\n\n### Deploy to Hosting\nThe `dist/` folder contains all files needed for deployment to:\n- Vercel\n- Netlify\n- GitHub Pages\n- Any static hosting service\n\n## 🚀 Deployment to Netlify\n\n### Automatic Deployment\n\n1. **Connect to Netlify**\n   - Go to [Netlify](https://netlify.com)\n   - Click \"New site from Git\"\n   - Connect your GitHub repository\n\n2. **Configure Build Settings**\n   - **Build command**: `npm run build`\n   - **Publish directory**: `dist`\n   - **Node version**: 18.17.0 (matches `.nvmrc`)\n\n3. **Environment Variables** (Optional)\n   - Add any variables from `.env.example` in Netlify dashboard\n\n4. **Deploy**\n   - Netlify will automatically build and deploy on git push\n   - Your site will be live at `https://your-site-name.netlify.app`\n\n### Manual Deployment\n\n1. **Build the project**\n   ```bash\n   npm run build\n   ```\n\n2. **Deploy to Netlify**\n   ```bash\n   npx netlify-cli deploy --prod --dir=dist\n   ```\n\n### SEO \u0026 Performance Features\n\n- ✅ **robots.txt** - Search engine crawling rules\n- ✅ **sitemap.xml** - Site structure for search engines\n- ✅ **_redirects** - SPA routing support\n- ✅ **_headers** - Security headers and caching\n- ✅ **netlify.toml** - Build configuration\n- ✅ **Optimized chunks** - Better caching strategy\n- ✅ **Gzip compression** - Faster loading\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Test thoroughly\n5. Submit a pull request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n### MIT License Summary\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.\n\n**What you can do:**\n- ✅ Commercial use\n- ✅ Modification\n- ✅ Distribution\n- ✅ Private use\n\n**What you must include:**\n- 📄 Copyright notice\n- 📄 License text\n\n**What you cannot do:**\n- ❌ Hold liable\n- ❌ Use trademark\n\n## � Additional Documentation\n\n- **[Backend Integration Guide](./BACKEND_INTEGRATION.md)** - Detailed integration setup\n- **[PWA Features](./PWA_README.md)** - Progressive Web App functionality\n- **API Documentation** - Available in the app at `/documentation`\n\n## �📞 Support\n\n- **Email**: support@envoyou.com\n- **Website**: https://envoyou.com\n- **GitHub Issues**: For bug reports and feature requests\n- **API Documentation**: Available at `/documentation` or `http://localhost:8000/docs`\n- **Backend Status**: Real-time monitoring via floating status indicator\n\n## 🎯 Quick Demo\n\n1. **Start backend**: `FastAPI server on http://localhost:8000`\n2. **Start frontend**: `npm run dev`\n3. **Get demo key**: Click green button → \"Get Demo API Key\"\n4. **Test CEVS lookup**: Search \"Shell\" or \"Tesla\" \n5. **Explore real data**: Company environmental scores with full breakdown\n\n---\n\n## Contact\nMaintained by [Husni Kusuma](https://github.com/hk-dev13)  \n🌐 Website: [envoyou.com](https://envoyou.com)  \n📧 More info: [info@envoyou.com](mailto:info@envoyou.com)  \n\n---\n\u003e \u003cp style=\"text-align: center;\"\u003e© 2025 \u003ca href=\"https://envoyou.com\"\u003eEnvoyou\u003c/a\u003e | All Rights Reserved\u003c/p\u003e\n\u003e \u003cp style=\"text-align: center;\"\u003eEmpowering Global Environmental Transparency\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhk-dev13%2Fenvoyou-page-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhk-dev13%2Fenvoyou-page-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhk-dev13%2Fenvoyou-page-react/lists"}