profile

Build UI

🎥 New course: Ship an app with Remix

Published 6 months ago • 2 min read

​

Hey there,

We've got some exciting news today! Ship an app with Remix – our latest course – is now fully complete!

Clocking in at exactly 5 hours across 19 lessons, you’ll learn how to build a full-stack Work Journal application using Remix.

I got the idea for this project from my own work journal that I made for my personal site. It's been a useful tool over the years to document my journey as a developer, and it's a fun way to share weekly updates with other folks.

When I started using Remix in 2021, I knew I wanted to make a course on it. Remix felt like it combined my favorite parts of React with the simplicity of the web's request-response cycle that I sorely missed from frameworks like Ruby on Rails.

My Work Journal app was a perfect candidate for the course, since it's a full-stack application that has server-side features like reading and writing to a database, authentication, and deployment, as well as client-side features like SPA routing, partial reloads, and pending UI.

It's an awesome example that showcases how productive a single developer can be when they're given the right set of tools!

In this course you'll learn how to build an app exactly the way I do: step-by-step, one complete feature at a time, from the perspective of the user flows that feature should support. This means that when we build the login flow, we code both the frontend form as well as the backend data and logic needed for a user to successfully log in.

I strongly believe that building single features end-to-end is the best way to develop software, and I'm excited to show you how easy this workflow is to pull off with Remix.

Here's just some of the things we cover:

  • Creating a brand new Remix app with Tailwind CSS
  • Setting up Prisma and SQLite for persistent data
  • Understanding Remix's <Form> and useFetcher APIs
  • Using loaders and actions to read and write server-side data
  • Adding client-side pending UI during server-side operations
  • Working with dates and timezones using date-fns
  • Creating dynamic routes and nested UI
  • Making a reusable form component for creating and editing data
  • Adding cookie-based authentication with Remix's Session APIs
  • Customizing user-facing error pages with Remix's Error Boundary
  • Polishing our UI on mobile and desktop screens with Tailwind CSS
  • Deploying our app and database to Fly

In addition to becoming adept with Remix, you'll learn foundational knowledge about the web that you'll carry with you for the rest of your career as a web developer, including

  • What "HTTP is a stateless protocol" means
  • Why the request-response cycle is so important
  • How progressive enhancement makes building rich client UIs easier
  • How to use core web APIs like FormData
  • How to make TypeScript work for you, not against you
  • Some best practices from digital interface design
  • How cookie-based auth can be stateful even though HTTP is not

I'm thrilled to share the complete course you, and I can't wait to hear what you think.

Head over to Build UI to watch the first three lessons for free:

...and shoot me back your URLs once you deploy your journals!

​

Happy hacking,

– Sam and Ryan

113 Cherry St #92768, Seattle, WA 98104-2205
​Unsubscribe​

Build UI

by Sam Selikoff

Subscribe to stay updated on all the latest content from Build UI.

Read more from Build UI

Learn all about Search Params with React Server Components in our latest blog post, and check out our most recent podcast episode for our thoughts on React 19's upcoming features. Instant Search Params with React Server Components Read now → Out-of-order streaming in React Watch now → Asset loading in React Watch now → Podcast - Blog Post Club: React Labs – What We’ve Been Working On Watch now → Podcast - Instant URL search params in Next.js Watch now → Podcast - React Deep Dive:...

2 months ago • 1 min read

Dive into free videos on Radix, Remix, and Server Components, and catch our latest podcast episode where we talk through React's new cache function. Building an Elastic Slider with Framer Motion and Radix Watch now → Why you can't set cookies in Server Components Watch now → React's new cache function Watch now → Optimistic UI in Remix Watch now → Podcast - React Cache Deep Dive Watch now → Podcast - Advanced Radix UI and Blog Post Club React Server Watch now → And in case you missed it, last...

3 months ago • 1 min read

Hey there! I've got some exciting news to share today: Advanced Radix UI – my newest course – is now live! Clocking in at 2 hours and 13 minutes across 35 chapters, you’ll learn how to use Radix to build four completely custom UI components: a Switch, a Selector Group, a Toast, and a Slider: Each component has a completely custom design using Tailwind, and there's also some slick animation and interactions we build with React and Framer Motion to enhance what Radix gives you out of the box....

4 months ago • 1 min read
Share this post