File Uploads in React with Effect-TS | Uploadthing Crash Course

👉 Enroll to Practical Effect here: https://lucasbarake.com/

Repo: https://github.com/lucas-barake/effect-file-manager

In this video, we're going to see how we can have file uploads with React powered by the full Effect-TS ecosystem. We’ll integrate UploadThing for the actual storage, but instead of the usual hooks, we're managing the complex upload lifecycle using effect-atom state machines.

I also walk through setting up WebSockets for real-time database syncing and - the most interesting part - offloading image compression to Web Workers while treating them like a standard, type-safe RPC layer.

00:00:00 Intro & Project Demo
00:01:41 Practical Effect Course
00:02:05 Domain Layer & RPC Contracts
00:04:54 Server Setup & HTTP Router
00:08:40 Implementing RPC Services
00:10:53 UploadThing API Client
00:13:32 Webhook Callback Handling
00:15:16 SQL Repository Layer
00:16:01 Frontend UI Architecture
00:20:01 Client API & WebSocket Setup
00:22:12 Upload State Machine
00:25:20 File Synchronization Logic
00:28:12 Image Compression with Web Workers
00:33:19 Testing & Mocking Strategies

Видео File Uploads in React with Effect-TS | Uploadthing Crash Course канала Lucas Barake