Feat/initial site analyzer UI

Site-analyzer/prd.txt

@@ -0,0 +1,83 @@
+Product Requirements Document: Website Performance Auditor MVP
+Version: 1.0
+Date: October 26, 2023
+
+1. Executive Summary
+The Website Performance Auditor is an MVP web application designed to help developers and website owners quickly analyze a site's performance, SEO, and accessibility. The app provides actionable recommendations, allowing users to track their progress in fixing issues. The key innovation is a dynamic dashboard where overall performance scores update as individual tasks are completed, providing real-time feedback on improvements.
+
+2. Problem Statement
+Website performance, SEO, and accessibility are crucial for user experience and search engine ranking. However, developers often lack a simple, unified tool to analyze these aspects and track the progress of their improvements. Existing tools can be complex or do not provide a clear, trackable workflow for fixing issues. This MVP aims to solve this by providing a single, intuitive platform to audit, prioritize, and manage performance-related tasks.
+
+3. Goals & Objectives
+Provide a Unified Analysis: Offer a single-pane view of a website's speed, SEO, and accessibility.
+
+Create an Actionable Plan: Present detected issues as a clear, manageable list of tasks.
+
+Enable Task Management: Allow developers to change the status of issues (Pending, In Progress, Completed).
+
+Gamify the Process: Ensure performance scores update dynamically as tasks are completed, providing a satisfying and motivational user experience.
+
+Prioritize Clearly: Use color coding to visually represent the severity and priority of each issue.
+
+4. User Stories (MVP)
+As a user, I want to paste a website URL into a field and click "Analyze" to run an audit.
+
+As a user, I want to see a dashboard with a summary score for Speed, SEO, and Accessibility after the analysis is complete.
+
+As a user, I want to see a list of all detected issues, including a brief description, a priority level, and a severity level.
+
+As a developer, I want to be able to mark an issue as "In Progress" or "Completed" to track my work.
+
+As a developer, I want the overall performance score to automatically increase as I complete high-priority issues.
+
+As a developer, I want to see a summary dashboard that shows a count of all issues by status: Pending, In Progress, and Completed.
+
+As a user, I want to see different color coding (e.g., red, orange, green) to easily identify the priority and severity of issues.
+
+5. Core Features (MVP)
+URL Input: A simple input field and a "Run Audit" button on the homepage.
+
+Analysis Dashboard: Displays three main performance scores (Speed, SEO, Accessibility) as percentages or numeric values.
+
+Issues List: A dynamic list populated with items from the audit. Each item will have:
+
+Title: A brief, clear name of the issue.
+
+Description: A short explanation of the problem.
+
+Priority: A user-editable field to classify the issue as High, Medium, or Low Priority.
+
+Severity: A non-editable value assigned during the audit (e.g., Critical, Minor, Suggestion).
+
+Task Management: A button or checkbox next to each issue to change its status to "In Progress" or "Completed."
+
+Real-Time Score Update: Logic to recalculate and update the overall performance scores on the dashboard whenever an issue is marked as "Completed." The weight of each issue's contribution to the score should be based on its severity and priority.
+
+Color-Coded Visuals: Use clear, distinct colors (e.g., Red for Critical/High, Orange for Medium, Green for Completed) to provide visual cues about the status and importance of issues.
+
+6. Technical Requirements
+Front-end: A single-page web application.
+
+Backend: This MVP will require a backend service to perform the actual website audit. We will leverage an existing tool like Google's Lighthouse API or a similar open-source library to generate the initial report. The backend will handle the URL submission and return the raw audit data to the front-end.
+
+State Management: The application state (issue list, task status) will be managed on the client-side for this MVP, allowing the user to view and update the list during a single session. For persistent storage, we will need to integrate a database like Firebase Firestore in a future release.
+
+7. UI/UX Considerations
+Simplicity: The interface should be clean and focused, with minimal distractions.
+
+Feedback: Provide clear loading indicators and a success message upon completion of an audit.
+
+Responsiveness: The app should be fully responsive and work on both desktop and mobile devices.
+
+Intuitive Design: The task list should be easy to read, filter, and interact with. The color coding should be self-explanatory.
+
+8. Future Enhancements (Post-MVP)
+User Accounts: Allow users to create accounts to save and manage multiple projects.
+
+Historical Data: Track performance over time and show progress graphs.
+
+Report Generation: Allow users to export the audit report as a PDF or Markdown file.
+
+Notifications: Implement alerts for changes in a website's performance.
+
+Team Collaboration: Allow multiple users to work on the same project and see each other's progress in real-time.

Site-analyzer/site-analyzer-app/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Site-analyzer/site-analyzer-app/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

Site-analyzer/site-analyzer-app/eslint.config.mjs

@@ -0,0 +1,25 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;

Site-analyzer/site-analyzer-app/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

Site-analyzer/site-analyzer-app/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "site-analyzer-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "next": "15.5.2"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@tailwindcss/postcss": "^4",
+    "tailwindcss": "^4",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.2",
+    "@eslint/eslintrc": "^3"
+  }
+}