My Tech Stack Ecosystem

Tech Stack Ecosystem

A collection of open-source tools that power this space for $0 (minus the domain name).


Soil & Nutrients (Data)

  • Neon: Serverless Database
  • Payload CMS: Headless CMS (Content Management System)

Trunk & Branches

  • Vercel: Hosting, CI/CD, environment variables and persistent image/media storage
  • Github

Foliage

  • React
  • SASS

Atmosphere

Opensource

I've chosen these tools for my project because I wanted to build something new with modular features. As an individual creator, it was also important for me to rely on opensource services. I'm not affiliated with any of the above services, just want to give credit to the teams who offer these tools for someone like me.


Web Dev Trail Guide

Here's one possible learning path if you want to grow a similar space to mine. You can't learn it all in a day. I've been doing web development professionally for over 12 years and started learning the basics as a hobby way before that. I still don't know everything, not even close. Remember to be kind to yourself.

Phase 0: Digital Orientation

  • Client/Server

Phase 1: Local Dev Setup

  • Text Editor
  • Browser Dev Tools
  • Terminal Basics
  • Version Control (Git & GitHub)
  • Runtime
  • Package Managers

Phase 2: Foundations

  • HTML
  • CSS
  • JavaScript

Phase 3: Systems & Standards

  • SASS/SCSS
  • SASS Modules
  • CSS Variables
  • Design Tokens
  • BEM
  • Modern CSS

Phase 4: Component-Based Development

  • React

Phase 5: Framework

  • Next.js
  • Routing
  • Data Fetching

Phase 6: Guardrails

  • TypeScript

Phase 7: CMS Integration

  • Payload
  • Headless CMS

Phase 8: Hosting & Deployment

  • Vercel
  • Neon
  • Pipelines

Phase 9: Security & Domains

  • HTTPS / SSL
  • Domains / DNS
  • Authentication