P14:[{"_306":70,"_307":68,"_308":309},"app1","app2","diffPatch","diff --git a/.env b/.env\nnew file mode 100644\nindex 0000000..65eca45\n--- /dev/null\n+++ b/.env\n@@ -0,0 +1,11 @@\n+# Environment variables declared in this file are automatically made available to Prisma.\n+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema\n+\n+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.\n+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings\n+\n+# The following `prisma+postgres` URL is similar to the URL produced by running a local Prisma Postgres \n+# server with the `prisma dev` CLI command, when not choosing any non-default ports or settings. The API key, unlike the \n+# one found in a remote Prisma Postgres URL, does not contain any sensitive information.\n+ \n+DATABASE_URL=\"file:./prisma/data.db\"\n\\ No newline at end of file\ndiff --git a/.env.example b/.env.example\nnew file mode 100644\nindex 0000000..f64a04f\n--- /dev/null\n+++ b/.env.example\n@@ -0,0 +1 @@\n+DATABASE_URL=\"file:./prisma/data.db\"\n\\ No newline at end of file\ndiff --git a/app/components/header.tsx b/app/components/header.tsx\nindex 001ff8d..ee5c53f 100644\n--- a/app/components/header.tsx\n+++ b/app/components/header.tsx\n@@ -34,6 +34,13 @@ export const Header = () => {\n \t\t\t\t\t\t\t\tplaceholder=\"Search for products...\"\n \t\t\t\t\t\t\t\tclassName=\"w-full rounded-full border border-gray-200 bg-gray-50 py-3 pr-4 pl-10 text-gray-900 focus:border-transparent focus:ring-2 focus:ring-amber-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white\"\n \t\t\t\t\t\t\t/>\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tSearch\n+\t\t\t\t\t\t\t\n \t\t\t\t\t\t\n \t\t\t\t\t\n \ndiff --git a/app/components/product-card.tsx b/app/components/product-card.tsx\nnew file mode 100644\nindex 0000000..b43c877\n--- /dev/null\n+++ b/app/components/product-card.tsx\n@@ -0,0 +1,54 @@\n+import { Heart, Star } from 'lucide-react'\n+import { Link } from 'react-router'\n+import { type ProductCardInfo } from '#app/domain/products.server.js'\n+\n+export function ProductCard({ product }: { product: ProductCardInfo }) {\n+\treturn (\n+\t\t\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{product.reviewScore.toFixed(1)}\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t{product.brand.name}\n+\t\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{product.name}\n+\t\t\t\t\t

\n+\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\t{product.description}\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t${product.price}\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\t{product._count.reviews} reviews\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\n+\t)\n+}\ndiff --git a/app/db.server.ts b/app/db.server.ts\nnew file mode 100644\nindex 0000000..f1cb3d5\n--- /dev/null\n+++ b/app/db.server.ts\n@@ -0,0 +1,9 @@\n+import { PrismaBetterSQLite3 } from '@prisma/adapter-better-sqlite3'\n+import { PrismaClient } from './generated/prisma/client'\n+\n+const adapter = new PrismaBetterSQLite3({\n+\turl: process.env.DATABASE_URL,\n+})\n+const prisma = new PrismaClient({ adapter })\n+await prisma.$connect()\n+export const db = prisma\ndiff --git a/app/domain/brand.server.ts b/app/domain/brand.server.ts\nnew file mode 100644\nindex 0000000..218eac7\n--- /dev/null\n+++ b/app/domain/brand.server.ts\n@@ -0,0 +1,9 @@\n+import { db } from '#app/db.server.js'\n+\n+export const getAllBrands = async () => {\n+\tconst brands = await db.brand.findMany({\n+\t\torderBy: { name: 'asc' },\n+\t\tselect: { id: true, name: true },\n+\t})\n+\treturn { brands }\n+}\ndiff --git a/app/domain/category.server.ts b/app/domain/category.server.ts\nnew file mode 100644\nindex 0000000..4a1d22b\n--- /dev/null\n+++ b/app/domain/category.server.ts\n@@ -0,0 +1,16 @@\n+import { db } from '#app/db.server.js'\n+\n+export const getAllCategories = async ({\n+\tperPage,\n+}: { perPage?: number } = {}) => {\n+\tconst categories = await db.category.findMany({\n+\t\torderBy: { name: 'asc' },\n+\t\tselect: { id: true, name: true, imageUrl: true },\n+\t\ttake: perPage,\n+\t})\n+\treturn { categories }\n+}\n+\n+export type Category = Awaited<\n+\tReturnType\n+>['categories'][number]\ndiff --git a/app/domain/products.server.ts b/app/domain/products.server.ts\nnew file mode 100644\nindex 0000000..ce7fd33\n--- /dev/null\n+++ b/app/domain/products.server.ts\n@@ -0,0 +1,99 @@\n+import { db } from '#app/db.server.js'\n+import { type ProductSelect } from '#app/generated/prisma/models.ts'\n+\n+const productShortInfoSelect = {\n+\tid: true,\n+\tname: true,\n+\tdescription: true,\n+\timageUrl: true,\n+\tprice: true,\n+\tbrand: {\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tname: true,\n+\t\t},\n+\t},\n+\treviewScore: true,\n+\t_count: {\n+\t\tselect: {\n+\t\t\treviews: true,\n+\t\t},\n+\t},\n+} as const satisfies ProductSelect\n+\n+export async function getProducts({ perPage }: { perPage?: number }) {\n+\t// Get products with pagination\n+\tconst products = await db.product.findMany({\n+\t\tselect: productShortInfoSelect,\n+\t\t...(perPage ? { take: perPage } : {}),\n+\t})\n+\n+\treturn {\n+\t\tproducts,\n+\t}\n+}\n+\n+export async function getProductById(id: string) {\n+\tconst product = await db.product.findUnique({\n+\t\twhere: { id },\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tname: true,\n+\t\t\tdescription: true,\n+\t\t\timageUrl: true,\n+\t\t\tprice: true,\n+\t\t\treviewScore: true,\n+\t\t\tcategory: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tid: true,\n+\t\t\t\t\tname: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\tbrand: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tid: true,\n+\t\t\t\t\tname: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\treviews: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tid: true,\n+\t\t\t\t\trating: true,\n+\t\t\t\t\tcomment: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\tvariations: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tcolor: true,\n+\t\t\t\t\tsize: true,\n+\t\t\t\t\tid: true,\n+\t\t\t\t\tquantity: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t})\n+\treturn product\n+}\n+\n+export async function getRelatedProducts(\n+\tproductId: string | undefined,\n+\tcategoryId: string | undefined,\n+\tbrandId: string | undefined,\n+) {\n+\tif (!productId) {\n+\t\treturn []\n+\t}\n+\tconst products = await db.product.findMany({\n+\t\twhere: {\n+\t\t\tid: { not: productId },\n+\t\t\tOR: [{ categoryId: categoryId }, { brandId: brandId }],\n+\t\t},\n+\t\tselect: productShortInfoSelect,\n+\t\ttake: 4,\n+\t})\n+\treturn products\n+}\n+\n+export type ProductCardInfo = Awaited<\n+\tReturnType\n+>['products'][number]\ndiff --git a/app/routes/_landing._index/categories-section.tsx b/app/routes/_landing._index/categories-section.tsx\nindex eabca85..7e355f9 100644\n--- a/app/routes/_landing._index/categories-section.tsx\n+++ b/app/routes/_landing._index/categories-section.tsx\n@@ -1,33 +1,32 @@\n import { Link } from 'react-router'\n+import { type Category } from '#app/domain/category.server.ts'\n \n+// 💣 We don't need these categories anymore! Let's remove them!\n const categories = [\n \t{\n \t\tname: 'Running',\n-\t\timage:\n+\t\timageUrl:\n \t\t\t'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=400',\n-\t\tcount: '25+ styles',\n \t},\n \t{\n \t\tname: 'Casual',\n-\t\timage:\n+\t\timageUrl:\n \t\t\t'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=400',\n-\t\tcount: '30+ styles',\n \t},\n \t{\n \t\tname: 'Athletic',\n-\t\timage:\n+\t\timageUrl:\n \t\t\t'https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&w=400',\n-\t\tcount: '20+ styles',\n \t},\n \t{\n \t\tname: 'Formal',\n-\t\timage:\n+\t\timageUrl:\n \t\t\t'https://images.pexels.com/photos/1598507/pexels-photo-1598507.jpeg?auto=compress&cs=tinysrgb&w=400',\n-\t\tcount: '15+ styles',\n \t},\n ]\n \n-export const CategoriesSection = () => {\n+// 🐨 Use the categories provided to the component instead of the hardcoded ones\n+export const CategoriesSection = ({}: { categories: Category[] }) => {\n \treturn (\n \t\t

\n \t\t\t

\n@@ -49,7 +48,7 @@ export const CategoriesSection = () => {\n \t\t\t\t\t\t>\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\n@@ -57,7 +56,6 @@ export const CategoriesSection = () => {\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t

{category.name}

\n-\t\t\t\t\t\t\t\t

{category.count}

\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\n \t\t\t\t\t))}\ndiff --git a/app/routes/_landing._index/featured-products.section.tsx b/app/routes/_landing._index/featured-products.section.tsx\nindex 262b139..50e9256 100644\n--- a/app/routes/_landing._index/featured-products.section.tsx\n+++ b/app/routes/_landing._index/featured-products.section.tsx\n@@ -1,9 +1,20 @@\n import { ArrowRight, Star } from 'lucide-react'\n import { Link } from 'react-router'\n-import { products } from '../../../data/products'\n+// 🐨 You should use the ProductCard component to render each product instead of the JSX\n+// that is currently in place\n+import { ProductCard } from '#app/components/product-card.js'\n+import { type ProductCardInfo } from '#app/domain/products.server.js'\n+// 💣 We Want to remove this file completely and use dynamic info from the DB\n+import { products as hardcodedProducts } from '../../../data/products'\n \n-export const FeaturedProductsSection = () => {\n-\tconst featuredProducts = products.slice(0, 4)\n+interface FeaturedProductsSectionProps {\n+\tproducts: ProductCardInfo[]\n+}\n+\n+// 🐨 Access the dynamic products here and use them instead of the hardcoded ones\n+export const FeaturedProductsSection = ({}: FeaturedProductsSectionProps) => {\n+\t// 💰 You get 4 products from the server at this point!\n+\tconst products = hardcodedProducts.slice(0, 4)\n \n \treturn (\n \t\t

