DevOps Solution Portal

An enterprise-grade, serverless portal architected for 100% accessibility and zero-JS overhead. Leveraging a 'Security-by-Design' approach with Cloudflare and Azure, Walcron demonstrates high-performance Edge delivery with integrated DevOps observability.

Get To Know Us

The Evolution of Walcron: A Strategic Shift

Every architecture has a "shelf life." As the web evolved [History], so did our requirements for Accessibility (WCAG) and SEO Performance. The rationale for our migration from a Javascript-heavy Single Page Application (SPA) to our current Server-Side Generated (SSG) model optimized our:

Performance
Accessibility
SEO
Complexity
Security

The objective is to have a site that is DevOps-oriented development in Cloud platform. This site is to showcase our work and a playbox for real-time testing. As of the mantra, we always do "monitored, reliable releases".

Site Development Lifecycle

Tech Stack

Platform: Azure & Vercel (Reliable, Global Infrastructure)
Engine: Next.js & WebAssembly (High-performance Rendering)
Guardrails: GitHub Actions & CodeCov & SonarQube (Quality & Security Compliance)
Insights: Axiom & Checkly (Real-time Observability)

Reliable Deployment

Being a self-maintained site, how do one...

"Validate his own changes ?"
"Ensure changes doesn't break anything ?"
"A hassle to deploy changes ?"

Github workflows — Github workflow from Testing to Deployment

In Walcron we implement GitHub workflow to do our biddings. A full CI/CD consist of:

Testing - ensure safety in modification.[GitHub Actions]
Integration - API doesn't break. [Smoke and E2E]
Quality Gate - Code Quality scans. [Ensure code quality]
Release - Deploys ONLY successful pull-request.

Comparing latest image — Detects before and after User Interface changes

User Interface verification:

Layout verification - Production layout are compared with preview. [Snapshots]
Approval workflow - Integrated approval process. [Snapshots]

Code coverage screenshot — Code coverage in CodeCov

We up-keep coding standards and security compliance:

Coverage - 99.9% lines of code covered.[CodeCov]
Linting - Coding checks to ensure proper coding styles.
Compliance - Security and Lint checks. [OWASP check and Dependabots]
Accessibility - Integrated lighthouse to keep best-practises and accessibility at 100%.

"So what if something really breaks ?"

Face it, this happens with new experimentations. The workflow is built to handles fallback options:

Re-run the release tag in action workflow. Every pull-request is tracked via Release [list of releases] during merge workflow.
Revert via Vercel, but not applicable to GitHub Pages. Useful for API break changes.
A guaranteed revert process is less than 10minutes.

Accessibility (WCAG)

This Homepage can be browsed WITHOUT Javascript enabled!

We did it by relying on both PureCSS, Server Side Generation and ensuring non-critical usage for Javascript. The old homepage was Javascript heavy with Parallax Effect and we encountered performance and accessibility issues.

This site can also be browsed with keyboard and text-readers.

We are going now commited with Web Accessibility; eventhough we are still in the learning phase. The best reliance is to run periodically test with Accessibility Checker and Chrome built-in Lighthouse.

The site is Trusted Web Activity(TWA) and Progressive(PWA) compatible.

Monitoring

"Dogfooding. We eat our own dogfood!"

Axiom Telemetry dashboard — Leverage Axiom's Open Telemetry to view API workflow

We use Axiom to stream OpenTelemetry data over. Using this data we can monitor our API's performance and application integration.

View Checklists

Checkly dashboard — Checkly is used to monitor our website up-time.

An alarm system if the website is ever down within 24hours. A dashboard is created as well to check on performance and region latency.

Cloudflare Security — Blocks and monitor Attacks with Cloudflare

Our website and host request are filtered and securely protected with Cloudflare's Shield. On average, this website is bombarded 20 times a day.

Performance

"Maintaining standards with low latency."

We maintain a good performance and accessibility. We use Lighthouse to monitored during deployment.

Google Big Data Query — We page loading data with Google Analytics.

We occasionally monitor our websites loading performances so that we can keep our rating high for SEO. We also collect client' data ONLY if consensus is given; so...please accept the cookie. :)

All static resources are cache controlled with Cloudflare and NextJS and are served with Edge servers. It is configured to refresh for every deployment even for overrides.

Site Health Status