feedback updates

Author: AlemTuzlak

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

@@ -10,3 +10,7 @@ Prisma and SQLite, which is a great skill to have when building real-world appli
 
 Now that you fully understand loaders and how to use them effectively, let's
 move onto the next module when you're ready!
+
+🧝‍♀️ I'm going to help you out by removing the old hardcoded data folder!
+
+<NextDiffLink> Check out the changes in the next exercise </NextDiffLink>

exercises/03.data-fetching/01.solution.fetching-with-loaders/data/products.ts

@@ -0,0 +1,73 @@
+import { type getProductById } from '#app/domain/products.server.ts'
+
+export const products: NonNullable<
+	Awaited<ReturnType<typeof getProductById>>
+>[] = [
+	{
+		id: '1',
+		name: 'Air Max Revolution',
+		price: 129.99,
+		imageUrl:
+			'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600',
+		brand: {
+			id: '1',
+			name: 'SkyStep',
+		},
+
+		category: {
+			id: '1',
+			name: 'Running',
+		},
+		variations: [],
+		description:
+			'Revolutionary running shoes with advanced air cushioning technology for maximum comfort and performance.',
+
+		reviewScore: 4.8,
+		reviews: [],
+	},
+	{
+		id: '2',
+		name: 'Air Max Revolution',
+		price: 129.99,
+		imageUrl:
+			'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600',
+		brand: {
+			id: '1',
+			name: 'SkyStep',
+		},
+
+		category: {
+			id: '1',
+			name: 'Running',
+		},
+		variations: [],
+		description:
+			'Revolutionary running shoes with advanced air cushioning technology for maximum comfort and performance.',
+
+		reviewScore: 4.8,
+		reviews: [],
+	},
+]
+
+export const categories = [
+	'All',
+	'Running',
+	'Casual',
+	'Athletic',
+	'Lifestyle',
+	'Hiking',
+	'Comfort',
+	'Formal',
+]
+
+export const brands = [
+	'All',
+	'SkyStep',
+	'StreetWalk',
+	'ProAthlete',
+	'TimelessStep',
+	'OutdoorPro',
+	'VelocityRun',
+	'SoftStep',
+	'ExecutiveWear',
+]

exercises/03.data-fetching/02.problem.search-with-url/README.mdx

@@ -1,4 +1,4 @@
-# URL as the source of truth & Progressive enhancement
+# URL state management
 
 One of the terms tied strongly with React Router is "Progressive Enhancement".
 Progressive enhancement is the idea of building web applications that work for

exercises/03.data-fetching/02.problem.search-with-url/app/routes/_landing._index/route.tsx

@@ -1,5 +1,5 @@
-import { getAllCategories } from '#app/domain/category.server.ts'
-import { getProducts } from '#app/domain/products.server.ts'
+import { getAllCategories } from '#app/domain/category.server.js'
+import { getProducts } from '#app/domain/products.server.js'
 import { getMetaFromMatches, getMetaTitle } from '#app/utils/metadata.js'
 import { type Route } from './+types/route'
 import { CategoriesSection } from './categories-section'

exercises/03.data-fetching/02.problem.search-with-url/app/routes/_landing.products._index/route.tsx

@@ -1,9 +1,9 @@
 import { Filter, Grid, List } from 'lucide-react'
 import { useState } from 'react'
 import { ProductCard } from '#app/components/product-card.js'
-import { getAllBrands } from '#app/domain/brand.server.ts'
-import { getAllCategories } from '#app/domain/category.server.ts'
-import { getProducts } from '#app/domain/products.server.ts'
+import { getAllBrands } from '#app/domain/brand.server.js'
+import { getAllCategories } from '#app/domain/category.server.js'
+import { getProducts } from '#app/domain/products.server.js'
 import {
 	getMetaFromMatches,
 	getMetaTitle,

exercises/03.data-fetching/02.solution.search-with-url/README.mdx

@@ -1,4 +1,4 @@
-# URL as the source of truth & Progressive enhancement
+# URL state management
 
 Well done! You have successfully