PROJECT OVERVIEW:
You are tasked with developing a single-page SaaS application called 'Web Hızlandırıcı' (Web Accelerator). The primary goal of this application is to address the critical problem of bloated web pages, exemplified by the '49MB web page' phenomenon discussed in tech circles. Many modern websites, especially publishers, suffer from excessively large page sizes, high network request counts, and slow load times (often exceeding several minutes). This negatively impacts user experience, leading to high bounce rates, lost engagement, and user frustration, often driving users to install ad-blockers. Web Hızlandırıcı aims to provide website owners with tools to analyze their current performance, receive actionable optimization recommendations, and monitor improvements over time, ultimately helping them deliver faster, more efficient web experiences to their users. The core value proposition is to significantly reduce page load times and data transfer sizes without compromising content quality or functionality, thereby improving user retention and engagement.
TECH STACK:
- Frontend Framework: React (using Create React App for simplicity, but adaptable to Next.js if SSR becomes a requirement later).
- Styling: Tailwind CSS for rapid and consistent UI development. Custom CSS will be used sparingly for specific animations or complex layouts.
- State Management: Zustand for efficient and simple global state management. Local state will be managed within individual components where appropriate.
- Routing: React Router DOM for managing navigation within the single-page application.
- Charting Library: Chart.js or Recharts for visualizing performance data.
- API Calls: Axios for making HTTP requests to a hypothetical backend or mock API.
- Form Handling: React Hook Form for efficient and performant form management.
- Utility Libraries: Lodash for utility functions, date-fns for date manipulation.
CORE FEATURES:
1. **Dashboard & Website Analysis:**
* **User Flow:** Upon landing on the app, the user is presented with a clear input field to enter their website URL. Upon submission, a loading state is shown. The application simulates fetching analysis data (page size, request count, load time, breakdown by asset type - JS, CSS, Images, HTML, etc.). The results are displayed prominently on the dashboard using clear visualizations (charts, key metrics).
* **Details:** This section should parse the URL and simulate a performance audit, providing metrics like Total Page Size, Number of Network Requests, Estimated Load Time (based on global average speeds), and a breakdown of data by asset type (e.g., Images, Scripts, Stylesheets, HTML, Fonts, Other).
2. **Optimization Recommendations:**
* **User Flow:** Based on the analysis results, this section provides a prioritized list of actionable recommendations. Each recommendation includes a title, a brief explanation of the problem and its impact, and specific steps for implementation. Examples: 'Optimize Images: Compress and resize large images', 'Minify JavaScript & CSS: Reduce file sizes by removing unnecessary characters', 'Leverage Browser Caching: Instruct browsers to store static assets locally', 'Reduce Third-Party Scripts: Audit and remove non-essential tracking or ad scripts'.
* **Details:** Recommendations should be categorized (e.g., Images, Code, Network, Server). Each recommendation should have a severity level (e.g., High, Medium, Low) and estimated impact on load time/page size. Implementation guidance can range from general advice to specific code snippets or links to relevant documentation/tools.
3. **Performance Monitoring & History:**
* **User Flow:** Users can view historical performance data for their website. A date range selector allows users to view trends over time. Performance metrics (page size, request count, load time) are displayed using line or bar charts.
* **Details:** This feature simulates tracking performance over days/weeks. It visualizes how optimization efforts affect key metrics. Data should be presented clearly, allowing users to see improvements or regressions.
4. **User Account & Settings (Minimal for MVP):**
* **User Flow:** Basic signup/login functionality (can be simulated or use a simple local storage approach for MVP). A settings page to manage profile information and perhaps notification preferences.
* **Details:** Focus on enabling the core features. Authentication can be a placeholder for the MVP.
UI/UX DESIGN:
- **Layout:** A clean, modern, and intuitive single-page application layout. A persistent sidebar or top navigation for main sections (Dashboard, Recommendations, History, Settings). The main content area will display the active section's information.
- **Color Palette:** Primarily a light theme (e.g., white/light gray backgrounds) with a vibrant accent color (e.g., a bright blue, green, or orange) for calls to action, charts, and key metrics. Dark theme could be a future consideration. Use subtle shades of gray for secondary information and borders.
- **Typography:** Use a clean, readable sans-serif font (e.g., Inter, Poppins, or system default). Clear hierarchy using font sizes and weights for headings, subheadings, body text, and labels.
- **Responsive Design:** Mobile-first approach. The layout must adapt gracefully to various screen sizes (mobile, tablet, desktop). Use Tailwind CSS's responsive modifiers extensively (e.g., `md:`, `lg:`).
- **Interactions:** Subtle hover effects on buttons and interactive elements. Smooth transitions for section loading and data updates. Clear loading indicators (spinners, skeleton screens) during data fetching.
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing and global layout.
- `Layout.js`: Main layout wrapper, includes sidebar/navbar and main content area.
- `Sidebar.js` / `Navbar.js`: Navigation component.
- `DashboardPage.js`: Container for the dashboard view.
- `UrlInputForm.js`: Component for submitting the website URL. Receives `onSubmit` prop.
- `AnalysisResults.js`: Displays the key metrics and data breakdown from the analysis. Receives `analysisData` prop.
- `MetricCard.js`: Reusable card component to display a single key metric (e.g., Page Size, Request Count). Receives `title`, `value`, `unit`, `icon` props.
- `DataLoader.js`: Component to show loading states (spinner, skeleton). Receives `isLoading` prop.
- `ErrorDisplay.js`: Component to show error messages. Receives `error` prop.
- `RecommendationsPage.js`: Container for the recommendations view.
- `RecommendationList.js`: Displays the list of optimization suggestions. Receives `recommendations` prop.
- `RecommendationItem.js`: Displays a single recommendation with details and implementation steps. Receives `recommendation` object prop.
- `HistoryPage.js`: Container for the historical performance data view.
- `PerformanceChart.js`: Reusable chart component using Chart.js/Recharts. Receives `data`, `labels`, `chartType` props.
- `DateRangeSelector.js`: Component for selecting the time period for historical data.
- `Auth.js` / `SettingsPage.js`: Placeholder for authentication and settings (for MVP, can be simplified).
DATA MODEL:
- **State Structure (Zustand Store):**
```javascript
// Example Zustand store structure
{
analysis: {
url: '',
data: null, // { pageSize: 49.2, requests: 422, loadTime: 120, breakdown: [...] }
isLoading: false,
error: null
},
recommendations: [], // Array of recommendation objects
history: [], // Array of historical data points { date: '2023-10-27', pageSize: 48.5, requests: 410, loadTime: 115 }
user: { // Minimal for MVP
isAuthenticated: false,
profile: null
}
}
```
- **Mock Data Formats:**
* `Analysis Data:`
```json
{
"pageSizeMB": 49.2,
"networkRequests": 422,
"estimatedLoadTimeSeconds": 120,
"breakdown": [
{"type": "JavaScript", "sizeMB": 15.5, "count": 80},
{"type": "CSS", "sizeMB": 5.2, "count": 40},
{"type": "Images", "sizeMB": 20.1, "count": 200},
{"type": "HTML", "sizeMB": 1.0, "count": 1},
{"type": "Fonts", "sizeMB": 2.1, "count": 10},
{"type": "Other", "sizeMB": 5.3, "count": 91}
]
}
```
* `Recommendation Object:`
```json
{
"id": "rec001",
"title": "Optimize Images",
"description": "Large image files significantly increase page size and load time. Compressing and resizing them can yield substantial improvements.",
"severity": "High",
"estimatedImpactMB": 10.5,
"estimatedImpactSeconds": 30,
"implementationSteps": [
"Use tools like TinyPNG or ImageOptim to compress images.",
"Serve images in modern formats like WebP.",
"Implement responsive images using srcset attribute."
],
"category": "Images"
}
```
* `History Data Point:`
```json
{
"date": "2023-10-27T10:00:00Z",
"pageSizeMB": 48.5,
"networkRequests": 410,
"estimatedLoadTimeSeconds": 115
}
```
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade or slide transitions between different sections/pages using `Framer Motion` or CSS transitions triggered by route changes.
- **Button Hovers:** Gentle background color change or slight scaling effect on interactive buttons.
- **Data Loading:** Use `react- شimmer` or custom CSS skeleton loaders for analysis results and charts while data is being fetched. A distinct spinner icon for immediate feedback on actions like URL submission.
- **Metric Updates:** Animate the numbers in `MetricCard` components when new data is loaded, showing a subtle count-up effect.
- **Recommendation Expansion:** Smooth expand/collapse animation for the detailed implementation steps within each recommendation item.
- **Chart Animations:** Use default Chart.js or Recharts animations for loading data into charts.
EDGE CASES:
- **Invalid URL:** Implement validation on the URL input to check for valid URL format. Display a clear error message if invalid. Use regex for basic validation.
- **API Errors:** Handle potential errors during data fetching (network issues, server errors). Display user-friendly error messages (e.g., 'Could not fetch data. Please try again later.'). Include a 'Retry' button where appropriate.
- **Empty States:** Design clear empty states for the Dashboard (before URL submission), Recommendations (if no issues found or data not yet processed), and History (if no historical data exists). Use illustrations or informative text.
- **No Recommendations:** If the analysis reveals no significant issues, display a positive message on the Recommendations page (e.g., 'Your website is performing great!').
- **Accessibility (a11y):** Ensure proper semantic HTML structure. Use ARIA attributes where necessary. Ensure sufficient color contrast. All interactive elements should be keyboard-navigable and have visible focus states.
- **Data Formatting:** Handle cases where data might be missing or in an unexpected format from the (mock) API. Provide fallback values or gracefully skip rendering problematic parts.
- **Responsiveness:** Test thoroughly on various devices and screen sizes. Ensure no layout breaks or usability issues on smaller screens.
SAMPLE DATA:
- **Mock URLs:** `https://example-news.com`, `https://fashion-blog.co`, `https://gadget-reviews.net`, `https://local-bakery.io`, `https://portfolio-artist.dev`
- **Mock Analysis Results (for different sites):
1. `example-news.com`: {pageSizeMB: 49.2, networkRequests: 422, estimatedLoadTimeSeconds: 120, breakdown: [...]}
2. `fashion-blog.co`: {pageSizeMB: 35.8, networkRequests: 310, estimatedLoadTimeSeconds: 95, breakdown: [...]}
3. `gadget-reviews.net`: {pageSizeMB: 65.5, networkRequests: 550, estimatedLoadTimeSeconds: 180, breakdown: [...]}
4. `local-bakery.io`: {pageSizeMB: 12.1, networkRequests: 110, estimatedLoadTimeSeconds: 30, breakdown: [...]}
5. `portfolio-artist.dev`: {pageSizeMB: 8.5, networkRequests: 75, estimatedLoadTimeSeconds: 15, breakdown: [...]}
- **Mock Recommendations (subset):
1. ID: rec001, Title: Optimize Images, Severity: High, Category: Images
2. ID: rec002, Title: Minify JavaScript, Severity: Medium, Category: Code
3. ID: rec003, Title: Reduce Server Response Time (TTFB), Severity: High, Category: Network
4. ID: rec004, Title: Remove Unused CSS, Severity: Low, Category: Code
5. ID: rec005, Title: Enable Text Compression (Gzip/Brotli), Severity: Medium, Category: Network
- **Mock History Data:** Generate 5-10 historical data points for a sample URL, showing gradual changes over time.
DEPLOYMENT NOTES:
- **Build:** Use `npm run build` or `yarn build` which generates optimized static assets in a `build/` directory.
- **Environment Variables:** Use `.env` files for managing environment variables (e.g., API endpoints if a real backend is used later). `REACT_APP_API_URL`. For MVP, mocks are sufficient, so env vars might not be strictly necessary initially.
- **Performance Optimizations:**
* Code Splitting: Implement dynamic imports (`React.lazy` and `Suspense`) for different sections/pages to reduce initial bundle size.
* Memoization: Use `React.memo`, `useMemo`, `useCallback` judiciously to prevent unnecessary re-renders.
* Image Optimization: Ensure images used within the app itself are optimized.
* Bundle Analysis: Use tools like `webpack-bundle-analyzer` to inspect the final bundle size and identify potential optimizations.
- **Hosting:** Can be deployed to static hosting platforms like Netlify, Vercel, or GitHub Pages.
- **HTTPS:** Ensure the application is served over HTTPS.