Sandro Maglione
I am a software engineer focused on type-safe full-stack TypeScript, functional programming, Effect, React, XState, and local-first applications. I created Typeonce to publish complete implementations, reusable code, and step-by-step courses grounded in production work.
Courses
- Effect with React 19: Project Template
Learn how to use Effect with React 19 and TypeScript. This project template explains how to organize Effect services, layers, and runtime to execute both client and server code.
- Local-only calories tracker app
A local-only calories tracker app made with TanStack Router, PGlite, Effect, XState and drizzle. The app is all client-side, fast, private, and reactive using a local postgres database.
- Effect: Beginners Complete Getting Started
Build production and type-safe Typescript apps with Effect. In this course we go from no knowledge of effect to implementing an API request with Runtime, Layer, Config, and more.
- Paddle Billing Payments Full Stack TypeScript App
Full stack TypeScript project template that implements Paddle Billing Payments. The project uses React Router v7 on the client and Effect with Node on the server.
- XState: Complete Getting Started Guide
Learn how to leverage actors, state machines and state charts to manage the state of your app. Starting from the basics we explore all the features of XState through concrete examples of real UIs.
Recent articles
- Do not use callback props in React with XState
When a custom component starts collecting onX props, it's a strong signal that you are doing something wrong. You should model the component as an actor instead. Here is how to do it.
- XState sync actors with Effect Reactivity
Syncing actors with XState requires too much manual wiring of refs and props. So I found a better solution: using the Reactivity module of Effect. This is how it works.
- Patterns for state management with actors in React with XState
Actors are ideal for state management, and XState has all you need to implement them in React. Here are all the ways you can create and combine actors in React with XState.
- How to implement a Sync Engine for the Web
I implemented a sync engine for the web: reactive client local storage, web workers for background sync, socket, CRDT, server storage. This is how it all works.
- How to implement a backend with Effect
@effect/platform provides a type safe API for building backend apps. Any runtime, any database, and with all the features you expect from a TypeScript backend. Here is how you get started.
- DexieJs: Reactive local state in React
You may not need any complex form or state management library, not even useState or useReducer. DexieJs live queries and useActionState are the solutions to your state management problems.