wrap up the routing section and add proper docs

Author: AlemTuzlak

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

@@ -13,4 +13,18 @@ In this exercise, you will:
 
 ## Getting Started
 
-To get started, find our helpful assistants comments in the `app/routes.ts` file. (They include 🐨 emoji)
+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.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 
+ 

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

@@ -1,25 +1,26 @@
 import {
 	type RouteConfig,
+	// 💰 Use these imports already prepared for you below!
 	route,
 	index,
 	layout,
 } from '@react-router/dev/routes'
-/**
- * 🐨 Create your route configuration here.
- * 🐨 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")
- * - 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!
- *
- * Bonus points: Create a utility to define landing page routes
- * and use it to create the routes for the landing page.
- */
+
+// 🐨 Create your route configuration here.
+// 🐨 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")
+// - 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!
+//
+// 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.solution.routing/README.mdx

@@ -1,7 +1,16 @@
 # Registering Routes in React Router
 
-Congratulations on reaching the first exercise of the React Router Fundamentals workshop! 🎉
+You just registered your first routes in a react-router framework mode project! 🎉
 
-In this exercise, you have registered your first routes in a React Router application.
+In this exercise you learned how to use the `routes.ts` file to manually register your routes,
+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 
+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!
 
 Take a breather, and let's continue once you're ready! 🚀
+ 

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

@@ -1,7 +1,12 @@
 # Using automatic route detection
 
+👨‍💼 Peter doesn't want us spending our precious development time doing tedious 
+manual work. He wants us to find a better way to register routes in our application and that
+is exactly what we are going to do in this exercise!
+
 Now that we understand how to define routes and use them effectively, let's use a package
-from the React Router team to automatically detect and register routes for us!
+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
 
@@ -13,3 +18,15 @@ In this exercise, you will:
 ## Getting Started
 
 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/app/routes.ts

@@ -4,15 +4,23 @@ import {
   route,
   type RouteConfig,
 } from '@react-router/dev/routes'
