Remix Onewheel Course Lecture Breakdown

While going through the Remix course from Egghead.io, I found it difficult to follow along with code changes each lecture.

I broke the code changes into lectures so that it would be easier to follow.

Each lecture has an associated Diff Store link that shows you the changes and lets you download the code as shown at the beginning or end of any of the lectures.

Why these help

As students go through the course, it's helpful to code along with the instructor. Sometimes if the instructor codes very quickly or jumps between files quickly, students can get a bit lost.

Having all the code changes in one place can help!

Also, as an instructor, having these code changes before recording helps me record better. That's an added bonus.

Finally, if students want to pause the course and play around with the code, they can do so without worrying that their code will go out of sync with the instructor's code. When they move onto the next lecture, they can just download the "start" code from the lecture page and work off that.

Diff Store links

Here are the Diff Store links:

1. Intro: Up and Running with Remix (no code changes)
2. Create a New Remix Project Using the remix-create CLI
   • Run npx create-remix --template remix-run/indie-stack .
   • Say "Yes"
   • Keep "TypeScript"
   • Run npm run dev to start
3. Create Your First Remix Route
4. Fetch Data in Remix Using a Basic Loader
5. Remix Server Code Filename Convention
6. Integrate TypeScript Into a Remix Loader Function
7. Model Data in the Prisma Schema for a Remix App
8. Avoid Over-Fetching in Prisma by Using findMany
9. Create a Dynamic Segment in Remix
10. Process Markdown on the Server Using a Remix Loader
11. Get TypeScript Coverage for Dynamic Parameters in Remix with Invariant
12. Render Nested Routes in Remix
13. Use Remix Actions to Handle Form Submission POST Requests
14. Validate Form Fields in a Remix Action
15. Typing Form Submission Values with tiny-invariant
16. Handle Loading State with Remix useTransition
17. Pre-emptively Load Links with Remix prefetch
18. Expose Specific Environmental Variables to The Client Using Remix
19. Create an Admin User Hook using Remix to Verify Admin Users
20. Hide Admin Routes from Non-Admin Users in a Remix App
21. Allow Admins to Edit Existing Posts on Remix Applications
22. Populate Remix Edit Form with Existing Post Data
23. Add Update Functionality to an Edit Post Page in Remix
24. Add Delete Functionality to Posts Page in Remix
25. Add TypeScript Typing to Admin Routes in a Remix App
26. Handle 404s in Remix with CatchBoundaries
27. Handle Unexpected Errors With Error Boundaries in Remix
28. Deploy a Remix Application to Fly.io
29. Outro: Up and Running with Remix (no code changes)

Note: at the moment there's a minor bug in Diff Store so the "From" and "To" paths are the same (both show the "To" path).