improvements

Author: AlemTuzlak

README.md

@@ -9,8 +9,9 @@ This workshop focuses on
 data loading and display. It is designed to teach you the core concepts of
 react-router v7 in a hands-on, project-based way.
 
-We will learn how to build an e-commerce app from scratch using react-router
-v7. Along the way, we will cover topics such as:
+We will learn how to build an e-commerce app from scratch using react-router v7.
+Along the way, we will cover topics such as:
+
 - Setting up a react-router v7 project
 - Creating routes and nested routes
 - Loading data with loaders
@@ -20,17 +21,17 @@ v7. Along the way, we will cover topics such as:
 - Sorting, filtering, and paginating data
 - Progressive enhancement and accessibility
 
-By the end of this workshop, you will have a solid understanding of how to
-use react-router v7 to build data-driven applications. You will also have a
-working e-commerce app that you can use as a starting point for your own
-projects.
+By the end of this workshop, you will have a solid understanding of how to use
+react-router v7 to build data-driven applications. You will also have a working
+e-commerce app that you can use as a starting point for your own projects.
+
+This workshop assumes you have a basic understanding of React and JavaScript. No
+prior knowledge of react-router is required.
 
-This workshop assumes you have a basic understanding of React and
-JavaScript. No prior knowledge of react-router is required.
 </p>
 </div>
 
-   
+
 
 <hr />
 
@@ -73,12 +74,18 @@ speed on some of the tools and concepts we'll be covering:
 - https://react.dev/blog/2024/12/05/react-19 (React 19 blog post)
 - https://react.dev/learn (React official docs - learn section)
 - https://reactrouter.com/home (React Router official docs)
-- https://www.typescriptlang.org/docs/handbook/2/basic-types.html (TypeScript basic types docs)
+- https://www.typescriptlang.org/docs/handbook/2/basic-types.html (TypeScript
+  basic types docs)
 
 Useful to go through if you want to get a head start on the workshop:
-- https://v2.remix.run/docs/discussion/introduction (Remix introduction docs, keep in mind that react-router v7 framework mode is a continuation of Remix v2)
-- https://v2.remix.run/docs/discussion/progressive-enhancement (Progressive enhancement in Remix, also applicable to react-router v7 framework mode)
-- https://developer.mozilla.org/en-US/ (this is your best friend for web development, check out anything you don't understand here)
+
+- https://v2.remix.run/docs/discussion/introduction (Remix introduction docs,
+  keep in mind that react-router v7 framework mode is a continuation of Remix
+  v2)
+- https://v2.remix.run/docs/discussion/progressive-enhancement (Progressive
+  enhancement in Remix, also applicable to react-router v7 framework mode)
+- https://developer.mozilla.org/en-US/ (this is your best friend for web
+  development, check out anything you don't understand here)
 
 ## System Requirements
 

epicshop/setup-custom.js

@@ -54,12 +54,12 @@ if (!process.env.SKIP_PRISMA) {
 		const prismaDir = path.join(app.fullPath, 'prisma')
 		try {
 			if (await fsExtra.exists(prismaDir)) {
-				await execa(`npm`, ["run", "db:gen"], { cwd: app.fullPath, all: true })
+				await execa(`npm`, ['run', 'db:gen'], { cwd: app.fullPath, all: true })
 			}
 		} catch (prismaGenerateResult) {
 			console.log(prismaGenerateResult.all)
 			throw new Error(`❌  prisma generate failed in ${app.relativePath}`)
 		}
 	}
 	console.log('✅ prisma client generated')
-}
+}

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

@@ -8,6 +8,8 @@ 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.
 
+📜 https://reactrouter.com/how-to/file-route-conventions
+
 ## Exercise Goals
 
 In this exercise, you will:

exercises/02.metadata/01.problem.styling/app/root.tsx

