You are an expert AI coding assistant tasked with building a single-page React application (SPA) for 'Adalet Işığı: Kırmızı Işık Cezası Çözümü' (Justice Light: Red Light Ticket Solution). This application will help users in Florida contest red-light camera tickets based on recent court rulings deeming certain aspects of the law unconstitutional. The app should be intuitive, user-friendly, and provide clear guidance through the legal process.
PROJECT OVERVIEW:
The primary goal of Adalet Işığı is to empower drivers in Florida who receive red-light camera tickets. Leveraging the legal precedent set by judges ruling these tickets unconstitutional due to improper burden of proof shifting, the app will offer tools to analyze tickets, understand legal standing, and guide users through the appeal process. The core value proposition is providing accessible, data-driven legal assistance to challenge potentially unfair traffic citations, saving users time, money, and stress.
TECH STACK:
- Frontend Framework: React (using functional components and hooks)
- Styling: Tailwind CSS for rapid UI development and consistent design.
- State Management: Zustand or Jotai for efficient and simple global state management. For this SPA, managing state within components and using React Context API might suffice for MVP.
- Routing: React Router DOM for client-side navigation.
- Form Handling: React Hook Form for efficient and validated form submissions.
- API Calls: Axios for making HTTP requests (if an API is introduced later).
- UI Components: Potentially use a lightweight component library like Headless UI for accessible, unstyled components, or build custom ones using Tailwind CSS.
- Local Storage: Utilize `localStorage` for persisting user data and application state between sessions for the MVP.
CORE FEATURES:
1. **Ticket Upload and Analysis:**
* **User Flow:** User navigates to the 'Upload Ticket' section. They can either manually enter ticket details (citation number, date, time, location, issuing authority) or upload an image/PDF of the ticket. The application validates the input fields. Upon submission, the app performs an initial analysis based on stored legal rulings and current Florida law statutes regarding red-light cameras.
* **Functionality:** Forms for manual entry, file upload (accepting JPG, PNG, PDF). Basic data validation on input fields. Initial analysis flags potential grounds for contestation based on the 'burden of proof' principle established in recent rulings.
2. **Legal Standing Assessment:**
* **User Flow:** After uploading and initial analysis, the user is presented with an assessment of their ticket's legal standing. This section explains in simple terms why their ticket might be contestable, referencing the specific legal arguments (e.g., "The law improperly shifts the burden of proof to the vehicle owner..."). It will also highlight the strength of their case based on available data.
* **Functionality:** Display a clear verdict (e.g., 'Strong Case for Contestation', 'Potentially Contestable', 'Weak Case'). Provide concise explanations referencing legal principles and specific Florida statutes or case law summaries. Link to detailed case summaries.
3. **Contestation Guidance:**
* **User Flow:** For tickets deemed contestable, the user can access a step-by-step guide on how to contest the ticket. This includes information on filling out specific legal forms, court procedures, deadlines, and what to expect during a hearing.
* **Functionality:** A guided wizard or a series of collapsible sections detailing the contestation process. Checklists for required documents. Information on how to find local court details.
4. **Case Law Database:**
* **User Flow:** Users can browse or search a database of relevant court rulings, focusing on Florida red-light camera cases. They can view summaries, key findings, and the outcome of previous cases.
* **Functionality:** A searchable and filterable list of case summaries. Each case entry should include the case name, court, date, a brief summary of the ruling, and the core legal arguments used.
UI/UX DESIGN:
- **Layout:** Single-page application with a clean, modern, and intuitive interface. A fixed header for navigation and potentially a footer. Main content area dynamically updates based on user interaction and selected features. Use a sidebar for navigation within complex sections if needed.
- **Color Palette:** Primary: A calming, trustworthy blue (e.g., `#3b82f6`). Secondary: A neutral gray for backgrounds and text (e.g., `#f3f4f6`, `#6b7280`). Accent: A contrasting color for calls-to-action, like a vibrant green or orange (e.g., `#10b981`, `#f97316`). Use red sparingly for error states.
- **Typography:** Sans-serif fonts for readability. Use Tailwind's default font stack or choose a clean font like Inter or Lato. Establish a clear hierarchy with distinct heading sizes (h1, h2, h3) and body text.
- **Responsive Design:** Mobile-first approach. The layout must adapt seamlessly to various screen sizes (smartphones, tablets, desktops). Utilize Tailwind's responsive modifiers (e.g., `md:`, `lg:`).
- **Visuals:** Minimalistic icons, clear typography, and ample whitespace. Avoid clutter. Use subtle animations to enhance user experience.
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing and global layout.
- `Header.js`: Contains navigation links (Home, Upload Ticket, Case Law) and app logo.
- `HomePage.js`: Landing page introducing the app's purpose and value proposition. Includes a prominent call-to-action to upload a ticket.
- `TicketUploadPage.js`: Contains the form for manual ticket entry and the file upload component.
- `TicketForm.js`: React Hook Form component for manual data input (citation number, date, etc.).
- `FileUpload.js`: Component for handling file uploads with drag-and-drop support.
- `AnalysisResultPage.js`: Displays the results of the ticket analysis, including legal standing assessment and explanation.
- `LegalStandingCard.js`: Displays the assessment (e.g., 'Strong Case') with a brief explanation.
- `ExplanationText.js`: Detailed textual explanation of the legal reasoning.
- `ContestationGuidePage.js`: Provides step-by-step instructions for contesting the ticket.
- `StepComponent.js`: Renders a single step in the guidance process, possibly with checklists.
- `CaseLawPage.js`: Displays a searchable list of case law.
- `CaseList.js`: Renders the list of cases.
- `CaseListItem.js`: Renders a single case summary item.
- `SearchBar.js`: Component for searching the case law database.
- `Footer.js`: Contains copyright information and links.
DATA MODEL (using Zustand/Context API for state management):
- `ticketState`:
- `ticketData`: { `citationNumber`: string | null, `date`: string | null, `time`: string | null, `location`: string | null, `issuingAuthority`: string | null, `ticketImage`: string | null } (Stores uploaded ticket info)
- `analysisResult`: { `verdict`: 'Strong' | 'Potentially' | 'Weak' | 'Unknown', `explanation`: string, `grounds`: string[] } (Stores analysis outcome)
- `isLoading`: boolean (Tracks loading states for analysis)
- `error`: string | null (Stores any errors during analysis)
- `caseLawState`:
- `cases`: Array<{ `id`: string, `name`: string, `court`: string, `date`: string, `summary`: string, `grounds`: string[] }>
- `filteredCases`: Array<...>
- `searchTerm`: string
Local Storage Usage: `ticketData` and `cases` (if fetched and cached) can be persisted.
SAMPLE DATA (for `caseLawState.cases`):
1. {
"id": "fl-sc-2023-123",
"name": "State of Florida v. John Doe",
"court": "Florida Supreme Court",
"date": "2023-11-15",
"summary": "The court ruled that the statute requiring vehicle owners to prove they were not driving at the time of a red-light camera violation is unconstitutional, violating due process.",
"grounds": ["Burden of Proof", "Due Process"]
},
2. {
"id": "fl-dist-2024-456",
"name": "City of Miami v. Jane Smith",
"court": "District Court of Appeal, 3rd District",
"date": "2024-02-20",
"summary": "Affirmed dismissal of a red-light ticket, finding the automated enforcement scheme improperly delegates judicial power and shifts the burden of proof.",
"grounds": ["Delegation of Power", "Burden of Proof"]
},
3. {
"id": "fl-county-2023-789",
"name": "State v. Robert Johnson",
"court": "Broward County Court",
"date": "2023-10-01",
"summary": "Judge ruled the specific state statute for red-light cameras unconstitutional as applied, dismissing the citation against the registered owner.",
"grounds": ["Unconstitutional Statute", "Burden of Proof"]
},
4. {
"id": "fl-sc-2024-012",
"name": "Automated Enforcement Challenges v. FDOT",
"court": "Florida Supreme Court",
"date": "2024-03-10",
"summary": "A landmark ruling consolidating previous challenges, reinforcing that the state must prove driver identity, not require owners to disprove it.",
"grounds": ["Due Process", "Burden of Proof", "Equal Protection"]
},
5. {
"id": "fl-dist-2024-345",
"name": "Tampa v. Michael Brown",
"court": "District Court of Appeal, 2nd District",
"date": "2024-01-25",
"summary": "The court found the civil penalty structure for red-light cameras circumvented standard traffic laws and unlawfully shifted the burden of proof.",
"grounds": ["Civil Penalty Structure", "Burden of Proof"]
}
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between different sections/pages using React Transition Group or Framer Motion.
- **Loading States:** Use spinners or skeleton loaders (e.g., using `react-loading-skeleton` or custom Tailwind/CSS loaders) when analyzing tickets or fetching case law data. Indicate loading clearly.
- **Hover Effects:** Subtle hover effects on buttons and interactive elements (e.g., slight scaling, background color change). Hover effects on `CaseListItem` to indicate clickability.
- **Micro-interactions:** Visual feedback on form submission (e.g., a checkmark animation). Smooth expansion/collapse animations for guidance steps.
EDGE CASES:
- **Empty States:** Design clear and informative empty states for ticket list, analysis results (before upload), and case law database (if search yields no results).
- **Error Handling:** Gracefully handle API errors, file upload errors, and invalid data input. Display user-friendly error messages. Use a global error boundary.
- **Validation:** Implement robust client-side validation for all forms using React Hook Form. Provide inline validation feedback.
- **Accessibility (a11y):** Ensure semantic HTML, proper ARIA attributes, keyboard navigability, sufficient color contrast, and focus management. Use accessible components (like Headless UI) where possible.
- **File Upload Limits:** Handle cases where the uploaded file is too large or not a supported format.
- **No Applicable Rulings:** If the specific scenario doesn't perfectly match existing case law, clearly state this and advise seeking professional legal counsel.
DEPLOYMENT NOTES:
- **Build Tool:** Vite or Create React App (CRA) for building the production-ready SPA.
- **Environment Variables:** Use `.env` files for managing configuration (e.g., API endpoints if introduced later). `VITE_` prefix for Vite.
- **Performance Optimizations:** Code splitting (if the app grows), image optimization, lazy loading components, memoization (React.memo, useMemo, useCallback) where appropriate.
- **Deployment Platform:** Suggest platforms like Vercel, Netlify, or GitHub Pages for easy deployment of static SPAs.
- **HTTPS:** Ensure the deployed application uses HTTPS.
- **SEO:** Implement basic SEO practices for the landing page (title, meta description).