You are an expert AI full-stack developer and startup consultant tasked with building a single-page application (SPA) for 'Gizli Kimlik: Yaş Doğrulama Çözümü'. This application will streamline online age verification for digital platforms while prioritizing adult user privacy.
PROJECT OVERVIEW:
The core problem this application addresses is the conflict between new age-verification laws designed for child safety and the privacy concerns of adult users. Current systems often force adults to submit sensitive personal data, creating surveillance risks and privacy headaches. 'Gizli Kimlik' offers a SaaS solution where platforms can integrate a privacy-preserving age verification system. It leverages reliable third-party identity verification APIs without collecting or storing sensitive user data directly. The value proposition is twofold: enabling platforms to achieve legal compliance effortlessly and ensuring adult users can access content without compromising their privacy or security. The goal is to build a seamless, secure, and user-friendly SPA that handles the verification flow and provides basic analytics for platform administrators.
TECH STACK:
- Frontend Framework: React.js (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 handling navigation within the SPA.
- API Client: Axios for making HTTP requests to the backend/third-party APIs.
- Form Handling: React Hook Form for robust form validation and management.
- Utilities: Date-fns for date manipulation, clsx for conditional class name management.
- Deployment: Vercel (or similar static hosting platform)
CORE FEATURES:
1. **User Verification Flow (as seen by the end-user):**
* User lands on a platform requiring age verification.
* The platform's frontend (integrated with Gizli Kimlik's widget/API) initiates the process.
* User is presented with a modal or dedicated page asking for consent to verify age.
* Upon consent, the user is redirected to a secure Gizli Kimlik verification portal (or an integrated iframe).
* User is prompted to upload necessary documents (e.g., ID card, driver's license) or use a selfie-based verification method via the integrated third-party API.
* The third-party API performs the verification. Crucially, 'Gizli Kimlik' backend acts as a proxy and *does not store* the sensitive documents or PII.
* The third-party API returns a simple boolean (isAdult: true/false) or an age result to the 'Gizli Kimlik' backend.
* 'Gizli Kimlik' backend forwards this result to the requesting platform's backend.
* The platform grants or denies access based on the received result.
* User sees a success/failure message and is redirected back to the original platform.
2. **Platform Admin Dashboard:**
* Login for platform administrators.
* Overview of the number of verifications performed (today, week, month).
* Success/failure rate of verifications.
* Ability to manage API keys for their platform.
* Settings for configuring the verification widget (e.g., default verification method, redirect URLs).
* Basic analytics and charts visualizing verification trends.
3. **Verification Widget/SDK (for seamless integration):**
* A lightweight React component or JavaScript snippet that platform developers can easily embed.
* Handles the initial user interaction, consent, and communication with the Gizli Kimlik backend/API.
* Customizable to match the platform's branding.
UI/UX DESIGN:
- **Layout:** Single-page application structure. Main navigation (if any) will be minimal, potentially just for the admin dashboard sections. The user-facing flow will be modal-driven or a linear, guided process.
- **Color Palette:** Primary: A calming, trustworthy blue (#4A90E2). Secondary: A neutral gray (#F5F7FA for backgrounds, #6B7280 for text). Accent: A subtle green (#34D399) for success states and a soft red (#F87171) for errors/failures. Use dark mode support for the admin dashboard.
- **Typography:** Clean, modern sans-serif font like Inter or Poppins. Use varying weights for hierarchy (e.g., 700 for headings, 400 for body text).
- **Responsiveness:** Mobile-first approach. All components must be fully responsive and functional on various screen sizes (mobile, tablet, desktop). Use Tailwind CSS's responsive modifiers (sm:, md:, lg:, xl:).
- **User Flow Clarity:** The verification process for the end-user must be extremely clear, with explicit consent steps and feedback at each stage. The admin dashboard should be intuitive and data-forward.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing.
- `Router.jsx`: Configures routes for different sections (UserFlow, AdminLogin, AdminDashboard).
- `UserVerificationFlow.jsx`: Manages the end-to-end verification process for the end-user. It might conditionally render different steps or components based on the state.
- `ConsentScreen.jsx`: Displays consent message and a 'Proceed' button. Props: `onConsentAccept`, `onConsentDecline`.
- `VerificationInProgress.jsx`: Shows a loading spinner/animation while verification is processed via API. Props: `message`.
- `VerificationResult.jsx`: Displays success or failure message based on the verification outcome. Props: `result` (e.g., `{ isAdult: true, message: 'Verification successful.' }`), `redirectUrl`.
- `AdminLayout.jsx`: Layout component for the admin dashboard, including sidebar/header.
- `AdminLogin.jsx`: Component for admin login.
- `AdminDashboard.jsx`: Main dashboard view showing key metrics.
- `StatCard.jsx`: Displays a single key metric (e.g., 'Total Verifications'). Props: `title`, `value`, `icon`.
- `VerificationChart.jsx`: Displays a chart (e.g., line chart for weekly verifications). Props: `data`.
- `PlatformSettings.jsx`: Component for managing API keys and widget settings.
- `VerificationTable.jsx`: Displays a table of past verification attempts (timestamp, platform, status). Props: `data`.
- `VerificationWidget.jsx`: (To be embedded by client platforms) A customizable widget component. Props: `apiKey`, `platformName`, `config` (e.g., `redirectOnSuccess`, `primaryColor`).
DATA MODEL:
- **State Management (Zustand):**
- `authStore`: `{ isAdminLoggedIn: boolean, userToken: string | null, adminInfo: object | null }`
- `verificationStore`: `{ verificationStatus: 'idle' | 'processing' | 'success' | 'failed', result: object | null, error: string | null }`
- `adminStore`: `{ stats: { totalVerifications: number, successRate: number, ... }, settings: object, verificationLogs: array }`
- **Mock Data Formats:**
- Verification Log Entry: `{ id: string, timestamp: string, platformId: string, userId: string, status: 'success' | 'failed' | 'pending', age: number | null }`
- Stats Object: `{ totalVerifications: 1500, weeklyVerifications: [{ date: '2023-10-26', count: 200 }, ...], successRate: 95.5 }`
- Platform Settings: `{ primaryColor: '#4A90E2', logoUrl: 'url', verificationMethod: 'document' | 'selfie', redirectOnSuccess: 'url' }`
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/out transitions between main views using `react-transition-group` or similar.
- **Button Hovers:** Slight background color change or scale effect on interactive elements.
- **Loading States:** Use skeleton loaders or spinners (e.g., `react-spinners`) during API calls (verification processing, data fetching for dashboard). Provide clear visual feedback.
- **Modal Animations:** Smooth slide-in/fade-in for consent modals and result popups.
- **Chart Interactions:** Tooltips on hover for chart data points.
- **Form Feedback:** Subtle animations for input validation errors (e.g., slight shake).
EDGE CASES:
- **No Third-Party API Available:** Gracefully handle scenarios where the chosen third-party verification service is down or unavailable. Display a user-friendly error message and log the issue on the admin side.
- **Verification Failure (User Rejected):** If the user declines to proceed or fails verification multiple times, provide clear feedback and appropriate redirect.
- **API Errors:** Implement robust error handling for all API calls (both to third-party services and internal backend). Display specific error messages where possible, or a generic 'An error occurred' message.
- **Empty States:** Dashboard charts and tables should display informative messages (e.g., 'No verification data available yet') when there's no data.
- **Validation:** Client-side and server-side validation for all forms (admin login, settings). Ensure required fields are filled and data formats are correct.
- **Security:** Implement proper security measures for API key management, authentication, and authorization. Use environment variables for sensitive keys.
- **Accessibility (a11y):** Use semantic HTML, ARIA attributes where necessary, ensure keyboard navigability, sufficient color contrast, and provide alt text for images.
SAMPLE DATA:
1. `User Verification Result (Success)`:
```json
{
"isAdult": true,
"age": 28,
"message": "Age verification successful."
}
```
2. `User Verification Result (Failure)`:
```json
{
"isAdult": false,
"age": null,
"message": "Age verification failed. Underage or insufficient evidence."
}
```
3. `API Error Response`:
```json
{
"isAdult": null,
"age": null,
"message": "Verification service temporarily unavailable. Please try again later."
}
```
4. `Admin Dashboard Stats`:
```json
{
"totalVerifications": 1567,
"weeklyVerifications": [
{"date": "2023-10-20", "count": 180},
{"date": "2023-10-21", "count": 210},
{"date": "2023-10-22", "count": 230},
{"date": "2023-10-23", "count": 195},
{"date": "2023-10-24", "count": 225},
{"date": "2023-10-25", "count": 207},
{"date": "2023-10-26", "count": 220}
],
"successRate": 96.2
}
```
5. `Verification Log Entry`:
```json
{
"id": "vl_abc123xyz789",
"timestamp": "2023-10-26T10:30:00Z",
"platformId": "plat_987zyxwv654",
"userId": "user_456uvwtsr321",
"status": "success",
"age": 35
}
```
6. `Platform Settings Example`:
```json
{
"platformName": "GamerZone",
"apiKey": "pk_live_xxxxxxxxxxxxxxxxxxxx",
"widgetConfig": {
"primaryColor": "#FF6347",
"logoUrl": "https://example.com/logo.png",
"verificationMethod": "document",
"redirectOnSuccess": "https://gamerzone.com/verified",
"redirectOnFailure": "https://gamerzone.com/age-gate"
}
}
```
7. `Admin User Info`:
```json
{
"id": "admin_789",
"name": "Platform Admin",
"email": "admin@platform.com",
"platformId": "plat_987zyxwv654"
}
```
DEPLOYMENT NOTES:
- Ensure environment variables (e.g., `REACT_APP_API_BASE_URL`, `REACT_APP_THIRD_PARTY_API_KEY`, `ZUSTAND_DEVTOOLS` if used) are correctly configured in the deployment environment (Vercel, Netlify, etc.).
- Set up build scripts (`vite build`) for production.
- Configure domain name and HTTPS.
- Consider implementing a Content Security Policy (CSP) header for enhanced security, especially when embedding third-party scripts or iframes.
- For the admin dashboard, implement JWT-based authentication and authorization. Ensure API endpoints handling sensitive operations are protected.
- Optimize assets (images, JS, CSS) for fast loading times. Use code splitting for the React application.