Hi everyone, recently I used codex and GPT-5.2 to build a simple SSL certificate monitoring website, and I'd like to share some of my development experiences. The project link is at the end, but first, let's talk about the technical implementation.
The Motivation
I've encountered several service outages caused by expired SSL certificates in the past. Each time, I had to react after users reported the issue, which was very passive. While there are some monitoring tools 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 development experience with App Router is excellent, with a clear mapping between routes and file structure.
Server Components reduce the need for client-side JavaScript.
Built-in features like image optimization and font loading are ready to use out of the box.
shadcn/ui is a component library based on Radix UI, and its advantages are:
Components are copied directly into your project, giving you full control.
It uses Tailwind CSS, making style customization easy.
It has excellent accessibility features.
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 I made, and it's more modern than NextAuth:
Better TypeScript support.
A cleaner API design.
Supports email/password and multiple OAuth providers (GitHub, Google).
Some Challenges I Faced
1. The Complexity of Certificate Chain Validation
At first, I thought checking an SSL certificate was simple—just get the certificate information. I later discovered that certificate chain validation is quite complex:
You need to verify the signature of each certificate in the chain.
You must check the integrity of the entire certificate chain.
You have to determine if the root certificate is trusted (which browsers have built-in lists for).
You need to handle cases where intermediate certificates are missing.
The solution was to create a complete certificate chain extraction and validation module that includes:
Extracting the full certificate chain from a TLS connection.
Verifying the signature and validity period of each certificate.
Detecting broken or incomplete chains.
Visualizing the chain structure in a tree format.
2. Designing the 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 score across four dimensions
- Certificate Validity: 30%
- Chain Integrity: 25%
- Cryptographic Strength: 25%
- Protocol Version: 20%
If there are critical issues (e.g., expired certificate), the maximum grade is C
The challenges were:
How to allocate weights reasonably.
How to design the penalty rules.
How to provide valuable improvement suggestions.
Ultimately, I adopted a layered scoring approach where each dimension is calculated independently and then combined 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. Graceful Degradation for Redis Caching
To improve authentication performance, I added Redis caching. But I had to consider:
What happens when Redis is unavailable?
How do you handle cache and database data inconsistency?
The solution was:
Automatically fall back to the database if the Redis connection fails.
Actively invalidate the cache when the database is updated.
Provide cache statistics API to monitor the hit rate.
5. PageSpeed Optimization
Initially, the Lighthouse score was only in the 60s. The main problems 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 for Google Analytics, Crisp Chat, etc.
Used the defer/async attributes.
Considered using Web Workers for time-consuming tasks.
After optimization:
Performance: 60 → 95
Accessibility: 85 → 98
Best Practices: 90 → 100
SEO: 100
Some Technical Highlights
Certificate Chain Visualization
A tree structure is used to display the certificate chain, with expand/collapse functionality and color-coding for different statuses:
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 Link
https://guardssl.info
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. We can discuss any questions you might have.
0
0
215