← Back to Home

CRUDkit 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.1.0
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

Project Progress

Task Completion Tracking

Shows progress through development sprints and tasks defined in TASKS.md.

Why it matters:

Helps track project velocity and identify bottlenecks in development.

How to improve:

  • • Update TASKS.md as you complete items
  • • Break large tasks into smaller chunks
  • • Review and adjust sprint goals regularly

Overall Progress
100%
15/15 tasks

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 Features15 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

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 →
Storybook
Visit →
Theme System
Visit →
Component Gallery
Visit →
PWA Install
Service Worker

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)

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!

92
pwa
App capabilities

Pwa Score Breakdown (92/100)

What's Working:

  • ✅ Service Worker registered
  • ✅ Web App Manifest present
  • ✅ HTTPS enabled (production)
  • ✅ Installable as app
  • ✅ Offline caching active
  • ✅ Standalone display mode
  • ✅ Theme color configured
  • ✅ Background sync enabled
  • ✅ App shortcuts defined
  • ✅ Responsive viewport

What's Missing (-8 points):

  • ❌ Maskable app icon (192x192 & 512x512 PNG)
  • ❌ Apple touch icon for iOS
  • ❌ Screenshots not found (referenced in manifest)
  • ❌ Splash screen not configured

Nice to Have (Optional):

  • 💡 Web Share API not implemented
  • 💡 Push notifications not configured
  • 💡 App badging not enabled
  • 💡 File handling not configured

Fix the missing items to achieve 100/100

Recent Deployments

Deployment History

Shows recent code changes that have been deployed to production.

Why it matters:

Track what features were released and when, useful for debugging issues.

How to improve:

  • • Use semantic commit messages
  • • Tag releases with version numbers
  • • Document breaking changes

Show Deployment History (7 items)
DateFeatureStatus
9/12/2025Refactor FormField to eliminate React.cloneElem...success
9/12/2025Captain Ship & Crew Gamesuccess
9/11/2025Testing Infrastructuresuccess
9/11/2025Code Formatting Setupsuccess
9/10/2025Storybook Integrationsuccess
9/10/2025Next.js 15.5 Setupsuccess
9/9/2025Initial Setupsuccess

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

Fork Configuration

After forking, 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