ScriptHammer Status Dashboard

Real-time deployment and performance metrics • Connection: 🟢 Online

Build Status

Build Status

Shows the current health and configuration of your deployed application.

Why it matters:

Knowing your build status helps identify deployment issues and ensures your app is running correctly.

How to improve:

  • • Keep dependencies up to date
  • • Monitor error logs regularly
  • • Set up automated health checks

Status:

Deployment Status

Indicates whether your application is currently running without errors.

Why it matters:

Green means users can access your site. Red means immediate attention needed.

How to improve:

Check GitHub Actions logs if status shows errors

Operational
Version:

Application Version

The current version number from package.json. Follows semantic versioning (major.minor.patch).

Why it matters:

Helps track releases and identify which features are deployed.

How to improve:

Update version before each release using 'npm version'

0.0.1
Environment:

Environment Mode

Whether the app is running in development (local) or production (deployed) mode.

Why it matters:

Production mode has optimizations enabled and stricter security.

How to improve:

Always test in production mode before deploying

production

Web Vitals

FCP

First Contentful Paint

Time until the first text or image appears on screen

🟢 Good: < 1.8s

🟡 Needs work: 1.8s - 3s

🔴 Poor: > 3s

How to improve:

• Reduce server response time

• Eliminate render-blocking resources

• Minimize critical CSS

N/A
LCP

Largest Contentful Paint

Time until the main content is fully visible

🟢 Good: < 2.5s

🟡 Needs work: 2.5s - 4s

🔴 Poor: > 4s

Users may leave if this takes > 4 seconds

How to improve:

• Optimize images (use WebP, lazy loading)

• Use CDN for assets

• Reduce JavaScript execution time

N/A
CLS

Cumulative Layout Shift

Measures visual stability - how much elements move during loading

🟢 Good: < 0.1

🟡 Needs work: 0.1 - 0.25

🔴 Poor: > 0.25

Lower scores mean less annoying jumps

How to improve:

• Set size attributes on images/videos

• Avoid inserting content above existing content

• Use CSS transform instead of position changes

N/A
TTFB

Time to First Byte

How quickly the server starts sending data

🟢 Good: < 0.8s

🟡 Needs work: 0.8s - 1.8s

🔴 Poor: > 1.8s

Indicates server response speed

How to improve:

• Use a CDN to serve content closer to users

• Optimize database queries

• Enable server-side caching

N/A

PWA Feature Tests

Progressive Web App Features

Tests whether your app can be installed like a native app and work offline.

Why it matters:

PWAs provide app-like experience, work offline, and can be installed on phones/desktops without app stores.

How to improve:

  • • Ensure manifest.json is properly configured
  • • Register a service worker for offline support
  • • Add proper app icons (192x192 and 512x512)
  • • Use HTTPS in production
Learn more →

Click "Run Tests" to check PWA features

Service Status

Deployed Services

Real-time status of deployed services and endpoints.

Why it matters:

Quickly identify which services are operational and accessible.

How to improve:

Set up monitoring for each service to detect issues early

Next.js App
Visit →
Contact Form
Visit →
Calendar Booking
Visit →
Maps Service
Visit →
PWA Support
Analytics

Features Completed

Implemented Features

Major features that have been completed in this project.

Why it matters:

Tracks what functionality has been built and is available to users.

How to improve:

Update project-status.json as you complete new features

View Completed Features37 features implemented
✅
Next.js 15.5 Setup
Modern React framework with App Router
✅
32 Theme System
DaisyUI themes with persistent selection
✅
PWA Support
Installable app with offline support
✅
Component Library
Atomic design pattern components
✅
Storybook Integration
Component documentation and testing
✅
Status Dashboard
Real-time monitoring and metrics
✅
Accessibility Controls
Font size and spacing adjustments
✅
Web Vitals Monitoring
Core Web Vitals tracking
✅
Testing Infrastructure
Vitest with React Testing Library and coverage
✅
Git Hooks
Husky pre-commit hooks with lint-staged
✅
CI/CD Pipeline
GitHub Actions for automated testing and builds
✅
Code Formatting
Prettier with automatic formatting on commit
✅
Error Handling
Error boundaries and centralized error handling
✅
Dice Components
Interactive dice with drag-and-drop functionality
✅
Captain Ship & Crew Game
Full dice game with NPC support and tournaments
✅
Pa11y Accessibility Testing
WCAG compliance testing in CI pipeline
✅
Zod Form Validation
Runtime validation schemas for all forms
✅
Dependabot Integration
Automated dependency updates with grouping
✅
Architecture Decision Records
ADRs documenting key technical decisions
✅
Pre-push Hooks
Test suite runs before git push
✅
Performance Utilities
Resource timing and performance analysis tools
✅
Security Features
CSP headers and SECURITY.md documentation
✅
Test Coverage Enforcement
25% minimum coverage (58% actual)
✅
Colorblind Assistance Mode
Color vision correction filters with Daltonization
✅
Font Switcher
6 fonts including dyslexia-friendly and high-readability options
✅
Cookie Consent & GDPR
Full GDPR compliance with granular consent management
✅
Google Analytics Integration
GA4 integration with privacy-first consent mode
✅
Web3Forms Contact Form
Professional contact form with validation and spam protection
✅
EmailJS Integration
Alternative email service with templates and auto-reply support
✅
PWA Background Sync
Offline form submission with automatic sync when online
✅
Calendar Integration
Calendly and Cal.com scheduling with GDPR-compliant consent
✅
Geolocation Map
Interactive maps with Leaflet.js and OpenStreetMap, GDPR-compliant location consent
✅
Markdown-First Blog System
Full-featured blog with markdown support, SEO analyzer, offline capabilities, and mobile-responsive design
✅
PRP Methodology Documentation
Comprehensive PRP/SpecKit workflow documentation with quick reference guide
✅
Payment Integration
Supabase backend with Stripe/PayPal providers, GDPR consent, offline queue, and RLS policies
✅
User Authentication
Supabase Auth with OAuth (GitHub/Google), email/password, protected routes, and mobile-first UI
✅
Security Hardening
Server-side rate limiting, OAuth CSRF protection, payment data isolation, and comprehensive audit logging

