Tutorial: Build a Bookstore
Welcome to the Remix tutorial. Over the next eight parts, you will build a complete bookstore web application from scratch. By the end, you will have a working app where customers can browse books, add them to a cart, check out, and where admins can manage the inventory.
This is not a quick overview --- it is a thorough, hands-on walkthrough. Every line of code is explained, every new concept is defined, and every step produces something you can run and see in your browser.
What We Will Build
The bookstore application includes:
- A public catalog --- visitors can browse books by genre, view details, and search.
- A shopping cart --- users can add books, update quantities, and remove items.
- User accounts --- registration, login, logout, and profile settings.
- A checkout flow --- placing orders with a shipping address.
- An admin panel --- administrators can create, edit, and delete books, view orders, and manage users.
- File uploads --- book cover images can be uploaded by admins.
Along the way, you will learn every major piece of Remix: routing, components, database access, form handling, sessions, authentication, middleware, and file uploads.
What You Will Learn
Each part of the tutorial introduces new concepts:
| Part | Topic | What You Will Learn |
|---|---|---|
| 1. Project Setup | Getting started | Creating a project, installing dependencies, running a dev server |
| 2. Routing | URL patterns | Defining routes, dynamic segments, form routes, type-safe URLs |
| 3. Building Pages | Components & JSX | Rendering HTML, creating components, layouts, styling |
| 4. Database | Data access | Defining tables, running queries, migrations, seeding data |
| 5. Forms & Mutations | User input | Handling form submissions, validation, creating and updating data |
| 6. Sessions & Auth | User identity | Cookies, sessions, login, registration, protecting routes |
| 7. File Uploads | Binary data | Uploading images, parsing multipart forms, serving uploaded files |
| 8. Deployment | Going live | Building for production, running on a server |
Prerequisites
This tutorial assumes you are comfortable with:
- HTML --- you know what tags like
<div>,<form>,<a>, and<input>do. - CSS --- you can style a page with selectors, properties, and values.
- JavaScript --- you can write functions, use variables, work with arrays and objects, and understand
async/await. - The command line --- you can open a terminal, navigate directories, and run commands.
You do not need to know TypeScript, React, databases, or any server-side programming. The tutorial explains all of these topics as they come up.
Software You Need
- Node.js 24.3.0 or higher --- download from nodejs.org if you do not have it. Check your version with
node --version. - A text editor --- VS Code is recommended. It has excellent TypeScript support built in.
- A web browser --- any modern browser works.
How to Follow Along
Each part builds on the previous one, so work through them in order. The tutorial is designed so you can stop after any part and come back later --- your code will still work.
Take your time
There is no rush. Some parts take 15 minutes, others take an hour. The goal is to understand what you are building, not to finish as fast as possible. If something does not make sense, re-read the explanation before moving on.
This tutorial uses Remix V3 alpha
Remix V3 is currently in alpha. The APIs shown here are stable within the alpha, but may change slightly before the final release. If you encounter differences between this tutorial and the actual package, check the changelog for updates.
Ready?
Let's get started. Head to Part 1: Project Setup to create your bookstore project.