\n@@ -18,7 +29,8 @@ export const FeaturedProductsSection = () => {\n \t\t\t\t

\n \n \t\t\t\t

\n-\t\t\t\t\t{featuredProducts.map((product) => (\n+\t\t\t\t\t{products.map((product) => (\n+\t\t\t\t\t\t// 🐨 Replace this with the ProductCard component that 🧝‍♀️ prepared!\n \t\t\t\t\t\t {\n \t\t\t\t\t\t>\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\n@@ -34,14 +46,14 @@ export const FeaturedProductsSection = () => {\n \t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\t{product.rating}\n+\t\t\t\t\t\t\t\t\t\t\t{product.reviewScore}\n \t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\t{product.brand}\n+\t\t\t\t\t\t\t\t\t{product.brand.name}\n \t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t{product.name}\n@@ -51,7 +63,7 @@ export const FeaturedProductsSection = () => {\n \t\t\t\t\t\t\t\t\t\t${product.price}\n \t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t{product.reviews} reviews\n+\t\t\t\t\t\t\t\t\t\t{product.reviews.length} reviews\n \t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t

\ndiff --git a/app/routes/_landing._index/route.tsx b/app/routes/_landing._index/route.tsx\nindex a95c94a..9130c54 100644\n--- a/app/routes/_landing._index/route.tsx\n+++ b/app/routes/_landing._index/route.tsx\n@@ -1,3 +1,5 @@\n+import { getAllCategories } from '#app/domain/category.server.ts'\n+import { getProducts } from '#app/domain/products.server.ts'\n import { getMetaFromMatches, getMetaTitle } from '#app/utils/metadata.js'\n import { type Route } from './+types/route'\n import { CategoriesSection } from './categories-section'\n@@ -12,13 +14,31 @@ export const meta: Route.MetaFunction = ({ matches }) => {\n \treturn [{ title }]\n }\n \n-export default function HomePage() {\n+export const loader = async () => {\n+\t// 🐨 You should fetch the data directly from the DB here!\n+\t// 💰 Bonus points: Optimize the retrieval of products and categories by fetching them in parallel\n+\t// 💰 You can use the function 🧝‍♀️ prepared for us above called `getProducts`\n+\t// 💰 take 3 products only via `perPage`\n+\n+\t// 💰 You can use the function 🧝‍♀️ prepared for us above called `getAllCategories`\n+\t// 💰 take 4 categories only\n+\n+\t// 💰 These return just empty arrays, these should return actual data from the DB\n+\treturn { products: [], categories: [] }\n+}\n+\n+// 🐨 Let's access the data we have sent from the server and use it in the components\n+// 💰 You can access the data directly from the loader as a prop of the component\n+// 💰 Try using `loaderData` to access the data\n+export default function HomePage({}: Route.ComponentProps) {\n \treturn (\n \t\t

\n \t\t\t\n \t\t\t\n-\t\t\t\n-\t\t\t\n+\t\t\t{/** 💰 Let's pass in the actual categories here! */}\n+\t\t\t\n+\t\t\t{/** 💰 Let's pass in the actual products here! */}\n+\t\t\t\n \t\t\t\n \t\t

\n \t)\ndiff --git a/app/routes/_landing.about.tsx b/app/routes/_landing.about.tsx\nindex d4c4f56..58e5f97 100644\n--- a/app/routes/_landing.about.tsx\n+++ b/app/routes/_landing.about.tsx\n@@ -1,4 +1,20 @@\n import { Award, Heart, Compass, Lightbulb } from 'lucide-react'\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/_landing.about'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('About Us', prefix),\n+\t\t},\n+\t]\n+}\n \n export default function AboutPage() {\n \tconst team = [\ndiff --git a/app/routes/_landing.cart.tsx b/app/routes/_landing.cart.tsx\nindex 205e3fd..2f1e7f5 100644\n--- a/app/routes/_landing.cart.tsx\n+++ b/app/routes/_landing.cart.tsx\n@@ -1,5 +1,21 @@\n import { Minus, Plus, Trash2, ArrowLeft, ShoppingBag } from 'lucide-react'\n import { Link } from 'react-router'\n+import {\n+\tconstructPrefixedTitle,\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from '../+types/root'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Cart', prefix),\n+\t\t},\n+\t]\n+}\n \n export default function CartPage() {\n \tconst items: {\ndiff --git a/app/routes/_landing.contact.tsx b/app/routes/_landing.contact.tsx\nindex b29b47b..f9720f4 100644\n--- a/app/routes/_landing.contact.tsx\n+++ b/app/routes/_landing.contact.tsx\n@@ -1,5 +1,21 @@\n import { Mail, Phone, MapPin, Send, CheckCircle, Clock } from 'lucide-react'\n import React, { useState } from 'react'\n+import {\n+\tconstructPrefixedTitle,\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/_landing.contact'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Contact Us', prefix),\n+\t\t},\n+\t]\n+}\n \n export default function ContactPage() {\n \tconst [formData, setFormData] = useState({\ndiff --git a/app/routes/_landing.products.$productId.tsx b/app/routes/_landing.products.$productId.tsx\nindex fc1131a..b595dd6 100644\n--- a/app/routes/_landing.products.$productId.tsx\n+++ b/app/routes/_landing.products.$productId.tsx\n@@ -10,34 +10,58 @@ import {\n } from 'lucide-react'\n import { useState } from 'react'\n import { useParams, Link } from 'react-router'\n+// 🐨 You should use the ProductCard component to render each product instead of the JSX\n+// that is currently in place\n+import { ProductCard } from '#app/components/product-card.js'\n+import {\n+\tgetProductById,\n+\tgetRelatedProducts,\n+} from '#app/domain/products.server.ts'\n import {\n \tgetMetaFromMatches,\n \tgetMetaTitle,\n \tconstructPrefixedTitle,\n } from '#app/utils/metadata.js'\n+// 💣 We will remove this completely by the end\n import { products } from '../../data/products'\n import { type Route } from './+types/_landing.products.$productId'\n \n-export const meta: Route.MetaFunction = ({ matches, params }) => {\n+export const meta: Route.MetaFunction = ({ matches }) => {\n \tconst rootMeta = getMetaFromMatches(matches, 'root')\n \tconst prefix = getMetaTitle(rootMeta)\n \treturn [\n \t\t{\n-\t\t\ttitle: constructPrefixedTitle(\n-\t\t\t\t`Product overview ${params.productId}`,\n-\t\t\t\tprefix,\n-\t\t\t),\n+\t\t\ttitle: constructPrefixedTitle('Product overview', prefix),\n \t\t},\n \t]\n }\n \n-export default function ProductDetailPage() {\n+// 🐨 You should fetch the product by its ID in the loader, then fetch related products!\n+// 🐨 Let's actually use the current route params to fetch the product and related products\n+export const loader = async ({ params }: Route.LoaderArgs) => {\n+\t// 💰 You can use the function 🧝‍♀️ prepared for us above called `getProductById`\n+\t// 💰 Don't forget that you have access to the current routes params from above!\n+\n+\t// 💰 You can use the function 🧝‍♀️ prepared for us above called `getRelatedProducts`\n+\t// 💰 Don't forget, you have the product's category and brand from fetching it above\n+\n+\t// 💰 These return just empty objects/arrays, these should return actual data from the DB\n+\treturn {\n+\t\tproduct: {},\n+\t\trelatedProducts: [],\n+\t}\n+}\n+\n+// 🐨 Let's use the loaderData and swap our hardcoded values with real ones!\n+export default function ProductDetailPage({\n+\tloaderData,\n+}: Route.ComponentProps) {\n \tconst { productId } = useParams()\n-\tconst [selectedSize, setSelectedSize] = useState('')\n-\tconst [selectedColor, setSelectedColor] = useState('')\n+\tconst [selectedSize] = useState('')\n+\tconst [selectedColor] = useState('')\n \tconst [quantity, setQuantity] = useState(1)\n \tconst [activeImage, setActiveImage] = useState(0)\n-\n+\t// 🐨 Let's replace this with the actual product data from the loader\n \tconst product = products.find((p) => p.id === productId)\n \n \tif (!product) {\n@@ -69,14 +93,18 @@ export default function ProductDetailPage() {\n \n \t// Mock additional images for gallery\n \tconst productImages = [\n-\t\tproduct.image,\n-\t\tproduct.image,\n-\t\tproduct.image,\n-\t\tproduct.image,\n+\t\tproduct.imageUrl,\n+\t\tproduct.imageUrl,\n+\t\tproduct.imageUrl,\n+\t\tproduct.imageUrl,\n \t]\n-\n+\t// 🐨 Let's access the loaderData and swap this out with actual data!\n+\t// 💰 We are using the hardcoded products data to simulate related products\n+\t// 💣 Feel free to completely delete this and use the loaderData\n \tconst relatedProducts = products\n-\t\t.filter((p) => p.category === product.category && p.id !== product.id)\n+\t\t.filter(\n+\t\t\t(p) => p.category.name === product.category.name && p.id !== product.id,\n+\t\t)\n \t\t.slice(0, 4)\n \n \treturn (\n@@ -128,7 +156,7 @@ export default function ProductDetailPage() {\n \t\t\t\t\t

\n \t\t\t\t\t\t

\n \t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t{product.brand}\n+\t\t\t\t\t\t\t\t{product.brand.name}\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t{product.name}\n@@ -139,18 +167,18 @@ export default function ProductDetailPage() {\n \t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t))}\n \t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t{product.rating}\n+\t\t\t\t\t\t\t\t\t\t{product.reviewScore}\n \t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t({product.reviews} reviews)\n+\t\t\t\t\t\t\t\t\t({product.reviews.length} reviews)\n \t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t

\n@@ -167,7 +195,7 @@ export default function ProductDetailPage() {\n \t\t\t\t\t\t\t\tSize\n \t\t\t\t\t\t\t\n \t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t{product.sizes.map((size) => (\n+\t\t\t\t\t\t\t\t{/* {product.sizes.map((size) => (\n \t\t\t\t\t\t\t\t\t setSelectedSize(size)}\n@@ -179,7 +207,7 @@ export default function ProductDetailPage() {\n \t\t\t\t\t\t\t\t\t>\n \t\t\t\t\t\t\t\t\t\t{size}\n \t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t\t))} */}\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t

\n \n@@ -189,7 +217,7 @@ export default function ProductDetailPage() {\n \t\t\t\t\t\t\t\tColor\n \t\t\t\t\t\t\t\n \t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t{product.colors.map((color) => (\n+\t\t\t\t\t\t\t\t{/* {product.colors.map((color) => (\n \t\t\t\t\t\t\t\t\t setSelectedColor(color)}\n@@ -201,7 +229,7 @@ export default function ProductDetailPage() {\n \t\t\t\t\t\t\t\t\t>\n \t\t\t\t\t\t\t\t\t\t{color}\n \t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t\t))} */}\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t

\n \n@@ -278,6 +306,7 @@ export default function ProductDetailPage() {\n \t\t\t\t\t\t\n \t\t\t\t\t\t

\n \t\t\t\t\t\t\t{relatedProducts.map((relatedProduct) => (\n+\t\t\t\t\t\t\t\t// 🐨 Let's replace with the ProductCard component\n \t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\n@@ -293,14 +322,14 @@ export default function ProductDetailPage() {\n \t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\t\t\t{relatedProduct.rating}\n+\t\t\t\t\t\t\t\t\t\t\t\t\t{relatedProduct.reviewScore}\n \t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\t\t\t{relatedProduct.brand}\n+\t\t\t\t\t\t\t\t\t\t\t{relatedProduct.brand.name}\n \t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\t{relatedProduct.name}\n@@ -310,7 +339,7 @@ export default function ProductDetailPage() {\n \t\t\t\t\t\t\t\t\t\t\t\t${relatedProduct.price}\n \t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\t\t{relatedProduct.reviews} reviews\n+\t\t\t\t\t\t\t\t\t\t\t\t{relatedProduct.reviews.length} reviews\n \t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t

\ndiff --git a/app/routes/_landing.products._index.tsx b/app/routes/_landing.products._index/route.tsx\nsimilarity index 82%\nrename from app/routes/_landing.products._index.tsx\nrename to app/routes/_landing.products._index/route.tsx\nindex 59d656b..c688bcc 100644\n--- a/app/routes/_landing.products._index.tsx\n+++ b/app/routes/_landing.products._index/route.tsx\n@@ -1,13 +1,21 @@\n import { Filter, Grid, List, Star, Heart } from 'lucide-react'\n import { useState, useMemo } from 'react'\n import { Link } from 'react-router'\n+// 🐨 You should use the ProductCard component to render each product instead of the JSX\n+// that is currently in place\n+import { ProductCard } from '#app/components/product-card.js'\n+import { getAllBrands } from '#app/domain/brand.server.ts'\n+import { getAllCategories } from '#app/domain/category.server.ts'\n+import { getProducts } from '#app/domain/products.server.ts'\n+\n import {\n \tgetMetaFromMatches,\n \tgetMetaTitle,\n \tconstructPrefixedTitle,\n } from '#app/utils/metadata.js'\n-import { products, categories, brands } from '../../data/products'\n-import { type Route } from './+types/_landing.products._index'\n+// 💣 we want to completely remove this after we're done\n+import { products, categories, brands } from '../../../data/products'\n+import { type Route } from './+types/route'\n \n export const meta: Route.MetaFunction = ({ matches }) => {\n \tconst rootMeta = getMetaFromMatches(matches, 'root')\n@@ -19,7 +27,22 @@ export const meta: Route.MetaFunction = ({ matches }) => {\n \t]\n }\n \n-export default function ProductsPage() {\n+// 🐨 You should fetch the data directly from the DB here, we need products, brands and categories!\n+export const loader = async ({}: Route.LoaderArgs) => {\n+\t// 💰 You can use the functions 🧝‍♀️ prepared for us above called `getProducts`,\n+\t// 💰 `getAllCategories`, and `getAllBrands` to fetch the data.\n+\n+\t// 💰 Bonus points if you fetch them in parallel!\n+\n+\t// 💰 Return them here and replace the empty arrays!\n+\treturn {\n+\t\tproducts: [],\n+\t\tcategories: [],\n+\t\tbrands: [],\n+\t}\n+}\n+\n+export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \tconst [selectedCategory, setSelectedCategory] = useState('All')\n \tconst [selectedBrand, setBrand] = useState('All')\n \tconst [priceRange, setPriceRange] = useState([0, 300])\n@@ -27,12 +50,15 @@ export default function ProductsPage() {\n \tconst [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')\n \tconst [showFilters, setShowFilters] = useState(false)\n \n+\t// 🐨 Let's replace these with the actual products for now, we will do filtering later!\n+\t// 💣 You can completely remove this useMemo and hardcode it to be the products for now\n+\t// 💰 You can just do loaderData.products, this will be completely removed later!\n \tconst filteredProducts = useMemo(() => {\n \t\tlet filtered = products.filter((product) => {\n \t\t\tconst categoryMatch =\n-\t\t\t\tselectedCategory === 'All' || product.category === selectedCategory\n+\t\t\t\tselectedCategory === 'All' || product.category.name === selectedCategory\n \t\t\tconst brandMatch =\n-\t\t\t\tselectedBrand === 'All' || product.brand === selectedBrand\n+\t\t\t\tselectedBrand === 'All' || product.brand.name === selectedBrand\n \t\t\tconst priceMatch =\n \t\t\t\tproduct.price >= priceRange[0] && product.price <= priceRange[1]\n \n@@ -47,7 +73,7 @@ export default function ProductsPage() {\n \t\t\t\tcase 'price-high':\n \t\t\t\t\treturn b.price - a.price\n \t\t\t\tcase 'rating':\n-\t\t\t\t\treturn b.rating - a.rating\n+\t\t\t\t\treturn b.reviewScore - a.reviewScore\n \t\t\t\tcase 'name':\n \t\t\t\tdefault:\n \t\t\t\t\treturn a.name.localeCompare(b.name)\n@@ -121,10 +147,14 @@ export default function ProductsPage() {\n \t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t{categories.map((category) => (\n+\t\t\t\t\t\t\t\t\t\t// 🐨 Let's replace these with the actual category from the backend\n+\t\t\t\t\t\t\t\t\t\t// 💰 You can just use category.id and category.name here!\n \t\t\t\t\t\t\t\t\t\t setSelectedCategory(category)}\n \t\t\t\t\t\t\t\t\t\t\tclassName={`block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 ${\n+\t\t\t\t\t\t\t\t\t\t\t\t// 💰 Match with category.name\n \t\t\t\t\t\t\t\t\t\t\t\tselectedCategory === category\n \t\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\n \t\t\t\t\t\t\t\t\t\t\t\t\t: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'\n@@ -142,10 +172,14 @@ export default function ProductsPage() {\n \t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t{brands.map((brand) => (\n+\t\t\t\t\t\t\t\t\t\t// 🐨 Let's replace these with the actual new brands from the backend\n+\t\t\t\t\t\t\t\t\t\t// 💰 You can just use brand.id and brand.name here!\n \t\t\t\t\t\t\t\t\t\t setBrand(brand)}\n \t\t\t\t\t\t\t\t\t\t\tclassName={`block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 ${\n+\t\t\t\t\t\t\t\t\t\t\t\t// 💰 Use brand.name\n \t\t\t\t\t\t\t\t\t\t\t\tselectedBrand === brand\n \t\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\n \t\t\t\t\t\t\t\t\t\t\t\t\t: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'\n@@ -186,6 +220,7 @@ export default function ProductsPage() {\n \t\t\t\t\t\t{viewMode === 'grid' ? (\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t{filteredProducts.map((product) => (\n+\t\t\t\t\t\t\t\t\t// 🐨 Let's replace these with the ProductCard again!\n \t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\n@@ -205,14 +240,14 @@ export default function ProductsPage() {\n \t\t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\t\t\t\t{product.rating}\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t{product.reviewScore}\n \t\t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\t\t\t\t{product.brand}\n+\t\t\t\t\t\t\t\t\t\t\t\t{product.brand.name}\n \t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t

\n@@ -227,7 +262,7 @@ export default function ProductsPage() {\n \t\t\t\t\t\t\t\t\t\t\t\t\t${product.price}\n \t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\t\t\t{product.reviews} reviews\n+\t\t\t\t\t\t\t\t\t\t\t\t\t{product.reviews.length} reviews\n \t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t

\n@@ -237,6 +272,7 @@ export default function ProductsPage() {\n \t\t\t\t\t\t) : (\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t{filteredProducts.map((product) => (\n+\t\t\t\t\t\t\t\t\t// 🐨 Let's replace these with the ProductCard again!\n \t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\t\n@@ -255,7 +291,7 @@ export default function ProductsPage() {\n \t\t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{product.brand}\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{product.brand.name}\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t

\n@@ -269,10 +305,10 @@ export default function ProductsPage() {\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{product.rating}\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{product.reviewScore}\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t({product.reviews} reviews)\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t({product.reviews.length} reviews)\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t

\ndiff --git a/app/routes/_landing.products.tsx b/app/routes/_landing.products.tsx\ndeleted file mode 100644\nindex b3f90d3..0000000\n--- a/app/routes/_landing.products.tsx\n+++ /dev/null\n@@ -1,9 +0,0 @@\n-import { Outlet } from 'react-router'\n-\n-export default function ProductsLandingPage() {\n-\treturn (\n-\t\t<>\n-\t\t\t\n-\t\t\n-\t)\n-}\ndiff --git a/app/routes/_landing.terms-of-service.tsx b/app/routes/_landing.terms-of-service.tsx\nindex d360294..e57c81b 100644\n--- a/app/routes/_landing.terms-of-service.tsx\n+++ b/app/routes/_landing.terms-of-service.tsx\n@@ -1,4 +1,20 @@\n import { Shield, Mail } from 'lucide-react'\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/_landing.terms-of-service'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Terms of Service', prefix),\n+\t\t},\n+\t]\n+}\n \n export default function TOSPage() {\n \treturn (\ndiff --git a/app/routes/_landing.terms-of-use.tsx b/app/routes/_landing.terms-of-use.tsx\nindex d768f21..b6faf8e 100644\n--- a/app/routes/_landing.terms-of-use.tsx\n+++ b/app/routes/_landing.terms-of-use.tsx\n@@ -1,4 +1,20 @@\n import { FileText, Mail } from 'lucide-react'\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/_landing.terms-of-use'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Terms of Use', prefix),\n+\t\t},\n+\t]\n+}\n \n export default function TOUPage() {\n \treturn (\ndiff --git a/data/products.ts b/data/products.ts\nindex bc945bd..91a2747 100644\n--- a/data/products.ts\n+++ b/data/products.ts\n@@ -1,206 +1,51 @@\n-export const products = [\n+import { type getProductById } from '#app/domain/products.server.ts'\n+\n+export const products: NonNullable<\n+\tAwaited>\n+>[] = [\n \t{\n \t\tid: '1',\n \t\tname: 'Air Max Revolution',\n \t\tprice: 129.99,\n-\t\timage:\n+\t\timageUrl:\n \t\t\t'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: 'SkyStep',\n-\t\tcategory: 'Running',\n-\t\tdescription:\n-\t\t\t'Revolutionary running shoes with advanced air cushioning technology for maximum comfort and performance.',\n-\t\tsizes: [\n-\t\t\t'7',\n-\t\t\t'7.5',\n-\t\t\t'8',\n-\t\t\t'8.5',\n-\t\t\t'9',\n-\t\t\t'9.5',\n-\t\t\t'10',\n-\t\t\t'10.5',\n-\t\t\t'11',\n-\t\t\t'11.5',\n-\t\t\t'12',\n-\t\t],\n-\t\tcolors: ['Black', 'White', 'Red', 'Blue'],\n-\t\trating: 4.8,\n-\t\treviews: 324,\n-\t\tinStock: true,\n-\t},\n-\t{\n-\t\tid: '2',\n-\t\tname: 'Urban Explorer',\n-\t\tprice: 89.99,\n-\t\timage:\n-\t\t\t'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: 'StreetWalk',\n-\t\tcategory: 'Casual',\n-\t\tdescription:\n-\t\t\t'Stylish casual sneakers perfect for everyday wear with premium leather construction.',\n-\t\tsizes: ['6', '6.5', '7', '7.5', '8', '8.5', '9', '9.5', '10', '10.5', '11'],\n-\t\tcolors: ['Brown', 'Black', 'Navy', 'Gray'],\n-\t\trating: 4.6,\n-\t\treviews: 189,\n-\t\tinStock: true,\n-\t},\n-\t{\n-\t\tid: '3',\n-\t\tname: 'Elite Performance',\n-\t\tprice: 199.99,\n-\t\timage:\n-\t\t\t'https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: 'ProAthlete',\n-\t\tcategory: 'Athletic',\n-\t\tdescription:\n-\t\t\t'Professional-grade athletic shoes designed for peak performance and durability.',\n-\t\tsizes: [\n-\t\t\t'7',\n-\t\t\t'7.5',\n-\t\t\t'8',\n-\t\t\t'8.5',\n-\t\t\t'9',\n-\t\t\t'9.5',\n-\t\t\t'10',\n-\t\t\t'10.5',\n-\t\t\t'11',\n-\t\t\t'11.5',\n-\t\t\t'12',\n-\t\t\t'13',\n-\t\t],\n-\t\tcolors: ['Black', 'White', 'Orange', 'Green'],\n-\t\trating: 4.9,\n-\t\treviews: 567,\n-\t\tinStock: true,\n+\t\tbrand: {\n+\t\t\tid: '1',\n+\t\t\tname: 'SkyStep',\n \t\t},\n-\t{\n-\t\tid: '4',\n-\t\tname: 'Classic Heritage',\n-\t\tprice: 149.99,\n-\t\timage:\n-\t\t\t'https://images.pexels.com/photos/1456706/pexels-photo-1456706.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: 'TimelessStep',\n-\t\tcategory: 'Lifestyle',\n-\t\tdescription:\n-\t\t\t'Timeless design meets modern comfort in these heritage-inspired lifestyle sneakers.',\n-\t\tsizes: [\n-\t\t\t'6',\n-\t\t\t'6.5',\n-\t\t\t'7',\n-\t\t\t'7.5',\n-\t\t\t'8',\n-\t\t\t'8.5',\n-\t\t\t'9',\n-\t\t\t'9.5',\n-\t\t\t'10',\n-\t\t\t'10.5',\n-\t\t\t'11',\n-\t\t\t'11.5',\n-\t\t],\n-\t\tcolors: ['White', 'Cream', 'Navy', 'Burgundy'],\n-\t\trating: 4.7,\n-\t\treviews: 298,\n-\t\tinStock: true,\n+\n+\t\tcategory: {\n+\t\t\tid: '1',\n+\t\t\tname: 'Running',\n \t\t},\n-\t{\n-\t\tid: '5',\n-\t\tname: 'Trail Blazer',\n-\t\tprice: 169.99,\n-\t\timage:\n-\t\t\t'https://images.pexels.com/photos/1598508/pexels-photo-1598508.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: 'OutdoorPro',\n-\t\tcategory: 'Hiking',\n+\t\tvariations: [],\n \t\tdescription:\n-\t\t\t'Rugged hiking boots built for adventure with waterproof protection and superior grip.',\n-\t\tsizes: [\n-\t\t\t'7',\n-\t\t\t'7.5',\n-\t\t\t'8',\n-\t\t\t'8.5',\n-\t\t\t'9',\n-\t\t\t'9.5',\n-\t\t\t'10',\n-\t\t\t'10.5',\n-\t\t\t'11',\n-\t\t\t'11.5',\n-\t\t\t'12',\n-\t\t],\n-\t\tcolors: ['Brown', 'Black', 'Olive', 'Tan'],\n-\t\trating: 4.8,\n-\t\treviews: 412,\n-\t\tinStock: true,\n+\t\t\t'Revolutionary running shoes with advanced air cushioning technology for maximum comfort and performance.',\n+\n+\t\treviewScore: 4.8,\n+\t\treviews: [],\n \t},\n \t{\n-\t\tid: '6',\n-\t\tname: 'Speed Demon',\n-\t\tprice: 179.99,\n-\t\timage:\n-\t\t\t'https://images.pexels.com/photos/2529157/pexels-photo-2529157.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: 'VelocityRun',\n-\t\tcategory: 'Running',\n-\t\tdescription:\n-\t\t\t'Ultra-lightweight racing shoes engineered for speed with carbon fiber plate technology.',\n-\t\tsizes: [\n-\t\t\t'6.5',\n-\t\t\t'7',\n-\t\t\t'7.5',\n-\t\t\t'8',\n-\t\t\t'8.5',\n-\t\t\t'9',\n-\t\t\t'9.5',\n-\t\t\t'10',\n-\t\t\t'10.5',\n-\t\t\t'11',\n-\t\t\t'11.5',\n-\t\t\t'12',\n-\t\t],\n-\t\tcolors: ['Neon Yellow', 'Black', 'White', 'Red'],\n-\t\trating: 4.9,\n-\t\treviews: 678,\n-\t\tinStock: true,\n+\t\tid: '2',\n+\t\tname: 'Air Max Revolution',\n+\t\tprice: 129.99,\n+\t\timageUrl:\n+\t\t\t'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t\tbrand: {\n+\t\t\tid: '1',\n+\t\t\tname: 'SkyStep',\n \t\t},\n-\t{\n-\t\tid: '7',\n-\t\tname: 'Comfort Cloud',\n-\t\tprice: 99.99,\n-\t\timage:\n-\t\t\t'https://images.pexels.com/photos/1456705/pexels-photo-1456705.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: 'SoftStep',\n-\t\tcategory: 'Comfort',\n-\t\tdescription:\n-\t\t\t'All-day comfort shoes with memory foam insoles and breathable mesh construction.',\n-\t\tsizes: ['6', '6.5', '7', '7.5', '8', '8.5', '9', '9.5', '10', '10.5', '11'],\n-\t\tcolors: ['Gray', 'Black', 'White', 'Pink'],\n-\t\trating: 4.5,\n-\t\treviews: 234,\n-\t\tinStock: true,\n+\n+\t\tcategory: {\n+\t\t\tid: '1',\n+\t\t\tname: 'Running',\n \t\t},\n-\t{\n-\t\tid: '8',\n-\t\tname: 'Business Elite',\n-\t\tprice: 249.99,\n-\t\timage:\n-\t\t\t'https://images.pexels.com/photos/1598507/pexels-photo-1598507.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: 'ExecutiveWear',\n-\t\tcategory: 'Formal',\n+\t\tvariations: [],\n \t\tdescription:\n-\t\t\t'Premium leather dress shoes crafted for the modern professional with Italian styling.',\n-\t\tsizes: [\n-\t\t\t'7',\n-\t\t\t'7.5',\n-\t\t\t'8',\n-\t\t\t'8.5',\n-\t\t\t'9',\n-\t\t\t'9.5',\n-\t\t\t'10',\n-\t\t\t'10.5',\n-\t\t\t'11',\n-\t\t\t'11.5',\n-\t\t\t'12',\n-\t\t],\n-\t\tcolors: ['Black', 'Brown', 'Cognac', 'Burgundy'],\n-\t\trating: 4.8,\n-\t\treviews: 156,\n-\t\tinStock: true,\n+\t\t\t'Revolutionary running shoes with advanced air cushioning technology for maximum comfort and performance.',\n+\n+\t\treviewScore: 4.8,\n+\t\treviews: [],\n \t},\n ]\n \ndiff --git a/package.json b/package.json\nindex 4e473c2..264566f 100644\n--- a/package.json\n+++ b/package.json\n@@ -1,37 +1,50 @@\n {\n- \"name\": \"exercises_02.metadata_03.solution.titles-with-meta\",\n+ \"name\": \"exercises_03.data-fetching_01.problem.fetching-with-loaders\",\n \"private\": true,\n \"type\": \"module\",\n \"imports\": {\n- \"#app/*\": \"./app/*\"\n+ \"#app/*\": \"./app/*\",\n+ \"#/prisma-generated/*\": \"./app/generated/prisma/*\"\n },\n \"scripts\": {\n \"build\": \"react-router build\",\n \"dev\": \"react-router dev\",\n \"start\": \"react-router-serve ./build/server/index.js\",\n \"typecheck\": \"react-router typegen && tsc\",\n- \"test\": \"playwright test\"\n+ \"test\": \"playwright test\",\n+ \"db:gen\": \"prisma generate\",\n+ \"db:studio\": \"prisma studio\",\n+ \"db:migrate\": \"DATABASE_URL=file:./data.db prisma migrate dev\",\n+ \"db:push\": \"prisma db push\",\n+ \"db:reset\": \"prisma migrate reset\",\n+ \"db:seed\": \"DATABASE_URL=file:./prisma/data.db tsx prisma/seed.ts\"\n },\n \"dependencies\": {\n- \"@react-router/node\": \"^7.5.3\",\n- \"@react-router/serve\": \"^7.5.3\",\n+ \"@dotenvx/dotenvx\": \"^1.51.0\",\n+ \"@prisma/adapter-better-sqlite3\": \"^6.16.2\",\n+ \"@prisma/client\": \"^6.16.2\",\n+ \"@react-router/node\": \"^7.9.5\",\n+ \"@react-router/serve\": \"^7.9.5\",\n \"isbot\": \"^5.1.27\",\n \"lucide-react\": \"^0.525.0\",\n \"react\": \"^19.1.0\",\n \"react-dom\": \"^19.1.0\",\n- \"react-router\": \"^7.5.3\"\n+ \"react-router\": \"^7.9.5\"\n },\n \"devDependencies\": {\n+ \"@faker-js/faker\": \"^10.0.0\",\n \"@playwright/test\": \"^1.39.0\",\n- \"@react-router/dev\": \"^7.5.3\",\n- \"@react-router/fs-routes\": \"^7.8.2\",\n+ \"@react-router/dev\": \"^7.9.5\",\n+ \"@react-router/fs-routes\": \"^7.9.5\",\n \"@tailwindcss/vite\": \"^4.1.4\",\n \"@types/node\": \"^20\",\n \"@types/react\": \"^19.1.2\",\n \"@types/react-dom\": \"^19.1.2\",\n \"dotenv\": \"^16.3.1\",\n+ \"prisma\": \"^6.16.2\",\n \"react-router-devtools\": \"^5.1.3\",\n \"tailwindcss\": \"^4.1.4\",\n+ \"tsx\": \"^4.20.5\",\n \"typescript\": \"^5.8.3\",\n \"vite\": \"^6.3.3\",\n \"vite-plugin-devtools-json\": \"^1.0.0\"\ndiff --git a/prisma/migrations/20251002111449_init_project/migration.sql b/prisma/migrations/20251002111449_init_project/migration.sql\nnew file mode 100644\nindex 0000000..7938b7f\n--- /dev/null\n+++ b/prisma/migrations/20251002111449_init_project/migration.sql\n@@ -0,0 +1,67 @@\n+-- CreateTable\n+CREATE TABLE \"Product\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"name\" TEXT NOT NULL,\n+ \"description\" TEXT NOT NULL,\n+ \"imageUrl\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"price\" REAL NOT NULL,\n+ \"reviewScore\" REAL NOT NULL DEFAULT 0,\n+ \"categoryId\" TEXT NOT NULL,\n+ \"brandId\" TEXT NOT NULL,\n+ CONSTRAINT \"Product_categoryId_fkey\" FOREIGN KEY (\"categoryId\") REFERENCES \"Category\" (\"id\") ON DELETE RESTRICT ON UPDATE CASCADE,\n+ CONSTRAINT \"Product_brandId_fkey\" FOREIGN KEY (\"brandId\") REFERENCES \"Brand\" (\"id\") ON DELETE RESTRICT ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Category\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"name\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Brand\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"name\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Variation\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"color\" TEXT NOT NULL,\n+ \"size\" TEXT NOT NULL,\n+ \"quantity\" INTEGER NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"productId\" TEXT NOT NULL,\n+ CONSTRAINT \"Variation_productId_fkey\" FOREIGN KEY (\"productId\") REFERENCES \"Product\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"ProductReview\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"rating\" REAL NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"variationId\" TEXT,\n+ \"productId\" TEXT NOT NULL,\n+ CONSTRAINT \"ProductReview_variationId_fkey\" FOREIGN KEY (\"variationId\") REFERENCES \"Variation\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE,\n+ CONSTRAINT \"ProductReview_productId_fkey\" FOREIGN KEY (\"productId\") REFERENCES \"Product\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Category_name_key\" ON \"Category\"(\"name\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Brand_name_key\" ON \"Brand\"(\"name\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Variation_productId_color_size_key\" ON \"Variation\"(\"productId\", \"color\", \"size\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"ProductReview_productId_variationId_key\" ON \"ProductReview\"(\"productId\", \"variationId\");\ndiff --git a/prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql b/prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql\nnew file mode 100644\nindex 0000000..0a09a82\n--- /dev/null\n+++ b/prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql\n@@ -0,0 +1,2 @@\n+-- AlterTable\n+ALTER TABLE \"ProductReview\" ADD COLUMN \"comment\" TEXT;\ndiff --git a/prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql b/prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql\nnew file mode 100644\nindex 0000000..a4d4988\n--- /dev/null\n+++ b/prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql\n@@ -0,0 +1,22 @@\n+/*\n+ Warnings:\n+\n+ - Added the required column `imageUrl` to the `Category` table without a default value. This is not possible if the table is not empty.\n+\n+*/\n+-- RedefineTables\n+PRAGMA defer_foreign_keys=ON;\n+PRAGMA foreign_keys=OFF;\n+CREATE TABLE \"new_Category\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"name\" TEXT NOT NULL,\n+ \"imageUrl\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL\n+);\n+INSERT INTO \"new_Category\" (\"createdAt\", \"id\", \"name\", \"updatedAt\") SELECT \"createdAt\", \"id\", \"name\", \"updatedAt\" FROM \"Category\";\n+DROP TABLE \"Category\";\n+ALTER TABLE \"new_Category\" RENAME TO \"Category\";\n+CREATE UNIQUE INDEX \"Category_name_key\" ON \"Category\"(\"name\");\n+PRAGMA foreign_keys=ON;\n+PRAGMA defer_foreign_keys=OFF;\ndiff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml\nnew file mode 100644\nindex 0000000..2a5a444\n--- /dev/null\n+++ b/prisma/migrations/migration_lock.toml\n@@ -0,0 +1,3 @@\n+# Please do not edit this file manually\n+# It should be added in your version-control system (e.g., Git)\n+provider = \"sqlite\"\ndiff --git a/prisma/schema.prisma b/prisma/schema.prisma\nnew file mode 100644\nindex 0000000..f1a8dcd\n--- /dev/null\n+++ b/prisma/schema.prisma\n@@ -0,0 +1,86 @@\n+// This is your Prisma schema file,\n+// learn more about it in the docs: https://pris.ly/d/prisma-schema\n+\n+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?\n+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init\n+\n+generator client {\n+ provider = \"prisma-client\"\n+ moduleFormat = \"esm\"\n+ engineType = \"client\"\n+ output = \"../app/generated/prisma\"\n+}\n+\n+datasource db {\n+ provider = \"sqlite\"\n+ url = env(\"DATABASE_URL\")\n+}\n+\n+model Product {\n+ id String @id @default(cuid())\n+ name String\n+ description String\n+ imageUrl String\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+ price Float\n+ reviewScore Float @default(0)\n+ category Category @relation(fields: [categoryId], references: [id])\n+ categoryId String\n+\n+ brand Brand @relation(fields: [brandId], references: [id])\n+ brandId String\n+\n+ variations Variation[]\n+ reviews ProductReview[]\n+}\n+\n+model Category {\n+ id String @id @default(cuid())\n+ name String @unique\n+ imageUrl String\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ products Product[]\n+}\n+\n+model Brand {\n+ id String @id @default(cuid())\n+ name String @unique\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ products Product[]\n+}\n+\n+model Variation {\n+ id String @id @default(cuid())\n+ color String\n+ size String\n+ quantity Int\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ product Product @relation(fields: [productId], references: [id], onDelete: Cascade)\n+ productId String\n+\n+ productReviews ProductReview[]\n+\n+ @@unique([productId, color, size])\n+}\n+\n+model ProductReview {\n+ id String @id @default(cuid())\n+ rating Float\n+ comment String?\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ variation Variation? @relation(fields: [variationId], references: [id], onDelete: Cascade)\n+ variationId String?\n+ product Product @relation(fields: [productId], references: [id], onDelete: Cascade)\n+ productId String\n+\n+ @@unique([productId, variationId])\n+}\ndiff --git a/prisma/seed.ts b/prisma/seed.ts\nnew file mode 100644\nindex 0000000..3262c03\n--- /dev/null\n+++ b/prisma/seed.ts\n@@ -0,0 +1,156 @@\n+import { faker } from '@faker-js/faker'\n+import { db } from '#app/db.server.js'\n+import { type ProductUncheckedCreateInput } from '#app/generated/prisma/models.js'\n+\n+const categories = [\n+\t'Running',\n+\t'Casual',\n+\t'Athletic',\n+\t'Lifestyle',\n+\t'Hiking',\n+\t'Comfort',\n+\t'Formal',\n+]\n+\n+const brands = [\n+\t'SkyStep',\n+\t'StreetWalk',\n+\t'ProAthlete',\n+\t'TimelessStep',\n+\t'OutdoorPro',\n+\t'VelocityRun',\n+\t'SoftStep',\n+\t'ExecutiveWear',\n+]\n+\n+const sneakerImages = [\n+\t'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1456706/pexels-photo-1456706.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1598508/pexels-photo-1598508.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/2529157/pexels-photo-2529157.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1456705/pexels-photo-1456705.jpeg?auto=compress&cs=tinysrgb&w=600',\n+]\n+const productNames = [\n+\t'Air Zoom Pegasus 38',\n+\t'Ultraboost 21',\n+\t'Gel-Kayano 27',\n+\t'React Infinity Run Flyknit',\n+\t'Fresh Foam 1080v11',\n+\t'Speedcross 5',\n+\t'Cloudswift',\n+\t'Chuck Taylor All Star',\n+\t'Samba OG',\n+\t'Sneaker X Pro',\n+\t'Runner Max',\n+\t'Street Style',\n+\t'Urban Walk',\n+\t'Trail Blazer',\n+\t'Comfy Step',\n+\t'Flex Runner',\n+\t'Power Boost',\n+\t'Elite Trainer',\n+\t'Comfort Cloud',\n+\t'Business Elite',\n+]\n+\n+function buildProductCatalog(\n+\ttargetCount: number,\n+\tcategoryMap: Map,\n+\tbrandMap: Map,\n+): ProductUncheckedCreateInput[] {\n+\tconst products: ProductUncheckedCreateInput[] = []\n+\tfor (let i = 0; i < targetCount; i++) {\n+\t\tproducts.push({\n+\t\t\tname:\n+\t\t\t\tfaker.helpers.arrayElement(productNames) +\n+\t\t\t\t' ' +\n+\t\t\t\tfaker.commerce.productAdjective(),\n+\t\t\tdescription: faker.lorem.paragraphs(),\n+\t\t\timageUrl: faker.helpers.arrayElement(sneakerImages),\n+\t\t\tprice: parseFloat(faker.commerce.price({ min: 20, max: 500, dec: 2 })),\n+\t\t\treviewScore: faker.number.int({ min: 1, max: 5 }),\n+\t\t\tcategoryId: categoryMap.get(faker.helpers.arrayElement(categories))!,\n+\t\t\tbrandId: brandMap.get(faker.helpers.arrayElement(brands))!,\n+\t\t})\n+\t}\n+\n+\treturn products\n+}\n+\n+async function seed() {\n+\tconsole.log('Seeding database...')\n+\tconsole.time('Database seeded')\n+\n+\tawait db.variation.deleteMany()\n+\tawait db.productReview.deleteMany()\n+\tawait db.product.deleteMany()\n+\tawait db.category.deleteMany()\n+\tawait db.brand.deleteMany()\n+\n+\tconst categoryNames = categories.filter((name) => name !== 'All')\n+\tconst brandNames = brands.filter((name) => name !== 'All')\n+\n+\tconst categoryMap = new Map()\n+\tfor (const name of categoryNames) {\n+\t\tconst category = await db.category.create({\n+\t\t\tdata: { name, imageUrl: faker.helpers.arrayElement(sneakerImages) },\n+\t\t})\n+\t\tcategoryMap.set(name, category.id)\n+\t}\n+\n+\tconst brandMap = new Map()\n+\tfor (const name of brandNames) {\n+\t\tconst brand = await db.brand.create({ data: { name } })\n+\t\tbrandMap.set(name, brand.id)\n+\t}\n+\n+\tconst catalog = buildProductCatalog(100, categoryMap, brandMap)\n+\n+\tfor (const product of catalog) {\n+\t\tconst createdProduct = await db.product.create({\n+\t\t\tdata: product,\n+\t\t})\n+\n+\t\tconst colors = ['Red', 'Blue', 'Black', 'White']\n+\t\tconst sizes = ['9', '10', '11', '12']\n+\t\tconst variations = []\n+\n+\t\tfor (const color of colors) {\n+\t\t\tfor (const size of sizes) {\n+\t\t\t\tvariations.push({\n+\t\t\t\t\tproductId: createdProduct.id,\n+\t\t\t\t\tcolor,\n+\t\t\t\t\tsize,\n+\t\t\t\t\tquantity: faker.number.int({ min: 0, max: 2 }),\n+\t\t\t\t})\n+\t\t\t}\n+\t\t}\n+\n+\t\tawait db.variation.createMany({ data: variations })\n+\t\tconst createdVariations = await db.variation.findMany({\n+\t\t\twhere: { productId: createdProduct.id },\n+\t\t})\n+\t\tfor (const v of createdVariations) {\n+\t\t\tawait db.productReview.create({\n+\t\t\t\tdata: {\n+\t\t\t\t\tproductId: createdProduct.id,\n+\t\t\t\t\trating: faker.number.int({ min: 1, max: 5 }),\n+\t\t\t\t\tvariationId: v.id,\n+\t\t\t\t},\n+\t\t\t})\n+\t\t}\n+\t}\n+\n+\tconsole.timeEnd('Database seeded')\n+}\n+\n+seed()\n+\t.catch((e) => {\n+\t\tconsole.error(e)\n+\t\tprocess.exit(1)\n+\t})\n+\t.finally(async () => {\n+\t\tawait db.$disconnect()\n+\t})\ndiff --git a/prisma.config.ts b/prisma.config.ts\nnew file mode 100644\nindex 0000000..b2c681c\n--- /dev/null\n+++ b/prisma.config.ts\n@@ -0,0 +1,13 @@\n+import path from 'node:path'\n+import { type PrismaConfig } from 'prisma'\n+\n+// Import environment variables\n+import 'dotenv/config'\n+\n+export default {\n+\tschema: path.join('prisma', 'schema.prisma'),\n+\tmigrations: {\n+\t\tpath: path.join('prisma', 'migrations'),\n+\t\tseed: 'npm run db:seed',\n+\t},\n+} satisfies PrismaConfig\ndiff --git a/tests/e2e/routing.test.ts b/tests/e2e/routing.test.ts\nindex 3fed9ac..a1bc1bb 100644\n--- a/tests/e2e/routing.test.ts\n+++ b/tests/e2e/routing.test.ts\n@@ -50,13 +50,4 @@ test.describe('Routing E2E Tests', () => {\n \t\t\tpage.getByRole('heading', { name: 'Terms of Use' }),\n \t\t).toBeVisible()\n \t})\n-\n-\ttest('should navigate to specific product page and render correct content', async ({\n-\t\tpage,\n-\t}) => {\n-\t\tawait page.goto('/products/1')\n-\t\tawait expect(\n-\t\t\tpage.getByRole('heading', { name: 'Air Max Revolution' }),\n-\t\t).toBeVisible()\n-\t})\n })"]

.env-0+11App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.env.example-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/header.tsx-6+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/product-card.tsx-0+54App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/db.server.ts-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/brand.server.ts-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/category.server.ts-0+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/products.server.ts-0+99App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/categories-section.tsx-47+45App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/featured-products.section.tsx-44+56App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/route.tsx-16+36App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.about.tsx-4+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.cart.tsx-5+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.contact.tsx-5+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.$productId.tsx-135+164App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index.tsx -> app/routes/_landing.products._index/route.tsx-123+159App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.tsx-9+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.terms-of-service.tsx-4+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.terms-of-use.tsx-4+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

data/products.ts-206+51App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-37+50App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251002111449_init_project/migration.sql-0+67App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql-0+2App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql-0+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/migration_lock.toml-0+3App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/schema.prisma-0+86App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/seed.ts-0+156App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma.config.ts-0+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/routing.test.ts-13+4App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.env-0+11App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.env.example-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/header.tsx-6+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/product-card.tsx-0+54App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/db.server.ts-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/brand.server.ts-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/category.server.ts-0+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/products.server.ts-0+99App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/categories-section.tsx-47+45App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/featured-products.section.tsx-44+56App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/route.tsx-16+36App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.about.tsx-4+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.cart.tsx-5+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.contact.tsx-5+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.$productId.tsx-135+164App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index.tsx -> app/routes/_landing.products._index/route.tsx-123+159App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.tsx-9+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.terms-of-service.tsx-4+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.terms-of-use.tsx-4+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

data/products.ts-206+51App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-37+50App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251002111449_init_project/migration.sql-0+67App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql-0+2App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql-0+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/migration_lock.toml-0+3App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/schema.prisma-0+86App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/seed.ts-0+156App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma.config.ts-0+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/routing.test.ts-13+4App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2