Tech Stack

🔭 Project Management

🪄 UI/UX Design

Figma

Outrageously powerful collaborative design tool for wireframing ideas and prototyping mockups.

Allows you to sort out your UI/UX first, saving you from writing code and end up building the wrong thing which also may look like potato 🥔

🐞 Development

Feature-Sliced Design

Scalable architectural methodology used with Angular and Ember.js.

Bulletproof React

Common architectural pattern used with React projects.

Component Driven User Interfaces

"Bottom up" UI development methodology.

Screenplay Pattern

Behaviour-Driven Development framework for scalable and performant End-to-End Tests.

Diátaxis Model

Systematic documentation authoring pattern commonly used in open-source projects.

C4 Model

Unified way of visualizing both software and enterprise architecture.

LikeC4

Framework for adapting C4 architecture to modern needs.

Allows interactive exploration via web browsers.

Provides a standardized, readable, and scalable language definition.

MDX

Markdown supercharged with JSX.

Allows React components to be statically rendered inside markdown.

TypeScript

Javascript on steroids.

Catches your silly bugs before you can even run the code.

React

JavaScript view layer library for building user interfaces.

Emphasis on the library part, it's not a framework.

Very bueno for saving you from writing all the HTML yourself, and adding small bits of interactivity.

Not so bueno for heavyweight interactivity, need bigger guns and external libraries for that.

Radix UI Primitives

Unstyled headless components that we can easily lay our design system on top of.

Also handles accessibility, saving us from writing and maintaining a lot of code + tests.

Shadcn/ui

Modern component library built on top of Radix UI Primitives and styled with Tailwind, combining accessibility, customizability, and business logic into one.

Has an entire ecosystem of other libraries and heavily supported by the community, making it easy for us to find any component we need.

Also has maintained Figma files and Storybooks, allowing us to tightly integrate design mockups with the frontend.

Not an npm package, and therefore easily modifiable because we have direct access to code. Even comes with tools so that we can track how much we changed the original look.

Tailwind CSS

Utility-first CSS framework to style components super fast.

No more separate stylesheets. Won't necessarily fix your potato UI but will allow you to make them faster and with less debugging.

Does not scale well and makes codebases unreadable by mixing styling and business logic. This is addressed by good React component architecture in tandem with other libraries.

Storybook

Framework for developing and testing UI components in isolation.

Allows you to make your buttons in peace, without having to launch the entire main app to see it.

Also doubles as documentation for our design system and a playground for anything and everything the user sees in the main app, in any state; saving you valuable clickity clicks.

React Router 7

More performant than Next.js for dynamic applications.

More 'guts-out' and modular with clearer separation between client and server.

Maintained by the React Router team at Shopify.

Next.js

Unopinionated and batteries-not-included React framework with routing, server-side rendering, image optimizations, and many other things.

In a nutshell, pulls all kinds of strings that allow you to use React without setting the user's computer on fire.

Maintained by Vercel.

Fumadocs

Documentation site framework used to build this site.

Uses the Next.js compiler.

XState

Powerful and flexible state management library based on finite state machines and statecharts.

Strong focus on predictability and control over state transitions, allowing for more reliable and well-defined workflows.

Ideal for managing complex or multi-step processes, where each state and transition can be explicitly defined and visualized.

Separates business logic from UI, making it framework-agnostic and easy to integrate with React, Vue, and other libraries.

Nest.js

Enterprise-grade batteries-included framework for robust server-side platforms.

Payload CMS

Content Management System to hold static data displayed across our websites and apps.

Interacts with the database that stores static content such as text and images away from our codebase, so that other teams can change them directly through a nice admin dashboard without having to contact us.

Gives us the power of WordPress without getting in our way for customizability.

Drizzle

An ORM that saves us from writing raw SQL queries, plays well with the Node.ts ecosystem.

PostgreSQL

Open-source relational database system where we store data.

☁ DevOps

Nix

Runs the development database without messing with your existing system configs.

Saves you from doing a lot of nasty system configuration yourself.

Not a containerization tool like Docker, but rather a shell environment. Zero overhead, maximum performance.

pnpm

Drop-in replacement for npm that's faster and better in almost every way.

