Tools and packages

These are the technologies you'll want to familiarize yourself with to work on XDev.

XDev

React
Remix is a full stack web framework (like Next.js or Astro). Since we don't have a back end, we mostly use it for routing.
Tailwind CSS provides a way to implement a design system in CSS without stylesheets.

More (so much more) on the rationale for using Tailwind.
Effect Schema lets us define a data schema that serves as a single source of truth for strongly-typed data validation and transformation.

Effect comes with a functional programming paradigm that can be hard to wrap your head around. I've written short guides to Effect and Effect Schema. More on the rationale for using it. This 4-hour beginner's workshop is probably the best way to get started with it.

These are core dependencies that we're actively contributing to as part of this effort:

@automerge-repo: Automerge Repo is a wrapper for the Automerge CRDT library which provides facilities to support working with many documents at once, as well as pluggable networking and storage. (Ink & Switch controls this repository.)
@localfirst/auth: @localfirst/auth is a TypeScript library providing decentralized authentication and authorization for team collaboration, using a secure chain of cryptographic signatures. (We control this repository.)

Playwright gives us end-to-end in-browser testing (this is Microsoft's alternative to Cypress or Selenium).

The Playwright VS Code extension is the easiest way to run these tests.
pnpm is the package manager we use (rather than npm or yarn).
Storybook is a frontend workshop for building UI components and pages in isolation.
Vite is our build tool (rather than Webpack, Rollup, Parcel, etc.)
xo is a thin wrapper around ESLint with defaults that we like.

The xo VS Code extension can help run the linter while you're working.

XState is a state machine library that we use to implement the connection protocol.

The XState VSCode extension provides some nice enhancements for visualizing state machines.