You are an AI assistant tasked with building a single-page React application using Tailwind CSS for styling. The application's purpose is to combat scientific fraud by providing tools to analyze academic publications for potential inconsistencies, manipulation, and fraud. This is a SaaS application targeting researchers, academics, publishers, and institutions concerned with scientific integrity.
## PROJECT OVERVIEW
The core problem this application addresses is the growing issue of scientific fraud, including data manipulation, fabrication, and plagiarism, which erodes trust in scientific research. Our application, tentatively named 'Bilimsel Dürüstlük Ağı' (Scientific Integrity Network), aims to be a comprehensive platform that empowers users to identify and mitigate these risks. Its value proposition lies in providing advanced analytical tools, a collaborative network, and actionable insights to uphold the highest standards of scientific integrity.
## TECH STACK
- **Frontend Framework**: React (using Create React App for simplicity or Vite for performance)
- **Styling**: Tailwind CSS for rapid UI development and consistent design.
- **State Management**: React Context API for managing global state (e.g., user authentication, fetched data) and useState/useReducer for local component state. For more complex state, consider Zustand or Jotai.
- **Routing**: React Router DOM for navigation within the single-page application.
- **Data Fetching**: Axios for HTTP requests to a potential backend API.
- **UI Components**: Potentially a UI library like Headless UI for accessible and customizable components that integrate well with Tailwind CSS.
- **Charting**: A charting library like Chart.js or Recharts for visualizing data relationships and scores.
- **Utility Libraries**: Lodash for utility functions, date-fns for date manipulation.
## CORE FEATURES
1. **Author & Institution Reputation Scoring**:
* **User Flow**: User searches for an author or institution. The system retrieves publication data, citation counts, retraction history, funding sources, and collaboration networks. It then calculates a composite 'Integrity Score' based on predefined metrics. The score is displayed visually (e.g., a gauge or percentage) with a breakdown of contributing factors.
* **Details**: This score is dynamic and should be updated periodically. It needs to consider factors like publication volume, citation impact (normalized for field), retraction rate, institutional affiliations, and potential conflicts of interest flagged from funding disclosures.
2. **Publication Dependency Mapping**:
* **User Flow**: User inputs a specific publication (DOI or title). The system visualizes a graph showing:
* Direct and indirect citations (incoming and outgoing).
* Co-authorship networks.
* Key institutions involved.
* Potential 'citation rings' or unusual citation patterns.
* **Details**: This feature uses graph visualization libraries to represent complex relationships. It helps users understand the context of a publication and identify potentially coordinated efforts.
3. **Potential Fraud/Manipulation Alerts**:
* **User Flow**: When analyzing a publication or author, the system flags potential issues based on simple heuristics and data patterns. Alerts could include:
* Unusual citation velocity.
* High number of self-citations or citations from a small, interconnected group.
* Statistical anomalies in reported data (if data is available).
* Significant similarity to retracted papers.
* **Details**: This is an MVP, so initial alerts will be rule-based. Advanced AI/ML models can be a future enhancement. The system should clearly indicate the basis for each alert.
4. **Real-time Scientific News & Alerts Feed**:
* **User Flow**: A dynamic feed displays recent retractions, major scientific misconduct cases, policy changes related to research integrity, and significant funding announcements. Users can filter this feed by discipline or keyword.
* **Details**: This aggregates data from reliable sources (e.g., Retraction Watch, official journal announcements, news APIs focused on science).
5. **User Workspace (Saved Items & Notes)**:
* **User Flow**: Users can save publications, authors, or institutions they are tracking. They can add private notes to these saved items for personal reference and organization.
* **Details**: This requires basic user account management and local storage or a simple backend for persistence.
## UI/UX DESIGN
- **Layout**: A clean, professional, and modern single-page application layout. A persistent navigation sidebar on the left for main features (Search, Dashboard, Feed, Workspace). The main content area will display search results, visualizations, and feed items. Use a responsive grid system.
- **Color Palette**: Primarily professional and trustworthy colors. A base of whites and light grays (#FFFFFF, #F8FAFC). A primary accent color like a deep blue (#1E3A8A) for key actions and navigation. Secondary accents could be a muted teal (#14B8A6) or a subtle orange (#F97316) for alerts or highlights. Use dark grays (#1F2937) for text.
- **Typography**: Use a sans-serif font family like Inter or Roboto for readability. Clear hierarchy with distinct sizes for headings (h1, h2, h3), body text, and captions.
- **Responsive Design**: Mobile-first approach. Ensure usability on screens ranging from 320px to 1440px+. Navigation might collapse into a hamburger menu on smaller screens. Grids should reflow, and charts should adapt.
- **Interactivity**: Subtle hover effects on buttons and links. Smooth transitions for content loading and filtering. Clear loading indicators (spinners, skeleton screens).
## COMPONENT BREAKDOWN
- **`App.js`**: Main application component. Sets up routing, global layout, and context providers.
- **`Navigation.js`**: Sidebar component. Contains links to different sections. Receives `activeSection` prop.
- **`SearchBar.js`**: Input field and button for searching authors, institutions, or publications. Handles input state and triggers search function via prop.
- **`Dashboard.js`**: Main landing page after login. Might show summary stats, recent alerts, or featured content.
- **`AuthorProfile.js`**: Displays details for a specific author. Includes name, affiliations, publication list, and reputation score. Accepts `authorId` prop.
- **`InstitutionProfile.js`**: Displays details for an institution. Includes name, affiliated researchers, and overall institutional score. Accepts `institutionId` prop.
- **`PublicationDetails.js`**: Shows information about a specific publication. Includes title, authors, journal, abstract, citation count, and triggers the dependency map visualization. Accepts `publicationId` or `doi` prop.
- **`ReputationScore.js`**: Reusable component to display a reputation score (e.g., using a gauge chart). Accepts `score` and `breakdown` props.
- **`DependencyMap.js`**: Component to render the interactive graph visualization. Receives graph data as a prop.
- **`AlertsFeed.js`**: Displays a list of recent scientific integrity alerts. Accepts `alerts` array prop.
- **`AlertItem.js`**: Renders a single alert item in the feed. Accepts `alert` object prop.
- **`Workspace.js`**: User's personal area to view saved items and add notes. Includes saved lists and a note-taking interface.
- **`SavedItem.js`**: Represents a saved author, institution, or publication in the workspace.
- **`LoadingSpinner.js`**: Reusable loading indicator.
- **`ErrorMessage.js`**: Component to display error messages to the user.
## DATA MODEL
- **`User`**: `{ id, name, email, role (e.g., 'researcher', 'admin'), settings }`
- **`Author`**: `{ id, name, affiliations: [institutionId], publications: [publicationId], reputationScore: { score, breakdown: { citations, retractions, ... } }, coAuthors: [authorId] }`
- **`Institution`**: `{ id, name, location, researchers: [authorId], avgReputationScore, retractionRate }`
- **`Publication`**: `{ id, doi, title, authors: [authorId], journal, year, abstract, citationCount, keywords, potentialIssues: [alertId] }`
- **`Alert`**: `{ id, type (e.g., 'retraction', 'manipulation'), source, message, timestamp, relatedPublicationId, relatedAuthorId }`
- **`SavedItem`**: `{ userId, itemId, itemType ('author', 'publication', 'institution'), notes: string, timestamp }`
**State Structure (Example using Context API)**:
`AppContext` will hold:
- `user`: Current user object or null.
- `searchQuery`: String for the search bar.
- `searchResults`: Array of authors, pubs, or institutions.
- `selectedItem`: The currently viewed author/pub/institution object.
- `alerts`: Array of recent alerts.
- `savedItems`: Array of user's saved items.
- `isLoading`: Boolean flag for global loading state.
- `error`: Error message string or null.
**Local Storage**: For MVP, user session tokens and `savedItems` with notes could be stored locally for persistence across sessions without a backend.
## ANIMATIONS & INTERACTIONS
- **Page Transitions**: Subtle fade-in/fade-out between major sections using libraries like `Framer Motion` or CSS transitions.
- **Hover Effects**: Buttons and interactive elements should have a slight scale-up or background color change on hover. Links should have an underline effect.
- **Loading States**: When fetching data, display `LoadingSpinner` components or skeleton loaders that mimic the content structure. This provides immediate feedback.
- **Chart Interactions**: Tooltips on hover for chart data points. Zoom/pan functionality for the dependency map if feasible.
- **Micro-interactions**: Smooth expansion/collapse of details sections. Subtle animation when an alert is added to the feed.
## EDGE CASES
- **Empty States**: When search yields no results, or the feed is empty, display user-friendly messages (e.g., "No publications found matching your query."). The workspace should have an empty state message too.
- **Error Handling**: Implement robust error handling for API requests. Display clear, user-friendly error messages using the `ErrorMessage` component. Log errors for debugging.
- **Validation**: Basic client-side validation for search inputs (e.g., ensuring DOI format is plausible). User input for notes should be handled safely.
- **Accessibility (a11y)**: Use semantic HTML5 elements. Ensure proper ARIA attributes for interactive components, especially for the graph visualization and navigation. Keyboard navigability for all interactive elements. Sufficient color contrast.
- **Data Integrity**: Clearly state the source and potential limitations of the data presented. Allow users to report inaccuracies.
- **Rate Limiting**: If interacting with external APIs (e.g., CrossRef for DOIs), respect their rate limits. Implement caching where appropriate.
## SAMPLE DATA
1. **Author Object**:
```json
{
"id": "auth_123",
"name": "Dr. Evelyn Reed",
"affiliations": ["inst_456"],
"publications": ["pub_789", "pub_101"],
"reputationScore": {
"score": 7.2,
"breakdown": {
"citations": 85,
"retractions": 1,
"fieldCitationsNorm": 1.1,
"selfCitations": 15
}
},
"coAuthors": ["auth_124", "auth_125"]
}
```
2. **Institution Object**:
```json
{
"id": "inst_456",
"name": "Metropolis University",
"location": "Metropolis City",
"researchers": ["auth_123", "auth_124"],
"avgReputationScore": 6.5,
"retractionRate": 0.05
}
```
3. **Publication Object**:
```json
{
"id": "pub_789",
"doi": "10.1000/xyz123",
"title": "Advanced Quantum Entanglement Studies",
"authors": ["auth_123", "auth_124"],
"journal": "Journal of Theoretical Physics",
"year": 2022,
"abstract": "This paper explores novel applications of quantum entanglement...",
"citationCount": 150,
"keywords": ["quantum", "entanglement", "physics"],
"potentialIssues": ["alert_xyz"]
}
```
4. **Alert Object**:
```json
{
"id": "alert_xyz",
"type": "unusual_citation_pattern",
"source": "Internal Analysis Engine",
"message": "Publication pub_789 shows a high concentration of citations from a small, newly formed group of authors.",
"timestamp": "2024-07-26T10:00:00Z",
"relatedPublicationId": "pub_789"
}
```
5. **Saved Item Object**:
```json
{
"userId": "user_abc",
"itemId": "pub_789",
"itemType": "publication",
"notes": "Interesting methodology, need to check funding source.",
"timestamp": "2024-07-25T14:30:00Z"
}
```
6. **Graph Data for Dependency Map**:
```json
{
"nodes": [
{ "id": "pub_789", "label": "Advanced Quantum Entanglement Studies", "type": "publication" },
{ "id": "auth_123", "label": "Dr. Evelyn Reed", "type": "author" },
{ "id": "auth_124", "label": "Dr. Ben Carter", "type": "author" },
{ "id": "pub_101", "label": "Correlated Particle Behavior", "type": "publication" },
{ "id": "inst_456", "label": "Metropolis University", "type": "institution" }
],
"links": [
{ "source": "auth_123", "target": "pub_789", "type": "authored" },
{ "source": "auth_124", "target": "pub_789", "type": "authored" },
{ "source": "pub_789", "target": "pub_101", "type": "cites" },
{ "source": "auth_123", "target": "inst_456", "type": "affiliated_with" },
{ "source": "auth_124", "target": "inst_456", "type": "affiliated_with" }
]
}
```
## DEPLOYMENT NOTES
- **Build Process**: Use `npm run build` (for CRA) or `npm run build` (for Vite). This generates optimized static assets in a `build` or `dist` folder.
- **Environment Variables**: Use `.env` files for managing environment-specific configurations (e.g., API endpoints). Prefix variables with `REACT_APP_` (for CRA) or `VITE_` (for Vite). Example: `REACT_APP_API_URL=https://api.yourdomain.com`.
- **Hosting**: Deploy the static build output to static hosting services like Netlify, Vercel, AWS S3 + CloudFront, or GitHub Pages.
- **Performance Optimizations**:
* Code Splitting: Utilize React.lazy and Suspense for dynamic imports of components, especially less frequently used ones or large visualization libraries.
* Memoization: Use `React.memo`, `useMemo`, and `useCallback` judiciously to prevent unnecessary re-renders.
* Image Optimization: Use optimized image formats and sizes.
* Bundle Analysis: Use tools like `webpack-bundle-analyzer` to identify large dependencies.
* Lazy Loading: Implement lazy loading for images and potentially off-screen components.
- **HTTPS**: Ensure the deployed application uses HTTPS for secure communication.
- **CORS**: If using a separate backend API, configure CORS headers appropriately on the server.