Refactor code structure for improved readability and maintainability

Author: AlemTuzlak

.gitignore

@@ -5,7 +5,7 @@ workspace/
 **/build/
 **/public/build
 **/playwright-report
-data.db
+ 
 /playground
 **/tsconfig.tsbuildinfo
 .react-router
@@ -14,6 +14,5 @@ data.db
 # we're going to keep them around.
 # .env
 test-results
-**/generated/**
-data.db*
+**/generated/** 
 .env

.vscode/settings.json

@@ -2,8 +2,7 @@
 	"typescript.preferences.autoImportFileExcludePatterns": [
 		"@remix-run/server-runtime",
 		"@remix-run/router",
-		"react-router-dom",
-		"react-router"
+		"react-router-dom"
 	],
 	"workbench.editorAssociations": {
 		"*.db": "sqlite-viewer.view"

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

@@ -13,8 +13,10 @@ import { EpicShop } from './epicshop'
 export const links: Route.LinksFunction = () => [
 	// 🐨 Add the stylesheet imported from app.css!
 	// 🐨 Add fonts and preconnect to google!
-	// 💰 { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-	// 💰 { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },
+	// 💰 Use this to preconnect to google fonts
+	// { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+	// 💰 Use this to preconnect to google fonts
+	// { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },
 	// 💰 this is the link to the fonts we want to use:
 	//  https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap
 ]

exercises/02.metadata/02.problem.titles-react/README.mdx

@@ -41,17 +41,15 @@ which would produce the following HTML:
 
 Now that you understand how the hoisting mechanism works, let's see how we can use
 this to our advantage by adding titles to our pages using React.
-
-Every route in the project has instructions on what you need to do, go Koala hunting
-and try to add titles to all the pages!
+ 
 
 📜 https://react.dev/blog/2024/12/05/react-19#support-for-metadata-tags
 
 ## Exercise Goals
 
 In this exercise, we're going to add titles to our pages using React 19 JSX metadata tags.
 
-1. Go through every route, Kody will be there to guide you in what you need to do.
+1. Go through product routes, Kody will be there to guide you in what you need to do.
 2. Add titles to relevant pages using React 19 JSX metadata tags.
 3. Make sure to test your titles by visiting the pages and checking the document title in the
    browser tab and also in the document head using the browser dev tools.

exercises/02.metadata/03.problem.titles-with-meta/README.mdx

@@ -36,7 +36,7 @@ In this exercise, we're going to use the `meta` export to add titles to our page
 ## Exercise Goals
 
 1. Go to the `root.tsx` file and find Kody there, he will help you add the first SEO title in the root.
-2. Once you have that in place visit each route and add the `meta` export to add titles to each page.
+2. Once you have that in place visit the landing page route, and then the product routes and add the `meta` export to add titles to each page.
 3. Make sure to include the root meta in the title to have `Epic Shop - <Page Specific Title>`.
 4. Kelly has helped us with utilities for metadata parsing and reading! You can find them in
    `app/utils/metadata.ts`. Feel free to check their implementation first!

exercises/02.metadata/03.problem.titles-with-meta/app/root.tsx

@@ -28,6 +28,7 @@ export const links: Route.LinksFunction = () => [
 export const meta: Route.MetaFunction = () => {
 	// 🐨 Add the title to this page
 	// 💰 The title should be "Epic Shop"
+	// 💰 Even if you add it the child route (_landing._index/route.tsx) takes precedence so you need to change it there as well to see this reflected on the page
 	return []
 }
 

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

@@ -1,3 +1,4 @@
+// 💰 You will need these utilities! Feel free to check their implementation first!
 import {
 	getMetaFromMatches,
 	getMetaTitle,
@@ -9,7 +10,6 @@ import { FeaturedProductsSection } from './featured-products.section'
 import { FeaturesSection } from './features-section'
 import { HeroSection } from './hero-section'
 import { NewsletterSection } from './newsletter-section'
-// 💰 You will need these utilities! Feel free to check their implementation first!
 
 // 🐨 We want to include the root meta in the title to have Epic Shop | Terms of Use
 export const meta: Route.MetaFunction = ({ matches }) => {

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

@@ -1,13 +1,13 @@
 import { Filter, Grid, List, Star, Heart } from 'lucide-react'
 import { useState, useMemo } from 'react'
 import { Link } from 'react-router'
+// 💰 You will need these utilities! Feel free to check their implementation first!
 import {
 	getMetaFromMatches,
 	getMetaTitle,
 	constructPrefixedTitle,
 } from '#app/utils/metadata.js'
 import { products, categories, brands } from '../../data/products'
-// 💰 You will need these utilities! Feel free to check their implementation first!
 import { type Route } from './+types/_landing.products._index'
 
 // 🐨 We want to include the root meta in the title to have Epic Shop | All Products

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

@@ -47,10 +47,13 @@ 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.
+   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.
+   URL parameters in loaders and use them to fetch specific data. (`_landing.products.$productId.route.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.
+   understand how to make your loaders more efficient. (`_landing.products._index/route.tsx`)
+
+We also want to replace the hardcoded data we had before with real data from the database in `categories-section.tsx`
+and `featured-products-section.tsx` components.

exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx

@@ -151,8 +151,10 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {
 										// 💰 You can just use category.id and category.name here!
 										<button
 											key={category}
+											// 💰 Use category.name
 											onClick={() => setSelectedCategory(category)}
 											className={`block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 ${
+												// 💰 Match with category.name
 												selectedCategory === category
 													? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'
 													: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
@@ -174,8 +176,10 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {
 										// 💰 You can just use brand.id and brand.name here!
 										<button
 											key={brand}
+											// 💰 Use brand.name
 											onClick={() => setBrand(brand)}
 											className={`block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 ${
+												// 💰 Use brand.name
 												selectedBrand === brand
 													? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'
 													: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'