🔄 Topic

Understanding why the Farina site uses a modern frontend stack instead of plain static HTML.

🎯 Goal

Learn how React, TypeScript, Vite, and Tailwind fit together in a production-style frontend project.

🛠 What I Did

I reviewed the technical stack behind the Farina website and treated each tool as part of the operating model. React provides reusable UI components. TypeScript reduces mistakes by checking data shapes and props. Vite gives a fast development/build workflow. Tailwind supports consistent styling without scattering random CSS everywhere. The important lesson was that a modern frontend stack is not just trendy tooling. It creates a repeatable way to build, test, optimize, and deploy a public website.

Main areas covered:

  • React for component structure
  • TypeScript for safer code
  • Vite for local development and builds
  • Tailwind for consistent layout and styling
  • GitHub Pages for static deployment

🔗 Key Cybersecurity Connections

This matters because frontend code is still production code. It can introduce dependency risk, build risk, broken user flows, exposed configuration, and public-facing vulnerabilities.

🔍 Investigation Questions

  • What dependencies are installed?
  • Which scripts run during build?
  • Could environment variables expose secrets?
  • Are components reused safely?
  • Does the build output contain only intended static assets?

🚨 Detection Opportunities

Potential monitoring ideas:

  • unexpected dependency changes
  • build script modifications
  • new package with suspicious maintainer activity
  • source files exposed in deployment output
  • unexpected environment variable usage

Example:

project=farina-farm-website
change_type=public_website_update
risk_area=repository_deployment_or_public_input
triage=review_change_intent_and_validate_build

🧭 MITRE ATT&CK Techniques

Possible mappings depending on confirmed behavior:

  • T1195 — Supply Chain Compromise
  • T1552 — Unsecured Credentials
  • T1078 — Valid Accounts

🗺 Visual Investigation Diagram

Source code
    ↓ Dependencies
    ↓ Build tool
    ↓ Static assets
    ↓ Hosting
    ↓ Public website

⚠ Challenges

The challenge was not getting lost in tool names. The practical skill is understanding what each layer does and where it can fail.

📚 What I Learned

I learned that the frontend stack is also a supply-chain and deployment chain. Every package and script becomes part of trust.

➡ Next Steps

  • Review package scripts
  • Keep dependencies minimal
  • Run typecheck, lint, test, and build before pushing

🧠 Reflection

This was useful because it turned a real project into security-aware learning without pretending that every task was a pure cybersecurity lab.

🧩 Lessons Learned

What worked

Breaking the stack into roles.

What broke

Thinking of frontend tooling as only developer convenience.

Why it broke

Tooling can affect security, performance, and reliability.

Fix / takeaway

Treat the build chain as part of the system, not outside it.

📈 Skill Progression Context

This supports SOC and detection engineering because modern incidents increasingly involve repositories, dependencies, CI/CD, and build pipelines.

😄 TL;DR

Frontend tools are part of the attack surface.