feedback updates

Author: AlemTuzlak

exercises/01.routing/01.problem.routing/README.mdx

@@ -3,28 +3,25 @@
 Welcome to your first exercise! In this exercise,
 you will learn how to register routes in a React Router application.
 
-## Exercise Overview
+## Understanding the `routes.ts` file
+
+The `app/routes.ts` file is where you define the routes for your application. Each route corresponds to a specific URL path
+and is associated with a React component that will be rendered when the user navigates to that path.
+
+This file is picked up by the React Router vite plugin and is used to generate the routing configuration for your app.
+What's important to keep in mind is that this in the end, is just a regular TypeScript file, so you can use all the features of TypeScript
+to help you define your routes. You can fetch them from third-parties, define helper functions, and so on.
+
+React router offers you a few utilities to help you define your routes more easily.
+
+## Exercise Goals
 
 In this exercise, you will:
 
 1. Explore the `app/routes` directory.
-2. Register those routes in the `app/routes.ts` file.
-3. (Bonus) Create a utility to easily define landing page routes.
-
-## Getting Started
+2. Learn about the utilites offered by React Router to define routes.
+3. Register those routes in the `app/routes.ts` file.
+4. (Bonus) Create a utility to easily define landing page routes.
 
 To get started, find our helpful assistants comments in the `app/routes.ts` file. (They include 🐨 emoji)
-and implement the following routes:
-
-- `Landing page layout` that wraps all the other routes (`./routes/_landing.tsx`).
-- `/` - The index route that renders the landing page (`./routes/_landing._index/route.tsx`).
-- `/about` - The about route that renders the `About` page (`./routes/_landing.about.tsx`).
-- `/products` - The products route that renders the `Products` page (`./routes/_landing.products._index.tsx`).
-- `/products/:productId` - The product details route that renders the `ProductDetails` page (`./routes/_landing.products.$productId.tsx`).
-- `/contact` - The contact route that renders the `Contact` page (`./routes/_landing.contact.tsx`).
-- `/cart` - The cart route that renders the `Cart` page (`./routes/_landing.cart.tsx`).
-- `/terms-of-use` - The terms of use route that renders the `TermsOfUse` page (`./routes/_landing.terms-of-use.tsx`).
-- `/terms-of-service` - The terms of service route that renders the `TermsOfService` page (`./routes/_landing.terms-of-service.tsx`).
-
-> Bonus (only after completing the above): Create a utility function to easily define landing page routes.
-> This utility should be used to define the routes above
+and implement the required routes for this project!

exercises/01.routing/01.problem.routing/app/routes.ts

@@ -7,21 +7,26 @@ import {
 } from '@react-router/dev/routes'
 
 // 🐨 Create your route configuration here.
-// 🐨 This file is used to define the structure of your application routes.
+// 💰 This file is used to define the structure of your application routes.
 //
 // 🐨 You need to add the following routes:
-// - Home page ("/")
-// - About page ("/about")
-// - Contact page ("/contact")
+// - `Landing page layout` that wraps all the other routes (`./routes/_landing.tsx`).
+// - `/` - The index route that renders the landing page (`./routes/_landing._index/route.tsx`).
+// - `/about` - The about route that renders the `About` page (`./routes/_landing.about.tsx`).
+// - `/products` - The products route that renders the `Products` page (`./routes/_landing.products._index.tsx`).
+// - `/products/:productId` - The product details route that renders the `ProductDetails` page (`./routes/_landing.products.$productId.tsx`).
+// - `/contact` - The contact route that renders the `Contact` page (`./routes/_landing.contact.tsx`).
+// - `/cart` - The cart route that renders the `Cart` page (`./routes/_landing.cart.tsx`).
+// - `/terms-of-use` - The terms of use route that renders the `TermsOfUse` page (`./routes/_landing.terms-of-use.tsx`).
+// - `/terms-of-service` - The terms of service route that renders the `TermsOfService` page (`./routes/_landing.terms-of-service.tsx`).
+
 // 💰 Create a products route with children here!
 // - Products page ("/products")
 // - Product details page ("/products/:productId")
-// - Terms of Use page ("/terms-of-use")
-// - Terms of Service page ("/terms-of-service")
 //
-// 🐨 The files are already ready for you in the `app/routes` directory!
+// 💰 The files are already ready for you in the `app/routes` directory!
 //
-// Bonus points: Create a utility to define landing page routes
+// 💯 Bonus points: Create a utility to define landing page routes
 // and use it to create the routes for the landing page.
 
 export default [] satisfies RouteConfig

exercises/01.routing/01.problem.routing/package.json

