Ship an app with Remix

Scaffolding a new app

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

Creating an entry form

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

Saving new entries

Set up Prisma and SQLite to persist our dynamic data.

Adding pending UI

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

Loading entries

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

Displaying entries by week

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

Creating the edit page

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

Editing entries

Build a form and action that lets users edit entries.

Making the entry form reusable

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

Deleting entries

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

Adding an authenticated state

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

Adding a logout button

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

Customizing the public UI

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

Securing our app

Learn how to secure our backend data from unauthorized requests.

Customizing the error pages

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

Adding error messages to the login form

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

Mobile redesign

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

Desktop redesign

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

Deploying our app

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