Dennis
14a32bdc0d
- Unified monorepo with backend (Express), frontend (Next.js), and devops - Backend: ESLint, Prettier, Jest tests (3 passing), health endpoint, .env.example - Frontend: Fixed build errors, fixed all lint errors (0 remaining), tests passing - DevOps: Docker Compose with PostgreSQL, backend, frontend + healthchecks - CI/CD: 3 GitHub Actions workflows (backend, frontend, docker integration) - DX: Husky pre-commit hooks with smart change detection - Docs: Root README with architecture, CONTRIBUTING.md, PR template Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
980 lines
52 KiB
JSON
980 lines
52 KiB
JSON
{
|
|
"master": {
|
|
"tasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Setup Project Repository",
|
|
"description": "Initialize the project repository with Next.js, React, TypeScript, and Tailwind CSS.",
|
|
"details": "Create a new Next.js project using `create-next-app` with TypeScript template. Install Tailwind CSS following official documentation.",
|
|
"testStrategy": "Verify that the project structure is correct and Tailwind CSS styles are applied.",
|
|
"priority": "high",
|
|
"dependencies": [],
|
|
"status": "done",
|
|
"subtasks": []
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Implement User Authentication",
|
|
"description": "Setup user authentication with sign up, login, password reset, and OAuth/social login support.",
|
|
"details": "Use NextAuth.js for authentication. Implement sign-up, login, and password reset flows. Integrate OAuth providers like Google, Facebook.",
|
|
"testStrategy": "Test all authentication flows to ensure they work correctly.",
|
|
"priority": "high",
|
|
"dependencies": [
|
|
1
|
|
],
|
|
"status": "in-progress",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Setup NextAuth.js Configuration",
|
|
"description": "Configure NextAuth.js for the project.",
|
|
"dependencies": [],
|
|
"details": "Install NextAuth.js and configure it in your Next.js application. Set up basic authentication providers like credentials, Google, and Facebook.",
|
|
"status": "done",
|
|
"testStrategy": "Verify that NextAuth.js is correctly configured by attempting to log in with different providers."
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Implement Sign-Up Flow",
|
|
"description": "Create a sign-up page and handle user registration.",
|
|
"dependencies": [
|
|
"2.1"
|
|
],
|
|
"details": "Develop a sign-up form that collects user information and uses NextAuth.js to create a new user account.",
|
|
"status": "done",
|
|
"testStrategy": "Test the sign-up flow by creating new accounts and verifying they are stored correctly."
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Implement Login Flow",
|
|
"description": "Create a login page and handle user authentication.",
|
|
"dependencies": [
|
|
"2.1"
|
|
],
|
|
"details": "Develop a login form that uses NextAuth.js to authenticate users with their credentials or OAuth providers.",
|
|
"status": "in-progress",
|
|
"testStrategy": "Test the login flow by logging in with different accounts and ensuring proper redirection."
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Implement Password Reset Flow",
|
|
"description": "Create a password reset mechanism for users.",
|
|
"dependencies": [
|
|
"2.1"
|
|
],
|
|
"details": "Develop a password reset form that allows users to request a password reset and update their password using NextAuth.js.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the password reset flow by resetting passwords and verifying that users can log in with the new credentials."
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Integrate OAuth Providers",
|
|
"description": "Configure and test OAuth providers like Google and Facebook.",
|
|
"dependencies": [
|
|
"2.1"
|
|
],
|
|
"details": "Set up OAuth provider configurations in NextAuth.js for Google and Facebook. Ensure that users can log in using these providers.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the OAuth login flow by logging in with Google and Facebook accounts and verifying proper authentication."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Create Organization & Team Management",
|
|
"description": "Allow users to create and join organizations, manage team members, and set organization-level dashboards.",
|
|
"details": "Implement CRUD operations for organizations and team members. Create organization-specific settings and dashboards.",
|
|
"testStrategy": "Verify that users can create organizations, invite team members, and access organization-specific dashboards.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
2
|
|
],
|
|
"status": "pending",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Implement Organization CRUD Operations",
|
|
"description": "Create endpoints and UI components to allow users to create, read, update, and delete organizations.",
|
|
"dependencies": [],
|
|
"details": "Use RESTful API principles for backend implementation. Create React components for frontend forms and tables.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify each CRUD operation works correctly through the UI and API."
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Implement Team Member Management",
|
|
"description": "Create functionality to add, remove, and manage team members within organizations.",
|
|
"dependencies": [
|
|
"3.1"
|
|
],
|
|
"details": "Extend organization model to include team members. Create UI components for managing team members.",
|
|
"status": "pending",
|
|
"testStrategy": "Test adding, removing, and updating team members through the UI."
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Create Organization Settings",
|
|
"description": "Develop settings specific to organizations that can be configured by administrators.",
|
|
"dependencies": [
|
|
"3.1"
|
|
],
|
|
"details": "Add settings model to organization schema. Create admin-only UI for configuring these settings.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify settings are saved correctly and reflected in the application."
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Implement Organization Dashboards",
|
|
"description": "Create dashboards that display organization-specific data and metrics.",
|
|
"dependencies": [
|
|
"3.1",
|
|
"3.2",
|
|
"3.3"
|
|
],
|
|
"details": "Design dashboard UI components. Fetch and display relevant data from the backend API.",
|
|
"status": "pending",
|
|
"testStrategy": "Ensure dashboards show accurate, up-to-date information specific to each organization."
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Integrate Organization Management with User Authentication",
|
|
"description": "Ensure that only authenticated users can create and manage organizations and team members.",
|
|
"dependencies": [],
|
|
"details": "Use authentication middleware to protect organization management routes. Update UI components to handle authentication states.",
|
|
"status": "pending",
|
|
"testStrategy": "Test that unauthorized access attempts are properly blocked."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Add Website Management Features",
|
|
"description": "Enable users to add, edit, and remove monitored websites with configurable settings.",
|
|
"details": "Create forms for adding/editing websites. Implement configuration options like scan frequency and alert thresholds.",
|
|
"testStrategy": "Test the website management interface to ensure all CRUD operations work correctly.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
3
|
|
],
|
|
"status": "pending",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Create Website Form Component",
|
|
"description": "Develop the form component for adding new websites.",
|
|
"dependencies": [],
|
|
"details": "Use React and TypeScript to create a form with fields for website URL, name, and other basic information. Implement validation for required fields.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the form rendering and validation rules."
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Implement Website Addition API",
|
|
"description": "Create an API endpoint to handle adding new websites.",
|
|
"dependencies": [
|
|
"4.1"
|
|
],
|
|
"details": "Use Next.js API routes to create an endpoint that accepts website data and stores it in the database. Ensure proper error handling and validation.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the API endpoint with various inputs, including edge cases."
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Create Configuration Form Component",
|
|
"description": "Develop the form component for configuring website settings like scan frequency and alert thresholds.",
|
|
"dependencies": [],
|
|
"details": "Use React and TypeScript to create a form with fields for scan frequency, alert thresholds, and other configurable settings. Implement validation for required fields.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the form rendering and validation rules."
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Implement Configuration Update API",
|
|
"description": "Create an API endpoint to handle updating website configurations.",
|
|
"dependencies": [
|
|
"4.3"
|
|
],
|
|
"details": "Use Next.js API routes to create an endpoint that accepts configuration data and updates it in the database. Ensure proper error handling and validation.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the API endpoint with various inputs, including edge cases."
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Implement Website Removal Functionality",
|
|
"description": "Create an API endpoint to handle removing websites.",
|
|
"dependencies": [
|
|
"4.1",
|
|
"4.3"
|
|
],
|
|
"details": "Use Next.js API routes to create an endpoint that accepts a website ID and removes it from the database. Ensure proper error handling and validation.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the API endpoint with various inputs, including edge cases."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Implement Real-time and Scheduled Uptime Checks",
|
|
"description": "Setup real-time and scheduled uptime checks for monitored websites.",
|
|
"details": "Use a background job processor like Agenda or Bull to schedule uptime checks. Implement health check endpoints.",
|
|
"testStrategy": "Verify that uptime checks are performed as scheduled and results are recorded.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
4
|
|
],
|
|
"status": "pending",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Setup Background Job Processor",
|
|
"description": "Choose and configure a background job processor for scheduling uptime checks.",
|
|
"dependencies": [],
|
|
"details": "Select either Agenda or Bull as the background job processor. Install the package using npm/yarn and set up basic configuration in your project.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that the job processor is correctly installed and configured by running a simple test job."
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Create Health Check Endpoint",
|
|
"description": "Implement an endpoint to perform health checks on monitored websites.",
|
|
"dependencies": [],
|
|
"details": "Create an API endpoint that accepts a URL parameter and returns the status of the website (up/down). Use HTTP requests to check the website's availability.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the endpoint with various URLs to ensure it correctly reports the status of each website."
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Schedule Regular Uptime Checks",
|
|
"description": "Configure regular uptime checks using the background job processor.",
|
|
"dependencies": [
|
|
"5.1",
|
|
"5.2"
|
|
],
|
|
"details": "Set up recurring jobs in the background job processor to call the health check endpoint at specified intervals (e.g., every 5 minutes). Store the results of each check.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that uptime checks are performed as scheduled and results are recorded correctly."
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Implement Real-time Uptime Checks",
|
|
"description": "Add functionality for real-time uptime checks on demand.",
|
|
"dependencies": [
|
|
"5.2"
|
|
],
|
|
"details": "Create an API endpoint that triggers an immediate health check and returns the result. This should bypass the scheduled job processor.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the real-time endpoint with various URLs to ensure it correctly reports the status of each website immediately."
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Store and Display Uptime Check Results",
|
|
"description": "Implement storage and display for uptime check results.",
|
|
"dependencies": [
|
|
"5.3"
|
|
],
|
|
"details": "Create a database schema to store the results of each uptime check (timestamp, URL, status). Implement a UI component to display historical uptime data.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that uptime check results are stored correctly in the database and displayed accurately in the UI."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 6,
|
|
"title": "Develop Performance Metrics Visualization",
|
|
"description": "Create visualizations for real-time and historical performance metrics.",
|
|
"details": "Use libraries like Recharts or Chart.js to create charts and graphs. Fetch data from the backend API.",
|
|
"testStrategy": "Ensure that performance metrics are displayed correctly in the dashboard.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
5
|
|
],
|
|
"status": "pending",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Setup Data Fetching from Backend API",
|
|
"description": "Create functions to fetch real-time and historical performance metrics data from the backend API.",
|
|
"dependencies": [],
|
|
"details": "Use Axios or Fetch API to create functions that will retrieve data from predefined endpoints in the backend. Handle authentication if required.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that data is fetched correctly by checking response structure and content."
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Select Charting Library",
|
|
"description": "Choose between Recharts or Chart.js for creating visualizations based on project requirements.",
|
|
"dependencies": [],
|
|
"details": "Evaluate both libraries in terms of features, ease of use, and integration with the existing tech stack. Make a decision and document it.",
|
|
"status": "pending",
|
|
"testStrategy": "Create simple test charts to ensure the chosen library works well within the project setup."
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Design Chart Components",
|
|
"description": "Create reusable chart components for different types of performance metrics visualizations.",
|
|
"dependencies": [
|
|
"6.2"
|
|
],
|
|
"details": "Develop React components using the selected charting library that can be reused across different parts of the application. Include props for customization.",
|
|
"status": "pending",
|
|
"testStrategy": "Test each component with sample data to ensure they render correctly and are responsive."
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Integrate Data Fetching with Chart Components",
|
|
"description": "Connect the chart components with the data fetching functions to display real-time and historical metrics.",
|
|
"dependencies": [
|
|
"6.1",
|
|
"6.3"
|
|
],
|
|
"details": "Use React hooks like useEffect and useState to fetch data when components mount and update the charts accordingly.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that charts update correctly when new data is fetched and handle loading states appropriately."
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Implement Real-time Data Updates",
|
|
"description": "Setup WebSocket or long-polling to receive real-time updates for performance metrics.",
|
|
"dependencies": [
|
|
"6.1",
|
|
"6.4"
|
|
],
|
|
"details": "Integrate a real-time data connection using WebSockets or server-sent events (SSE) to keep charts updated with the latest data.",
|
|
"status": "pending",
|
|
"testStrategy": "Simulate real-time data changes and verify that charts update instantly without requiring manual refresh."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 7,
|
|
"title": "Implement Alerting & Notifications System",
|
|
"description": "Setup configurable alerts for downtime, slow performance, or errors with email notifications.",
|
|
"details": "Create alert configurations and integrate an email service like SendGrid. Implement in-app alert indicators.",
|
|
"testStrategy": "Test alert triggers and ensure emails are sent as expected.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
6
|
|
],
|
|
"status": "pending",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Design Alert Configuration Schema",
|
|
"description": "Create a schema for alert configurations including conditions and thresholds.",
|
|
"dependencies": [],
|
|
"details": "Define JSON schema for alert configurations that includes fields like condition type (downtime, slow performance, errors), threshold values, and notification settings. Store these configurations in the database.",
|
|
"status": "pending",
|
|
"testStrategy": "Validate schema against sample configurations"
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Integrate Email Service",
|
|
"description": "Set up SendGrid or similar email service for sending notifications.",
|
|
"dependencies": [],
|
|
"details": "Create an account on SendGrid, configure API keys, and set up a service in the application to send emails using these credentials. Implement functions to send test emails.",
|
|
"status": "pending",
|
|
"testStrategy": "Send test emails through the integrated service"
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Implement Alert Trigger Logic",
|
|
"description": "Create logic to trigger alerts based on configured conditions.",
|
|
"dependencies": [
|
|
"7.1"
|
|
],
|
|
"details": "Write functions that check system metrics against alert configurations and trigger notifications when conditions are met. This can be done using background jobs or scheduled tasks.",
|
|
"status": "pending",
|
|
"testStrategy": "Simulate conditions to verify alert triggers"
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Create In-App Alert Indicators",
|
|
"description": "Implement visual indicators in the application for active alerts.",
|
|
"dependencies": [
|
|
"7.3"
|
|
],
|
|
"details": "Design and implement UI components that display alert statuses (e.g., icons, badges) on relevant dashboards or pages within the application.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that alert indicators appear correctly when conditions are met"
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Test End-to-End Alerting System",
|
|
"description": "Perform end-to-end testing of the entire alerting and notification system.",
|
|
"dependencies": [
|
|
"7.2",
|
|
"7.4"
|
|
],
|
|
"details": "Create test cases that simulate various alert conditions, verify that alerts are triggered correctly, and ensure that notifications are sent via email and displayed in-app.",
|
|
"status": "pending",
|
|
"testStrategy": "Run automated tests to validate the entire workflow"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 8,
|
|
"title": "Add Competitor Analysis Features",
|
|
"description": "Enable users to add competitor websites for benchmarking and compare performance metrics.",
|
|
"details": "Create forms for adding competitors. Implement comparison visualizations in the dashboard.",
|
|
"testStrategy": "Verify that competitor analysis features work correctly and comparisons are accurate.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
7
|
|
],
|
|
"status": "pending",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Create Competitor Addition Form",
|
|
"description": "Develop a form interface for users to add competitor websites.",
|
|
"dependencies": [],
|
|
"details": "Use React and Tailwind CSS to create the form. Include fields for website URL, name, and notes. Implement validation rules for required fields.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that the form renders correctly and validates input properly."
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Implement Competitor Data Storage",
|
|
"description": "Set up backend storage for competitor website data.",
|
|
"dependencies": [
|
|
"8.1"
|
|
],
|
|
"details": "Create a database schema to store competitor information. Implement API endpoints to save and retrieve competitor data.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the API endpoints to ensure they correctly handle CRUD operations for competitor data."
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Fetch Competitor Performance Metrics",
|
|
"description": "Retrieve performance metrics for added competitors from backend services.",
|
|
"dependencies": [
|
|
"8.2"
|
|
],
|
|
"details": "Implement API calls to fetch performance metrics for each competitor website. Store the retrieved data in a structured format.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that the correct performance metrics are fetched and stored for each competitor."
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Develop Comparison Visualization",
|
|
"description": "Create visualizations to compare performance metrics between user's website and competitors.",
|
|
"dependencies": [
|
|
"8.3"
|
|
],
|
|
"details": "Use a charting library like Recharts or Chart.js to create comparison charts. Display key metrics such as uptime, response time, etc.",
|
|
"status": "pending",
|
|
"testStrategy": "Ensure that the visualizations accurately reflect the performance comparisons between websites."
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Integrate Visualization into Dashboard",
|
|
"description": "Add the comparison visualization to the main dashboard interface.",
|
|
"dependencies": [
|
|
"8.4"
|
|
],
|
|
"details": "Embed the created visualizations within the existing dashboard layout. Ensure they are responsive and fit well with other UI elements.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that the visualizations display correctly in the dashboard and provide meaningful insights."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 9,
|
|
"title": "Create Main Dashboard with Key Metrics",
|
|
"description": "Develop the main dashboard to display key metrics and status for all monitored websites.",
|
|
"details": "Aggregate data from various sources and create a comprehensive overview. Use modern UI components.",
|
|
"testStrategy": "Ensure that the main dashboard displays accurate and up-to-date information.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
8
|
|
],
|
|
"status": "pending",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Design Dashboard Layout",
|
|
"description": "Create the layout structure for the main dashboard using modern UI components.",
|
|
"dependencies": [],
|
|
"details": "Use a responsive grid system to create sections for different metrics. Ensure the layout is flexible and can accommodate various widgets.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that the layout adapts correctly to different screen sizes."
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Integrate Data Aggregation API",
|
|
"description": "Connect the dashboard to the data aggregation service to fetch key metrics.",
|
|
"dependencies": [
|
|
"9.1"
|
|
],
|
|
"details": "Implement API calls to retrieve data from various sources and structure it for display on the dashboard.",
|
|
"status": "pending",
|
|
"testStrategy": "Test that data is fetched correctly and displayed accurately."
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Create Metric Widgets",
|
|
"description": "Develop reusable UI components to display individual metrics.",
|
|
"dependencies": [
|
|
"9.1"
|
|
],
|
|
"details": "Design widgets for different types of data (e.g., charts, gauges, tables) and ensure they are configurable.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that each widget displays data correctly and can be configured as needed."
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Implement Status Indicators",
|
|
"description": "Add visual indicators to show the status of monitored websites (e.g., online/offline, error alerts).",
|
|
"dependencies": [
|
|
"9.2",
|
|
"9.3"
|
|
],
|
|
"details": "Use color coding and icons to represent different statuses clearly.",
|
|
"status": "pending",
|
|
"testStrategy": "Test that status indicators update correctly based on website conditions."
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Add Real-time Updates",
|
|
"description": "Enable real-time data updates for the dashboard using WebSockets or similar technology.",
|
|
"dependencies": [
|
|
"9.2",
|
|
"9.3",
|
|
"9.4"
|
|
],
|
|
"details": "Implement a mechanism to push updates from the server to the client and refresh the dashboard accordingly.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that changes in data are reflected on the dashboard in real-time."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 10,
|
|
"title": "Implement Responsive Design and Accessibility",
|
|
"description": "Ensure the application is responsive and accessible on various devices.",
|
|
"details": "Use Tailwind CSS to create a responsive layout. Follow accessibility best practices and test with tools like Lighthouse.",
|
|
"testStrategy": "Verify that the application works well on different screen sizes and passes accessibility checks.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
9
|
|
],
|
|
"status": "pending",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Integrate Tailwind CSS for Responsive Layout",
|
|
"description": "Set up Tailwind CSS in the project to create responsive layouts.",
|
|
"dependencies": [],
|
|
"details": "Install Tailwind CSS via npm and configure it in your project's CSS setup. Create base styles using Tailwind's utility classes.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that basic Tailwind CSS classes are working and responsive on different screen sizes."
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Create Responsive Layout Components",
|
|
"description": "Develop key layout components using Tailwind CSS's responsive utilities.",
|
|
"dependencies": [
|
|
"10.1"
|
|
],
|
|
"details": "Implement header, footer, and main content sections with responsive behavior. Use Tailwind's grid system and breakpoints.",
|
|
"status": "pending",
|
|
"testStrategy": "Test the layout on various screen sizes to ensure it adapts correctly."
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Implement Accessibility Best Practices",
|
|
"description": "Apply accessibility best practices throughout the application.",
|
|
"dependencies": [
|
|
"10.2"
|
|
],
|
|
"details": "Ensure proper use of semantic HTML, ARIA roles, and keyboard navigation support. Implement color contrast checks.",
|
|
"status": "pending",
|
|
"testStrategy": "Use tools like Lighthouse to audit accessibility and fix any issues identified."
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Test Accessibility with Lighthouse",
|
|
"description": "Run accessibility tests using Lighthouse to identify and fix issues.",
|
|
"dependencies": [
|
|
"10.3"
|
|
],
|
|
"details": "Configure Lighthouse in your development environment and run regular audits. Address any critical accessibility issues found.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that the application passes Lighthouse accessibility checks with a high score."
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Final Responsive Design Review",
|
|
"description": "Conduct a comprehensive review of the responsive design and accessibility implementation.",
|
|
"dependencies": [
|
|
"10.4"
|
|
],
|
|
"details": "Perform manual testing on various devices and screen sizes. Ensure all accessibility best practices are followed consistently.",
|
|
"status": "pending",
|
|
"testStrategy": "Verify that the application is fully responsive and accessible across different devices and browsers."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 11,
|
|
"title": "Fix Console Error Logging",
|
|
"description": "Replace console.error with proper error serialization to show meaningful information.",
|
|
"status": "done",
|
|
"dependencies": [],
|
|
"priority": "high",
|
|
"details": "Use utility functions from `src/utils/errorUtils.ts` for enhanced error logging:\n- `serializeError()`: Safely serializes error objects\n- `logError()`: Enhanced console.error with context\n- `getUserFriendlyErrorMessage()`: Converts technical errors to user-friendly messages\n- Error type detection functions: `isDatabaseError()`, `isNetworkError()`, `isAuthError()`\n\nUpdated all dashboard pages (Performance, SEO, Monitoring, Alerts) to use the new error logging with enhanced context including organization ID, function name, time range, timestamp, and user agent information.",
|
|
"testStrategy": "Verify that console logs contain detailed error information instead of empty objects. Check that errors are logged consistently across all dashboard pages with proper context.",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Create comprehensive error utility functions in `src/utils/errorUtils.ts`",
|
|
"description": "Implement the following utility functions:\n- `serializeError()`\n- `logError()`\n- `getUserFriendlyErrorMessage()`\n- Error type detection functions: `isDatabaseError()`, `isNetworkError()`, `isAuthError()`",
|
|
"status": "done",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Update Performance page error logging",
|
|
"description": "Replace `console.error('Error loading performance data:', error)` with `logError()` including context.",
|
|
"status": "done",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Update SEO page error handling",
|
|
"description": "Update error handling to use proper serialization and enhanced context.",
|
|
"status": "done",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Enhance Monitoring page error logging",
|
|
"description": "Improve error logging with organization context.",
|
|
"status": "done",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Improve Alerts page error handling",
|
|
"description": "Update error handling to include detailed context.",
|
|
"status": "done",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 12,
|
|
"title": "Set Up Environment Variables for Supabase",
|
|
"description": "Configure environment variables required for Supabase connection.",
|
|
"status": "done",
|
|
"dependencies": [],
|
|
"priority": "high",
|
|
"details": "Create `.env` files for development and production with necessary Supabase configurations. Use `dotenv` package to load them.\n\n**What was implemented:**\n1. **Environment Variables Configuration**:\n - ✅ Supabase environment variables are already properly configured in `.env`\n - ✅ Created comprehensive `.env.example` file with all required variables\n - ✅ Enhanced `src/lib/supabase.ts` with better validation and error handling\n2. **Enhanced Supabase Configuration**:\n - ✅ Added environment variable validation with specific error messages\n - ✅ Added URL format validation for Supabase URL\n - ✅ Created `testSupabaseConnection()` function for connection testing\n - ✅ Added `validateEnvironment()` function to check required variables\n3. **Environment Validation Component**:\n - ✅ Created `EnvironmentValidator` component for UI-based environment checking\n - ✅ Includes connection testing functionality\n - ✅ Provides setup instructions for missing variables\n - ✅ Shows detailed status of environment configuration\n4. **Key Environment Variables Configured**:\n - ✅ `NEXT_PUBLIC_SUPABASE_URL`: https://revhjskovnhnmmuorjzs.supabase.co\n - ✅ `NEXT_PUBLIC_SUPABASE_ANON_KEY`: Properly configured\n - ✅ `SUPABASE_SERVICE_ROLE_KEY`: Available for server-side operations",
|
|
"testStrategy": "Verify that the application can connect to Supabase using environment variables.\n\n**Verification**:\n- ✅ Build process completes successfully with environment variables loaded\n- ✅ Supabase client initializes without errors\n- ✅ Environment validation functions work correctly\n- ✅ Connection testing functionality implemented",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Configure Supabase environment variables in `.env`",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Create comprehensive `.env.example` file with all required variables",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Enhance `src/lib/supabase.ts` with better validation and error handling",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Add environment variable validation with specific error messages",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Add URL format validation for Supabase URL",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 6,
|
|
"title": "Create `testSupabaseConnection()` function for connection testing",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 7,
|
|
"title": "Add `validateEnvironment()` function to check required variables",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 8,
|
|
"title": "Create `EnvironmentValidator` component for UI-based environment checking",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 9,
|
|
"title": "Include connection testing functionality in EnvironmentValidator",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 10,
|
|
"title": "Provide setup instructions for missing variables in EnvironmentValidator",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 11,
|
|
"title": "Show detailed status of environment configuration in EnvironmentValidator",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 13,
|
|
"title": "Add Error Boundaries Around Dashboard Components",
|
|
"description": "Implement error boundaries to catch and display errors in dashboard components.",
|
|
"details": "Use React's `ErrorBoundary` component or a custom implementation. Wrap dashboard components with the error boundary.",
|
|
"testStrategy": "Simulate errors in dashboard components and verify that they are caught by the error boundaries.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
12
|
|
],
|
|
"status": "pending",
|
|
"subtasks": []
|
|
},
|
|
{
|
|
"id": 14,
|
|
"title": "Implement Retry Mechanisms for Failed Data Loads",
|
|
"description": "Add retry functionality for data loading operations that fail.",
|
|
"details": "Use a library like `retry` or implement custom retry logic with exponential backoff. Integrate with data fetching functions.",
|
|
"testStrategy": "Simulate network failures and verify that the application retries data loading operations.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
12
|
|
],
|
|
"status": "pending",
|
|
"subtasks": []
|
|
},
|
|
{
|
|
"id": 15,
|
|
"title": "Create Error Logging Utility Functions",
|
|
"description": "Develop utility functions for consistent error logging across the application.",
|
|
"details": "Create a centralized error logging function that handles serialization and sends logs to a monitoring service if needed.",
|
|
"testStrategy": "Verify that errors are logged consistently using the utility functions.",
|
|
"priority": "low",
|
|
"dependencies": [
|
|
12
|
|
],
|
|
"status": "pending",
|
|
"subtasks": []
|
|
},
|
|
{
|
|
"id": 16,
|
|
"title": "Implement User-Friendly Error Messages",
|
|
"description": "Display user-friendly error messages when data loading fails or other errors occur.",
|
|
"details": "Update UI components to show meaningful error messages. Use a library like `react-toastify` for notifications.",
|
|
"testStrategy": "Simulate errors and verify that user-friendly error messages are displayed.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
13,
|
|
15
|
|
],
|
|
"status": "pending",
|
|
"subtasks": []
|
|
},
|
|
{
|
|
"id": 17,
|
|
"title": "Add Loading States for Data Operations",
|
|
"description": "Implement loading states to indicate data operations in progress.",
|
|
"details": "Use a library like `react-loader-spinner` or create custom loading indicators. Integrate with data fetching functions.",
|
|
"testStrategy": "Verify that loading states are displayed during data operations.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
12
|
|
],
|
|
"status": "pending",
|
|
"subtasks": []
|
|
},
|
|
{
|
|
"id": 18,
|
|
"title": "Implement Graceful Degradation for Database Unavailability",
|
|
"description": "Handle database connection issues gracefully and provide fallback UI.",
|
|
"details": "Add health checks for the Supabase connection. Implement fallback UI components to display when data is unavailable.",
|
|
"testStrategy": "Simulate database unavailability and verify that the application handles it gracefully with fallback UI.",
|
|
"priority": "medium",
|
|
"dependencies": [
|
|
12,
|
|
13
|
|
],
|
|
"status": "pending",
|
|
"subtasks": []
|
|
},
|
|
{
|
|
"id": 19,
|
|
"title": "Fix Browser Error Serialization",
|
|
"description": "Ensure errors display detailed information instead of 'Object' in browser environment.",
|
|
"status": "done",
|
|
"dependencies": [
|
|
1,
|
|
13,
|
|
15
|
|
],
|
|
"priority": "high",
|
|
"details": "Investigate why errors are showing as 'Object' in the browser console. Implement proper serialization for error objects to display meaningful information. This may involve updating error handling code and ensuring all relevant error properties are included in the serialized output.\n\n**What was implemented:**\n1. **Enhanced Error Serialization** (`src/utils/errorUtils.ts`):\n - ✅ Improved `serializeError()` function to better handle browser-side errors\n - ✅ Added specific handling for Supabase PostgrestError objects\n - ✅ Enhanced error extraction for objects that might be error-like\n - ✅ Added fallback serialization with better error type detection\n2. **Improved Error Logging**:\n - ✅ Enhanced `logError()` function with better error extraction\n - ✅ Added error type detection and additional debugging info\n - ✅ Improved handling of non-serializable objects\n - ✅ Added development-mode debugging with error keys and prototype info\n3. **Supabase Error Handling**:\n - ✅ Created `extractSupabaseErrorInfo()` function for detailed Supabase error extraction\n - ✅ Added specific handling for PostgrestError, details, hints, and codes\n - ✅ Enhanced error context with Supabase-specific information\n4. **Updated All Dashboard Pages**:\n - ✅ **Performance page**: Enhanced error handling with Supabase error extraction\n - ✅ **SEO page**: Improved error logging with detailed context\n - ✅ **Monitoring page**: Added Supabase error info to error logs\n - ✅ **Alerts page**: Enhanced error context with detailed error information",
|
|
"testStrategy": "Simulate various error scenarios in the application and verify that detailed error information is displayed in the browser console instead of 'Object'. Test across different browsers to ensure consistency.",
|
|
"subtasks": []
|
|
},
|
|
{
|
|
"id": 20,
|
|
"title": "Set Up Missing Database Tables",
|
|
"description": "Create required database tables (scans, scan_results, pages, alerts) in Supabase to support dashboard functionality and resolve 400 errors.",
|
|
"status": "done",
|
|
"dependencies": [
|
|
9,
|
|
18
|
|
],
|
|
"priority": "high",
|
|
"details": "1. Identify missing tables based on application requirements.\n2. Define schema for each table including columns and data types.\n3. Use Supabase SQL editor or API to create the tables.\n4. Verify table creation and structure using Supabase tools.\n5. Update any necessary database migration scripts.\n6. Create comprehensive database setup script (setup-database.sql) with complete schema, relationships, constraints, sample data, RLS policies, and performance indexes.\n7. Enhance DatabaseSetupHelper component to check for specific missing tables causing 400 errors, add 'Copy SQL' functionality, provide clear instructions, and visual indicators.",
|
|
"testStrategy": "1. Check that all required tables exist in Supabase.\n2. Verify table schemas match requirements.\n3. Test dashboard functionality to ensure it can read/write data from/to the new tables.\n4. Run any existing database tests to confirm integration.\n5. Verify that 400 errors for scans, websites, and alerts are resolved after running the database setup script.\n6. Confirm that dashboard pages load successfully with sample data available for testing.",
|
|
"subtasks": [
|
|
{
|
|
"id": 1,
|
|
"title": "Identify missing tables based on application requirements",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Define schema for each table including columns and data types",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Use Supabase SQL editor or API to create the tables",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Verify table creation and structure using Supabase tools",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Update any necessary database migration scripts",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 6,
|
|
"title": "Create comprehensive database setup script (setup-database.sql)",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
},
|
|
{
|
|
"id": 7,
|
|
"title": "Enhance DatabaseSetupHelper component",
|
|
"description": "",
|
|
"status": "completed",
|
|
"dependencies": [],
|
|
"details": "",
|
|
"testStrategy": ""
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": 21,
|
|
"title": "Build Automatic Lighthouse Scanner System",
|
|
"description": "Develop a system for automatic Lighthouse scanning with change detection and periodic scanning based on subscription tiers.",
|
|
"status": "done",
|
|
"dependencies": [
|
|
18,
|
|
20
|
|
],
|
|
"priority": "high",
|
|
"details": "✅ **Task Completed Successfully**\n\n**Automatic Lighthouse Scanner System Implemented**\n\n**Core Components Created:**\n\n1. **LighthouseScanner Service** (`src/services/lighthouseScanner.ts`):\n - ✅ Change detection using content hash comparison\n - ✅ Subscription-based rate limiting and limits checking\n - ✅ Comprehensive scan execution with metrics collection\n - ✅ Support for multiple device types and scan categories\n - ✅ Automatic scan result storage and metric tracking\n\n2. **ScanScheduler Service** (`src/services/scanScheduler.ts`):\n - ✅ Periodic scan scheduling based on frequency settings\n - ✅ Change detection processing for all websites\n - ✅ Subscription tier validation and feature availability\n - ✅ Next run time calculation and schedule management\n\n3. **Enhanced Cron Handler** (`src/app/api/cron/scan/route.ts`):\n - ✅ Orchestrates both scheduled and change detection scans\n - ✅ Manual scan triggering with subscription validation\n - ✅ Comprehensive scan statistics and monitoring\n - ✅ Error handling and logging for all scan operations\n\n4. **Webhook Handler** (`src/app/api/webhooks/website-change/route.ts`):\n - ✅ External change detection webhook endpoint\n - ✅ Automatic scan triggering on website changes\n - ✅ Subscription validation and rate limiting\n - ✅ Audit logging for change detection events\n\n5. **ScanScheduleManager Component** (`src/components/dashboard/ScanScheduleManager.tsx`):\n - ✅ User interface for managing scan schedules\n - ✅ Subscription tier display and feature availability\n - ✅ Usage tracking and limit monitoring\n - ✅ Manual scan triggering with validation\n\n**Key Features Implemented:**\n\n**Subscription-Based Features:**\n- **Free Tier**: 5 scans/day, 50/month, no change detection, no scheduled scans\n- **Starter Tier**: 20 scans/day, 200/month, change detection enabled, daily scheduled scans\n- **Professional Tier**: 100 scans/day, 1000/month, change detection enabled, hourly scheduled scans\n- **Enterprise Tier**: 500 scans/day, 5000/month, change detection enabled, hourly scheduled scans\n\n**Change Detection:**\n- Content hash comparison to detect website changes\n- Automatic high-priority scans when changes are detected\n- Webhook support for external change notifications\n- Audit logging for all change detection events\n\n**Scheduled Scanning:**\n- Configurable frequencies: hourly, daily, weekly, monthly\n- Device type selection: desktop, mobile, or both\n- Category selection: performance, accessibility, SEO, best practices\n- Automatic schedule management and next run time calculation\n\n**Rate Limiting & Monitoring:**\n- Daily and monthly scan limits per subscription tier\n- Real-time usage tracking and limit enforcement\n- Comprehensive scan statistics and reporting\n- Error handling and logging for all operations\n\n**Integration Points:**\n- Seamless integration with existing dashboard components\n- Database schema compatibility with existing tables\n- API endpoints for external integrations\n- Webhook support for third-party change detection\n\n**Usage Instructions:**\n1. **Setup Cron Jobs**: Configure cron to call `/api/cron/scan` at desired intervals\n2. **Configure Webhooks**: Set up webhook endpoints for external change detection\n3. **Manage Schedules**: Use the ScanScheduleManager component in the dashboard\n4. **Monitor Usage**: Track scan usage and limits through the dashboard interface\n\nThe system is now ready for production use with full subscription-based feature control and automatic scanning capabilities.",
|
|
"testStrategy": "1. Verify that change detection triggers scans accurately when website content changes.\n2. Test periodic scanning schedules for different subscription tiers.\n3. Check that scan results are stored correctly in the Supabase database.\n4. Ensure error handling works as expected with meaningful error messages.\n5. Validate UI components display scan results and statuses correctly.\n6. Confirm notifications are sent for scan completions and critical issues.",
|
|
"subtasks": []
|
|
}
|
|
],
|
|
"metadata": {
|
|
"created": "2025-07-24T14:16:43.871Z",
|
|
"updated": "2025-08-04T10:51:41.627Z",
|
|
"description": "Tasks for master context"
|
|
}
|
|
}
|
|
} |