PROJECT OVERVIEW:
The application, tentatively named 'FairPlay AI', aims to be the definitive platform for understanding and navigating the complex landscape of transgender athlete participation in women's sports. It addresses the fragmentation of information, the lack of transparent policy tracking, and the need for evidence-based discourse surrounding this contentious issue. Our core value proposition is to provide a centralized, neutral, and data-driven resource for sports federations, athletes, legal experts, and the public, fostering informed decision-making and promoting fairness and inclusivity in sports.
TECH STACK:
- Frontend: React (using Vite for fast development)
- Styling: Tailwind CSS for utility-first styling and rapid UI development.
- State Management: Zustand for efficient and scalable global state management.
- Routing: React Router DOM for client-side navigation.
- Data Fetching: TanStack Query (React Query) for streamlined server state management, caching, and background updates.
- UI Components: Radix UI for accessible and unstyled primitive components, customized with Tailwind CSS.
- Icons: Lucide React for a comprehensive and customizable icon set.
- Date/Time Handling: date-fns for robust date manipulation.
- Form Handling: React Hook Form for efficient form validation and submission.
- Potential Backend/API (for future scaling, but MVP will focus on client-side data simulation or simple JSON files): Node.js/Express.js with a PostgreSQL database or Firebase/Supabase for a real-time backend.
CORE FEATURES:
1. **Policy Tracker Module:**
* **User Flow:** Users navigate to the 'Policies' section. They see a filterable and sortable list of sports federations (e.g., IOC, World Athletics, FIFA). Each federation entry displays its current policy status (e.g., 'Restricted', 'Allowed with conditions', 'Under Review'). Clicking on a federation reveals a detailed view including the official policy document (or a summary), effective date, and a brief history of policy changes. Users can filter by sport, region, or policy status.
* **Details:** This module will display information about the governing body, the specific sport, the policy's effective date, links to the official ruling, and a summary of the conditions (e.g., hormone level requirements, testosterone limits, eligibility criteria). A version history will be maintained for each policy.
2. **Comparative Analysis Tool:**
* **User Flow:** Users access the 'Compare Policies' tool. They can select multiple federations or sports from a dropdown/searchable list. The tool then generates a side-by-side comparison table highlighting key parameters like testosterone limits, eligibility criteria for different stages of competition (e.g., junior, senior), and any specific medical requirements. Visualizations (e.g., bar charts for hormone levels) will be used where applicable.
* **Details:** This feature will leverage structured data to allow users to compare different rulesets directly. It will enable users to understand the nuances and inconsistencies across various sporting bodies.
3. **News & Research Feed:**
* **User Flow:** The 'News Feed' section presents a chronological or relevance-sorted list of articles, scientific studies, and legal case updates related to transgender athletes in sports. Each item includes a title, source, date, brief excerpt, and a link to the full content. Users can filter by category (News, Research, Legal, Opinion) and search keywords.
* **Details:** This will be a curated feed, potentially integrating with RSS feeds from reputable sources or using a simple content management approach for MVP. Emphasis will be on objective reporting and peer-reviewed research.
4. **Expert Insights & Discourse (Moderated):**
* **User Flow:** A 'Discourse' or 'Insights' section features curated articles, opinion pieces, and analyses from recognized experts in sports law, endocrinology, and sports ethics. For MVP, this might be a blog-like section. Future iterations could include moderated Q&A sessions or forums.
* **Details:** This section aims to provide context and different perspectives beyond raw policy data, contributing to a more nuanced understanding of the issue. Initially, it will host pre-written content.
5. **Policy Suggestion Box (Future/Advanced):**
* **User Flow:** Verified users (e.g., academics, legal professionals) can submit policy proposals through a dedicated form. These proposals are reviewed by moderators and, if approved, can be commented on and voted upon by other verified users.
* **Details:** This feature is geared towards future development to encourage constructive input, but the UI elements could be sketched out for the MVP.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) with a clean, modern, and professional aesthetic. A persistent navigation bar (top or side) will provide access to all core features (Policies, Compare, News, Insights). The main content area will be responsive and adaptable. A clear information hierarchy will guide the user's attention.
- **Color Palette:** Primary: Deep Navy Blue (#0A192F) for a serious, authoritative feel. Secondary: A muted Teal (#64FFDA) for accents, calls-to-action, and interactive elements. Neutral: Shades of Gray (#8892B0, #CCD6F6) for text and backgrounds. Accent: A subtle Orange/Gold (#FFC107) for highlighting important statistics or warnings. The overall feel should be trustworthy and informative.
- **Typography:** A clean sans-serif font family like Inter or Inter UI for body text and headings. Headings will be bold and appropriately sized for hierarchy. Body text will have comfortable line height and spacing for readability.
- **Responsive Design:** Mobile-first approach. Layouts will adapt fluidly to different screen sizes (mobile, tablet, desktop). Navigation will transform into a hamburger menu on smaller screens. Components will use flexbox and grid for robust layout control. Tables in the comparison tool will stack or become scrollable on mobile.
COMPONENT BREAKDOWN:
- `Layout`: Main container, wraps the entire app, includes header/navbar and main content area.
- `Props`: `children` (React nodes).
- `Navbar`: Persistent navigation menu.
- `Props`: `activeLink` (string).
- `MenuItems`: Individual links within the Navbar.
- `Props`: `to` (string), `text` (string), `icon` (ReactNode).
- `PolicyList`: Displays a list of federations and their policies.
- `Props`: `policies` (Array of Policy objects), `filterCriteria` (object).
- `PolicyListItem`: A single row/card representing a federation's policy.
- `Props`: `policy` (Policy object), `onClick` (function).
- `PolicyDetailModal`: Modal or page to show detailed policy information.
- `Props`: `policy` (Policy object), `isOpen` (boolean), `onClose` (function).
- `ComparisonTool`: Interface for comparing policies.
- `Props`: `federations` (Array of Federation objects), `selectedFederations` (Array of IDs).
- `ComparisonTable`: Renders the side-by-side comparison.
- `Props`: `data` (comparison data object).
- `NewsFeed`: Displays the feed of articles and research.
- `Props`: `articles` (Array of Article objects), `filter` (string).
- `ArticleListItem`: A single news/research item.
- `Props`: `article` (Article object).
- `SearchBar`: Universal search component.
- `Props`: `placeholder` (string), `onChange` (function).
- `FilterDropdown`: Selectable filter options.
- `Props`: `options` (Array of strings), `label` (string), `onChange` (function).
- `Button`: Customisable button component.
- `Props`: `variant` (string, e.g., 'primary', 'secondary'), `onClick` (function), `children` (ReactNode), `isLoading` (boolean).
- `Spinner`: Loading indicator.
- `Modal`: Generic modal component.
- `Props`: `isOpen` (boolean), `onClose` (function), `children` (ReactNode).
DATA MODEL:
- **State Structure (Zustand):**
```javascript
// policyStore.js
import { create } from 'zustand';
const useStore = create((set) => ({
policies: [], // Array of Policy objects
articles: [], // Array of Article objects
comparisonData: null, // Object for comparison tool
filters: { policy: {}, article: {} },
loading: { policies: false, articles: false },
error: { policies: null, articles: null },
fetchPolicies: async () => {
set({ loading: { ...state.loading, policies: true } });
try {
// Replace with actual API call or mock data loading
const data = await import('./mockData/policies.json').then(m => m.default);
set({ policies: data, loading: { ...state.loading, policies: false } });
} catch (err) {
set({ error: { ...state.error, policies: err.message }, loading: { ...state.loading, policies: false } });
}
},
fetchArticles: async () => {
set({ loading: { ...state.loading, articles: true } });
try {
const data = await import('./mockData/articles.json').then(m => m.default);
set({ articles: data, loading: { ...state.loading, articles: false } });
} catch (err) {
set({ error: { ...state.error, articles: err.message }, loading: { ...state.loading, articles: false } });
}
},
// ... other actions like setFilters, updateComparisonData, etc.
}));
export default useStore;
```
- **Mock Data Formats:**
* `Policy Object`: `{ id: string, federation: string, sport: string, policyStatus: 'Restricted' | 'Conditional' | 'Permitted' | 'Under Review', effectiveDate: string, endDate: string | null, description: string, detailsUrl: string, history: Array<{ date: string, change: string }> }`
* `Article Object`: `{ id: string, title: string, source: string, url: string, excerpt: string, publishedDate: string, category: 'News' | 'Research' | 'Legal' | 'Opinion' }`
* `Federation Object`: `{ id: string, name: string, logoUrl: string, sports: Array<string> }`
ANIMATIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between major sections using `Framer Motion` or CSS transitions for a smooth SPA experience.
- **Hover Effects:** Buttons and interactive list items will have subtle background color changes or slight scaling effects on hover.
- **Loading States:** Use the `Spinner` component. Skeleton loaders for lists (`PolicyList`, `NewsFeed`) while data is being fetched, providing visual feedback that content is loading.
- **Micro-interactions:** Smooth expansion/collapse of detail sections within the policy view. Subtle animation when adding/removing items in the comparison tool.
- **Modal Animations:** Modals will fade in and slide up slightly from the bottom.
EDGE CASES:
- **Empty States:** When `policies` or `articles` arrays are empty, display user-friendly messages (e.g., "No policies found matching your criteria.", "No news articles available at the moment.").
- **Error Handling:** Implement global error handling using Zustand's error state. Display user-friendly error messages (e.g., "Failed to load policies. Please try again later.") with potential retry options.
- **Validation:** For any future form inputs (e.g., policy suggestions), implement client-side and server-side validation using React Hook Form.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes for dynamic content and modals. Keyboard navigation support for all interactive elements. Sufficient color contrast ratios.
- **Data Loading:** Handle cases where only partial data is available. Ensure filters and search work correctly even with incomplete datasets.
- **Link Handling:** Use `target='_blank' rel='noopener noreferrer'` for all external links to open in new tabs securely.
SAMPLE DATA:
```json
// mockData/policies.json
[
{
"id": "ioc-2021",
"federation": "International Olympic Committee (IOC)",
"sport": "All",
"policyStatus": "Conditional",
"effectiveDate": "2021-11-17",
"endDate": null,
"description": "IOC Framework on Fairness, Inclusion and Non-Discrimination on the Basis of Gender Identity and Sexual Orientation. Focuses on individual medical and scientific evidence rather than blanket rules.",
"detailsUrl": "https://olympics.com/ioc/news/ioc-framework-on-fairness-inclusion-and-non-discrimination-on-the-basis-of-gender-identity-and-sexual-orientation",
"history": [
{"date": "2015-11-01", "change": "Issued initial guidance on testosterone levels."}
]
},
{
"id": "worldathletics-2023",
"federation": "World Athletics",
"sport": "Athletics",
"policyStatus": "Restricted",
"effectiveDate": "2023-03-23",
"endDate": null,
"description": "Transgender women who have gone through male puberty will not be eligible to compete in the female category in any World Athletics competition.",
"detailsUrl": "https://www.worldathletics.org/news/press-release/council-sets-new-eligibility-rules-transgender-ath",
"history": [
{"date": "2019-06-01", "change": "Implemented testosterone limits for transgender women."}
]
}
]
// mockData/articles.json
[
{
"id": "art-101",
"title": "IOC releases framework on transgender inclusion in sports",
"source": "Associated Press",
"url": "https://apnews.com/article/olympics-sports-gender-identity-39a5b6b1b1a3a3e8f6a1d4b9c3d8e0f4",
"excerpt": "The International Olympic Committee released a new framework on Tuesday aimed at ensuring fair and inclusive competition for transgender athletes...",
"publishedDate": "2021-11-17",
"category": "News"
},
{
"id": "res-201",
"title": "Testosterone levels and athletic performance in transgender women: A systematic review",
"source": "Journal of Sports Science and Medicine",
"url": "https://www.jssm.org/jssm-21-4-x.pdf",
"excerpt": "This review examines the existing scientific literature on the impact of testosterone suppression on athletic performance in transgender women.",
"publishedDate": "2022-05-10",
"category": "Research"
},
{
"id": "legal-301",
"title": "Legal challenges mount over transgender participation bans in sports",
"source": "ESPN",
"url": "https://www.espn.com/espn/story/_/id/35000000/legal-challenges-mount-transgender-participation-bans-sports",
"excerpt": "Courts across the US are seeing an increasing number of lawsuits challenging state laws that restrict transgender athletes' participation.",
"publishedDate": "2023-01-15",
"category": "Legal"
}
]
```
DEPLOYMENT NOTES:
- **Build Tool:** Vite is recommended for its speed and efficiency in development and production builds.
- **Environment Variables:** Use `.env` files for managing environment variables (e.g., `VITE_API_URL` if connecting to a backend). Ensure sensitive keys are not committed to version control.
- **Performance Optimizations:** Code splitting (Vite handles this well by default for routes/components), lazy loading components and images, minimizing bundle size, using efficient state management, and optimizing image formats.
- **Hosting:** Suitable for static site hosting platforms like Vercel, Netlify, or GitHub Pages for the frontend. If a backend is implemented, a platform like Heroku, Render, or a cloud provider (AWS, GCP, Azure) would be needed.
- **SEO:** Implement meta tags and structured data (if applicable) for better search engine visibility, especially for the News and Insights sections.