Skip to content

README.md

Latest commit

 

History

History
275 lines (240 loc) · 18.2 KB

README.md

File metadata and controls

275 lines (240 loc) · 18.2 KB

Chrisert - Business Website

Production Staging Tests Lint Security Audit

SonarQube Cloud main SonarQube Server dev (self-hosted on Azure)
Quality gate Quality gate
Security Rating Security Rating (dev)
Vulnerabilities N/A — free tier limitation
N/A — free tier limitation Security Issues
N/A — free tier limitation Security Hotspots
Reliability Rating Reliability Rating (dev)
Bugs N/A — free tier limitation
N/A — free tier limitation Reliability Issues
Maintainability Rating Maintainability Rating (dev)
Technical Debt Technical Debt (dev)
Code Smells N/A — free tier limitation
N/A — free tier limitation Maintainability Issues
N/A — free tier limitation Coverage (dev)
Duplicated Lines (%) Duplicated Lines (%) (dev)
Lines of Code Lines of Code (dev)

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

📋 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
Language JavaScript
Styling Tailwind CSS
UI Components Shadcn UI
Testing Vitest
Code Quality SonarQube Cloud (main) + SonarQube Server (dev)
Staging GitHub Pages
Production Netlify
Forms Netlify Forms

🛠️ 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
npm run test
# Run tests with coverage report
npm run test:coverage
# Preview production build
npm run preview

🌐 Live Demo

🔄 CI/CD Pipeline

Branch Environment Required Status Checks
dev GitHub Pages (Staging) Tests + Build, Lint, Security Audit, SonarCloud Analysis
main Netlify (Production) Tests + Build, 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: Manually approved after push to respective branches; can also be triggered manually via Actions → Run workflow
  • 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!

👤 Author

Fernando Tona

Built with ❤️ for real-world business needs