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