@@ -14,17 +14,17 @@
   },
   "dependencies": {
     "@epic-web/workshop-utils": "^6.40.0",
-    "@react-router/node": "^7.5.3",
-    "@react-router/serve": "^7.5.3",
+    "@react-router/node": "^7.9.5",
+    "@react-router/serve": "^7.9.5",
     "isbot": "^5.1.27",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "^7.5.3"
+    "react-router": "^7.9.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
-    "@react-router/dev": "^7.5.3",
+    "@react-router/dev": "^7.9.5",
     "@tailwindcss/vite": "^4.1.4",
     "@types/node": "^20",
     "@types/react": "^19.1.2",

exercises/01.routing/01.solution.routing/README.mdx

@@ -6,8 +6,9 @@ In this exercise you learned how to use the `routes.ts` file to manually registe
 and you also learned how to create a utility function to make it easier to register routes
 that share a common layout.
 
-Even though I'm proud of you for completing this exercise, 👨‍💼 Peter the manager isn't! He
-thinks this approach of manually registering routes is too tedious and time consuming. He wants you
+Even though I'm proud of you for completing this exercise, 👨‍💼 Peter the manager isn't!
+
+He thinks this approach of manually registering routes is too tedious and time consuming. He wants you
 to find a better way to register routes in the next exercise. So let's move on to the
 next exercise where you will learn how to use a third party
 library to automatically detect and register your routes for you!

exercises/01.routing/01.solution.routing/package.json

@@ -14,17 +14,17 @@
   },
   "dependencies": {
     "@epic-web/workshop-utils": "^6.40.0",
-    "@react-router/node": "^7.5.3",
-    "@react-router/serve": "^7.5.3",
+    "@react-router/node": "^7.9.5",
+    "@react-router/serve": "^7.9.5",
     "isbot": "^5.1.27",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "^7.5.3"
+    "react-router": "^7.9.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
-    "@react-router/dev": "^7.5.3",
+    "@react-router/dev": "^7.9.5",
     "@tailwindcss/vite": "^4.1.4",
     "@types/node": "^20",
     "@types/react": "^19.1.2",

exercises/01.routing/02.problem.automatic-routing/README.mdx

@@ -8,25 +8,11 @@ Now that we understand how to define routes and use them effectively, let's use
 from the React Router team to automatically detect and register routes for us so we can focus
 on building features instead of boilerplate.
 
-## Exercise Overview
+## Exercise Goals
 
 In this exercise, you will:
 
-1. Install `@react-router/fs-routes` package.
-2. Register those routes in the `app/routes.ts` file.
-
-## Getting Started
+1. Use a custom convention to automatically detect and register routes in the `app/routes.ts` file.
+2. Understand how automatic route detection works and how to leverage it in your projects.
 
 To get started, find our helpful assistants comments in the `app/routes.ts` file. (They include 🐨 emoji)
-
-You will need to install a new package to help you with automatic route detection:
-
-```sh
-npm install @react-router/fs-routes
-```
-
-Then, implement the following steps in the `app/routes.ts` file:
-
-1. Import the `flatRoutes` function from `@react-router/fs-routes`.
-2. Use the `flatRoutes` function to automatically detect and register all the routes in the
-   `app/routes` directory.

exercises/01.routing/02.problem.automatic-routing/package.json

@@ -14,17 +14,18 @@
   },
   "dependencies": {
     "@epic-web/workshop-utils": "^6.40.0",
-    "@react-router/node": "^7.5.3",
-    "@react-router/serve": "^7.5.3",
+    "@react-router/node": "^7.9.5",
+    "@react-router/serve": "^7.9.5",
     "isbot": "^5.1.27",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "^7.5.3"
+    "react-router": "^7.9.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
-    "@react-router/dev": "^7.5.3",
+    "@react-router/dev": "^7.9.5",
+    "@react-router/fs-routes": "^7.9.5",
     "@tailwindcss/vite": "^4.1.4",
     "@types/node": "^20",
     "@types/react": "^19.1.2",

exercises/01.routing/02.solution.automatic-routing/README.mdx

@@ -12,6 +12,8 @@ and registered in your application, saving you time and effort.
 your app for the next few exercises. Although, I don't really know how to add the stylesheets
 and fonts to your app, so you will have to figure that part out on your own!
 
+<NextDiffLink> Check out the changes in the next exercise </NextDiffLink>
+
 ## Additional considerations
 
 The package we used only supports a single layer of nested routes. If you need more complex

exercises/01.routing/02.solution.automatic-routing/package.json

@@ -14,18 +14,18 @@
   },
   "dependencies": {
     "@epic-web/workshop-utils": "^6.40.0",
-    "@react-router/node": "^7.5.3",
-    "@react-router/serve": "^7.5.3",
+    "@react-router/node": "^7.9.5",
+    "@react-router/serve": "^7.9.5",
     "isbot": "^5.1.27",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "^7.5.3"
+    "react-router": "^7.9.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
-    "@react-router/dev": "^7.5.3",
-    "@react-router/fs-routes": "^7.8.2",
+    "@react-router/dev": "^7.9.5",
+    "@react-router/fs-routes": "^7.9.5",
     "@tailwindcss/vite": "^4.1.4",
     "@types/node": "^20",
     "@types/react": "^19.1.2",

exercises/02.metadata/01.problem.styling/README.mdx

@@ -60,9 +60,15 @@ export const links: LinksFunction = () => [
 ]
 ```
 
-## Exercise overview
+## Exercise Goals
 
-In this exercise, we're adding a global stylesheet and a Google Fonts link to our app.
-To get started head to the `root.tsx` and find the exercise instructions there!
+In this exercise, you'll be adding a global stylesheet and a Google Fonts link to our app.
+
+We want to learn how to:
 
+- Add a global stylesheet to our app using the `links` export.
+- Add custom fonts from Google Fonts using the `links` export.
+- Use the links export to preload important resources for our app.
+
+To get started head to the `root.tsx` and find the exercise instructions there!
 Bonus points if you preconnect to the Google Fonts domain to speed up font loading! 🚀