Pro course

My first Remix app

Remix
11 Lessons
2h 51m
Sam Selikoff

Taught by

Sam Selikoff

Remix is a modern full-stack React framework built on the foundations of the web platform. It layers the latest innovations in the frontend ecosystem on top of the core URL-based request-response cycle that made the web what it is today.

In this course you'll learn the fundamentals of Remix by building a personal Work Journal app. You'll set up a database, render pages with dynamic data, use actions and forms to write user input back to the database, explore nested routing, and finish by adding authentication and deploying your app. By the end you'll be able to build your own full-stack Remix app from scratch, and have a better understanding of how this thoughtfully designed framework combines the best of React with the fundamentals of the web.

Lessons

Scaffolding a new appFree

Lesson 112:31

Create a brand new Remix project and add tooling for TypeScript, Tailwind and Prettier.

Creating an entry formPro

Lesson 222:49

Build the frontend form and define an action for our first user flow.

Saving new entriesPro

Lesson 320:44

Set up Prisma and SQLite to persist our dynamic data.

Adding pending UIPro

Lesson 415:12

Improve our form's UX with validations, default values, and a styled pending state.

Loading entriesPro

Lesson 58:22

Use our homepage's loader to render dynamic entries from our backend.

Displaying entries by weekPro

Lesson 624:09

Map and reduce our dynamic entries into weekly groups using the date-fns library.

Creating the edit pagePro

Lesson 713:43

Define a new dynamic route that loads an entry based on the URL.

Editing entriesPro

Lesson 89:47

Build a form and action that lets users edit entries.

Making the entry form reusablePro

Lesson 910:20

Refactor our form component so it can be used to both create and edit entries.

Deleting entriesPro

Lesson 1010:25

Learn how progressive enhancement works in Remix by making a form to delete entries.

Adding an authenticated statePro

Lesson 1123:43

Add a login route that lets admins sign in using a session cookie.

Coming soon

Lesson 12

Customizing the public UI

Use our session to hide the interactive parts of our app for guests.

Buy My first Remix app

Learn the essentials of this popular React framework by building a personal work journal app.

Buy the course

$99one-time payment

Get everything in My first Remix app.

  • 2+ hours of video
  • 11 lessons with more coming soon
  • Private Discord
  • Summaries with code
  • Unlimited access to course materials

Lifetime membership

$249

$149
early bird discountone-time payment

Lifetime access to all current and future premium Build UI courses, forever.

  • Courses on Framer Motion, Tailwind, and Remix
  • New videos added weekly
  • Refactoring videos on React
  • Private Discord
  • Summaries with code
  • Full access to all future Build UI courses

What's included

Stream or download every video

Watch every lesson directly on Build UI, or download them to watch offline at any time.

Live code demos

Access to a live demo of each lesson that runs directly in your browser.

Private Discord

Chat with Sam, Ryan and other Build UI members about the lessons – or anything else you're working on – in our private server.

Video summaries with code snippets

Quickly reference a lesson's material with text summaries and copyable code snippets.

Source code

Each lesson comes with a GitHub repo that includes a diff of the source code.

Invoices and receipts

Get reimbursed from your employer for becoming a better coder!