Learn how to build
modern user interfaces
for the web

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

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

Set up Prisma and SQLite to persist our dynamic data.

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

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

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

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

Build a form and action that lets users edit entries.

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

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

Let admins sign in by adding a login route that creates a session cookie.

Let admins sign out by creating a form that destroys the session.

Use the session to hide admin-only user flows from public guests.

Learn how to secure our backend data from unauthorized requests.

Use an Error Boundary to provide better feedback to users when they encounter an exception.

Use the return value from our login action to show validation errors to the user.

Give our journal a facelift on smaller screens using Tailwind and some UI design best practices.

Finish up our redesign by adapting the UI for larger screens.

Deploy your brand new Work Journal to Fly.io so you can share it with the world!

Use Prisma to fetch data directly inside of a Server Component.

Use query params to paginate the list of users.

Use Prisma's count function to build out the pagination area.

Create a Client Component that re-renders the users table whenever a user types in the search field.

Refactor our URL logic to maintain all parameter values using URLSearchParams.

Render an instant loading screen while a Server Component fetches data.

Use a custom Suspense boundary to instantly render the static parts of a page.

Use a React Transition to render a spinner while a Server Component is updating.

Wait until the user finishes typing before querying the database.

Learn the basics of state-based animation with Framer Motion.

Add animation to unmounting elements using the versatile AnimatePresence component.

Use scroll-based animation to smoothly grow and shrink a fixed header.

Add a fading nav and a blurred background effect by extracting a reusable Hook.

Learn how to use the `x` shorthand property to smoothly animate an image container.

Use an animated aspect ratio to create a navigation bar inspired by iOS Photos.

Use measured height to resize a panel with dynamic content.

Animate an infinite monthly calendar using direction-aware dynamic variants.

Get acquainted with Tailwind's utility-first approach by building a custom message component.

Use Tailwind's Flexbox utilities to make an application layout with fixed and flexible panels.

Choose which Flexbox panels should scroll when their contents overflow their container.

Learn best practices for overriding and extending Tailwind's default colors with your brand’s palette.

Override the default typeface used by Tailwind with an imported font.

See how to maintain a utility-first workflow when styling icons by working with inline SVG elements.

Generate a one-off corner transition using the Just-In-Time engine.

Conditionally apply classes to target different application states.

Use groups to style child elements based on an ancestor's pseudostate.

See how a reusable component removes duplicate classes without the need for a CSS architecture.

Customize Tailwind's shadows to recreate Discord's floating header.

Learn how to use spacing and group utilities to style a list of dynamic items.

Map over JSON data to dynamically build up the channel list.

Use nested router segments to build an active channel link.

Style a channel's unread state using a simple pattern to improve readability.

Use React state and Tailwind transitions to animate a collapsed category's icon.

Use the truncate utility to control which panel grows or shrinks based on the available space.

Learn how to work with @tailwindcss/forms to recreate Discord's search box.

Extract two versions of our component from Lesson 1 to render each channel's messages.

Round out the app by replacing the remaining static text and links with dynamic data.

Use Tailwind's mobile-first responsive utilities to customize the interface on small screens.