Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tecladocode/onewheel-remix-course-lectures

A lecture-by-lecture breakdown of code changes in Kent C. Dodds' Remix course, building the Onewheel blog
https://github.com/tecladocode/onewheel-remix-course-lectures

Last synced: 4 days ago
JSON representation

A lecture-by-lecture breakdown of code changes in Kent C. Dodds' Remix course, building the Onewheel blog

Awesome Lists containing this project

README 

        
# Remix Onewheel Course Lecture Breakdown



While going through the Remix course from [Egghead.io](https://egghead.io/lessons/remix-intro-up-and-running-with-remix), 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](https://diff-store.com) 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](https://diff-store.com/diff/52095baaac15481ab58007e3e1ab0a25)

4. [Fetch Data in Remix Using a Basic Loader](https://diff-store.com/diff/7356dc59aab7422ab0d88a14491b4244)

5. [Remix Server Code Filename Convention](https://diff-store.com/diff/848e1f7f3fa2474fb2327b4793cc2b3d)

6. [Integrate TypeScript Into a Remix Loader Function](https://diff-store.com/diff/368aae9ea0624076aecc5da5ac56d986)

7. [Model Data in the Prisma Schema for a Remix App](https://diff-store.com/diff/daf35f0ac5fb48f482e2bf64890a3522)

8. [Avoid Over-Fetching in Prisma by Using findMany](https://diff-store.com/diff/b37b208de0344445860d964adbca81fe)

9.  [Create a Dynamic Segment in Remix](https://diff-store.com/diff/97d92d058635423a901067d8347c9d2f)

10. [Process Markdown on the Server Using a Remix Loader](https://diff-store.com/diff/4ea0e509ebde4e44a95b31ad767790b1)

11. [Get TypeScript Coverage for Dynamic Parameters in Remix with Invariant](https://diff-store.com/diff/9626f0da50c24ec0935557a3e5e2ad67)

12. [Render Nested Routes in Remix](https://diff-store.com/diff/73ac6b7bf1694c668f209e4d4eb1cbf9)

13. [Use Remix Actions to Handle Form Submission POST Requests](https://diff-store.com/diff/eda88a9662da41769ed7c27b0fde1df1)

14. [Validate Form Fields in a Remix Action](https://diff-store.com/diff/fc9485829a984a62a4a616a4f06101da)

15. [Typing Form Submission Values with tiny-invariant](https://diff-store.com/diff/0fab085b6fe7420e992a1b93c82f3890)

16. [Handle Loading State with Remix useTransition](https://diff-store.com/diff/354b8179e33a499ca78455371421e841)

17. [Pre-emptively Load Links with Remix prefetch](https://diff-store.com/diff/94e27228cf67457d8691594dc104534c)

18. [Expose Specific Environmental Variables to The Client Using Remix](https://diff-store.com/diff/15813aca4667453b8dcc372821e3e268)

19. [Create an Admin User Hook using Remix to Verify Admin Users](https://diff-store.com/diff/5a91dc6607444cc48988edfccc38acc0)

20. [Hide Admin Routes from Non-Admin Users in a Remix App](https://diff-store.com/diff/3f91ac8c8c3d44f59f8b95e0bc2f79e5)

21. [Allow Admins to Edit Existing Posts on Remix Applications](https://diff-store.com/diff/2153b72372fa4f91a4583570b74d74cd)

22. [Populate Remix Edit Form with Existing Post Data](https://diff-store.com/diff/fc21aaa198c44d6081dc70a7fce29ab9)

23. [Add Update Functionality to an Edit Post Page in Remix](https://diff-store.com/diff/1b4af019644c4cbdb911501b2005b20b)

24. [Add Delete Functionality to Posts Page in Remix](https://diff-store.com/diff/a78818bdc7a149888eb4d817342f9848)

25. [Add TypeScript Typing to Admin Routes in a Remix App](https://diff-store.com/diff/f1bfcb564f6240c4a2907aabc41bff3d)

26. [Handle 404s in Remix with CatchBoundaries](https://diff-store.com/diff/2d610ec46d4f4dfa9dfd9572196b8275)

27. [Handle Unexpected Errors With Error Boundaries in Remix](https://diff-store.com/diff/31a36b9fd5d6419a98d3365c7e068046)

28. [Deploy a Remix Application to Fly.io](https://diff-store.com/diff/7fe015c15e454cbebbec8b32c5308e49)

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).