Recently, I built a simple SSL certificate monitoring website and wanted to share some development experiences. The project link is at the end, so let’s start with the technical implementation.
Origins
I’ve encountered a few service outages caused by SSL certificate expiration in the past. Each time, it was only addressed after users reported it, which was very reactive. While there are monitoring tools available on the market, they are either too heavy or lack the necessary features, so I decided to build my own.
Technology Stack
Next.js 16 + shadcn/ui + TypeScript
I chose Next.js because:
- The App Router provides a great development experience with routes corresponding to the file structure.
- Server Components reduce client-side JavaScript.
- Built-in image optimization and font loading are ready to use out of the box.
shadcn/ui is a component library based on Radix UI. Its advantages are:
- Components can be copied directly into the project, giving you full control.
- It uses Tailwind CSS, making style customization easy.
- It has excellent accessibility.
Drizzle ORM + PostgreSQL
I’ve used Prisma before, but I tried Drizzle this time and found it to be more lightweight:
- Faster type generation.
- More intuitive SQL operations.
- Better query performance.
better-auth Authentication System
This is a recent discovery that is more modern than NextAuth:
- Better TypeScript support.
- A cleaner API design.
- Supports email/password and multiple OAuth providers (GitHub, Google).
Some Challenges Encountered
1. The Complexity of Certificate Chain Verification
At first, I thought SSL certificate checking was simple—just get the certificate information. I later discovered that certificate chain verification is quite complex:
- It requires verifying the signature of each certificate.
- It needs to check the integrity of the certificate chain.
- It must determine if the root certificate is trusted (built into browsers).
- It must handle cases where intermediate certificates are missing.
The solution was to write a complete certificate chain extraction and verification module, including:
- Extracting the full certificate chain from a TLS connection.
- Verifying the signature and validity period of each certificate.
- Detecting chain breaks and incomplete chains.
- A tree-structured visualization display.
2. Designing a Security Scoring System
To help users quickly understand the security status of their certificates, I created a scoring system from A+ to F. The core logic is:
Weighted scoring across four dimensions
- Certificate Validity: 30%
- Chain Integrity: 25%
- Cryptographic Strength: 25%
- Protocol Version: 20%
If there are severe issues (e.g., expired certificate), the maximum grade is C
The difficulties were:
- How to reasonably assign weights.
- How to design the penalty rules.
- How to provide valuable improvement suggestions.
Ultimately, I adopted a layered scoring approach, calculating each dimension independently and then combining them with weights.
3. Hydration Issues with Multi-Language Routing
When supporting 6 languages, I encountered React Hydration errors:
// ❌ Incorrect approach
// app/[locale]/layout.tsx contained the <html> tag
// This conflicted with the root layout
// ✅ Correct approach
// The root layout has only one <html> tag
// Use a client component to dynamically update the lang attribute
4. Redis Cache Degradation Handling
To improve authentication performance, I added Redis caching. However, I had to consider:
- What to do when Redis is unavailable?
- How to handle data inconsistency between the cache and the database?
The solution was:
- Automatically degrade to the database if the Redis connection fails.
- Actively invalidate the cache when the database is updated.
- Provide a cache statistics API to monitor the hit rate.
5. PageSpeed Optimization
Initially, the Lighthouse score was only in the 60s. The main issues were:
Large JavaScript Bundle
- Used Next.js’s dynamic imports to load components on demand.
- Removed unused dependencies.
- Enabled Tree Shaking.
Image Optimization
- Used the Next.js Image component for automatic optimization.
- Added appropriate placeholders.
- Enabled lazy loading for images.
Font Loading
- Used next/font for automatic font optimization.
- Reduced the number of font variants.
- Used font-display: swap to avoid layout shifts.
Critical Rendering Path
- Identified critical CSS and inlined it into the HTML.
- Deferred loading of non-critical JavaScript.
- Optimized the loading order of third-party scripts.
Third-Party Script Optimization
- Deferred loading of services like Google Analytics and Crisp Chat.
- Used the defer/async attributes.
- Considered using Web Workers for time-consuming tasks.
After optimization, the scores improved to:
- Performance: 60 → 95
- Accessibility: 85 → 98
- Best Practices: 90 → 100
- SEO: 100
Some Technical Highlights
Certificate Chain Visualization
The certificate chain is displayed in a tree structure, supporting expand/collapse, with different states color-coded:
- Green: Valid
- Yellow: Expiring soon
- Red: Expired
Security Issue Detection
Automatically detects insecure cryptographic algorithms:
- MD5, SHA-1 signature algorithms.
- Weak ciphers like RC4, DES.
- Old protocols like TLS 1.0/1.1.
Multi-Channel Notifications
Currently supports five notification channels: Email, Slack, Discord, Telegram, and Feishu. Users can freely combine them.
Project Address
Features:
- Free SSL certificate checking.
- Domain monitoring and expiration reminders.
- Security scoring and improvement suggestions.
- Multi-language support (Chinese, English, Japanese, French, Spanish).
Feel free to try it out and provide feedback. Let’s discuss any questions you might have.