Better for both the disk health of your computer and the speed of our CI/CD pipelines

Nx

Makes using many different technologies together possible by sharing code and assets between projects.

Massively improves productivity as you don't have to context switch between different git repos with different version histories.

Zellij

Massively improves productivity as you don't have to type in commands by hand.

Automatically starts up and shuts down dev environment.

Gets everyone on the same workflow and access to the same tools.

ESLint

Find and fix problems in code, and enforce style guide and best practices.

Saves you from having to memorize and study our style guide by giving you instant feedback while coding.

Saves us from having to make our entire style guide and re-invent best practices from scratch using plugins.

Can catch lightweight surface bugs. Cannot catch deep business logic bugs, but prevents the likelihood of them happening by catching the surface bugs.

Prettier

An opinionated code formatter to make code look Prettier.

Cannot catch bugs. Only handles fixing inconsistencies in spacing, quotes, semicolons, parentheses, brackets, etc.

CodeRabbit

High quality AI generated PR reviews.

Trained on our codebase.

Greatly reduces review fatigue for core team.

Conventional Comments

Standardized open-source specification for sane PR review comments.

Vitest

For both Unit Tests and Integration Tests.

Code with peace of mind and get instant feedback if you break something.

Playwright

For End-to-End Testing of our entire platform.

Instead of clicking around the entire app yourself to see if it still works after every single time you make a change, why not let a robot do it for you?

Storybook Test Runner

Executes Vitest and Playwright test suites on design system components, along with handling accessibility testing, and coverage testing using plugins.

Trunk-Based Development

Source code branching model focused on simplicity and speed.

Conventional Commits

Standardized open-source specification for commit messages.

Conventional Branch

Standardized open-source specification for branch names.

Commitizen

Automates creating standardized commit messages that adhere to the conventional commits specification + our sprinkles on top.

Commitlint

Lint commit messages according to our specifications.

Commitlint/config-conventional- Plugin that enforces conventional commits for commit messages and allows us to modify them.

Commitlint/cz-commitlint- Provides an integration for Commitizen so that the only options displayed to you are the same ones defined in Commitlint.

In a nutshell, blocks commit messages that do not meet our specs, which in turn saves our CI pipelines from crashing or creating the wrong versions, which in turn ensures our whole app doesn't blow up.

Lint-staged

Runs ESLint and Prettier on Git staged files so that there are no code style diffs at the PR level.

Husky

Quickly and easily triggers Git hooks, which in turn trigger commands to run the tools mentioned above.

♻ Continous Integration

Semantic Release

Automated versioning and package publishing as per the Semantic Versioning specification.

Parses the history of commit messages to automatically generate changelogs.

Requires conventional commit specs to be followed in order to work properly.

GitHub Actions

Automated CI/CD pipelines to run linting, test suites, and handle versioning.

The final boss you need to defeat before human eyes even see your code.

Very fun to configure and watch at work. Not very fun to debug ☁️

Docker

Containerization platform to develop, ship, and run the app anywhere.

Your computer is a box. Someone else's computer is a box. Your box is different from their box. The thing works on their box but not yours. What if both of you used the same box with the same configs and could easily pass it around like hot potato? 📦🤔

Docker is that box, more fancily referred to as a 'container'. Both of you run this box inside your box. It works for both of you by boxception.

🚢 Continous Deployment

Pulumi

For automating Netlify and having almost AWS-level of control over it, without the maintenance cost.

Uses the Terraform Netlify provider through an SDK bridge.

Netlify

For safely deploying our app to the web so that people can see and use it from their browsers.

Uses AWS under the hood.

Allows for preview deployments for our own purposes which are not indexed on google.

If we push a version that makes it past all our tests but somehow breaks at the build stage, Netlify will provide instant feedback and not deploy it, leaving up the previous functional version.

Also allows quick and easy rollbacks to previously deployed versions.

Chromatic

Visual test server platform to easily spot differences in UI and discuss them as a team, integrated with Storybook.

Can catch visual bugs by comparing new renders with a specified baseline, and block the changes from making it to production prior to being reviewed.

Supabase

Like Netlify but purely for back-end.