-/** 
- * 🐨 As we've learned in the previous exercise this file is used to define your routes,
- * but wouldn't it be neat if we didn't have to manually define every new route?
- *
- * 🐨 Well, that is the point of this exercise! We will add a plugin from react-router that
- * automatically picks up new routes and doesn't require us to hardcode them in this file. 
- *
- *  💰 First install the dev dependency into package.json called @react-router/fs-routes
- */
+
+// 🐨 As we've learned in the previous exercise this file is used to define your routes,
+// but wouldn't it be neat if we didn't have to manually define every new route?
+
+// 🐨 Well, that is the point of this exercise! We will add a plugin from react-router that
+// automatically picks up new routes and doesn't require us to hardcode them in this file. 
+
+// 💰 First install the dev dependency into package.json called @react-router/fs-routes by running:
+//   npm install -D @react-router/fs-routes
+
+// 💰 Then you can import the `flatRoutes` function from the package like so:
+//   import { flatRoutes } from '@react-router/fs-routes'
+
+// 💰 Finally you can use the `flatRoutes` function to automatically detect and register
+//   your routes like so:
+//   export default flatRoutes() satisfies RouteConfig
+
 export default [
   layout('./routes/_landing.tsx', [
     index('./routes/_landing._index/route.tsx'),

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

@@ -2,6 +2,19 @@
 
 Congratulations! You're successfully using automatic route detection in your React Router application! 🎉
 
-In this exercise, you have installed the `@react-router/fs-routes` package and registered your routes in the `app/routes.ts` file.
+In this exercise, you have installed the `@react-router/fs-routes` package and registered your 
+routes in the `app/routes.ts` file.
 
+From now on, any route you add to the `app/routes` directory will be automatically detected
+and registered in your application, saving you time and effort.
+
+
+## Additional considerations
+
+The package we used only supports a single layer of nested routes. If you need more complex
+nesting, you can use the `remix-flat-routes` package instead, which supports deeper nesting,
+and don't let the name fool you! It works perfectly fine with React Router framework mode projects.
+
+Find it here: 📜 https://github.com/kiliman/remix-flat-routes
+ 
 Take a breather, and let's continue once you're ready! 🚀

exercises/01.routing/FINISHED.mdx

@@ -1,6 +1,7 @@
 # Routing
 
-<h2>You just finished your first exercise! 🎉 </h2>
+<h2>You just learned all about routing and structure in React Router! 🎉 </h2>
+
 Let me know what you think in the form on the right! 👉
 
 Done? Let's continue to the next exercise! 🚀

exercises/01.routing/README.mdx

@@ -1,6 +1,106 @@
-# Routing
+# Routing & Structure 
 
-<h2>This module is all about routing in React Router! </h2>
+## Structure 
+Before we dive into routing exercises we will first go over the basic structure of any
+React Router application.
+
+The minimal tree structure of a React Router application is as follows:
+
+```
+|-|app/ 
+|-|-routes.ts      <-- Your route definitions go here 
+|-|-root.tsx       <-- Your app entry point
+|-react-router.config.ts <-- Your react-router config
+|-vite.config.ts  <-- Your vite config 
+```
+
+Let's go over each of these files and what they do.
+
+### react-router.config.ts
+
+This file is used to configure the `@react-router/dev` vite plugin, which is responsible
+for picking up your routes from the `app/routes.ts` file and generating types for them,
+bundling your app and many other things.
+
+The general structure of this file is as follows:
+
+```ts
+import { type Config } from '@react-router/dev/config'
+
+export default {
+	// Config options...
+	// The directory where your app lives (this is the default)
+	appDirectory: 'app',
+	// If you want to change the build output directory (this is the default)
+	buildDirectory: 'build',
+	// Server-side render by default, to enable SPA mode set this to `false`
+	ssr: true,
+} satisfies Config
+```
+
+If you want to find all the config options and what they do you can find them here:
+📜 https://reactrouter.com/api/framework-conventions/react-router.config.ts
+
+### routes.ts
+
+This is a special file that the vite plugin from `@react-router/dev` uses to automatically
+register your routes by using the **default export** from this file.
+
+This file can contain any sort of JavaScript or TypeScript code, and you can use
+variables, functions, imports, etc. to define your routes dynamically.
+
+This file needs to live under your `app` directory, and it needs to be named `routes.ts`.
+The general structure of this file is as follows:
+
+```ts
+import { type RouteConfig } from '@react-router/dev/routes'
+
+// React Router uses this export to register your application routes
+export default [] satisfies RouteConfig
+```
+
+Find the following documentation for more information:
+📜 https://reactrouter.com/api/framework-conventions/routes.ts
+📜 https://api.reactrouter.com/v7/interfaces/_react_router_dev.routes.RouteConfigEntry.html
+
+
+### root.tsx
+
+This is the entry point of your application, and it is where you will set up your
+general HTML layout and structure and everything that is to be used by your whole
+application. This file is the equivalent of your entry point in a traditional React app
+created with Create React App or Vite and the index.html file that it uses to attach to.
+
+This file is special to all the other kinds of route entry files because this file can
+contain the special `Layout` export that will be used as the root layout for your
+application whether it's rendering the app UI or the error UI.
+
+More information on the `root.tsx` file can be found here:
+📜 https://reactrouter.com/api/framework-conventions/root.tsx
+
+More information on the `Layout` export can be found here:
+📜 https://reactrouter.com/api/framework-conventions/root.tsx#layout-export
+
+### vite.config.ts
+
+This is the vite config file, and it is where you will set up your vite plugins
+and other vite specific configuration.
+
+This is where we register the `react-router` vite plugin that is responsible for
+unlocking the full potential of React Router framework mode in your application.
+
+Here's a minimal vite config file that registers the `@react-router/dev` plugin:
+
+```ts
+import { defineConfig } from 'vite'
+import { reactRouter } from '@react-router/dev/vite'
+
+export default defineConfig({
+	plugins: [reactRouter()],
+})
+```
+
+## Routing
 
 You will learn how to set up routes, register them manually, use third party libraries to
 add custom conventions, and how you can use JavaScript to define your routes dynamically.