Features & Tech Stack
A closer look at the technology, design systems, and architecture behind the Rogue Reefs package.
Application Framework
Built on Node.js with Express 4 — the most widely adopted server framework in the JavaScript ecosystem. Pages are rendered server-side with EJS (Embedded JavaScript) templates and a shared layout system via express-ejs-layouts.
Security Layer
Production-grade security out of the box:
- Helmet — Sets Content Security Policy, X-Frame-Options, referrer policy, and other HTTP security headers
- CSRF Protection — Double-submit cookie pattern with per-session tokens
- Rate Limiting — express-rate-limit to prevent abuse (500 requests / 15 min)
- Input Sanitization — XSS protection on all form inputs with allowlist filtering
- Secret Leak Guard — Scans JSON responses and template locals to block accidental credential exposure
Project Structure
Clean MVC-inspired architecture designed for maintainability:
├── app.js Express application setup ├── server.js HTTP server entry point ├── config.js Environment configuration ├── routes/ │ └── index.js All public page routes ├── middleware/ │ ├── security.js Helmet, CSRF, rate limiter │ └── sanitize.js Input sanitization ├── services/ │ ├── store.js JSON data layer │ └── email.js Contact form service ├── views/ │ ├── layouts/ Shared page layout │ ├── partials/ Navbar, footer, head, theme switcher │ ├── pages/ All page templates │ └── errors/ Error page templates ├── public/ │ ├── css/main.css All styles + 4 theme blocks │ ├── js/main.js Client-side JavaScript │ ├── images/ 105 reef photos │ ├── sitemap.xml XML sitemap │ └── robots.txt Search engine directives ├── data/ │ └── domains.json Domain listing data └── docs/ └── SEO-STRATEGY.md SEO documentation
Design System
4 Color Themes
Dark, Light, Purple, and Azure — all built with CSS custom properties. Switch themes instantly with the paint-icon dropdown. Add new themes by copying a single CSS variable block.
Mobile-First Responsive
Three breakpoints (768px, 480px, 360px) ensure the layout looks sharp on every device. Touch-friendly navigation with an animated hamburger menu, swipe-enabled gallery, and iOS zoom-fix.
Custom Logo
A custom coral reef icon logo with off-white tint and cyan glow effect. Rendered as a high-resolution PNG with CSS filter effects for theme-aware glow adaptation.
Background Slideshow
105 reef photographs cycle in a full-screen background slideshow with a 2-minute crossfade. Uses Fisher-Yates shuffle for randomized, non-repeating order.
SEO & Discoverability
Every route passes unique title, metaDesc, metaKeywords, and canonicalUrl to the shared head partial.
Social sharing previews are pre-configured with OG title, description, image, and Twitter card metadata.
Schema.org @graph markup on every page — Product, AboutPage, ImageGallery, Blog, ContactPage, and more.
Auto-discoverable sitemap with image references. Robots.txt blocks private routes while allowing full indexing of public content.
Proper heading hierarchy, landmark roles, ARIA labels, and accessible navigation — all contributing to search engine understanding and accessibility compliance.
A comprehensive SEO guide (SEO-STRATEGY.md) explains how to customise every meta tag, connect social accounts, and submit sitemaps to Google and Bing.
Tech Stack at a Glance
Interested in the full package? Buy Now