Lighthouse Scores

What is Lighthouse?

Google's tool for measuring web page quality. Scores are out of 100.

🟢 90-100: Good

🟡 50-89: Needs Improvement

🔴 0-49: Poor

Uses PageSpeed Insights API to run real tests.

Using default scores based on typical performance

Click "Run Test" for real-time analysis or visit PageSpeed Insights

92

performance

Speed & responsiveness

Performance Score Breakdown (92/100)

What's Working:

  • ✅ Fast server response time
  • ✅ Optimized images and assets
  • ✅ Minimal render-blocking resources
  • ✅ Efficient cache policy
  • ✅ Text remains visible during font load
  • ✅ Minimal main thread work
  • ✅ Low JavaScript execution time

What's Missing (-8 points):

  • ❌ Some large JavaScript bundles
  • ❌ Reduce unused JavaScript
  • ❌ Could improve Time to Interactive

Key Metrics:

  • 📊 First Contentful Paint: 1.2s
  • 📊 Speed Index: 2.1s
  • 📊 Time to Interactive: 3.5s
  • 📊 Total Blocking Time: 150ms

Fix the missing items to achieve 100/100

98

accessibility

Usability for all users

Accessibility Score Breakdown (98/100)

What's Working:

  • ✅ Proper heading hierarchy
  • ✅ Sufficient color contrast
  • ✅ Alt text on images
  • ✅ ARIA labels where needed
  • ✅ Keyboard navigation works
  • ✅ Focus indicators visible
  • ✅ Semantic HTML used
  • ✅ Language attribute set
  • ✅ Viewport meta tag configured

What's Missing (-2 points):

  • ❌ Some buttons missing accessible names
  • ❌ Form inputs could use better labels

Recommendations:

  • 💡 Consider adding skip links
  • 💡 Test with screen readers
  • 💡 Add focus trap for modals

Fix the missing items to achieve 100/100

95

best Practices

Security & quality

Best Practices Score Breakdown (95/100)

What's Working:

  • ✅ HTTPS everywhere
  • ✅ No console errors
  • ✅ Modern image formats
  • ✅ Correct charset declaration
  • ✅ No vulnerable libraries detected
  • ✅ Valid source maps
  • ✅ No document.write() usage
  • ✅ Notification permissions not requested on load

What's Missing (-5 points):

  • ❌ Missing Content Security Policy
  • ❌ No SRI for external scripts

Security Status:

  • 🔒 HTTPS enabled
  • 🔒 Secure cookies
  • 🔒 No mixed content

Fix the missing items to achieve 100/100

100

seo

Technical SEO

Seo Score Breakdown (100/100)

Important Notes:

  • 📝 Perfect technical SEO score!
  • 📝 This measures technical readiness
  • 📝 NOT search ranking or position
  • 📝 Content quality still matters

What's Working:

  • ✅ Page has title tag
  • ✅ Meta description present
  • ✅ Page is mobile-friendly
  • ✅ Text is legible
  • ✅ Links have descriptive text
  • ✅ Page is crawlable
  • ✅ Robots.txt is valid
  • ✅ Image alt attributes present
  • ✅ Canonical URL defined
  • ✅ Structured data is valid
  • ✅ Document has valid hreflang

Notes:

  • 📝 Perfect technical SEO score!
  • 📝 This measures technical readiness
  • 📝 NOT search ranking or position
  • 📝 Content quality still matters

Perfect score! Keep up the great work!

System Information

Technical Stack Overview

The core technologies and features that power this application.

Why it matters:

Understanding your tech stack helps with troubleshooting and planning upgrades.

How to improve:

Keep dependencies updated and document any custom configurations

Learn more →

Stack

  • • Next.js 15.5
  • • React 19
  • • TypeScript 5
  • • TailwindCSS 4
  • • DaisyUI beta

Features

  • • 32 Theme Options
  • • PWA Installable
  • • Offline Support
  • • Background Sync
  • • Component Library

Testing

  • • PWA Test Suite
  • • Web Vitals Monitoring
  • • Offline Testing
  • • Performance Metrics
  • • Lighthouse Integration

Template Configuration

After using this template, update /src/config/project-status.json with your project details:

  • • Change project.name to your project name
  • • Update project.repository to your GitHub URL
  • • Set project.startDate to your fork date
  • • Update features list as you add/remove features
  • • Set isTemplate to false for your fork