Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll look at some more advanced use cases when building Remix applications.

Overview

💿 Advanced Remix Workshop

Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll look at some more advanced use cases when building Remix applications.


Build Status GPL 3.0 License Code of Conduct

Prerequisites

System Requirements

  • git v2.13 or greater
  • NodeJS 14 || 16 || 18
  • npm v8 or greater

All of these must be available in your PATH. To verify things are set up properly, you can run this:

git --version
node --version
npm --version

If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.

Setup

Follow these steps to get this set up:

git clone https://github.com/FrontendMasters/advanced-remix.git
cd advanced-remix
npm run setup

If you experience errors here, please open an issue with as many details as you can offer.

Exercises

You'll find all the exercises in the exercises directory. The finished version of each exercise is in the final directory. Each directory is a completely contained Remix app.

The purpose of the exercise is not for you to work through all the material. It's intended to get your brain thinking about the right questions to ask me as I walk through the material.

Running each app

Each directory in the final and exercises directories is a Remix app. The easiest way to run these without having to cd into each directory is to use the dev.js script in the root of this repository:

# to run the first exercise app:
node dev exercise/01

# This runs the first exercise too:
node dev 1

# or to run the final version of the 2nd exercise
node dev final/02
# this runs the 1st extra credit of the final version of the 2nd exercise
node dev final2.1

# this will just ask you which one you want to run
node dev

Each will run on a unique port so you can run multiple apps at once.

Unfortunately, due to the nature of this workshop, ⌘+P isn't very useful (because there are a LOT of duplicate files). If you'd prefer, you can open each exercise in its own editor. Or just make sure to prefix your searches with "exercise/03" (for example) so you're searching in the right app.

Instructions

For each exercise, follow the instructions in the README.md file of the exercise directory to learn what the objectives are.

You can use the diff.js script to be shown the differences between what's in any of the apps. For example:

# to be shown the differences between the first exercise and the final version:
node diff exercise/01 final/01

# We've got some sensible defaults in place so you can get the same diff as above with:
node diff 1

# And for comparing yourself to extra credits, you can run:
node diff exercise/02 final/02.2

# this will just ask you which ones you want to diff
node diff

This can be handy for you to run when you think you're done but things aren't quite working as you expect.

Sometimes there are changes that happen outside of the tutorial because they're unrelated to Remix but they can be handy to know about, so the diff command can help with that:

# To be shown the changes that happened to prepare for the exercise:
node diff final/04 exercise/05

NOTE: Unfortunately, there's no way to exclude some files from the diff we're doing, so we limit the diff to only the app directory (where almost all of your code changes happen). You'll need to ignore any changes to styles/tailwind.css however. That's a generated file. Sorry about that.

Workshop Feedback

Each exercise has an Elaboration and Feedback link. Please fill that out after the exercise and instruction.

At the end of the workshop, please go to this URL to give overall feedback. Thank you! https://kcd.im/remix-advanced-ws-feedback

You might also like...

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

Advanced Next.js Masterclass: a workshop by Atila Fassina and Smashing Magazine

Advanced Next.js Masterclass: a workshop by Atila Fassina and Smashing Magazine

Setting up the system 🧱 Make sure you are running on Node.js 16 or newer. If properly installed, Node.js will exist in your $PATH. To check the versi

Nov 30, 2022

Matt's Advanced TypeScript workshop

Advanced TypeScript Workshop Hello! My name's Matt Pocock. This is a workshop repo to teach you about Advanced TypeScript. Topics Covered Using typeof

Dec 24, 2022

Matt's Advanced TypeScript workshop

Advanced TypeScript Workshop Hello! My name's Matt Pocock. This is a workshop repo to teach you about Advanced TypeScript. Topics Covered Using typeof

Sep 20, 2022

There can be more than Notion and Miro. Affine is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.

There can be more than Notion and Miro. Affine is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.

AFFiNE.PRO The Next-Gen Knowledge Base to Replace Notion & Miro. Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Free to

Jan 9, 2023

A JavaScript Library for things I use often, as well as some helper functions

Elements A JavaScript Library for things I use often, as well as some helper functions. Full documentation below. Inspired by Habitat, another library

Apr 21, 2022

Happy Birthday is a web-based party live background generated by CANVAS powered by JavaScript. This show a lot of random colorize particles in the background.

Happy Birthday is a web-based party live background generated by CANVAS powered by JavaScript. This show a lot of random colorize particles in the background.

Happy BirthDay JS Happy Birthday is a web-based party live background generated by CANVAS powered by JavaScript. This show a lot of random colorize pa

Oct 29, 2022

A JavaScript / WebAssembly library for generating regular expressions from user-provided test cases

A JavaScript / WebAssembly library for generating regular expressions from user-provided test cases

1. What does this library do? grex is a library that is meant to simplify the often complicated and tedious task of creating regular expressions. It d

Dec 30, 2022
Comments
  • fix the Search feature not working for Windows

    fix the Search feature not working for Windows

    Search feature was not working on windows because of usage of forward slashes in the script as oppose to windows backward slash.

    Fixed the logic by using Path.join to normalize the slashes and allow the search feature to work for dev and diff script.

    Before Fix:

    image

    After Fix:

    image

    opened by Swappea 1
Owner
Frontend Masters
Advance Your Skills with In-Depth JavaScript, Node.js & Front-End Engineering Courses
Frontend Masters
A mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases.

This is a mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases. It also has a details page to check for the statistics for each region/state if available.

Solomon Hagan 7 Jul 30, 2022
A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ💯

A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ??

Reem janina 7 May 31, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022
For this workshop, we're going to learn more about cloud computing by exploring how to use Pulumi to build, configure, and deploy a real-life, modern application using Docker

For this workshop, we're going to learn more about cloud computing by exploring how to use Pulumi to build, configure, and deploy a real-life, modern application using Docker. We will create a frontend, a backend, and a database to deploy the Pulumipus Boba Tea Shop. Along the way, we'll learn more about how Pulumi works.

Kat Cosgrove 9 Dec 29, 2022
An extensible HTML DOM window manager with a professional look and feel

Wingman An extensible HTML DOM window manager with a professional look and feel. Installation Wingman only requires two files: wingman.css and wingman

nethe550 1 Jan 21, 2022
A framework for building collaborative Microsoft Teams and M365 experiences.

Live Share SDK The Live Share SDK is in preview. You will need to be part of the Developer Preview Program for Microsoft Teams to use this feature. Th

Microsoft 65 Jan 1, 2023
The front-end CSS framework for building experiences for Office and Microsoft 365.

Office UI Fabric Core The front-end framework for building experiences for Office and Office 365. Fabric is a responsive, mobile-first collection of s

Office Developer 3.7k Dec 20, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022