Chrisert - Business Website

---

A high-performance web platform for a construction firm specializing in ETICS insulation — live in production at chrisert.pt. Built to bridge modern frontend development with real-world business needs, focusing on SEO and lead generation.

Engineered as a React SPA (Vite, Tailwind CSS, Shadcn UI) with a two-stage GitHub Actions CI/CD pipeline — feature branches → dev (GitHub Pages staging) → main (Netlify production) — gated by branch protection, Vitest, SonarQube quality gates, and manually approved deploys.

---

SonarQube Cloud main	SonarQube Server dev (self-hosted on Azure)
	N/A — free tier limitation
N/A — free tier limitation
N/A — free tier limitation
	N/A — free tier limitation
N/A — free tier limitation
	N/A — free tier limitation
N/A — free tier limitation
N/A — free tier limitation

---

📋 About

A real website for a real business — currently live and operating.

A professional ETICS insulation firm needed a complete digital presence. No logo, no social media, and no website. I took total ownership of their digital identity, delivering a "0 to 1" solution:

• Brand Identity: Created a professional logo and visual style from scratch
• Social Strategy: Launched their Facebook page and optimized their Instagram presence
• The Platform: Developed a clean, SEO-optimized React site to bridge the gap between their craftsmanship and modern web standards

Netlify Forms handles contact submissions, eliminating backend complexity given there's no heavy business logic or database requirements involved.

🚀 Tech Stack

Category	Technology
Framework	React 19 + React Router
Language	JavaScript (JSX)
Build Tool	Vite
Styling	Tailwind CSS
UI Components	Shadcn UI
Forms	react-hook-form + Zod + Netlify Forms
Testing	Vitest + Testing Library
Linting	ESLint
Code Quality	SonarQube Cloud (main) + SonarQube Server (dev)
Staging	GitHub Pages
Production	Netlify

🛠️ Getting Started

Prerequisites

• Node.js (v24 or higher)

Available Scripts

# Install dependencies
npm install
# Run development server
npm run dev
# Run dev server accessible from other devices (e.g., mobile)
npm run dev -- --host
# Build for production
npm run build
# Run tests once
npm run test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage report
npm run test:coverage
# Preview production build
npm run preview

🌐 Live Demo

• Production: https://chrisert.pt
• Staging: https://fernandotonacoder.github.io/chrisert/

🔄 CI/CD Pipeline

Branch	Environment	Required Status Checks
dev	GitHub Pages (Staging)	Build and Test, Lint, Security Audit, SonarCloud Analysis
main	Netlify (Production)	Build and Test, Lint, Security Audit, SonarCloud Analysis, Enforce Dev-to-Main

• Branch Protection: Both main and dev are protected with linear history required; all changes must go through PRs
• Enforce Dev-to-Main: A required check on main blocks any PR not originating from dev, ensuring all code goes through staging first
• Automated Testing: Vitest + build verification runs on every PR to dev and main
• Security: Four complementary layers — npm audit (dependency vulnerabilities, runs weekly and on every PR), Dependabot alerts (continuous dependency monitoring at the repo level), CodeQL (static analysis for code-level vulnerabilities), and SonarQube (security ratings, hotspots, and vulnerability scanning on both main and dev)
• Deployments: Triggered manually only via Actions → Run workflow (workflow_dispatch) and gated by environment approval — no automatic deploy on push
• SonarQube: SonarQube Server (self-hosted) scans on every push to dev and can be triggered manually — it runs tests with coverage before sending results; SonarQube Cloud automatically analyzes main and decorates PRs with quality feedback (SQ Server Community edition limitation: server does not support PR analysis)
• Auto-Sync: After each push to main, changes are automatically rebased onto dev to keep branches in sync

Code Quality Strategy

This project uses two SonarQube instances with complementary roles:

Instance	Branch	Role
SonarQube Cloud	main	Automatic analysis of production code; decorates PRs with quality feedback before merge
SonarQube Server (self-hosted on Azure)	dev	Continuous analysis of active development; monitors code quality before it reaches main

SonarQube Cloud handles PR decoration automatically via GitHub App. The self-hosted server runs via GitHub Actions on every push to dev. See docs/sonarqube-admin.md for administration notes.

📄 License

The source code of this project is licensed under the MIT License.

Note: All branding, logos, images, and business-specific content are proprietary and belong to the client. Feel free to use this codebase as a learning resource or as inspiration for your own projects!

---

⭐ Star this repo if you find it useful!

Made with ❤️ by Fernando Tona Website • LinkedIn • GitHub