Building a Client Showcase: From Custom PCB Design to CI/CD Pipeline

#Web Dev#React#Tailwind CSS#CI/CD#Netlify

The PCB Custom Malang project started from a real need among local hardware-fabrication businesses in Malang for a clear, trustworthy professional digital presence.

The main focus of the site is information clarity: a catalog of single/double-layer PCB printing services, copper thickness estimates (1oz/2oz), and a concise ordering path.

With a modular React component architecture and Tailwind CSS utility-first styling, the site loads pages instantly (98+ Lighthouse score) and is easy to update through an automated CI/CD pipeline on every catalog change.

TECHNICAL CODE (YAML)

PRODUCTION READY

# GitHub Actions Deployment Pipeline
name: Deploy Production
on:
  push:
    branches: [main]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci && npm run build
      - uses: nwtgck/actions-netlify@v3
        with:
          publish-dir: './dist'
          production-branch: main

TECHNICAL NOTE:The website is designed so prospective electronics-manufacturing clients can instantly view layer specs, FR4 materials, and fabrication time estimates.

🚀

Rizky Mardhani

Computer Engineering · FILKOM Universitas Brawijaya

More Projects →

Back to Devlog List

Home Send Transmission