@@ -14,6 +14,7 @@ export const links: Route.LinksFunction = () => [
 	// 🐨 Add the stylesheet imported from app.css!
 	// 🐨 Add fonts and preconnect to google!
 	// 💰 Use this to preconnect to google fonts
+	// 📜  https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preconnect
 	// { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
 	// 💰 Use this to preconnect to google fonts
 	// { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },

exercises/02.metadata/01.solution.styling/app/root.tsx

@@ -11,7 +11,6 @@ import tailwindStylesheet from './app.css?url'
 import { EpicShop } from './epicshop'
 
 export const links: Route.LinksFunction = () => [
-	// 📜  https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preconnect
 	{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
 	{ rel: 'stylesheet', href: tailwindStylesheet },
 	{

exercises/02.metadata/03.problem.titles-with-meta/app/routes/_landing._index/route.tsx

@@ -11,7 +11,7 @@ import { FeaturesSection } from './features-section'
 import { HeroSection } from './hero-section'
 import { NewsletterSection } from './newsletter-section'
 
-// 🐨 We want to include the root meta in the title to have Epic Shop | Terms of Use
+// 🐨 We want to include the root meta in the title to have Epic Shop
 export const meta: Route.MetaFunction = ({ matches }) => {
 	// 💰 You can use getMetaFromMatches and specify "root" to extract the meta information from root
 	// 💰 You can use getMetaTitle to extract the title from the root meta information

exercises/02.metadata/03.problem.titles-with-meta/app/routes/_landing.products.$productId.tsx

@@ -8,7 +8,7 @@ import {
 	Plus,
 	Minus,
 } from 'lucide-react'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useParams, Link } from 'react-router'
 import {
 	getMetaFromMatches,
@@ -19,8 +19,8 @@ import { products } from '../../data/products'
 // 💰 You will need these utilities! Feel free to check their implementation first!
 import { type Route } from './+types/_landing.products.$productId'
 
-// 🐨 We want to include the root meta in the title to have Epic Shop | Product overview
-export const meta: Route.MetaFunction = ({ matches }) => {
+// 🐨 We want to include the root meta in the title to have Epic Shop | Product overview ${productId}
+export const meta: Route.MetaFunction = ({ matches, params }) => {
 	// 💰 You can use getMetaFromMatches and specify "root" to extract the meta information from root
 	// 💰 You can use getMetaTitle to extract the title from the root meta information
 	return [

exercises/02.metadata/03.problem.titles-with-meta/tests/e2e/metadata.test.ts

@@ -8,7 +8,7 @@ test.describe('Routing E2E Tests', () => {
 		await expect(page).toHaveTitle('Epic Shop')
 
 		// Check for duplicate <title> elements
-		const titleElements = page.locator('title')
+		const titleElements = page.locator('head > title')
 		await expect(titleElements).toHaveCount(1)
 	})
 
@@ -18,7 +18,7 @@ test.describe('Routing E2E Tests', () => {
 		await page.goto('/products')
 		await expect(page).toHaveTitle('Epic Shop | All Products')
 		// Check for duplicate <title> elements
-		const titleElements = page.locator('title')
+		const titleElements = page.locator('head > title')
 		await expect(titleElements).toHaveCount(1)
 	})
 
@@ -28,7 +28,7 @@ test.describe('Routing E2E Tests', () => {
 		await page.goto('/products/1')
 		await expect(page).toHaveTitle('Epic Shop | Product overview')
 		// Check for duplicate <title> elements
-		const titleElements = page.locator('title')
+		const titleElements = page.locator('head > title')
 		await expect(titleElements).toHaveCount(1)
 	})
 })

exercises/02.metadata/03.solution.titles-with-meta/app/routes/_landing.products.$productId.tsx

@@ -18,12 +18,15 @@ import {
 import { products } from '../../data/products'
 import { type Route } from './+types/_landing.products.$productId'
 
-export const meta: Route.MetaFunction = ({ matches }) => {
+export const meta: Route.MetaFunction = ({ matches, params }) => {
 	const rootMeta = getMetaFromMatches(matches, 'root')
 	const prefix = getMetaTitle(rootMeta)
 	return [
 		{
-			title: constructPrefixedTitle('Product overview', prefix),
+			title: constructPrefixedTitle(
+				`Product overview ${params.productId}`,
+				prefix,
+			),
 		},
 	]
 }

exercises/03.data-fetching/01.problem.fetching-with-loaders/README.mdx

@@ -47,10 +47,10 @@ a different concept of data fetching with loaders:
 
 1. **Basic Data Fetching**: In the first route, we will implement a simple loader that fetches
    all products from the database and displays them on the page. This will help you understand
-   the basics of setting up a loader and using the fetched data in your components. (`_landing._index.route.tsx`)
+   the basics of setting up a loader and using the fetched data in your components. (`_landing._index/route.tsx`)
 2. **Using URL Parameters**: The second route will introduce URL parameters. We will create a loader
    that fetches a product based on the ID provided in the URL. This will teach you how to read
-   URL parameters in loaders and use them to fetch specific data. (`_landing.products.$productId.route.tsx`)
+   URL parameters in loaders and use them to fetch specific data. (`_landing.products.$productId.tsx`)
 3. **Optimizing Data Fetching**: In the final route, we will focus on optimizing our data fetching.
    We will use a simple trick of parallelizing multiple data fetches to improve performance. This will help you
    understand how to make your loaders more efficient. (`_landing.products._index/route.tsx`)