https://github.com/typeonce-dev/effect-react-19-project-template
Learn how to organize Effect services, layers, and runtime to execute both client and server code in React 19
https://github.com/typeonce-dev/effect-react-19-project-template
effect effect-ts react-19 server-actions server-components waku waku-react
Last synced: 6 months ago
JSON representation
Learn how to organize Effect services, layers, and runtime to execute both client and server code in React 19
- Host: GitHub
- URL: https://github.com/typeonce-dev/effect-react-19-project-template
- Owner: typeonce-dev
- Created: 2024-09-19T16:52:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-11T06:22:02.000Z (7 months ago)
- Last Synced: 2025-04-14T22:06:41.846Z (6 months ago)
- Topics: effect, effect-ts, react-19, server-actions, server-components, waku, waku-react
- Language: TypeScript
- Homepage: https://www.typeonce.dev/course/effect-react-19-project-template
- Size: 91.8 KB
- Stars: 22
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Effect with React 19: Project Template
This repository contains all the code for the project [`Effect with React 19: Project Template`](https://www.typeonce.dev/course/effect-react-19-project-template).
The app is implemented using typescript. You can get started by forking/cloning the repository and installing the dependencies:
```sh
pnpm install
```
***
## Project content
React 19 brings the server closer to the client with feature like server components and server action. Organizing server code is different from the usual pattern of client-only projects.
Effect allows to organize a **maintainable and testable codebase for both client and server**. It also makes it easier to distinguish between client and server code, as well as handling the boundary between the two.
In this project template, we will explore how to use Effect with React 19 and TypeScript.
The project uses a framework called [Waku](https://waku.gg/). Waku is a minimal framework that already includes most of the features from React 19, included server components and server actions.
Waku is therefore ideal to showcase how to use Effect with React 19 with a minimal configuration, while still leveraging the full power of Effect.
## Prerequisites
In this project I won't explain the details of services and layers in Effect. I suggest you to follow [Effect: Beginners Complete Getting Started](https://www.typeonce.dev/course/effect-beginners-complete-getting-started) to understand the basics of Effect.
The course will introduce the main new features in React 19, without going too deep into the technical details. Most of these features are already documented in the [official React documentation](https://react.dev/).