├── .prettierignore
├── app
    ├── favicon.ico
    ├── sign-in
    │   ├── loading.tsx
    │   ├── layout.tsx
    │   └── page.tsx
    ├── product
    │   └── [id]
    │   │   ├── not-found.tsx
    │   │   └── page.tsx
    ├── not-found.tsx
    ├── user
    │   ├── loading.tsx
    │   ├── layout.tsx
    │   └── page.tsx
    ├── layout.tsx
    ├── all
    │   └── page.tsx
    ├── globals.css
    ├── page.tsx
    └── about
    │   └── page.tsx
├── postcss.config.js
├── utils
    ├── slow.ts
    └── cn.ts
├── prisma
    ├── migrations
    │   ├── migration_lock.toml
    │   ├── 20250919104318_add_featured_to_products
    │   │   └── migration.sql
    │   ├── 20250801131353_add_saved_products
    │   │   └── migration.sql
    │   ├── 20250917064507_add_category_model
    │   │   └── migration.sql
    │   ├── 20250824112830_init
    │   │   └── migration.sql
    │   └── 20250801100125_init
    │   │   └── migration.sql
    ├── schema.prisma
    └── seed.ts
├── next-env.d.ts
├── .prettierrc
├── next.config.ts
├── db.ts
├── components
    ├── ui
    │   ├── Card.tsx
    │   ├── Skeleton.tsx
    │   ├── SearchStatus.tsx
    │   ├── MotionWrappers.tsx
    │   ├── Divider.tsx
    │   ├── LinkButton.tsx
    │   ├── ShowMore.tsx
    │   ├── BackButton.tsx
    │   ├── LinkStatus.tsx
    │   ├── Button.tsx
    │   ├── Modal.tsx
    │   ├── ImagePlaceholder.tsx
    │   └── ProductCard.tsx
    ├── Header.tsx
    ├── Footer.tsx
    ├── banner
    │   ├── BannerContainer.tsx
    │   └── WelcomeBanner.tsx
    ├── internal
    │   ├── BoundaryProvider.tsx
    │   ├── BoundaryToggle.tsx
    │   └── Boundary.tsx
    ├── SortButton.tsx
    ├── Search.tsx
    └── Pagination.tsx
├── .gitignore
├── .env.sample
├── features
    ├── user
    │   ├── user-queries.ts
    │   └── components
    │   │   ├── Recommendations.tsx
    │   │   ├── UserProfile.tsx
    │   │   ├── SaveProductButton.tsx
    │   │   ├── Discounts.tsx
    │   │   └── SavedProducts.tsx
    ├── auth
    │   ├── components
    │   │   ├── AuthProvider.tsx
    │   │   └── LoginButton.tsx
    │   ├── auth-actions.ts
    │   └── auth-queries.ts
    ├── category
    │   ├── components
    │   │   ├── Categories.tsx
    │   │   ├── CategoryFilterButton.tsx
    │   │   ├── CategoryFilters.tsx
    │   │   └── FeaturedCategories.tsx
    │   └── category-queries.ts
    └── product
    │   ├── components
    │       ├── FeaturedProducts.tsx
    │       ├── ProductModal.tsx
    │       ├── Product.tsx
    │       ├── ProductList.tsx
    │       ├── Hero.tsx
    │       ├── Reviews.tsx
    │       └── ProductDetails.tsx
    │   ├── product-actions.ts
    │   └── product-queries.ts
├── tsconfig.json
├── LISCENSE
├── next16-commerce.code-workspace
├── package.json
├── README.md
├── eslint.config.mjs
├── .vscode
    └── snippets.code-snippets
└── STEPS.md


/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | yarn.lock
4 | pnpm-lock.yaml
5 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aurorascharff/next16-commerce/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     '@tailwindcss/postcss': {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/utils/slow.ts:
--------------------------------------------------------------------------------
1 | export async function slow(delay: number = 1000) {
2 |   await new Promise(resolve => {
3 |     return setTimeout(resolve, delay);
4 |   });
5 | }
6 | 


--------------------------------------------------------------------------------
/app/sign-in/loading.tsx:
--------------------------------------------------------------------------------
1 | export default function Loading() {
2 |   return <div className="skeleton-animation mx-auto h-80 max-w-sm min-w-[350px] rounded-lg" />;
3 | }
4 | 


--------------------------------------------------------------------------------
/prisma/migrations/migration_lock.toml:
--------------------------------------------------------------------------------
1 | # Please do not edit this file manually
2 | # It should be added in your version-control system (e.g., Git)
3 | provider = "postgresql"
4 | 


--------------------------------------------------------------------------------
/utils/cn.ts:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx';
2 | import { twMerge } from 'tailwind-merge';
3 | import type { ClassValue } from 'clsx';
4 | 
5 | export function cn(...inputs: ClassValue[]) {
6 |   return twMerge(clsx(inputs));
7 | }
8 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | import "./.next/types/routes.d.ts";
4 | 
5 | // NOTE: This file should not be edited
6 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
7 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 120,
 3 |   "bracketSpacing": true,
 4 |   "tabWidth": 2,
 5 |   "useTabs": false,
 6 |   "semi": true,
 7 |   "singleQuote": true,
 8 |   "trailingComma": "all",
 9 |   "arrowParens": "avoid",
10 |   "endOfLine": "auto",
11 |   "plugins": ["prettier-plugin-tailwindcss"]
12 | }
13 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NextConfig } from 'next';
 2 | 
 3 | const nextConfig: NextConfig = {
 4 |   cacheComponents: true,
 5 |   experimental: {
 6 |     inlineCss: true,
 7 |     staleTimes: {
 8 |       dynamic: 30,
 9 |     },
10 |   },
11 |   reactCompiler: true,
12 |   typedRoutes: true,
13 | };
14 | 
15 | module.exports = nextConfig;
16 | 


--------------------------------------------------------------------------------
/db.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from '@prisma/client';
 2 | 
 3 | const globalForPrisma = global as unknown as {
 4 |   prisma: PrismaClient | undefined;
 5 | };
 6 | 
 7 | export const prisma =
 8 |   globalForPrisma.prisma ??
 9 |   new PrismaClient({
10 |     // log: ['query'],
11 |   });
12 | 
13 | if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
14 | 


--------------------------------------------------------------------------------
/prisma/migrations/20250919104318_add_featured_to_products/migration.sql:
--------------------------------------------------------------------------------
1 | -- DropForeignKey
2 | ALTER TABLE "public"."Product" DROP CONSTRAINT "Product_category_fkey";
3 | 
4 | -- AlterTable
5 | ALTER TABLE "public"."Product" ADD COLUMN     "featured" BOOLEAN NOT NULL DEFAULT false;
6 | 
7 | -- CreateIndex
8 | CREATE INDEX "Product_featured_idx" ON "public"."Product"("featured");
9 | 


--------------------------------------------------------------------------------
/components/ui/Card.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { cn } from '@/utils/cn';
 3 | 
 4 | type Props = {
 5 |   children: React.ReactNode;
 6 |   className?: string;
 7 | };
 8 | 
 9 | export default function Card({ children, className }: Props) {
10 |   return (
11 |     <div className={cn('border-divider dark:border-divider-dark rounded-none border p-6 shadow-sm', className)}>
12 |       {children}
13 |     </div>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/app/sign-in/layout.tsx:
--------------------------------------------------------------------------------
 1 | export default async function SignInLayout({ children }: LayoutProps<'/sign-in'>) {
 2 |   return (
 3 |     <div className="mx-auto max-w-4xl space-y-12">
 4 |       <div className="text-center">
 5 |         <h1 className="text-3xl font-bold text-black dark:text-white">Welcome Back</h1>
 6 |         <p className="mt-2 text-gray-600 dark:text-gray-400">Sign in to your account to continue shopping</p>
 7 |       </div>
 8 |       {children}
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/app/product/[id]/not-found.tsx:
--------------------------------------------------------------------------------
 1 | export default function NotFound() {
 2 |   return (
 3 |     <div className="flex flex-col items-center justify-center py-12 text-center">
 4 |       <h1 className="text-primary text-6xl font-bold">404</h1>
 5 |       <h2 className="mt-4 text-xl font-semibold">Product Not Found</h2>
 6 |       <p className="text-gray mt-4 max-w-md dark:text-gray-400">
 7 |         The product you are looking for does not exist or has been moved.
 8 |       </p>
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/app/not-found.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function NotFound() {
 4 |   return (
 5 |     <div className="flex flex-col items-center justify-center rounded-lg text-center">
 6 |       <h1 className="text-primary text-6xl font-bold">404</h1>
 7 |       <p className="mt-4 text-xl font-semibold">Page Not Found</p>
 8 |       <p className="text-gray dark:text-gray mt-4 max-w-md">
 9 |         The page you are looking for does not exist or has been moved to a different location.
10 |       </p>
11 |     </div>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # database
12 | dev.db
13 | dev.db-journal
14 | 
15 | # next.js
16 | /.next/
17 | /out/
18 | 
19 | # production
20 | /build
21 | 
22 | # misc
23 | .DS_Store
24 | *.pem
25 | 
26 | # debug
27 | npm-debug.log*
28 | yarn-debug.log*
29 | yarn-error.log*
30 | 
31 | # local env files
32 | .env*.local
33 | .env
34 | 
35 | # vercel
36 | .vercel
37 | 
38 | # typescript
39 | *.tsbuildinfo


--------------------------------------------------------------------------------
/.env.sample:
--------------------------------------------------------------------------------
 1 | # Environment variables declared in this file are automatically made available to Prisma.
 2 | # See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
 3 | 
 4 | # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 5 | # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 6 | 
 7 | # # URL for local developement
 8 | # DATABASE_URL="file:./dev.db"
 9 | # Database connection string
10 | DATABASE_URL=secret
11 | # Shadow database connection string for sqlserver
12 | SHADOW_DATABASE_URL=secret


--------------------------------------------------------------------------------
/components/ui/Skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { cn } from '@/utils/cn';
 3 | 
 4 | type Props = {
 5 |   className?: string;
 6 | };
 7 | 
 8 | export default function Skeleton({ className }: Props) {
 9 |   return (
10 |     <div className={cn('flex-1', className)}>
11 |       <div className="skeleton-animation mb-2 h-3 w-10 rounded-xs" />
12 |       <div className="skeleton-animation mb-2 h-4 rounded-xs" />
13 |       <div className="skeleton-animation mb-2 h-4 rounded-xs" />
14 |       <div className="skeleton-animation mb-2 h-2 w-12 rounded-xs" />
15 |       <div className="skeleton-animation mb-2 h-2 w-20 rounded-xs" />
16 |     </div>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/components/ui/SearchStatus.tsx:
--------------------------------------------------------------------------------
 1 | import { Loader2, Search } from 'lucide-react';
 2 | import React from 'react';
 3 | import { useFormStatus } from 'react-dom';
 4 | 
 5 | export default function SearchStatus({ searching = false }: { searching?: boolean }) {
 6 |   const { pending } = useFormStatus();
 7 |   const isSearching = searching || pending;
 8 | 
 9 |   return (
10 |     <>
11 |       {isSearching ? (
12 |         <div aria-label="searching..." className="h-fit w-fit animate-spin">
13 |           <Loader2 aria-hidden="true" width={16} height={16} className="text-gray" />
14 |         </div>
15 |       ) : (
16 |         <Search aria-hidden="true" width={16} height={16} className="text-gray" />
17 |       )}
18 |     </>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/features/user/user-queries.ts:
--------------------------------------------------------------------------------
 1 | import 'server-only';
 2 | 
 3 | import { cache } from 'react';
 4 | import { prisma } from '@/db';
 5 | import { slow } from '@/utils/slow';
 6 | import { getCurrentAccount } from '../auth/auth-queries';
 7 | 
 8 | export const getUserDiscounts = cache(async () => {
 9 |   await slow();
10 | 
11 |   const account = await getCurrentAccount();
12 | 
13 |   if (!account) {
14 |     return [];
15 |   }
16 | 
17 |   const userDiscounts = await prisma.userDiscount.findMany({
18 |     include: {
19 |       discount: true,
20 |     },
21 |     orderBy: { discount: { expiry: 'asc' } },
22 |     where: { accountId: account.id },
23 |   });
24 | 
25 |   return userDiscounts.map(ud => {
26 |     return ud.discount;
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/components/ui/MotionWrappers.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { motion } from 'framer-motion';
 4 | import React from 'react';
 5 | import type { HTMLMotionProps } from 'framer-motion';
 6 | 
 7 | export function MotionDiv(props: HTMLMotionProps<'div'>) {
 8 |   return <motion.div {...props}>{props.children}</motion.div>;
 9 | }
10 | 
11 | export function MotionP(props: HTMLMotionProps<'p'>) {
12 |   return <motion.p {...props}>{props.children}</motion.p>;
13 | }
14 | 
15 | export function MotionH2(props: HTMLMotionProps<'h2'>) {
16 |   return <motion.h2 {...props}>{props.children}</motion.h2>;
17 | }
18 | 
19 | export function MotionSection(props: HTMLMotionProps<'section'>) {
20 |   return <motion.section {...props}>{props.children}</motion.section>;
21 | }
22 | 


--------------------------------------------------------------------------------
/components/ui/Divider.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from '@/utils/cn';
 2 | 
 3 | type DividerProps = {
 4 |   variant?: 'dotted' | 'dashed' | 'solid';
 5 |   className?: string;
 6 | };
 7 | 
 8 | export default function Divider({ variant = 'dotted', className }: DividerProps) {
 9 |   const baseStyles = 'w-full h-px';
10 | 
11 |   const variantStyles = {
12 |     dashed: 'border-t border-dashed border-divider dark:border-divider-dark border-opacity-70 dark:border-opacity-70',
13 |     dotted: 'border-t border-dotted border-divider dark:border-divider-dark border-opacity-70 dark:border-opacity-70',
14 |     solid: 'bg-divider dark:bg-divider-dark bg-opacity-70 dark:bg-opacity-70',
15 |   };
16 | 
17 |   return <hr aria-hidden="true" className={cn(baseStyles, variantStyles[variant], className)} />;
18 | }
19 | 


--------------------------------------------------------------------------------
/app/user/loading.tsx:
--------------------------------------------------------------------------------
 1 | import Skeleton from '@/components/ui/Skeleton';
 2 | 
 3 | export default function Loading() {
 4 |   return (
 5 |     <div className="border-divider dark:border-divider-dark flex flex-col gap-6 border bg-white p-8 dark:bg-black">
 6 |       <div className="flex items-center gap-4">
 7 |         <div className="size-16 rounded-full bg-gray-200 dark:bg-neutral-800" />
 8 |         <div className="flex flex-col gap-2">
 9 |           <div className="h-8 w-48 rounded bg-neutral-200 dark:bg-neutral-800" />
10 |           <div className="h-6 w-32 rounded bg-neutral-200 dark:bg-neutral-800" />
11 |         </div>
12 |       </div>
13 |       <div className="grid gap-6 md:grid-cols-2">
14 |         <Skeleton className="h-47" />
15 |         <Skeleton className="h-47" />
16 |       </div>
17 |       <Skeleton className="h-60 max-w-md" />
18 |     </div>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/features/auth/components/AuthProvider.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { createContext, use, useContext } from 'react';
 4 | import type { ReactNode } from 'react';
 5 | 
 6 | type AuthContextType = {
 7 |   loggedIn: Promise<boolean>;
 8 | };
 9 | 
10 | const AuthContext = createContext<AuthContextType | null>(null);
11 | 
12 | export function useAuth(): AuthContextType {
13 |   const context = useContext(AuthContext);
14 |   if (context === null) {
15 |     throw new Error('useAuth must be used within an AuthProvider');
16 |   }
17 |   return context;
18 | }
19 | 
20 | export function AuthProvider({ children, loggedIn }: { children: ReactNode; loggedIn: Promise<boolean> }) {
21 |   return <AuthContext.Provider value={{ loggedIn }}>{children}</AuthContext.Provider>;
22 | }
23 | 
24 | export const useLoggedIn = () => {
25 |   const { loggedIn } = useAuth();
26 |   return use(loggedIn)
27 | };


--------------------------------------------------------------------------------
/features/category/components/Categories.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import Boundary from '@/components/internal/Boundary';
 3 | import LinkStatus from '@/components/ui/LinkStatus';
 4 | import { getCategories } from '../category-queries';
 5 | 
 6 | export default async function Categories() {
 7 |   'use cache';
 8 | 
 9 |   const categories = await getCategories();
10 | 
11 |   return categories.map(category => {
12 |     return (
13 |       <Boundary key={category} hydration="server" rendering="hybrid" cached>
14 |         <Link
15 |           href={{
16 |             pathname: '/all',
17 |             query: { category },
18 |           }}
19 |           className="hover:text-accent dark:hover:text-accent block text-sm text-gray-700 transition-colors dark:text-gray-300"
20 |         >
21 |           <LinkStatus>{category}</LinkStatus>
22 |         </Link>
23 |       </Boundary>
24 |     );
25 |   });
26 | }
27 | 


--------------------------------------------------------------------------------
/prisma/migrations/20250801131353_add_saved_products/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "public"."SavedProduct" (
 3 |     "id" SERIAL NOT NULL,
 4 |     "accountId" TEXT NOT NULL,
 5 |     "productId" INTEGER NOT NULL,
 6 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
 7 | 
 8 |     CONSTRAINT "SavedProduct_pkey" PRIMARY KEY ("id")
 9 | );
10 | 
11 | -- CreateIndex
12 | CREATE UNIQUE INDEX "SavedProduct_accountId_productId_key" ON "public"."SavedProduct"("accountId", "productId");
13 | 
14 | -- AddForeignKey
15 | ALTER TABLE "public"."SavedProduct" ADD CONSTRAINT "SavedProduct_accountId_fkey" FOREIGN KEY ("accountId") REFERENCES "public"."Account"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
16 | 
17 | -- AddForeignKey
18 | ALTER TABLE "public"."SavedProduct" ADD CONSTRAINT "SavedProduct_productId_fkey" FOREIGN KEY ("productId") REFERENCES "public"."Product"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
19 | 


--------------------------------------------------------------------------------
/app/user/layout.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Suspense } from 'react';
 2 | import Discounts, { DiscountsSkeleton } from '@/features/user/components/Discounts';
 3 | import SavedProducts, { SavedProductsSkeleton } from '@/features/user/components/SavedProducts';
 4 | 
 5 | export default function UserLayout({ children }: { children: React.ReactNode }) {
 6 |   return (
 7 |     <div className="flex flex-col gap-16 xl:mx-40 2xl:mx-60">
 8 |       {children}
 9 |       <div>
10 |         <h2 className="mb-4 text-2xl font-bold tracking-tight uppercase">Your Discounts</h2>
11 |         <Suspense fallback={<DiscountsSkeleton />}>
12 |           <Discounts />
13 |         </Suspense>
14 |       </div>
15 |       <div>
16 |         <h2 className="mb-4 text-2xl font-bold tracking-tight uppercase">Saved Products</h2>
17 |         <Suspense fallback={<SavedProductsSkeleton />}>
18 |           <SavedProducts />
19 |         </Suspense>
20 |       </div>
21 |     </div>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "bundler",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "react-jsx",
20 |     "incremental": true,
21 |     "plugins": [
22 |       {
23 |         "name": "next"
24 |       }
25 |     ],
26 |     "paths": {
27 |       "@/*": [
28 |         "./*"
29 |       ]
30 |     }
31 |   },
32 |   "include": [
33 |     "**/*.ts",
34 |     "**/*.tsx",
35 |     ".next/types/**/*.ts",
36 |     "next-env.d.ts",
37 |     "**/*.mts",
38 |     ".next/dev/types/**/*.ts"
39 |   ],
40 |   "exclude": [
41 |     "node_modules"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import React, { Suspense } from 'react';
 3 | import UserProfile, { UserProfileSkeleton } from '@/features/user/components/UserProfile';
 4 | import BoundaryToggle from './internal/BoundaryToggle';
 5 | 
 6 | export default function Header() {
 7 |   return (
 8 |     <>
 9 |       <header className="border-divider dark:border-divider-dark 3xl:px-60 flex min-h-20 items-center justify-between gap-4 border-b bg-white px-4 py-4 sm:px-10 2xl:px-40 dark:bg-black">
10 |         <h1 className="text-3xl font-bold">
11 |           <Link href="/" className="text-primary hover:text-primary-dark font-bold normal-case">
12 |             Commerce
13 |           </Link>
14 |         </h1>
15 |         <div className="flex items-center gap-4">
16 |           <Suspense fallback={<UserProfileSkeleton />}>{<UserProfile />}</Suspense>
17 |         </div>
18 |       </header>
19 |       <BoundaryToggle />
20 |     </>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/features/product/components/FeaturedProducts.tsx:
--------------------------------------------------------------------------------
 1 | import { cacheTag } from 'next/dist/server/use-cache/cache-tag';
 2 | import Boundary from '@/components/internal/Boundary';
 3 | import ProductCard from '@/components/ui/ProductCard';
 4 | import { getFeaturedProducts } from '../product-queries';
 5 | 
 6 | export default async function FeaturedProducts() {
 7 |   'use cache';
 8 | 
 9 |   cacheTag('featured-product');
10 | 
11 |   const products = await getFeaturedProducts(4);
12 | 
13 |   return (
14 |     <Boundary rendering="hybrid" hydration="server" cached>
15 |       <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
16 |         {products.map(product => {
17 |           return (
18 |             <ProductCard
19 |               enableQuickPreview
20 |               key={product.id}
21 |               id={product.id}
22 |               name={product.name}
23 |               price={product.price}
24 |             />
25 |           );
26 |         })}
27 |       </div>
28 |     </Boundary>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/LISCENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Aurora Scharff
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/prisma/migrations/20250917064507_add_category_model/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "public"."Category" (
 3 |     "id" SERIAL NOT NULL,
 4 |     "name" TEXT NOT NULL,
 5 |     "description" TEXT NOT NULL,
 6 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
 7 |     "updatedAt" TIMESTAMP(3) NOT NULL,
 8 | 
 9 |     CONSTRAINT "Category_pkey" PRIMARY KEY ("id")
10 | );
11 | 
12 | -- CreateIndex
13 | CREATE UNIQUE INDEX "Category_name_key" ON "public"."Category"("name");
14 | 
15 | -- CreateIndex
16 | CREATE INDEX "Product_category_idx" ON "public"."Product"("category");
17 | 
18 | -- CreateIndex
19 | CREATE INDEX "Product_name_idx" ON "public"."Product"("name");
20 | 
21 | -- CreateIndex
22 | CREATE INDEX "Product_createdAt_idx" ON "public"."Product"("createdAt");
23 | 
24 | -- CreateIndex
25 | CREATE INDEX "Product_category_createdAt_idx" ON "public"."Product"("category", "createdAt");
26 | 
27 | -- AddForeignKey
28 | ALTER TABLE "public"."Product" ADD CONSTRAINT "Product_category_fkey" FOREIGN KEY ("category") REFERENCES "public"."Category"("name") ON DELETE SET NULL ON UPDATE CASCADE;
29 | 


--------------------------------------------------------------------------------
/components/ui/LinkButton.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import type { Route } from 'next';
 3 | import type { LinkProps } from 'next/link';
 4 | 
 5 | type Props = {
 6 |   href: Route;
 7 |   variant?: 'default' | 'primary' | 'secondary';
 8 |   className?: string;
 9 |   children: React.ReactNode;
10 | };
11 | 
12 | export default function LinkButton({ children, href, variant = 'default', className = '' }: Props & LinkProps<Route>) {
13 |   const baseClasses = 'inline-flex items-center gap-2 text-sm font-bold tracking-wide uppercase';
14 | 
15 |   const variantClasses = {
16 |     default:
17 |       'border-divider dark:border-divider-dark hover:border-accent dark:bg-card-dark flex flex-col items-center border bg-white p-4 text-center',
18 |     primary: 'bg-accent hover:bg-accent-hover px-6 py-3 text-white',
19 |     secondary: 'border-accent hover:bg-accent-fade border px-6 py-3',
20 |   };
21 | 
22 |   const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${className}`.trim();
23 | 
24 |   return (
25 |     <Link href={href} className={combinedClasses}>
26 |       {children}
27 |     </Link>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/components/ui/ShowMore.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import React, { Children, useState } from 'react';
 4 | import Boundary from '../internal/Boundary';
 5 | 
 6 | type Props = {
 7 |   children: React.ReactNode;
 8 |   className?: string;
 9 |   initial?: number;
10 | };
11 | 
12 | export default function ShowMore({ children, className, initial = 5 }: Props) {
13 |   const [expanded, setExpanded] = useState(false);
14 |   const items = expanded ? children : Children.toArray(children).slice(0, initial);
15 |   const remaining = Children.count(children) - initial;
16 | 
17 |   return (
18 |     <Boundary hydration="client">
19 |       <div>
20 |         <div className={className}>{items}</div>
21 |         {remaining > 0 && (
22 |           <div className="mt-4 text-center">
23 |             <button
24 |               onClick={() => {
25 |                 return setExpanded(!expanded);
26 |               }}
27 |               className="text-primary hover:text-primary-dark text-sm font-medium transition-colors"
28 |             >
29 |               {expanded ? 'Show Less' : `Show More (${remaining})`}
30 |             </button>
31 |           </div>
32 |         )}
33 |       </div>
34 |     </Boundary>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/features/auth/auth-actions.ts:
--------------------------------------------------------------------------------
 1 | 'use server';
 2 | 
 3 | import { cookies } from 'next/headers';
 4 | import { redirect, unauthorized } from 'next/navigation';
 5 | import { cache } from 'react';
 6 | import { prisma } from '@/db';
 7 | import { slow } from '@/utils/slow';
 8 | import { getCurrentAccount } from './auth-queries';
 9 | import type { Route } from 'next';
10 | 
11 | export const verifyAuth = cache(async (redirectUrl?: Route) => {
12 |   const user = await getCurrentAccount();
13 |   if (!user) {
14 |     if (redirectUrl) {
15 |       redirect(`/sign-in?redirectUrl=${redirectUrl}`);
16 |     } else {
17 |       redirect('/sign-in');
18 |     }
19 |   }
20 | 
21 |   return user.id;
22 | });
23 | 
24 | export async function logOut() {
25 |   await slow();
26 | 
27 |   (await cookies()).delete('selectedAccountId');
28 | }
29 | 
30 | export async function logIn(email: string, redirectUrl?: Route) {
31 |   await slow();
32 | 
33 |   const account = await prisma.account.findFirst({
34 |     where: {
35 |       email: email,
36 |     },
37 |   });
38 | 
39 |   if (!account) {
40 |     unauthorized();
41 |   }
42 | 
43 |   (await cookies()).set('selectedAccountId', account?.id);
44 |   redirect((redirectUrl || '/') as Route);
45 | }
46 | 


--------------------------------------------------------------------------------
/components/ui/BackButton.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { ArrowLeft } from 'lucide-react';
 4 | import Link from 'next/link';
 5 | import { useRouter } from 'next/navigation';
 6 | import React from 'react';
 7 | import Boundary from '../internal/Boundary';
 8 | 
 9 | type Props = {
10 |   href?: Parameters<typeof Link>[0]['href'];
11 |   children?: React.ReactNode;
12 | };
13 | 
14 | export default function BackButton({ href, children = 'Back' }: Props) {
15 |   const router = useRouter();
16 | 
17 |   const handleClick = () => {
18 |     router.back();
19 |   };
20 | 
21 |   if (href) {
22 |     return (
23 |       <Link href={href} className="text-primary hover:text-primary-dark inline-flex items-center text-sm font-medium">
24 |         <ArrowLeft aria-hidden className="mr-1 size-4" />
25 |         {children}
26 |       </Link>
27 |     );
28 |   }
29 | 
30 |   return (
31 |     <Boundary hydration="client">
32 |       <button
33 |         onClick={handleClick}
34 |         className="text-primary hover:text-primary-dark inline-flex items-center text-sm font-medium uppercase"
35 |       >
36 |         <ArrowLeft aria-hidden className="mr-1 size-4" />
37 |         {children}
38 |       </button>
39 |     </Boundary>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/features/auth/components/LoginButton.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useRouter } from 'next/navigation';
 4 | import React, { use, useTransition } from 'react';
 5 | import Boundary from '@/components/internal/Boundary';
 6 | import { useAuth, useLoggedIn } from '@/features/auth/components/AuthProvider';
 7 | import { logOut } from '../auth-actions';
 8 | 
 9 | export default function LoginButton() {
10 |   const [isPending, startTransition] = useTransition();
11 |   const loggedIn = useLoggedIn();
12 |   const router = useRouter();
13 | 
14 |   return (
15 |     <Boundary hydration="client">
16 |       <button
17 |         aria-disabled={isPending}
18 |         className="text-primary hover:text-primary-dark aria-disabled:text-gray cursor-pointer text-sm font-semibold uppercase transition-colors aria-disabled:cursor-not-allowed aria-disabled:italic"
19 |         onClick={() => {
20 |           if (loggedIn) {
21 |             startTransition(async () => {
22 |               await logOut();
23 |             });
24 |           } else {
25 |             router.push('/sign-in');
26 |           }
27 |         }}
28 |       >
29 |         {loggedIn ? 'Sign out' : 'Sign in'} {isPending && '...'}
30 |       </button>
31 |     </Boundary>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/next16-commerce.code-workspace:
--------------------------------------------------------------------------------
 1 | {
 2 |   "folders": [
 3 |     {
 4 |       "path": ".",
 5 |     },
 6 |   ],
 7 |   "extensions": {
 8 |     "recommendations": [
 9 |       "rvest.vs-code-prettier-eslint",
10 |       "esbenp.prettier-vscode",
11 |       "dsznajder.es7-react-js-snippets",
12 |       "dbaeumer.vscode-eslint",
13 |     ],
14 |   },
15 |   "settings": {
16 |     "[html]": {
17 |       "editor.defaultFormatter": "esbenp.prettier-vscode",
18 |     },
19 |     "[css]": {
20 |       "editor.defaultFormatter": "esbenp.prettier-vscode",
21 |     },
22 |     "[javascript]": {
23 |       "editor.defaultFormatter": "esbenp.prettier-vscode",
24 |     },
25 |     "[typescript]": {
26 |       "editor.defaultFormatter": "esbenp.prettier-vscode",
27 |     },
28 |     "[typescriptreact]": {
29 |       "editor.defaultFormatter": "esbenp.prettier-vscode",
30 |     },
31 |     "[json]": {
32 |       "editor.defaultFormatter": "esbenp.prettier-vscode",
33 |     },
34 |     "[jsonc]": {
35 |       "editor.defaultFormatter": "esbenp.prettier-vscode",
36 |     },
37 |     "editor.codeActionsOnSave": {
38 |       "source.fixAll.eslint": "explicit",
39 |     },
40 |     "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
41 |   },
42 | }
43 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable jsx-a11y/anchor-is-valid */
 2 | import Link from 'next/link';
 3 | import Categories from '@/features/category/components/Categories';
 4 | import ShowMore from './ui/ShowMore';
 5 | 
 6 | export default async function Footer() {
 7 |   return (
 8 |     <footer className="bg-white dark:bg-black">
 9 |       <div className="mx-auto max-w-6xl px-4 py-8 sm:px-10">
10 |         <ShowMore className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-5">
11 |           <Categories />
12 |         </ShowMore>
13 |         <div className="border-divider dark:border-divider-dark my-6 border-b" />
14 |         <div className="text-gray dark:text-gray text-center text-sm">
15 |           <p>© 2024 Commerce. All rights reserved.</p>
16 |           <div className="mt-2 flex justify-center gap-4">
17 |             <Link href="/about" className="hover:text-primary transition-colors">
18 |               About
19 |             </Link>
20 |             <a href="#" className="hover:text-primary transition-colors">
21 |               Privacy Policy
22 |             </a>
23 |             <a href="#" className="hover:text-primary transition-colors">
24 |               Terms of Service
25 |             </a>
26 |           </div>
27 |         </div>
28 |       </div>
29 |     </footer>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/features/category/components/CategoryFilterButton.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import Link from 'next/link';
 4 | import { useSearchParams } from 'next/navigation';
 5 | import React from 'react';
 6 | 
 7 | import LinkStatus from '@/components/ui/LinkStatus';
 8 | import { cn } from '@/utils/cn';
 9 | 
10 | interface Props {
11 |   category?: string;
12 |   children: React.ReactNode;
13 | }
14 | 
15 | export default function CategoryFilterButton({ category, children }: Props) {
16 |   const params = useSearchParams();
17 |   const active = category ? params.get('category') === category : !params.get('category');
18 |   const href = category ? { pathname: '/all', query: { category } } : { pathname: '/all' };
19 | 
20 |   return (
21 |     <Link scroll={false} href={href} className={cn('text-xs font-bold tracking-wide uppercase md:block')}>
22 |       <LinkStatus variant="spinner">
23 |         <div
24 |           className={cn(
25 |             'px-3 py-1.5 transition-colors md:w-full',
26 |             active
27 |               ? 'bg-accent text-white'
28 |               : 'border-divider dark:border-divider-dark border bg-white hover:bg-gray-50 dark:bg-black dark:hover:bg-gray-900',
29 |           )}
30 |         >
31 |           {children}
32 |         </div>
33 |       </LinkStatus>
34 |     </Link>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/components/banner/BannerContainer.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { X } from 'lucide-react';
 4 | import { useState } from 'react';
 5 | import Boundary from '../internal/Boundary';
 6 | import type { ReactNode } from 'react';
 7 | 
 8 | export function BannerContainer({ children }: { children: ReactNode }) {
 9 |   const [dismissed, setDismissed] = useState(false);
10 |   if (dismissed) return null;
11 | 
12 |   return (
13 |     <Boundary hydration="client">
14 |       <div className="border-divider dark:border-divider-dark from-accent/5 via-accent/3 dark:from-accent/10 dark:via-accent/5 relative border bg-gradient-to-tr to-transparent p-0 dark:to-transparent">
15 |         <div className="flex items-start justify-between gap-3 p-3 sm:gap-4 sm:p-5">
16 |           <div className="flex-1">{children}</div>
17 |           <button
18 |             onClick={() => {
19 |               setDismissed(true);
20 |             }}
21 |             className="group text-gray/70 hover:border-divider hover:text-accent dark:text-gray/60 dark:hover:text-accent -m-1 inline-flex h-6 w-6 items-center justify-center border border-transparent p-0 transition-colors"
22 |             aria-label="Dismiss banner"
23 |           >
24 |             <X aria-hidden className="h-4 w-4" />
25 |           </button>
26 |         </div>
27 |       </div>
28 |     </Boundary>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/features/category/components/CategoryFilters.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Suspense } from 'react';
 2 | import Boundary from '@/components/internal/Boundary';
 3 | import { getCategories } from '../category-queries';
 4 | import CategoryFilterButton from './CategoryFilterButton';
 5 | 
 6 | export default async function CategoryFilters() {
 7 |   'use cache';
 8 | 
 9 |   const categories = await getCategories();
10 | 
11 |   return (
12 |     <Boundary hydration="server" rendering="hybrid" cached>
13 |       <div className="flex flex-wrap gap-2 lg:flex-col lg:gap-1">
14 |         <Suspense fallback={<CategoryFilterButtonSkeleton />}>
15 |           <CategoryFilterButton>All</CategoryFilterButton>
16 |         </Suspense>
17 |         {categories.map(category => {
18 |           return (
19 |             <Suspense key={category} fallback={<CategoryFilterButtonSkeleton />}>
20 |               <CategoryFilterButton category={category}>{category}</CategoryFilterButton>
21 |             </Suspense>
22 |           );
23 |         })}
24 |       </div>
25 |     </Boundary>
26 |   );
27 | }
28 | 
29 | export function CategoryFilterButtonSkeleton() {
30 |   return (
31 |     <div className="border-divider dark:border-divider-dark border px-3 py-1.5 text-xs font-bold tracking-wide text-gray-400 uppercase md:block md:w-full dark:text-gray-500">
32 |       Loading
33 |     </div>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/components/ui/LinkStatus.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { LoaderCircle } from 'lucide-react';
 4 | import { useLinkStatus } from 'next/link';
 5 | import React from 'react';
 6 | import { cn } from '@/utils/cn';
 7 | import Boundary from '../internal/Boundary';
 8 | 
 9 | type Props = {
10 |   className?: string;
11 |   width?: number;
12 |   height?: number;
13 |   variant?: 'spinner' | 'background';
14 |   children?: React.ReactNode;
15 | };
16 | 
17 | export default function LinkStatus({ className, width = 20, height = 20, variant = 'spinner', children }: Props) {
18 |   const { pending } = useLinkStatus();
19 | 
20 |   if (variant === 'spinner') {
21 |     return (
22 |       <Boundary hydration="client">
23 |         {pending ? (
24 |           <div className="flex items-center gap-2">
25 |             {children}
26 |             <div className={cn('text-gray h-fit w-fit animate-spin', className)}>
27 |               <LoaderCircle aria-hidden="true" width={width} height={height} />
28 |             </div>
29 |           </div>
30 |         ) : (
31 |           children
32 |         )}
33 |       </Boundary>
34 |     );
35 |   }
36 |   if (variant === 'background') {
37 |     return (
38 |       <Boundary hydration="client">
39 |         <div className={cn(pending && 'text-gray bg-gray-200 dark:bg-gray-700', className)}>{children}</div>
40 |       </Boundary>
41 |     );
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/features/product/product-actions.ts:
--------------------------------------------------------------------------------
 1 | 'use server';
 2 | 
 3 | import { refresh, revalidateTag } from 'next/cache';
 4 | import { prisma } from '@/db';
 5 | import { verifyAuth } from '../auth/auth-actions';
 6 | import type { Route } from 'next';
 7 | 
 8 | async function saveProduct(productId: number) {
 9 |   const accountId = await verifyAuth(('/product/' + productId) as Route);
10 | 
11 |   await prisma.savedProduct.create({
12 |     data: {
13 |       accountId,
14 |       productId,
15 |     },
16 |   });
17 | 
18 |   refresh();
19 | }
20 | 
21 | async function unsaveProduct(productId: number) {
22 |   const accountId = await verifyAuth();
23 | 
24 |   await prisma.savedProduct.delete({
25 |     where: {
26 |       accountId_productId: {
27 |         accountId,
28 |         productId,
29 |       },
30 |     },
31 |   });
32 | 
33 |   refresh();
34 | }
35 | 
36 | export async function toggleSaveProduct(productId: number, saved: boolean) {
37 |   if (saved) {
38 |     return await unsaveProduct(productId);
39 |   } else {
40 |     return await saveProduct(productId);
41 |   }
42 | }
43 | 
44 | export async function setFeaturedProduct(productId: number) {
45 |   await prisma.product.updateMany({
46 |     data: { featured: false },
47 |     where: { featured: true },
48 |   });
49 | 
50 |   await prisma.product.update({
51 |     data: { featured: true },
52 |     where: { id: productId },
53 |   });
54 | 
55 |   revalidateTag('featured-product', 'max');
56 | }
57 | 


--------------------------------------------------------------------------------
/features/user/components/Recommendations.tsx:
--------------------------------------------------------------------------------
 1 | import Boundary from '@/components/internal/Boundary';
 2 | import ProductCard, { ProductCardSkeleton } from '@/components/ui/ProductCard';
 3 | import { getCurrentAccount } from '@/features/auth/auth-queries';
 4 | import { getRecommendedProducts } from '../../product/product-queries';
 5 | 
 6 | export default async function Recommendations() {
 7 |   const currentAccount = await getCurrentAccount();
 8 |   if (!currentAccount) {
 9 |     return null;
10 |   }
11 | 
12 |   const recommendedProducts = await getRecommendedProducts(4);
13 |   if (recommendedProducts.length === 0) {
14 |     return null;
15 |   }
16 | 
17 |   return (
18 |     <Boundary rendering="dynamic" hydration="server">
19 |       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
20 |         {recommendedProducts.map(product => {
21 |           return (
22 |             <ProductCard
23 |               enableQuickPreview
24 |               key={product.id}
25 |               id={product.id}
26 |               name={product.name}
27 |               price={product.price}
28 |               badge="For You"
29 |             />
30 |           );
31 |         })}
32 |       </div>
33 |     </Boundary>
34 |   );
35 | }
36 | 
37 | export function RecommendationsSkeleton() {
38 |   return (
39 |     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
40 |       {Array.from({ length: 4 }).map((_, i) => {
41 |         return <ProductCardSkeleton key={i} />;
42 |       })}
43 |     </div>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/prisma/migrations/20250824112830_init/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "public"."Discount" (
 3 |     "id" SERIAL NOT NULL,
 4 |     "code" TEXT NOT NULL,
 5 |     "description" TEXT NOT NULL,
 6 |     "percentage" INTEGER NOT NULL,
 7 |     "expiry" TIMESTAMP(3) NOT NULL,
 8 |     "isActive" BOOLEAN NOT NULL DEFAULT true,
 9 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
10 |     "updatedAt" TIMESTAMP(3) NOT NULL,
11 | 
12 |     CONSTRAINT "Discount_pkey" PRIMARY KEY ("id")
13 | );
14 | 
15 | -- CreateTable
16 | CREATE TABLE "public"."UserDiscount" (
17 |     "id" SERIAL NOT NULL,
18 |     "accountId" TEXT NOT NULL,
19 |     "discountId" INTEGER NOT NULL,
20 |     "isUsed" BOOLEAN NOT NULL DEFAULT false,
21 |     "usedAt" TIMESTAMP(3),
22 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
23 | 
24 |     CONSTRAINT "UserDiscount_pkey" PRIMARY KEY ("id")
25 | );
26 | 
27 | -- CreateIndex
28 | CREATE UNIQUE INDEX "Discount_code_key" ON "public"."Discount"("code");
29 | 
30 | -- CreateIndex
31 | CREATE UNIQUE INDEX "UserDiscount_accountId_discountId_key" ON "public"."UserDiscount"("accountId", "discountId");
32 | 
33 | -- AddForeignKey
34 | ALTER TABLE "public"."UserDiscount" ADD CONSTRAINT "UserDiscount_accountId_fkey" FOREIGN KEY ("accountId") REFERENCES "public"."Account"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
35 | 
36 | -- AddForeignKey
37 | ALTER TABLE "public"."UserDiscount" ADD CONSTRAINT "UserDiscount_discountId_fkey" FOREIGN KEY ("discountId") REFERENCES "public"."Discount"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
38 | 


--------------------------------------------------------------------------------
/features/user/components/UserProfile.tsx:
--------------------------------------------------------------------------------
 1 | import { User } from 'lucide-react';
 2 | import Link from 'next/link';
 3 | import React from 'react';
 4 | import Boundary from '@/components/internal/Boundary';
 5 | import { getCurrentAccount } from '@/features/auth/auth-queries';
 6 | import LoginButton from '@/features/auth/components/LoginButton';
 7 | 
 8 | export default async function UserProfile() {
 9 |   const account = await getCurrentAccount();
10 | 
11 |   return (
12 |     <Boundary rendering="dynamic" hydration="server">
13 |       <div className="flex items-center gap-2">
14 |         <div className="flex flex-col items-end gap-1">
15 |           {account && <span className="text-sm font-medium tracking-wide">{account.name}</span>}
16 |           <LoginButton />
17 |         </div>
18 |         {account ? (
19 |           <Link href="/user">
20 |             <span className="sr-only">Go to Profile</span>
21 |             <User
22 |               aria-hidden
23 |               className="size-8 cursor-pointer rounded-full p-1 transition-all hover:bg-gray-100 dark:hover:bg-gray-800"
24 |             />
25 |           </Link>
26 |         ) : (
27 |           <User aria-hidden className="text-gray size-8 rounded-full p-1" />
28 |         )}
29 |       </div>
30 |     </Boundary>
31 |   );
32 | }
33 | 
34 | export function UserProfileSkeleton() {
35 |   return (
36 |     <div className="flex items-center gap-2">
37 |       <div className="skeleton-animation h-6 w-6 rounded-full" />
38 |       <div className="skeleton-animation h-4 w-16 rounded" />
39 |     </div>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/features/auth/auth-queries.ts:
--------------------------------------------------------------------------------
 1 | import 'server-only';
 2 | 
 3 | import { cookies } from 'next/headers';
 4 | import { redirect } from 'next/navigation';
 5 | import { cache } from 'react';
 6 | import { prisma } from '@/db';
 7 | import { slow } from '@/utils/slow';
 8 | 
 9 | export const getIsAuthenticated = cache(async () => {
10 |   const selectedAccountId = (await cookies()).get('selectedAccountId')?.value;
11 |   if (!selectedAccountId) {
12 |     return false;
13 |   }
14 |   return true;
15 | });
16 | 
17 | export const getAccount = cache(async (accountId: string) => {
18 |   await slow();
19 | 
20 |   const account = await prisma.account.findUnique({
21 |     where: {
22 |       id: accountId,
23 |     },
24 |   });
25 | 
26 |   return account;
27 | });
28 | 
29 | export const getAccountWithDetails = cache(async (accountId: string) => {
30 |   await slow();
31 | 
32 |   const account = await prisma.account.findUnique({
33 |     include: {
34 |       accountDetail: true,
35 |     },
36 |     where: {
37 |       id: accountId,
38 |     },
39 |   });
40 | 
41 |   return account;
42 | });
43 | 
44 | export const getCurrentAccount = cache(async () => {
45 |   const selectedAccountId = (await cookies()).get('selectedAccountId')?.value;
46 | 
47 |   if (!selectedAccountId) {
48 |     return null;
49 |   }
50 | 
51 |   return getAccount(selectedAccountId);
52 | });
53 | 
54 | export const getCurrentAccountWithDetails = cache(async () => {
55 |   const selectedAccountId = (await cookies()).get('selectedAccountId')?.value;
56 |   if (!selectedAccountId) {
57 |     redirect('/sign-in');
58 |   }
59 | 
60 |   return getAccountWithDetails(selectedAccountId);
61 | });
62 | 


--------------------------------------------------------------------------------
/features/product/components/ProductModal.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { Eye } from 'lucide-react';
 4 | import Link from 'next/link';
 5 | import { useState } from 'react';
 6 | import Boundary from '@/components/internal/Boundary';
 7 | import Modal from '@/components/ui/Modal';
 8 | 
 9 | type Props = {
10 |   productId: number;
11 |   children: React.ReactNode;
12 | };
13 | 
14 | export default function ProductModal({ productId, children }: Props) {
15 |   const [isOpen, setIsOpen] = useState(false);
16 | 
17 |   return (
18 |     <>
19 |       <button
20 |         onClick={() => {
21 |           setIsOpen(true);
22 |         }}
23 |         className="absolute top-4 right-4 z-20 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-neutral-600/30 bg-neutral-800/80 text-neutral-100 opacity-0 shadow-lg backdrop-blur-sm transition-all duration-200 group-hover:opacity-100 hover:scale-105 hover:border-neutral-500/50 hover:bg-neutral-700/95 hover:text-white hover:shadow-2xl"
24 |         aria-label="Quick Preview"
25 |       >
26 |         <Boundary hydration="client">
27 |           <Eye className="h-4 w-4" />
28 |         </Boundary>
29 |       </button>
30 |       <Modal setOpen={setIsOpen} open={isOpen} title="Quick Preview">
31 |         {children}
32 |         <div className="mt-6 flex justify-center">
33 |           <Link
34 |             className="text-primary hover:text-primary-dark inline-flex items-center text-sm font-medium"
35 |             href={`/product/${productId}`}
36 |           >
37 |             {'View product details ->'}
38 |           </Link>
39 |         </div>
40 |       </Modal>
41 |     </>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/features/user/components/SaveProductButton.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { Bookmark, BookmarkCheck } from 'lucide-react';
 4 | import React, { useOptimistic, useTransition } from 'react';
 5 | import Boundary from '@/components/internal/Boundary';
 6 | import { cn } from '@/utils/cn';
 7 | import { toggleSaveProduct } from '../../product/product-actions';
 8 | 
 9 | type Props = {
10 |   productId: number;
11 |   initialSaved: boolean;
12 | };
13 | 
14 | export default function SaveProductButton({ productId, initialSaved }: Props) {
15 |   const [isPending, startTransition] = useTransition();
16 |   const [optimisticSaved, setOptimisticSaved] = useOptimistic(initialSaved);
17 | 
18 |   const handleToggleSave = () => {
19 |     startTransition(async () => {
20 |       setOptimisticSaved(!optimisticSaved);
21 |       await toggleSaveProduct(productId, optimisticSaved);
22 |     });
23 |   };
24 | 
25 |   return (
26 |     <Boundary hydration="client" rendering="dynamic">
27 |       <form action={handleToggleSave} className="mr-2 flex items-center gap-2">
28 |         <button
29 |           className={cn(
30 |             'text-primary hover:text-primary-dark flex cursor-pointer items-center gap-2 text-sm transition-colors',
31 |             isPending && 'opacity-70',
32 |           )}
33 |         >
34 |           {optimisticSaved ? (
35 |             <BookmarkCheck aria-hidden className="size-5" />
36 |           ) : (
37 |             <Bookmark aria-hidden className="size-5" />
38 |           )}
39 |           <span className="uppercase">{optimisticSaved ? 'Unsave product' : 'Save product'}</span>
40 |         </button>
41 |       </form>
42 |     </Boundary>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/app/product/[id]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Bookmark } from 'lucide-react';
 2 | import { Suspense } from 'react';
 3 | import BackButton from '@/components/ui/BackButton';
 4 | import Card from '@/components/ui/Card';
 5 | import Product from '@/features/product/components/Product';
 6 | import ProductDetails, { SavedProduct } from '@/features/product/components/ProductDetails';
 7 | import Reviews, { ReviewsSkeleton } from '@/features/product/components/Reviews';
 8 | 
 9 | export async function generateStaticParams() {
10 |   return [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }];
11 | }
12 | 
13 | export default async function ProductPage({ params }: PageProps<'/product/[id]'>) {
14 |   const { id } = await params;
15 |   const productId = Number(id);
16 | 
17 |   return (
18 |     <div className="flex flex-col gap-6">
19 |       <BackButton />
20 |       <div className="flex w-full flex-col gap-8 self-center md:w-[700px]">
21 |         <Card>
22 |           <Product
23 |             productId={productId}
24 |             details={
25 |               <ProductDetails key={productId} productId={productId}>
26 |                 <Suspense fallback={<Bookmark aria-hidden className="text-gray size-5" />}>
27 |                   <SavedProduct productId={productId} />
28 |                 </Suspense>
29 |               </ProductDetails>
30 |             }
31 |           />
32 |         </Card>
33 |         <div>
34 |           <h2 className="mb-4 text-xl font-semibold">Customer Reviews</h2>
35 |           <Suspense fallback={<ReviewsSkeleton />}>
36 |             <Reviews productId={productId} />
37 |           </Suspense>
38 |         </div>
39 |       </div>
40 |     </div>
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/app/sign-in/page.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import { redirect } from 'next/navigation';
 3 | import Button from '@/components/ui/Button';
 4 | import Card from '@/components/ui/Card';
 5 | import { logIn } from '@/features/auth/auth-actions';
 6 | import { getIsAuthenticated } from '@/features/auth/auth-queries';
 7 | import type { Route } from 'next';
 8 | 
 9 | export default async function SignInPage({ searchParams }: PageProps<'/sign-in'>) {
10 |   const loggedIn = await getIsAuthenticated();
11 |   const { redirectUrl } = await searchParams;
12 | 
13 |   if (loggedIn) {
14 |     redirect('/');
15 |   }
16 | 
17 |   return (
18 |     <Card className="min-w-[350px]">
19 |       <form action={logIn.bind(null, 'jane.smith@gmail.com', redirectUrl as Route)} className="space-y-6">
20 |         <div>
21 |           <label htmlFor="email">Email Address</label>
22 |           <input id="email" name="email" type="email" disabled defaultValue="jane.smith@gmail.com" required />
23 |         </div>
24 |         <div>
25 |           <label htmlFor="password">Password</label>
26 |           <input
27 |             id="password"
28 |             name="password"
29 |             type="password"
30 |             disabled
31 |             defaultValue={Math.random().toString(36).slice(-12)}
32 |             required
33 |           />
34 |         </div>
35 |         <Button className="w-full">Sign In</Button>
36 |       </form>
37 |       <div className="mt-6 text-center">
38 |         <p className="text-sm text-gray-600 dark:text-gray-400">
39 |           Don&apos;t have an account? <Link href="#">Sign up here</Link>
40 |         </p>
41 |       </div>
42 |     </Card>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/components/internal/BoundaryProvider.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import React, { createContext, useContext, useEffect, useState } from 'react';
 4 | 
 5 | export type BoundaryMode = 'off' | 'hydration' | 'rendering';
 6 | 
 7 | type BoundaryContextType = {
 8 |   mode: BoundaryMode;
 9 |   toggleMode: () => void;
10 |   setMode: (mode: BoundaryMode) => void;
11 | };
12 | 
13 | const BoundaryContext = createContext<BoundaryContextType | null>(null);
14 | 
15 | const BOUNDARY_MODE_KEY = 'boundaryMode';
16 | 
17 | export function BoundaryProvider({ children }: { children: React.ReactNode }) {
18 |   const [mode, setMode] = useState<BoundaryMode>('off');
19 | 
20 |   useEffect(() => {
21 |     const savedMode = localStorage.getItem(BOUNDARY_MODE_KEY) as BoundaryMode;
22 |     if (savedMode && ['off', 'rendering', 'hydration'].includes(savedMode)) {
23 |       setMode(savedMode);
24 |     }
25 |   }, []);
26 | 
27 |   const toggleMode = () => {
28 |     setMode(prev => {
29 |       const newMode = prev === 'off' ? 'hydration' : 'off';
30 |       localStorage.setItem(BOUNDARY_MODE_KEY, newMode);
31 |       return newMode;
32 |     });
33 |   };
34 | 
35 |   const updateMode = (newMode: BoundaryMode) => {
36 |     setMode(newMode);
37 |     localStorage.setItem(BOUNDARY_MODE_KEY, newMode);
38 |   };
39 | 
40 |   return (
41 |     <BoundaryContext.Provider value={{ mode, setMode: updateMode, toggleMode }}>{children}</BoundaryContext.Provider>
42 |   );
43 | }
44 | 
45 | export function useBoundaryMode() {
46 |   const context = useContext(BoundaryContext);
47 |   if (!context) {
48 |     throw new Error('useBoundaryMode must be used within a BoundaryProvider');
49 |   }
50 |   return context;
51 | }
52 | 


--------------------------------------------------------------------------------
/features/category/category-queries.ts:
--------------------------------------------------------------------------------
 1 | import { cache } from 'react';
 2 | import { prisma } from '@/db';
 3 | import { slow } from '@/utils/slow';
 4 | import 'server-only';
 5 | 
 6 | export const getCategories = cache(async () => {
 7 |   await slow();
 8 | 
 9 |   const categories = await prisma.product.groupBy({
10 |     by: ['category'],
11 |     orderBy: {
12 |       category: 'asc',
13 |     },
14 |     where: {
15 |       category: {
16 |         not: null,
17 |       },
18 |     },
19 |   });
20 | 
21 |   return categories
22 |     .map(item => {
23 |       return item.category;
24 |     })
25 |     .filter(Boolean) as string[];
26 | });
27 | 
28 | export const getCategoriesWithCount = cache(async () => {
29 |   await slow();
30 | 
31 |   const [categoriesData, categoriesInfo] = await Promise.all([
32 |     prisma.product.groupBy({
33 |       _count: {
34 |         category: true,
35 |       },
36 |       by: ['category'],
37 |       orderBy: {
38 |         category: 'asc',
39 |       },
40 |       where: {
41 |         category: {
42 |           not: null,
43 |         },
44 |       },
45 |     }),
46 |     prisma.category.findMany({
47 |       select: {
48 |         description: true,
49 |         name: true,
50 |       },
51 |     }),
52 |   ]);
53 | 
54 |   const categoryMap = new Map(
55 |     categoriesInfo.map(cat => {
56 |       return [cat.name, cat.description];
57 |     }),
58 |   );
59 | 
60 |   return categoriesData
61 |     .filter(item => {
62 |       return item.category !== null;
63 |     })
64 |     .map(item => {
65 |       return {
66 |         count: item._count.category,
67 |         description: categoryMap.get(item.category!),
68 |         name: item.category!,
69 |       };
70 |     });
71 | });
72 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './globals.css';
 2 | 
 3 | import { Analytics } from '@vercel/analytics/next';
 4 | import { SpeedInsights } from '@vercel/speed-insights/next';
 5 | import { Geist } from 'next/font/google';
 6 | import Footer from '@/components/Footer';
 7 | import Header from '@/components/Header';
 8 | import Boundary from '@/components/internal/Boundary';
 9 | import { BoundaryProvider } from '@/components/internal/BoundaryProvider';
10 | import { getIsAuthenticated } from '@/features/auth/auth-queries';
11 | import { AuthProvider } from '@/features/auth/components/AuthProvider';
12 | import type { Metadata } from 'next';
13 | 
14 | const GeistSans = Geist({ subsets: ['latin'] });
15 | 
16 | export const metadata: Metadata = {
17 |   description: 'Next.js 16 App Router Commerce',
18 |   title: 'Next 16 Commerce',
19 | };
20 | 
21 | export default async function RootLayout({ children }: LayoutProps<'/'>) {
22 |   const loggedIn = getIsAuthenticated();
23 | 
24 |   return (
25 |     <html lang="en">
26 |       <body className={GeistSans.className}>
27 |         <BoundaryProvider>
28 |           <Boundary rendering="static" hydration="server">
29 |             <div className="flex min-h-screen flex-col">
30 |               <AuthProvider loggedIn={loggedIn}>
31 |                 <Header />
32 |                 <main className="3xl:px-60 mb-4 flex flex-1 flex-col gap-6 p-4 sm:mb-8 sm:gap-10 sm:p-10 lg:mb-10 2xl:px-40">
33 |                   {children}
34 |                 </main>
35 |               </AuthProvider>
36 |             </div>
37 |             <Footer />
38 |           </Boundary>
39 |         </BoundaryProvider>
40 |         <SpeedInsights />
41 |         <Analytics />
42 |       </body>
43 |     </html>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/app/all/page.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Suspense } from 'react';
 2 | import Search, { SearchSkeleton } from '@/components/Search';
 3 | import SortButton, { SortButtonSkeleton } from '@/components/SortButton';
 4 | import WelcomeBanner from '@/components/banner/WelcomeBanner';
 5 | import CategoryFilters from '@/features/category/components/CategoryFilters';
 6 | import ProductList, { ProductListSkeleton } from '@/features/product/components/ProductList';
 7 | 
 8 | export default async function AllPage({ searchParams }: PageProps<'/'>) {
 9 |   return (
10 |     <>
11 |       <WelcomeBanner />
12 |       <Suspense fallback={<SearchSkeleton />}>
13 |         <Search />
14 |       </Suspense>
15 |       <div className="flex h-full grow gap-12">
16 |         <div className="hidden w-64 shrink-0 lg:block">
17 |           <div className="sticky top-4">
18 |             <h3 className="mb-5 text-lg font-bold tracking-tight uppercase">Categories</h3>
19 |             <CategoryFilters />
20 |           </div>
21 |         </div>
22 |         <div className="flex flex-1 flex-col gap-6">
23 |           <div className="flex flex-col gap-4 lg:hidden">
24 |             <CategoryFilters />
25 |             <div className="flex justify-end">
26 |               <Suspense fallback={<SortButtonSkeleton />}>
27 |                 <SortButton />
28 |               </Suspense>
29 |             </div>
30 |           </div>
31 |           <div className="hidden justify-end lg:flex">
32 |             <Suspense fallback={<SortButtonSkeleton />}>
33 |               <SortButton />
34 |             </Suspense>
35 |           </div>
36 |           <Suspense fallback={<ProductListSkeleton />}>
37 |             <ProductList searchParams={searchParams} />
38 |           </Suspense>
39 |         </div>
40 |       </div>
41 |     </>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/components/SortButton.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { ArrowUp, ArrowDown } from 'lucide-react';
 4 | import Link from 'next/link';
 5 | import { useSearchParams } from 'next/navigation';
 6 | import React from 'react';
 7 | import Boundary from './internal/Boundary';
 8 | import LinkStatus from './ui/LinkStatus';
 9 | 
10 | export default function SortButton() {
11 |   const searchParams = useSearchParams();
12 |   const currentSort = searchParams.get('sort') as 'asc' | 'desc' | null;
13 |   const searchQuery = searchParams.get('q');
14 |   const category = searchParams.get('category');
15 |   const page = searchParams.get('page');
16 | 
17 |   const nextSort = currentSort === 'asc' ? 'desc' : 'asc';
18 | 
19 |   const href = {
20 |     pathname: '/all',
21 |     query: {
22 |       ...(searchQuery && { q: searchQuery }),
23 |       ...(category && { category }),
24 |       ...(page && { page }),
25 |       sort: nextSort,
26 |     },
27 |   };
28 | 
29 |   return (
30 |     <Boundary hydration="client">
31 |       <Link
32 |         scroll={false}
33 |         href={href}
34 |         className="inline-flex h-6 items-center gap-1.5 text-xs font-bold tracking-wide uppercase"
35 |       >
36 |         <LinkStatus>
37 |           <div className="flex items-center gap-2">
38 |             {nextSort === 'desc' ? (
39 |               <ArrowUp className="bg-accent size-3.5 p-0.5 text-white dark:text-black" />
40 |             ) : (
41 |               <ArrowDown className="bg-accent size-3.5 p-0.5 text-white dark:text-black" />
42 |             )}
43 |             Sort {nextSort === 'desc' ? 'A-Z' : 'Z-A'}
44 |           </div>
45 |         </LinkStatus>
46 |       </Link>
47 |     </Boundary>
48 |   );
49 | }
50 | 
51 | export function SortButtonSkeleton() {
52 |   return <div className="inline-block h-6 w-20 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />;
53 | }
54 | 


--------------------------------------------------------------------------------
/features/category/components/FeaturedCategories.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import Boundary from '@/components/internal/Boundary';
 3 | import { getCategoriesWithCount } from '../category-queries';
 4 | import type { Route } from 'next';
 5 | 
 6 | export default async function FeaturedCategories() {
 7 |   'use cache';
 8 | 
 9 |   const categoriesWithCount = await getCategoriesWithCount();
10 |   const categoryList = categoriesWithCount.slice(0, 4);
11 | 
12 |   return (
13 |     <Boundary rendering="hybrid" hydration="server" cached>
14 |       <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
15 |         {categoryList.map(category => {
16 |           return (
17 |             <Link
18 |               key={category.name}
19 |               href={`/all?category=${encodeURIComponent(category.name)}` as Route}
20 |               className="border-divider dark:border-divider-dark dark:bg-card-dark group hover:border-accent block border bg-white"
21 |             >
22 |               <div className="p-4">
23 |                 <h3 className="mb-2 text-lg font-bold tracking-tight text-black uppercase dark:text-white">
24 |                   {category.name}
25 |                 </h3>
26 |                 <p className="mb-4 text-sm text-gray-700 normal-case dark:text-gray-300">
27 |                   {category.description || `Discover our ${category.name.toLowerCase()} collection.`} {category.count}{' '}
28 |                   products available.
29 |                 </p>
30 |                 <span className="text-accent group-hover:text-accent-hover mt-2 inline-flex items-center text-sm font-semibold tracking-wide uppercase">
31 |                   Explore {category.name} <span className="ml-1">→</span>
32 |                 </span>
33 |               </div>
34 |             </Link>
35 |           );
36 |         })}
37 |       </div>
38 |     </Boundary>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/components/Search.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import Form from 'next/form';
 4 | import { useRouter, useSearchParams } from 'next/navigation';
 5 | import React, { useTransition } from 'react';
 6 | import Boundary from './internal/Boundary';
 7 | import SearchStatus from './ui/SearchStatus';
 8 | import type { Route } from 'next';
 9 | 
10 | export default function Search() {
11 |   const searchParams = useSearchParams();
12 |   const q = searchParams.get('q') || '';
13 |   const router = useRouter();
14 |   const [isPending, startTransition] = useTransition();
15 | 
16 |   return (
17 |     <>
18 |       <Boundary hydration="client">
19 |         <Form className="relative" action={'' as Route}>
20 |           <input
21 |             className="pl-9 text-sm outline-offset-2 focus:outline-2"
22 |             name="q"
23 |             onChange={e => {
24 |               const newSearchParams = new URLSearchParams(searchParams.toString());
25 |               newSearchParams.set('q', e.target.value);
26 |               startTransition(() => {
27 |                 router.push(`?${newSearchParams.toString()}`, {
28 |                   scroll: false,
29 |                 });
30 |               });
31 |             }}
32 |             defaultValue={q}
33 |             type="search"
34 |             placeholder={'Search products...'}
35 |           />
36 |           <div className="text-gray absolute top-1/2 left-3 -translate-y-1/2">
37 |             <SearchStatus searching={isPending} />
38 |           </div>
39 |         </Form>
40 |       </Boundary>
41 |     </>
42 |   );
43 | }
44 | 
45 | export function SearchSkeleton() {
46 |   return (
47 |     <div className="relative">
48 |       <input className="pl-9 text-sm outline-offset-2" placeholder="Loading..." disabled />
49 |       <div className="absolute top-1/2 left-3 -translate-y-1/2">
50 |         <div className="skeleton-animation h-4 w-4 rounded-full" />
51 |       </div>
52 |     </div>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/components/internal/BoundaryToggle.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { Droplets, Layers, Square } from 'lucide-react';
 4 | import { useBoundaryMode } from './BoundaryProvider';
 5 | import type { BoundaryMode } from './BoundaryProvider';
 6 | 
 7 | const modes: { icon: React.ReactNode; label: string; mode: BoundaryMode }[] = [
 8 |   { icon: <Square className="size-4" />, label: 'Off', mode: 'off' },
 9 |   { icon: <Droplets className="size-4" />, label: 'Hydration', mode: 'hydration' },
10 |   { icon: <Layers className="size-4" />, label: 'Rendering', mode: 'rendering' },
11 | ];
12 | 
13 | export default function BoundaryToggle() {
14 |   const { mode, setMode } = useBoundaryMode();
15 | 
16 |   return (
17 |     <div className="fixed right-8 bottom-4 z-50">
18 |       <div className="bg-card dark:bg-card-dark flex gap-1 rounded-md p-1 shadow-lg">
19 |         {modes.map(({ icon, label, mode: modeOption }) => {
20 |           const isActive = mode === modeOption;
21 | 
22 |           return (
23 |             <button
24 |               key={modeOption}
25 |               className={`focus:ring-accent flex items-center gap-2 rounded px-3 py-2 text-sm font-medium tracking-wide uppercase transition-all duration-200 focus:ring-offset-2 focus-visible:ring-2 focus-visible:outline-none dark:focus:ring-offset-gray-900 ${
26 |                 isActive
27 |                   ? 'bg-accent hover:bg-accent-hover text-white shadow-sm'
28 |                   : 'bg-transparent text-black hover:bg-gray-200 dark:text-white dark:hover:bg-gray-800'
29 |               }`}
30 |               onClick={() => {
31 |                 setMode(modeOption);
32 |               }}
33 |               title={`Switch to ${label} boundaries`}
34 |               type="button"
35 |             >
36 |               {icon}
37 |               <span className="hidden sm:inline">{label}</span>
38 |             </button>
39 |           );
40 |         })}
41 |       </div>
42 |     </div>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next15-commerce",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "eslint .",
10 |     "typegen": "next typegen .",
11 |     "prisma.studio": "npx prisma studio",
12 |     "prisma.seed": "tsx prisma/seed.ts",
13 |     "prisma.migrate": "npx prisma migrate dev",
14 |     "prisma.push": "npx prisma db push"
15 |   },
16 |   "dependencies": {
17 |     "@ariakit/react": "^0.4.19",
18 |     "@prisma/client": "6.1.0",
19 |     "@tailwindcss/postcss": "^4.1.15",
20 |     "@types/node": "24.9.1",
21 |     "@types/react": "19.2.2",
22 |     "@types/react-dom": "19.2.2",
23 |     "@vercel/analytics": "^1.5.0",
24 |     "@vercel/speed-insights": "^1.2.0",
25 |     "babel-plugin-react-compiler": "^19.1.0-rc.2",
26 |     "clsx": "^2.1.1",
27 |     "eslint": "9.38.0",
28 |     "framer-motion": "^12.23.24",
29 |     "lucide-react": "^0.546.0",
30 |     "next": "^16.1.0",
31 |     "postcss": "^8.5.6",
32 |     "react": "^19.2.0",
33 |     "react-dom": "^19.2.0",
34 |     "react-error-boundary": "^6.0.0",
35 |     "server-only": "^0.0.1",
36 |     "swr": "^2.3.6",
37 |     "tailwind-merge": "^3.3.1",
38 |     "tailwindcss": "^4.1.15",
39 |     "tsx": "^4.20.6",
40 |     "typescript": "5.9.3"
41 |   },
42 |   "devDependencies": {
43 |     "@eslint/compat": "^1.4.0",
44 |     "@eslint/eslintrc": "^3.3.1",
45 |     "@eslint/js": "^9.38.0",
46 |     "@tailwindcss/typography": "^0.5.19",
47 |     "@types/eslint": "^9.6.1",
48 |     "@typescript-eslint/eslint-plugin": "^8.46.2",
49 |     "eslint-config-next": "15.5.6",
50 |     "eslint-config-prettier": "^10.1.8",
51 |     "eslint-plugin-autofix": "^2.2.0",
52 |     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
53 |     "eslint-plugin-sort-keys-fix": "^1.1.2",
54 |     "globals": "^16.4.0",
55 |     "prettier": "^3.6.2",
56 |     "prettier-plugin-tailwindcss": "^0.7.1",
57 |     "prisma": "6.1.0"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/features/product/components/Product.tsx:
--------------------------------------------------------------------------------
 1 | import { cacheTag } from 'next/dist/server/use-cache/cache-tag';
 2 | import React from 'react';
 3 | import Boundary from '@/components/internal/Boundary';
 4 | import ImagePlaceholder from '@/components/ui/ImagePlaceholder';
 5 | import Skeleton from '@/components/ui/Skeleton';
 6 | import { cn } from '@/utils/cn';
 7 | import { getProduct } from '../product-queries';
 8 | 
 9 | type Props = {
10 |   productId: number;
11 |   imageClassName?: string;
12 |   details?: React.ReactNode;
13 | };
14 | 
15 | export default async function Product({ productId, details, imageClassName }: Props) {
16 |   'use cache';
17 | 
18 |   cacheTag('product-' + productId);
19 | 
20 |   const product = await getProduct(productId);
21 | 
22 |   return (
23 |     <Boundary rendering="hybrid" hydration="server" cached>
24 |       <div className="flex flex-col bg-white dark:bg-black">
25 |         <ImagePlaceholder className={imageClassName} />
26 |         <div className="flex flex-1 flex-col p-5">
27 |           <h2 className="mb-3 text-xl font-bold tracking-tight">{product.name}</h2>
28 |           {product.description && (
29 |             <p className="mb-4 flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300">
30 |               {product.description}
31 |             </p>
32 |           )}
33 |           <div className="mt-auto flex items-center justify-between">
34 |             <p className="text-accent text-lg font-bold tracking-wide">${product.price.toFixed(2)}</p>
35 |           </div>
36 |         </div>
37 |         {details}
38 |       </div>
39 |     </Boundary>
40 |   );
41 | }
42 | 
43 | export function ProductSkeleton({ className, isDetails = false }: { className?: string; isDetails?: boolean }) {
44 |   return (
45 |     <div className={cn('flex flex-col bg-white dark:bg-black', className)}>
46 |       <div className={cn('bg-card dark:bg-card-dark w-full', isDetails ? 'h-96' : 'h-60')} />
47 |       <Skeleton className="p-[22px]" />
48 |     </div>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/components/ui/Button.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { Loader2 } from 'lucide-react';
 4 | import React from 'react';
 5 | import { useFormStatus } from 'react-dom';
 6 | import { cn } from '@/utils/cn';
 7 | import Boundary from '../internal/Boundary';
 8 | 
 9 | type Props = {
10 |   children: React.ReactNode;
11 |   className?: string;
12 |   loading?: boolean;
13 |   type?: 'button' | 'submit' | 'reset';
14 |   variant?: 'primary' | 'secondary';
15 | };
16 | 
17 | export default function Button({
18 |   children,
19 |   loading,
20 |   type = 'submit',
21 |   variant = 'primary',
22 |   className,
23 |   disabled,
24 |   ...otherProps
25 | }: Props & React.HTMLProps<HTMLButtonElement>) {
26 |   const { pending } = useFormStatus();
27 |   const isSubmitting = loading || pending;
28 | 
29 |   const baseClasses =
30 |     'inline-flex items-center justify-center px-5 py-2.5 font-semibold uppercase tracking-wide transition-colors focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 focus:ring-offset-2 dark:focus:ring-offset-gray-900';
31 | 
32 |   const variantClasses = {
33 |     primary:
34 |       'bg-accent text-white hover:bg-accent-hover focus:ring-accent disabled:bg-gray-400 dark:disabled:bg-gray-600',
35 |     secondary:
36 |       'bg-card dark:bg-card-dark border border-divider dark:border-divider-dark text-black dark:text-white hover:bg-gray-200 dark:hover:bg-[#1a1a1a] focus:ring-accent',
37 |   } as const;
38 | 
39 |   return (
40 |     <Boundary hydration="client">
41 |       <button
42 |         disabled={isSubmitting || disabled}
43 |         type={type}
44 |         className={cn(baseClasses, variantClasses[variant], className)}
45 |         {...otherProps}
46 |       >
47 |         {isSubmitting ? (
48 |           <div className="flex items-center justify-center gap-2">
49 |             {children}
50 |             <Loader2 className="h-4 w-4 animate-spin" />
51 |           </div>
52 |         ) : (
53 |           children
54 |         )}
55 |       </button>
56 |     </Boundary>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/components/ui/Modal.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { Dialog, DialogDismiss, DialogHeading } from '@ariakit/react';
 4 | import { useRouter } from 'next/navigation';
 5 | import React from 'react';
 6 | import Boundary from '../internal/Boundary';
 7 | import Button from './Button';
 8 | 
 9 | type Props = {
10 |   open: boolean;
11 |   setOpen?: (open: boolean) => void;
12 |   goBackOnClose?: boolean;
13 |   children: React.ReactNode;
14 |   title?: string;
15 | };
16 | 
17 | export default function Modal({ open, setOpen, children, goBackOnClose = false, title }: Props) {
18 |   const router = useRouter();
19 | 
20 |   const handleClose = () => {
21 |     setOpen?.(false);
22 |     if (goBackOnClose) {
23 |       router.back();
24 |     }
25 |   };
26 | 
27 |   return (
28 |     <Dialog
29 |       open={open}
30 |       onClose={handleClose}
31 |       backdrop={
32 |         <div className="fixed inset-0 bg-black/70 backdrop-blur-md dark:bg-white/20" style={{ zIndex: 9998 }} />
33 |       }
34 |       className="border-divider dark:border-divider-dark fixed top-1/2 left-1/2 w-[90%] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-white p-0 shadow-xl dark:bg-black"
35 |       style={{ zIndex: 9999 }}
36 |     >
37 |       <Boundary hydration="client">
38 |         <div className="flex w-full flex-col">
39 |           {title && (
40 |             <DialogHeading className="border-divider dark:border-divider-dark m-0 border-b px-5 py-4 text-lg font-semibold">
41 |               {title}
42 |             </DialogHeading>
43 |           )}
44 |           <div className="max-h-[70vh] overflow-y-auto p-5">{children}</div>
45 |           <div className="border-divider dark:border-divider-dark flex justify-end border-t px-5 py-4">
46 |             <DialogDismiss
47 |               render={
48 |                 <Button variant="secondary" type="button">
49 |                   Close
50 |                 </Button>
51 |               }
52 |             />
53 |           </div>
54 |         </div>
55 |       </Boundary>
56 |     </Dialog>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/features/product/components/ProductList.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Pagination from '@/components/Pagination';
 3 | import Boundary from '@/components/internal/Boundary';
 4 | import ProductCard, { ProductCardSkeleton } from '@/components/ui/ProductCard';
 5 | import { getProducts } from '../product-queries';
 6 | 
 7 | export type SearchParams = {
 8 |   page?: string;
 9 |   q?: string;
10 |   sort?: 'asc' | 'desc';
11 |   category?: string;
12 | };
13 | 
14 | type Props = {
15 |   searchParams: Promise<SearchParams>;
16 | };
17 | 
18 | export default async function ProductList({ searchParams }: Props) {
19 |   const resolvedSearchParams = (await searchParams) as SearchParams;
20 |   const { q, sort, page, category } = resolvedSearchParams;
21 |   const pageNumber = page ? parseInt(page, 10) : 1;
22 |   const { products, totalPages, currentPage } = await getProducts(q, sort, pageNumber, 9, category);
23 |   const hasProducts = products.length > 0;
24 | 
25 |   if (!hasProducts) {
26 |     return <p className="text-gray w-full self-center py-8 text-center italic">No products found.</p>;
27 |   }
28 | 
29 |   return (
30 |     <Boundary rendering="hybrid" hydration="server">
31 |       <div className="flex h-full grow flex-col justify-between gap-4 sm:gap-8">
32 |         <div className="grid-cols-auto 3xl:grid-cols-3 grid gap-8 md:grid-cols-2">
33 |           {products.map(product => {
34 |             return (
35 |               <ProductCard
36 |                 key={product.id}
37 |                 id={product.id}
38 |                 name={product.name}
39 |                 price={product.price}
40 |                 description={product.description || undefined}
41 |                 variant="compact"
42 |                 enableQuickPreview
43 |               />
44 |             );
45 |           })}
46 |         </div>
47 |         {totalPages > 1 && (
48 |           <div className="flex justify-center">
49 |             <Pagination searchParams={resolvedSearchParams} currentPage={currentPage} totalPages={totalPages} />
50 |           </div>
51 |         )}
52 |       </div>
53 |     </Boundary>
54 |   );
55 | }
56 | 
57 | export function ProductListSkeleton() {
58 |   return (
59 |     <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3">
60 |       {Array.from({ length: 6 }).map((_, i) => {
61 |         return <ProductCardSkeleton key={i} variant="compact" />;
62 |       })}
63 |     </div>
64 |   );
65 | }
66 | 


--------------------------------------------------------------------------------
/features/product/components/Hero.tsx:
--------------------------------------------------------------------------------
 1 | import { cacheTag } from 'next/dist/server/use-cache/cache-tag';
 2 | import Boundary from '@/components/internal/Boundary';
 3 | import ImagePlaceholder from '@/components/ui/ImagePlaceholder';
 4 | import LinkButton from '@/components/ui/LinkButton';
 5 | import { getFeaturedProducts } from '../product-queries';
 6 | import type { Route } from 'next';
 7 | 
 8 | export default async function Hero() {
 9 |   'use cache';
10 | 
11 |   cacheTag('featured-product');
12 | 
13 |   const featuredProducts = await getFeaturedProducts(1);
14 |   const heroProduct = featuredProducts[0];
15 | 
16 |   return (
17 |     <Boundary rendering="hybrid" hydration="server" cached>
18 |       <div className="border-divider dark:border-divider-dark dark:bg-card-dark relative grid gap-6 border bg-white p-6 md:grid-cols-[2fr,1fr]">
19 |         <div className="flex flex-col justify-center">
20 |           <span className="mb-3 inline-block w-fit bg-black px-2.5 py-1 text-xs font-bold tracking-[0.2em] text-white uppercase dark:bg-white dark:text-black">
21 |             Fall Conference Special
22 |           </span>
23 |           <h1 className="mb-4 text-4xl font-bold tracking-tight uppercase">
24 |             {heroProduct ? `Featured: ${heroProduct.name}` : 'Transform Your Experience with Next-Gen Tech'}
25 |           </h1>
26 |           <p className="mb-6 max-w-xl text-gray-700 dark:text-gray-300">
27 |             {heroProduct
28 |               ? `Discover the ${heroProduct.name} and our premium selection of electronics. Starting at $${heroProduct.price}.`
29 |               : 'Discover exclusive offers on our premium selection of electronics and accessories. Upgrade your setup with cutting-edge technology designed for professionals.'}
30 |           </p>
31 |           <div className="flex flex-wrap gap-4">
32 |             <LinkButton
33 |               href={heroProduct ? (`/product/${heroProduct.id}` as Route) : ('/product/1' as Route)}
34 |               variant="primary"
35 |             >
36 |               {heroProduct ? 'View Product' : 'Shop Now'}
37 |             </LinkButton>
38 |             <LinkButton href="/all" variant="secondary">
39 |               Browse All
40 |             </LinkButton>
41 |           </div>
42 |         </div>
43 |         <div className="relative flex items-center justify-center overflow-hidden">
44 |           <ImagePlaceholder className="h-64 w-full" />
45 |         </div>
46 |       </div>
47 |     </Boundary>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/components/Pagination.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import Boundary from './internal/Boundary';
 3 | import LinkStatus from './ui/LinkStatus';
 4 | import type { SearchParams } from 'next/dist/server/request/search-params';
 5 | 
 6 | export default function Pagination({
 7 |   currentPage,
 8 |   totalPages,
 9 |   searchParams,
10 | }: {
11 |   currentPage: number;
12 |   totalPages: number;
13 |   searchParams: SearchParams;
14 | }) {
15 |   const createPageUrl = (page: number) => {
16 |     const query: Record<string, string> = {};
17 |     Object.entries(searchParams).forEach(([key, value]) => {
18 |       if (key !== 'page' && value) {
19 |         query[key] = value.toString();
20 |       }
21 |     });
22 |     if (page > 1) {
23 |       query.page = page.toString();
24 |     }
25 |     return {
26 |       pathname: '/all',
27 |       query,
28 |     };
29 |   };
30 | 
31 |   return (
32 |     <Boundary>
33 |       <div className="flex items-center gap-2">
34 |         {currentPage > 1 && (
35 |           <Link
36 |             scroll={false}
37 |             href={createPageUrl(currentPage - 1)}
38 |             className="inline-flex items-center px-3 py-2 text-sm font-medium"
39 |           >
40 |             <LinkStatus>Previous</LinkStatus>
41 |           </Link>
42 |         )}
43 |         <div className="flex items-center gap-1">
44 |           {Array.from({ length: totalPages }, (_, i) => {
45 |             return i + 1;
46 |           }).map(page => {
47 |             return (
48 |               <Link scroll={false} key={page} href={createPageUrl(page)}>
49 |                 <LinkStatus
50 |                   className={`inline-flex items-center px-3 py-2 text-sm font-medium ${
51 |                     page === currentPage
52 |                       ? 'bg-primary text-white dark:text-black'
53 |                       : 'text-primary hover:text-primary-dark'
54 |                   }`}
55 |                   variant="background"
56 |                 >
57 |                   {page}
58 |                 </LinkStatus>
59 |               </Link>
60 |             );
61 |           })}
62 |         </div>
63 |         {currentPage < totalPages && (
64 |           <Link
65 |             scroll={false}
66 |             href={createPageUrl(currentPage + 1)}
67 |             className="inline-flex items-center px-3 py-2 text-sm font-medium"
68 |           >
69 |             <LinkStatus>Next</LinkStatus>
70 |           </Link>
71 |         )}
72 |       </div>
73 |     </Boundary>
74 |   );
75 | }
76 | 


--------------------------------------------------------------------------------
/features/product/components/Reviews.tsx:
--------------------------------------------------------------------------------
 1 | import { Star } from 'lucide-react';
 2 | import Boundary from '@/components/internal/Boundary';
 3 | import { getReviews } from '../product-queries';
 4 | 
 5 | type Props = {
 6 |   productId: number;
 7 | };
 8 | 
 9 | export default async function Reviews({ productId }: Props) {
10 |   'use cache';
11 | 
12 |   const reviews = await getReviews(productId);
13 | 
14 |   return (
15 |     <Boundary rendering="hybrid" cached hydration="server">
16 |       <div className="space-y-4">
17 |         {reviews.length === 0 ? (
18 |           <p className="py-8 text-center text-gray-600 dark:text-gray-400">No reviews yet for this product.</p>
19 |         ) : (
20 |           <div className="space-y-4">
21 |             {reviews.map(review => {
22 |               return (
23 |                 <div
24 |                   key={review.id}
25 |                   className="border-divider dark:border-divider-dark border bg-white p-5 dark:bg-black"
26 |                 >
27 |                   <div className="mb-4 flex items-center justify-between">
28 |                     <div className="flex items-center gap-2">
29 |                       {[...Array(5)].map((_, i) => {
30 |                         return (
31 |                           <Star
32 |                             key={i}
33 |                             className={`h-4 w-4 ${i < review.rating ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300 dark:text-gray-600'}`}
34 |                             aria-hidden="true"
35 |                           />
36 |                         );
37 |                       })}
38 |                       <span className="ml-1 text-sm font-medium tracking-wide uppercase">{review.rating}/5</span>
39 |                     </div>
40 |                     <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
41 |                       {new Date().toLocaleDateString()}
42 |                     </span>
43 |                   </div>
44 |                   {review.comment && (
45 |                     <p className="leading-relaxed text-gray-700 dark:text-gray-300">{review.comment}</p>
46 |                   )}
47 |                 </div>
48 |               );
49 |             })}
50 |           </div>
51 |         )}
52 |       </div>
53 |     </Boundary>
54 |   );
55 | }
56 | 
57 | export function ReviewsSkeleton() {
58 |   return (
59 |     <div className="my-2 mb-5 p-2">
60 |       <div className="skeleton-animation mb-2 h-3 w-10 rounded-xs" />
61 |       <div className="skeleton-animation mb-2 h-4 rounded-xs" />
62 |       <div className="skeleton-animation mb-2 h-4 rounded-xs" />
63 |     </div>
64 |   );
65 | }
66 | 


--------------------------------------------------------------------------------
/features/user/components/Discounts.tsx:
--------------------------------------------------------------------------------
 1 | import { Percent } from 'lucide-react';
 2 | import React from 'react';
 3 | 
 4 | import Boundary from '@/components/internal/Boundary';
 5 | import { getUserDiscounts } from '../user-queries';
 6 | 
 7 | export default async function Discounts() {
 8 |   const discounts = await getUserDiscounts();
 9 | 
10 |   if (discounts.length === 0) {
11 |     return (
12 |       <div className="py-8 text-center">
13 |         <p className="text-gray-500 dark:text-gray-400">No discounts available</p>
14 |       </div>
15 |     );
16 |   }
17 | 
18 |   return (
19 |     <Boundary rendering="dynamic" hydration="server">
20 |       <div className="space-y-4">
21 |         {discounts.map(discount => {
22 |           return (
23 |             <div
24 |               key={discount.id}
25 |               className="border-divider dark:border-divider-dark flex items-center justify-between border bg-white p-4 dark:bg-black"
26 |             >
27 |               <div className="flex items-center gap-3">
28 |                 <Percent className="text-primary h-5 w-5" />
29 |                 <div>
30 |                   <p className="font-bold tracking-tight uppercase">{discount.code}</p>
31 |                   <p className="text-sm text-gray-600 dark:text-gray-400">{discount.description}</p>
32 |                 </div>
33 |               </div>
34 |               <div className="text-right">
35 |                 <p className="text-xs text-gray-500 dark:text-gray-400">
36 |                   Expires: {discount.expiry.toLocaleDateString()}
37 |                 </p>
38 |               </div>
39 |             </div>
40 |           );
41 |         })}
42 |       </div>
43 |     </Boundary>
44 |   );
45 | }
46 | 
47 | export function DiscountsSkeleton() {
48 |   return (
49 |     <div className="space-y-4">
50 |       {Array.from({ length: 3 }).map((_, index) => {
51 |         return (
52 |           <div
53 |             key={index}
54 |             className="border-divider dark:border-divider-dark flex items-center justify-between border bg-white p-[22px] dark:bg-black"
55 |           >
56 |             <div className="flex items-center gap-3">
57 |               <div className="skeleton-animation h-5 w-5 rounded" />
58 |               <div>
59 |                 <div className="skeleton-animation mb-1 h-4 w-20 rounded" />
60 |                 <div className="skeleton-animation h-3 w-32 rounded" />
61 |               </div>
62 |             </div>
63 |             <div className="text-right">
64 |               <div className="skeleton-animation h-3 w-16 rounded" />
65 |             </div>
66 |           </div>
67 |         );
68 |       })}
69 |     </div>
70 |   );
71 | }
72 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Next.js 16 Commerce
 2 | 
 3 | A responsive and interactive e-commerce application built with Next.js 16 App Router, built with Prisma and TailwindCSS, utilizing `use cache` for performance optimization.
 4 | 
 5 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 6 | 
 7 | ## Getting Started
 8 | 
 9 | First, install the dependencies:
10 | 
11 | ```bash
12 | npm install --force
13 | # or
14 | yarn install --force
15 | # or
16 | pnpm install --force
17 | ```
18 | 
19 | Then, run the development server:
20 | 
21 | ```bash
22 | npm run dev
23 | # or
24 | yarn dev
25 | # or
26 | pnpm dev
27 | ```
28 | 
29 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
30 | 
31 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
32 | 
33 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
34 | 
35 | ## Prisma Setup
36 | 
37 | You need decide between prisma local development with `sqlite` or a real database with for example `postgresql` or `sqlserver`. Define it in the `schema.prisma` file.
38 | 
39 | Consider adding a `.env` file to the root of the project and use the environment variables inside `schema.prisma` with `env("DATABASE_URL")`, refer to `.env.sample`.
40 | 
41 | When using sqlite, initialize the database with:
42 | 
43 | ```bash
44 | npm run prisma.push
45 | ```
46 | 
47 | Seed prisma/seed.ts for initial data:
48 | 
49 | ```sh
50 | npm run prisma.seed
51 | ```
52 | 
53 | To view your data in the database, you can run:
54 | 
55 | ```bash
56 | npm run prisma.studio
57 | ```
58 | 
59 | When using a real database with for example postgresql or sqlserver, you need to migrate the database schema with:
60 | 
61 | ```bash
62 | npm run prisma.migrate
63 | ```
64 | 
65 | ## Learn More
66 | 
67 | To learn more about Next.js, take a look at the following resources:
68 | 
69 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
70 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
71 | 
72 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
73 | 
74 | ## Deploy on Vercel
75 | 
76 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
77 | 
78 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
79 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @import 'tailwindcss';
 2 | 
 3 | @theme {
 4 |   --color-gray: #9ca3af;
 5 |   --color-divider-dark: #303030;
 6 |   --color-divider: #d1d5db;
 7 |   --color-card-dark: #1a1a1a;
 8 |   --color-card: #f5f5f5;
 9 |   --color-section: #111111;
10 | 
11 |   --color-primary: #2457fa;
12 |   --color-primary-dark: #1d47cf;
13 |   --color-primary-darker: #142f8b;
14 |   --color-accent: #1b50ff;
15 |   --color-accent-hover: #1340d1;
16 |   --color-accent-fade: #214fff33;
17 | 
18 |   --color-success: #0fa958;
19 |   --color-danger: #e54848;
20 |   --color-warning: #f5a524;
21 | 
22 |   --font-mono: var(--font-geist-mono);
23 |   --font-sans: var(--font-geist-sans);
24 |   --tracking-tight: -0.02em;
25 |   --tracking-wide: 0.08em;
26 |   --breakpoint-3xl: 120rem;
27 |   --breakpoint-4xl: 140rem;
28 | }
29 | 
30 | @layer base {
31 |   body {
32 |     @apply bg-white font-sans text-black antialiased dark:bg-black dark:text-white selection:bg-accent selection:text-white;
33 |   }
34 | 
35 |   h1 {
36 |     @apply font-sans text-[clamp(2.75rem,5vw,4.25rem)] font-semibold leading-[0.95] tracking-tight text-black dark:text-white;
37 |   }
38 | 
39 |   h2 {
40 |     @apply font-sans text-[clamp(1.75rem,3.2vw,2.75rem)] font-medium leading-tight tracking-tight text-black dark:text-white;
41 |   }
42 | 
43 |   h3 {
44 |     @apply font-sans text-xl md:text-2xl font-medium tracking-tight text-black dark:text-white;
45 |   }
46 |   
47 |   input {
48 |     @apply w-full border border-divider bg-white px-3 py-2 text-sm text-black placeholder-gray focus:border-accent focus:ring-1 focus:ring-accent focus:outline-none dark:border-divider-dark dark:bg-black dark:text-white dark:placeholder-gray;
49 |   }
50 |   
51 |   label {
52 |     @apply mb-2 block text-sm font-medium text-gray dark:text-gray;
53 |   }
54 |   
55 |   a {
56 |     @apply font-medium uppercase text-accent no-underline transition-colors hover:text-accent-hover;
57 |   }
58 | }
59 | 
60 | .skeleton-animation {
61 |   background: rgba(150, 150, 150, 0.2);
62 |   background: -webkit-gradient(
63 |     linear,
64 |     left top,
65 |     right top,
66 |     color-stop(8%, rgba(130, 130, 130, 0.2)),
67 |     color-stop(18%, rgba(170, 170, 170, 0.3)),
68 |     color-stop(33%, rgba(150, 150, 150, 0.2))
69 |   );
70 |   background: linear-gradient(
71 |     to right,
72 |     rgba(130, 130, 130, 0.2) 8%,
73 |     rgba(170, 170, 170, 0.3) 18%,
74 |     rgba(150, 150, 150, 0.2) 33%
75 |   );
76 |   background-size: 800px 100px;
77 |   animation: wave-lines 2s infinite ease-out;
78 | }
79 | 
80 | @keyframes wave-lines {
81 |   0% {
82 |     background-position: -468px 0;
83 |   }
84 |   100% {
85 |     background-position: 468px 0;
86 |   }
87 | }
88 | @keyframes wave-squares {
89 |   0% {
90 |     background-position: -468px 0;
91 |   }
92 |   100% {
93 |     background-position: 468px 0;
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/features/user/components/SavedProducts.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import React from 'react';
 3 | import Boundary from '@/components/internal/Boundary';
 4 | import ImagePlaceholder from '@/components/ui/ImagePlaceholder';
 5 | import { getSavedProducts } from '../../product/product-queries';
 6 | import SaveProductButton from './SaveProductButton';
 7 | 
 8 | export default async function SavedProducts() {
 9 |   const savedProducts = await getSavedProducts();
10 | 
11 |   if (savedProducts.length === 0) {
12 |     return (
13 |       <div className="py-8 text-center">
14 |         <p className="text-gray-600 dark:text-gray-400">You haven&apos;t saved any products yet.</p>
15 |         <Link
16 |           href="/"
17 |           className="text-primary hover:text-primary-dark mt-2 inline-block text-sm font-semibold tracking-wide uppercase"
18 |         >
19 |           Browse products
20 |         </Link>
21 |       </div>
22 |     );
23 |   }
24 | 
25 |   return (
26 |     <Boundary rendering="dynamic" hydration="server">
27 |       <div className="space-y-3">
28 |         {savedProducts.map(product => {
29 |           return (
30 |             <div
31 |               key={product.id}
32 |               className="border-divider dark:border-divider-dark flex items-center gap-4 border bg-white p-4 transition-colors hover:bg-gray-50/50 dark:bg-black dark:hover:bg-neutral-800/30"
33 |             >
34 |               <ImagePlaceholder variant="simple" className="size-12 flex-shrink-0" />
35 |               <div className="min-w-0 flex-1">
36 |                 <Link href={`/product/${product.id}`} className="block">
37 |                   <h3 className="truncate text-sm font-semibold tracking-wide uppercase">{product.name}</h3>
38 |                   <p className="text-primary text-sm font-medium">${product.price.toFixed(2)}</p>
39 |                 </Link>
40 |               </div>
41 |               <SaveProductButton productId={product.id} initialSaved={true} />
42 |             </div>
43 |           );
44 |         })}
45 |       </div>
46 |     </Boundary>
47 |   );
48 | }
49 | 
50 | export function SavedProductsSkeleton() {
51 |   return (
52 |     <div className="space-y-3">
53 |       {Array.from({ length: 3 }).map((_, index) => {
54 |         return (
55 |           <div
56 |             key={index}
57 |             className="border-divider dark:border-divider-dark flex items-center gap-4 border bg-white p-4 dark:bg-black"
58 |           >
59 |             <div className="size-12 flex-shrink-0 rounded bg-gray-200 dark:bg-neutral-800" />
60 |             <div className="flex-1">
61 |               <div className="skeleton-animation mb-1 h-4 w-3/4 rounded" />
62 |               <div className="skeleton-animation h-3 w-1/4 rounded" />
63 |             </div>
64 |             <div className="skeleton-animation h-8 w-8 rounded" />
65 |           </div>
66 |         );
67 |       })}
68 |     </div>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/components/ui/ImagePlaceholder.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { cn } from '@/utils/cn';
 3 | 
 4 | type Props = {
 5 |   className?: string;
 6 |   variant?: 'default' | 'simple';
 7 | };
 8 | 
 9 | export default function ImagePlaceholder({ className, variant = 'default' }: Props) {
10 |   if (variant === 'simple') {
11 |     return (
12 |       <div className={cn('bg-card dark:bg-card-dark flex items-center justify-center', className)}>
13 |         <svg
14 |           xmlns="http://www.w3.org/2000/svg"
15 |           className="text-gray h-8 w-8"
16 |           fill="none"
17 |           viewBox="0 0 24 24"
18 |           stroke="currentColor"
19 |         >
20 |           <path
21 |             strokeLinecap="round"
22 |             strokeLinejoin="round"
23 |             strokeWidth={1.5}
24 |             d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
25 |           />
26 |         </svg>
27 |       </div>
28 |     );
29 |   }
30 |   return (
31 |     <div
32 |       className={cn(
33 |         'bg-card dark:bg-card-dark relative flex h-96 w-full items-center justify-center overflow-hidden',
34 |         className,
35 |       )}
36 |     >
37 |       {/* Stretched background pattern */}
38 |       <div className="absolute inset-0 opacity-15">
39 |         <div className="from-gray/20 to-gray/20 h-full w-full bg-gradient-to-br via-transparent" />
40 |         <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.08)_25%,rgba(255,255,255,0.08)_50%,transparent_50%,transparent_75%,rgba(255,255,255,0.08)_75%)] bg-[length:20px_20px]" />
41 |       </div>
42 | 
43 |       {/* Centered icon with subtle glow */}
44 |       <div className="relative z-10 flex flex-col items-center gap-3">
45 |         <div className="bg-gray/10 rounded-full p-4">
46 |           <svg
47 |             xmlns="http://www.w3.org/2000/svg"
48 |             className="text-gray h-16 w-16"
49 |             fill="none"
50 |             viewBox="0 0 24 24"
51 |             stroke="currentColor"
52 |           >
53 |             <path
54 |               strokeLinecap="round"
55 |               strokeLinejoin="round"
56 |               strokeWidth={1.5}
57 |               d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
58 |             />
59 |           </svg>
60 |         </div>
61 |         <span className="text-gray text-sm font-medium tracking-wide uppercase">Product Image</span>
62 |       </div>
63 | 
64 |       {/* Corner indicators showing stretch */}
65 |       <div className="border-gray/30 absolute top-2 left-2 h-6 w-6 border-t-2 border-l-2" />
66 |       <div className="border-gray/30 absolute top-2 right-2 h-6 w-6 border-t-2 border-r-2" />
67 |       <div className="border-gray/30 absolute bottom-2 left-2 h-6 w-6 border-b-2 border-l-2" />
68 |       <div className="border-gray/30 absolute right-2 bottom-2 h-6 w-6 border-r-2 border-b-2" />
69 |     </div>
70 |   );
71 | }
72 | 


--------------------------------------------------------------------------------
/prisma/migrations/20250801100125_init/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "public"."Account" (
 3 |     "id" TEXT NOT NULL,
 4 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
 5 |     "name" TEXT NOT NULL,
 6 |     "email" TEXT NOT NULL,
 7 |     "firstName" TEXT,
 8 |     "lastName" TEXT,
 9 |     "phone" TEXT,
10 |     "address" TEXT,
11 |     "city" TEXT,
12 |     "country" TEXT,
13 |     "zipCode" TEXT,
14 |     "birthDate" TIMESTAMP(3),
15 | 
16 |     CONSTRAINT "Account_pkey" PRIMARY KEY ("id")
17 | );
18 | 
19 | -- CreateTable
20 | CREATE TABLE "public"."AccountDetail" (
21 |     "id" SERIAL NOT NULL,
22 |     "accountId" TEXT NOT NULL,
23 |     "theme" TEXT DEFAULT 'light',
24 |     "language" TEXT DEFAULT 'en',
25 |     "timezone" TEXT,
26 |     "newsletter" BOOLEAN NOT NULL DEFAULT true,
27 |     "notifications" BOOLEAN NOT NULL DEFAULT true,
28 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
29 |     "updatedAt" TIMESTAMP(3) NOT NULL,
30 | 
31 |     CONSTRAINT "AccountDetail_pkey" PRIMARY KEY ("id")
32 | );
33 | 
34 | -- CreateTable
35 | CREATE TABLE "public"."Product" (
36 |     "id" SERIAL NOT NULL,
37 |     "name" TEXT NOT NULL,
38 |     "description" TEXT,
39 |     "price" DOUBLE PRECISION NOT NULL,
40 |     "category" TEXT,
41 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
42 |     "updatedAt" TIMESTAMP(3) NOT NULL,
43 | 
44 |     CONSTRAINT "Product_pkey" PRIMARY KEY ("id")
45 | );
46 | 
47 | -- CreateTable
48 | CREATE TABLE "public"."ProductDetail" (
49 |     "id" SERIAL NOT NULL,
50 |     "productId" INTEGER NOT NULL,
51 |     "sku" TEXT,
52 |     "brand" TEXT,
53 |     "stockCount" INTEGER NOT NULL DEFAULT 0,
54 |     "weight" DOUBLE PRECISION,
55 |     "dimensions" TEXT,
56 |     "materials" TEXT,
57 |     "origin" TEXT,
58 |     "warrantyInfo" TEXT,
59 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
60 |     "updatedAt" TIMESTAMP(3) NOT NULL,
61 | 
62 |     CONSTRAINT "ProductDetail_pkey" PRIMARY KEY ("id")
63 | );
64 | 
65 | -- CreateTable
66 | CREATE TABLE "public"."Review" (
67 |     "id" SERIAL NOT NULL,
68 |     "productId" INTEGER NOT NULL,
69 |     "rating" INTEGER NOT NULL,
70 |     "comment" TEXT,
71 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
72 |     "updatedAt" TIMESTAMP(3) NOT NULL,
73 | 
74 |     CONSTRAINT "Review_pkey" PRIMARY KEY ("id")
75 | );
76 | 
77 | -- CreateIndex
78 | CREATE UNIQUE INDEX "AccountDetail_accountId_key" ON "public"."AccountDetail"("accountId");
79 | 
80 | -- CreateIndex
81 | CREATE UNIQUE INDEX "ProductDetail_productId_key" ON "public"."ProductDetail"("productId");
82 | 
83 | -- AddForeignKey
84 | ALTER TABLE "public"."AccountDetail" ADD CONSTRAINT "AccountDetail_accountId_fkey" FOREIGN KEY ("accountId") REFERENCES "public"."Account"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
85 | 
86 | -- AddForeignKey
87 | ALTER TABLE "public"."ProductDetail" ADD CONSTRAINT "ProductDetail_productId_fkey" FOREIGN KEY ("productId") REFERENCES "public"."Product"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
88 | 
89 | -- AddForeignKey
90 | ALTER TABLE "public"."Review" ADD CONSTRAINT "Review_productId_fkey" FOREIGN KEY ("productId") REFERENCES "public"."Product"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
91 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
  1 | import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
  2 | import autofix from 'eslint-plugin-autofix';
  3 | import reactHooks from 'eslint-plugin-react-hooks';
  4 | import sortKeysFix from 'eslint-plugin-sort-keys-fix';
  5 | import reactCompiler from 'eslint-plugin-react-compiler';
  6 | import globals from 'globals';
  7 | import tsParser from '@typescript-eslint/parser';
  8 | import path from 'node:path';
  9 | import { fileURLToPath } from 'node:url';
 10 | import js from '@eslint/js';
 11 | import { FlatCompat } from '@eslint/eslintrc';
 12 | 
 13 | const __filename = fileURLToPath(import.meta.url);
 14 | const __dirname = path.dirname(__filename);
 15 | const compat = new FlatCompat({
 16 |   allConfig: js.configs.all,
 17 |   baseDirectory: __dirname,
 18 |   recommendedConfig: js.configs.recommended,
 19 | });
 20 | 
 21 | const eslintConfig = [{
 22 |   ignores: ["node_modules/**", ".next/**", "out/**", "build/**", "next-env.d.ts"]
 23 | }, {
 24 |   ignores: ['**/next-env.d.ts'],
 25 | }, ...fixupConfigRules(
 26 |   compat.extends(
 27 |     'eslint:recommended',
 28 |     'eslint-config-prettier',
 29 |     'plugin:react/recommended',
 30 |     'plugin:@typescript-eslint/recommended',
 31 |     'plugin:import/recommended',
 32 |     'plugin:jsx-a11y/recommended',
 33 |     'next',
 34 |     'next/core-web-vitals',
 35 |     'prettier',
 36 |   ),
 37 | ), {
 38 |   languageOptions: {
 39 |     ecmaVersion: 12,
 40 |     globals: {
 41 |       ...globals.browser,
 42 |     },
 43 |     parser: tsParser,
 44 |     parserOptions: {
 45 |       ecmaFeatures: {
 46 |         jsx: true,
 47 |       },
 48 |     },
 49 |     sourceType: 'module',
 50 |   },
 51 |   plugins: {
 52 |     autofix,
 53 |     'react-compiler': reactCompiler,
 54 |     'react-hooks': fixupPluginRules(reactHooks),
 55 |     'sort-keys-fix': sortKeysFix,
 56 |   },
 57 |   rules: {
 58 |     'react-compiler/react-compiler': 'error',
 59 |     'sort-keys-fix/sort-keys-fix': 'warn',
 60 |   },
 61 | }, {
 62 |   files: ['**/*.ts?(x)'],
 63 |   rules: {
 64 |     '@typescript-eslint/consistent-type-imports': [
 65 |       'warn',
 66 |       {
 67 |         prefer: 'type-imports',
 68 |       },
 69 |     ],
 70 |     'arrow-body-style': ['warn', 'always'],
 71 |     'autofix/no-unused-vars': [
 72 |       'warn',
 73 |       {
 74 |         argsIgnorePattern: '^_',
 75 |         destructuredArrayIgnorePattern: '^_',
 76 |         ignoreRestSiblings: true,
 77 |       },
 78 |     ],
 79 |     'import/order': [
 80 |       'warn',
 81 |       {
 82 |         alphabetize: {
 83 |           order: 'asc',
 84 |         },
 85 |         groups: ['builtin', 'external', 'parent', 'sibling', 'index', 'object', 'type'],
 86 |         pathGroups: [
 87 |           {
 88 |             group: 'parent',
 89 |             pattern: '@/**/**',
 90 |             position: 'before',
 91 |           },
 92 |         ],
 93 |       },
 94 |     ],
 95 |     'no-console': 'warn',
 96 |     'no-redeclare': 'warn',
 97 |     quotes: ['warn', 'single'],
 98 |     'react/display-name': 'error',
 99 |     'react/jsx-key': 'warn',
100 |     'react/react-in-jsx-scope': 'off',
101 |     'react/self-closing-comp': [
102 |       'error',
103 |       {
104 |         component: true,
105 |         html: true,
106 |       },
107 |     ],
108 |     'spaced-comment': 'warn',
109 |   },
110 | }];
111 | 
112 | export default eslintConfig;
113 | 


--------------------------------------------------------------------------------
/features/product/components/ProductDetails.tsx:
--------------------------------------------------------------------------------
  1 | import { Bookmark } from 'lucide-react';
  2 | import { cacheTag } from 'next/dist/server/use-cache/cache-tag';
  3 | import React from 'react';
  4 | import Boundary from '@/components/internal/Boundary';
  5 | import Button from '@/components/ui/Button';
  6 | import Divider from '@/components/ui/Divider';
  7 | import Skeleton from '@/components/ui/Skeleton';
  8 | import { getIsAuthenticated } from '@/features/auth/auth-queries';
  9 | import SaveProductButton from '../../user/components/SaveProductButton';
 10 | import { setFeaturedProduct } from '../product-actions';
 11 | import { getProductDetails, isSavedProduct } from '../product-queries';
 12 | 
 13 | type Props = {
 14 |   productId: number;
 15 |   children?: React.ReactNode;
 16 | };
 17 | 
 18 | export default async function ProductDetails({ productId, children }: Props) {
 19 |   'use cache';
 20 | 
 21 |   cacheTag('product-' + productId);
 22 | 
 23 |   const productDetails = await getProductDetails(productId);
 24 |   const setFeaturedForProduct = setFeaturedProduct.bind(null, productId);
 25 | 
 26 |   return (
 27 |     <Boundary rendering="hybrid" hydration="server" cached>
 28 |       <div className="border-divider dark:border-divider-dark w-full border bg-white p-5 dark:bg-black">
 29 |         <div className="flex justify-between">
 30 |           <h2 className="mb-4 text-lg font-bold tracking-tight">Product Details</h2>
 31 |           <form className="hidden sm:flex" action={setFeaturedForProduct}>
 32 |             <Button title="Mark as Featured" variant="secondary">
 33 |               Feature This Product
 34 |             </Button>
 35 |           </form>
 36 |         </div>
 37 |         <ProductDetailFields
 38 |           brand={productDetails?.brand}
 39 |           sku={productDetails?.sku}
 40 |           stockCount={productDetails?.stockCount}
 41 |           warrantyInfo={productDetails?.warrantyInfo}
 42 |           weight={productDetails?.weight}
 43 |         />
 44 |         <div className="mt-6">
 45 |           <Divider variant="dotted" className="mb-4" />
 46 |           <div className="flex flex-wrap gap-4">{children}</div>
 47 |         </div>
 48 |       </div>
 49 |     </Boundary>
 50 |   );
 51 | }
 52 | 
 53 | export async function SavedProduct({ productId }: { productId: number }) {
 54 |   const loggedIn = await getIsAuthenticated();
 55 | 
 56 |   if (!loggedIn) {
 57 |     return (
 58 |       <Boundary rendering="dynamic">
 59 |         <SaveProductButton productId={productId} initialSaved={false} />
 60 |       </Boundary>
 61 |     );
 62 |   }
 63 | 
 64 |   const productIsSaved = await isSavedProduct(productId);
 65 |   return <SaveProductButton productId={productId} initialSaved={productIsSaved} />;
 66 | }
 67 | 
 68 | export function ProductDetailsSkeleton() {
 69 |   return (
 70 |     <div className="border-divider dark:border-divider-dark w-full rounded-sm border bg-white p-5 dark:bg-black">
 71 |       <div className="skeleton-animation mt-2 mb-4 h-[46px] w-40 rounded-sm" />
 72 |       <Skeleton />
 73 |       <div className="skeleton-animation mb-4 h-6 w-38" />
 74 |       <div className="mt-6">
 75 |         <Divider variant="dotted" className="mb-4" />
 76 |         <Bookmark aria-hidden className="text-gray size-5" />
 77 |       </div>
 78 |     </div>
 79 |   );
 80 | }
 81 | 
 82 | type ProductDetailFieldsProps = {
 83 |   brand?: string | null;
 84 |   sku?: string | null;
 85 |   stockCount?: number | null;
 86 |   warrantyInfo?: string | null;
 87 |   weight?: number | null;
 88 | };
 89 | 
 90 | function ProductDetailFields({ brand, sku, stockCount, warrantyInfo, weight }: ProductDetailFieldsProps) {
 91 |   return (
 92 |     <div className="space-y-3 text-sm text-gray-700 dark:text-gray-300">
 93 |       <p>
 94 |         <span className="font-medium">Brand:</span> {brand || 'N/A'}
 95 |       </p>
 96 |       <p>
 97 |         <span className="font-medium">SKU:</span> {sku || 'N/A'}
 98 |       </p>
 99 |       <p>
100 |         <span className="font-medium">In Stock:</span> {stockCount || 0} units
101 |       </p>
102 |       <p>
103 |         <span className="font-medium">Weight:</span> {weight ? `${weight} kg` : 'N/A'}
104 |       </p>
105 |       <p>
106 |         <span className="font-medium">Warranty:</span> {warrantyInfo || 'No warranty information'}
107 |       </p>
108 |     </div>
109 |   );
110 | }
111 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
  1 | // This is your Prisma schema file,
  2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
  3 | 
  4 | generator client {
  5 |   provider = "prisma-client-js"
  6 | }
  7 | 
  8 | datasource db {
  9 |   provider = "postgresql"
 10 |   url      = env("DATABASE_URL") // Change to "file:./dev.db" with sqlite
 11 |   // shadowDatabaseUrl = env("SHADOW_DATABASE_URL") // For sqlserver, remove with sqlite and postgres
 12 | }
 13 | 
 14 | model Account {
 15 |   id        String    @id @default(uuid())
 16 |   createdAt DateTime  @default(now())
 17 |   name      String
 18 |   email     String
 19 |   firstName String?
 20 |   lastName  String?
 21 |   phone     String?
 22 |   address   String?
 23 |   city      String?
 24 |   country   String?
 25 |   zipCode   String?
 26 |   birthDate DateTime?
 27 | 
 28 |   accountDetail AccountDetail?
 29 |   savedProducts SavedProduct[]
 30 |   userDiscounts UserDiscount[]
 31 | }
 32 | 
 33 | model AccountDetail {
 34 |   id            Int      @id @default(autoincrement())
 35 |   accountId     String   @unique
 36 |   theme         String?  @default("light")
 37 |   language      String?  @default("en")
 38 |   timezone      String?
 39 |   newsletter    Boolean  @default(true)
 40 |   notifications Boolean  @default(true)
 41 |   createdAt     DateTime @default(now())
 42 |   updatedAt     DateTime @updatedAt
 43 | 
 44 |   account Account @relation(fields: [accountId], references: [id])
 45 | }
 46 | 
 47 | model Product {
 48 |   id            Int            @id @default(autoincrement())
 49 |   name          String
 50 |   description   String?
 51 |   price         Float
 52 |   category      String?
 53 |   featured      Boolean        @default(false)
 54 |   createdAt     DateTime       @default(now())
 55 |   updatedAt     DateTime       @updatedAt
 56 |   Review        Review[]
 57 |   productDetail ProductDetail?
 58 |   savedByUsers  SavedProduct[]
 59 | 
 60 |   @@index([category])
 61 |   @@index([name])
 62 |   @@index([createdAt])
 63 |   @@index([category, createdAt])
 64 |   @@index([featured])
 65 | }
 66 | 
 67 | model Category {
 68 |   id          Int      @id @default(autoincrement())
 69 |   name        String   @unique
 70 |   description String
 71 |   createdAt   DateTime @default(now())
 72 |   updatedAt   DateTime @updatedAt
 73 | }
 74 | 
 75 | model ProductDetail {
 76 |   id           Int      @id @default(autoincrement())
 77 |   productId    Int      @unique
 78 |   sku          String?
 79 |   brand        String?
 80 |   stockCount   Int      @default(0)
 81 |   weight       Float?
 82 |   dimensions   String?
 83 |   materials    String?
 84 |   origin       String?
 85 |   warrantyInfo String?
 86 |   createdAt    DateTime @default(now())
 87 |   updatedAt    DateTime @updatedAt
 88 | 
 89 |   product Product @relation(fields: [productId], references: [id])
 90 | }
 91 | 
 92 | model Review {
 93 |   id        Int      @id @default(autoincrement())
 94 |   productId Int
 95 |   rating    Int
 96 |   comment   String?
 97 |   createdAt DateTime @default(now())
 98 |   updatedAt DateTime @updatedAt
 99 | 
100 |   product Product @relation(fields: [productId], references: [id])
101 | }
102 | 
103 | model SavedProduct {
104 |   id        Int      @id @default(autoincrement())
105 |   accountId String
106 |   productId Int
107 |   createdAt DateTime @default(now())
108 | 
109 |   account Account @relation(fields: [accountId], references: [id])
110 |   product Product @relation(fields: [productId], references: [id])
111 | 
112 |   @@unique([accountId, productId])
113 | }
114 | 
115 | model Discount {
116 |   id          Int      @id @default(autoincrement())
117 |   code        String   @unique
118 |   description String
119 |   percentage  Int
120 |   expiry      DateTime
121 |   isActive    Boolean  @default(true)
122 |   createdAt   DateTime @default(now())
123 |   updatedAt   DateTime @updatedAt
124 | 
125 |   userDiscounts UserDiscount[]
126 | }
127 | 
128 | model UserDiscount {
129 |   id         Int       @id @default(autoincrement())
130 |   accountId  String
131 |   discountId Int
132 |   isUsed     Boolean   @default(false)
133 |   usedAt     DateTime?
134 |   createdAt  DateTime  @default(now())
135 | 
136 |   account  Account  @relation(fields: [accountId], references: [id])
137 |   discount Discount @relation(fields: [discountId], references: [id])
138 | 
139 |   @@unique([accountId, discountId])
140 | }
141 | 


--------------------------------------------------------------------------------
/app/user/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Mail, MapPin, Phone, User } from 'lucide-react';
 2 | import React from 'react';
 3 | import Boundary from '@/components/internal/Boundary';
 4 | import { getCurrentAccountWithDetails } from '@/features/auth/auth-queries';
 5 | 
 6 | export default async function UserPage() {
 7 |   const account = await getCurrentAccountWithDetails();
 8 | 
 9 |   return (
10 |     <Boundary rendering="dynamic" hydration="server">
11 |       <div className="border-divider dark:border-divider-dark flex flex-col gap-6 border bg-white p-8 dark:bg-black">
12 |         <div className="flex items-center gap-4">
13 |           <User className="text-primary size-16 rounded-full bg-gray-100 p-3 dark:bg-gray-800" />
14 |           <div className="flex flex-col">
15 |             <h1 className="text-3xl font-bold uppercase">{account?.name}</h1>
16 |             {account?.firstName && account?.lastName && (
17 |               <p className="text-lg text-gray-600 dark:text-gray-400">
18 |                 {account?.firstName} {account?.lastName}
19 |               </p>
20 |             )}
21 |           </div>
22 |         </div>
23 |         <div className="grid gap-6 md:grid-cols-2">
24 |           <div>
25 |             <h2 className="mb-4 text-xl font-bold tracking-tight uppercase">Contact Information</h2>
26 |             <div className="space-y-4">
27 |               <div className="flex items-center gap-3">
28 |                 <Mail className="text-primary size-5" />
29 |                 <span className="text-gray-700 dark:text-gray-300">{account?.email}</span>
30 |               </div>
31 |               {account?.phone && (
32 |                 <div className="flex items-center gap-3">
33 |                   <Phone className="text-primary size-5" />
34 |                   <span className="text-gray-700 dark:text-gray-300">{account?.phone}</span>
35 |                 </div>
36 |               )}
37 |               {(account?.address || account?.city || account?.country || account?.zipCode) && (
38 |                 <div className="flex items-start gap-3">
39 |                   <MapPin className="text-primary mt-0.5 size-5" />
40 |                   <div className="flex flex-col text-gray-700 dark:text-gray-300">
41 |                     {account?.address && <span>{account?.address}</span>}
42 |                     <span>
43 |                       {[account?.city, account?.zipCode].filter(Boolean).join(' ')}
44 |                       {account?.city && account?.country && ', '}
45 |                       {account?.country}
46 |                     </span>
47 |                   </div>
48 |                 </div>
49 |               )}
50 |             </div>
51 |           </div>
52 |           {account?.accountDetail && (
53 |             <div>
54 |               <h2 className="mb-4 text-xl font-bold tracking-tight uppercase">Preferences</h2>
55 |               <div className="space-y-4">
56 |                 <PreferenceItem label="Theme" value={account?.accountDetail.theme || 'Default'} />
57 |                 <PreferenceItem label="Language" value={(account?.accountDetail.language || 'en').toUpperCase()} />
58 |                 {account?.accountDetail.timezone && (
59 |                   <PreferenceItem label="Timezone" value={account?.accountDetail.timezone} />
60 |                 )}
61 |                 <PreferenceItem label="Newsletter" value={account?.accountDetail.newsletter ? 'Enabled' : 'Disabled'} />
62 |                 <PreferenceItem
63 |                   label="Notifications"
64 |                   value={account?.accountDetail.notifications ? 'Enabled' : 'Disabled'}
65 |                 />
66 |               </div>
67 |             </div>
68 |           )}
69 |         </div>
70 |         {account?.birthDate && (
71 |           <div>
72 |             <h2 className="mb-4 text-xl font-bold tracking-tight uppercase">Personal Information</h2>
73 |             <PreferenceItem label="Birth Date" value={new Date(account?.birthDate).toLocaleDateString()} />
74 |           </div>
75 |         )}
76 |       </div>
77 |     </Boundary>
78 |   );
79 | }
80 | 
81 | function PreferenceItem({ label, value }: { label: string; value: string }) {
82 |   return (
83 |     <div className="flex justify-between">
84 |       <span className="text-sm font-semibold tracking-wide text-gray-600 uppercase dark:text-gray-400">{label}:</span>
85 |       <span className="text-gray-900 dark:text-gray-100">{value}</span>
86 |     </div>
87 |   );
88 | }
89 | 


--------------------------------------------------------------------------------
/components/ui/ProductCard.tsx:
--------------------------------------------------------------------------------
  1 | import Link from 'next/link';
  2 | import React, { Suspense } from 'react';
  3 | import Product, { ProductSkeleton } from '@/features/product/components/Product';
  4 | import ProductModal from '@/features/product/components/ProductModal';
  5 | import ImagePlaceholder from './ImagePlaceholder';
  6 | 
  7 | type ProductCardProps = {
  8 |   id: number;
  9 |   name: string;
 10 |   price: number;
 11 |   description?: string;
 12 |   badge?: string;
 13 |   variant?: 'default' | 'compact';
 14 |   className?: string;
 15 |   enableQuickPreview?: boolean;
 16 | };
 17 | 
 18 | export default function ProductCard({
 19 |   id,
 20 |   name,
 21 |   price,
 22 |   description,
 23 |   badge,
 24 |   variant = 'default',
 25 |   className = '',
 26 |   enableQuickPreview = false,
 27 | }: ProductCardProps) {
 28 |   const card =
 29 |     variant === 'compact' ? (
 30 |       <Link
 31 |         href={`/product/${id}`}
 32 |         className={`border-divider hover:border-accent dark:border-divider-dark dark:hover:border-accent flex border bg-white transition-all hover:shadow-md dark:bg-black ${className}`}
 33 |       >
 34 |         <div className="flex-shrink-0">
 35 |           <ImagePlaceholder variant="simple" className="h-32 w-24 sm:h-36 sm:w-28" />
 36 |         </div>
 37 |         <div className="flex flex-col gap-1 p-5">
 38 |           <h2 className="group-hover:text-accent line-clamp-1 text-sm font-bold tracking-wide text-black uppercase transition-colors dark:text-white">
 39 |             {name}
 40 |           </h2>
 41 |           {description && (
 42 |             <p className="line-clamp-2 text-xs leading-relaxed text-gray-700 normal-case dark:text-gray-300">
 43 |               {description}
 44 |             </p>
 45 |           )}
 46 |           <p className="text-accent mt-auto text-sm font-bold tracking-wider">${price.toFixed(2)}</p>
 47 |         </div>
 48 |       </Link>
 49 |     ) : (
 50 |       <Link
 51 |         href={`/product/${id}`}
 52 |         className={`border-divider dark:border-divider-dark dark:bg-card-dark group hover:border-accent flex h-full flex-col border bg-white ${className}`}
 53 |       >
 54 |         <div className="bg-card dark:bg-section relative flex-shrink-0 overflow-hidden">
 55 |           <ImagePlaceholder className="h-48 w-full" />
 56 |           {badge && (
 57 |             <div className="bg-accent absolute top-2 left-2 px-2 py-1 text-xs font-bold text-white uppercase">
 58 |               {badge}
 59 |             </div>
 60 |           )}
 61 |         </div>
 62 |         <div className="flex-grow p-4">
 63 |           <h3 className="mb-2 line-clamp-2 text-sm font-bold tracking-tight uppercase">{name}</h3>
 64 |           <div className="flex items-center gap-2">
 65 |             <span className="text-accent text-lg font-bold">${price.toFixed(2)}</span>
 66 |           </div>
 67 |         </div>
 68 |       </Link>
 69 |     );
 70 | 
 71 |   if (enableQuickPreview) {
 72 |     return (
 73 |       <div className="group relative h-full">
 74 |         {card}
 75 |         <ProductModal productId={id}>
 76 |           <Suspense fallback={<ProductSkeleton />}>
 77 |             <Product imageClassName="h-60" productId={id} />
 78 |           </Suspense>
 79 |         </ProductModal>
 80 |       </div>
 81 |     );
 82 |   }
 83 | 
 84 |   return card;
 85 | }
 86 | 
 87 | export function ProductCardSkeleton({
 88 |   variant = 'default',
 89 |   className = '',
 90 | }: {
 91 |   variant?: 'default' | 'compact';
 92 |   className?: string;
 93 | }) {
 94 |   if (variant === 'compact') {
 95 |     return (
 96 |       <div className={`border-divider dark:border-divider-dark flex border bg-white dark:bg-black ${className}`}>
 97 |         <div className="flex-shrink-0">
 98 |           <div className="skeleton-animation h-32 w-24 sm:h-36 sm:w-28" />
 99 |         </div>
100 |         <div className="flex min-w-0 flex-1 flex-col gap-1 p-5">
101 |           <div className="skeleton-animation h-4 w-3/4 rounded" />
102 |           <div className="skeleton-animation h-3 w-full rounded" />
103 |           <div className="skeleton-animation h-3 w-2/3 rounded" />
104 |           <div className="skeleton-animation mt-auto h-4 w-1/3 rounded" />
105 |         </div>
106 |       </div>
107 |     );
108 |   }
109 | 
110 |   return (
111 |     <div className={`border-divider dark:border-divider-dark dark:bg-card-dark border bg-white ${className}`}>
112 |       <div className="bg-card dark:bg-section h-48 w-full" />
113 |       <div className="p-4">
114 |         <div className="skeleton-animation mb-2 h-7 w-3/4 rounded" />
115 |         <div className="skeleton-animation h-5 w-1/3 rounded" />
116 |       </div>
117 |     </div>
118 |   );
119 | }
120 | 


--------------------------------------------------------------------------------
/components/banner/WelcomeBanner.tsx:
--------------------------------------------------------------------------------
  1 | import Link from 'next/link';
  2 | import { Suspense } from 'react';
  3 | import { getCurrentAccount, getIsAuthenticated } from '@/features/auth/auth-queries';
  4 | import { getSavedProducts } from '@/features/product/product-queries';
  5 | import { getUserDiscounts } from '@/features/user/user-queries';
  6 | import Boundary from '../internal/Boundary';
  7 | import { MotionDiv } from '../ui/MotionWrappers';
  8 | import { BannerContainer } from './BannerContainer';
  9 | 
 10 | export default function WelcomeBanner() {
 11 |   return (
 12 |     <BannerContainer>
 13 |       <Suspense fallback={<GeneralBanner />}>
 14 |         <PersonalBanner />
 15 |       </Suspense>
 16 |     </BannerContainer>
 17 |   );
 18 | }
 19 | 
 20 | export async function PersonalBanner() {
 21 |   const loggedIn = await getIsAuthenticated();
 22 |   if (!loggedIn) return <GeneralBanner />;
 23 | 
 24 |   const [account, discounts, savedProducts] = await Promise.all([
 25 |     getCurrentAccount(),
 26 |     getUserDiscounts(),
 27 |     getSavedProducts(),
 28 |   ]);
 29 | 
 30 |   const featuredDiscount = discounts[0];
 31 |   const firstName = account?.firstName || account?.name.split(' ')[0];
 32 | 
 33 |   return (
 34 |     <Boundary hydration="server" rendering="dynamic">
 35 |       <MotionDiv
 36 |         initial={{ opacity: 0 }}
 37 |         animate={{ opacity: [0, 0.3, 1, 0.8, 1] }}
 38 |         transition={{
 39 |           duration: 0.8,
 40 |           ease: 'easeInOut',
 41 |           times: [0, 0.2, 0.4, 0.7, 1],
 42 |         }}
 43 |         className="flex flex-col justify-between"
 44 |       >
 45 |         <span className="mb-3 inline-block w-fit bg-black px-2.5 py-1 text-xs font-bold tracking-[0.2em] text-white uppercase dark:bg-white dark:text-black">
 46 |           {featuredDiscount ? 'Exclusive Discount' : 'Welcome Back'}
 47 |         </span>
 48 |         <h3 className="mb-3 font-sans text-2xl leading-tight font-bold tracking-tight">Welcome back {firstName}</h3>
 49 |         <p className="mb-2 text-sm leading-relaxed text-gray-800 dark:text-gray-200">
 50 |           {featuredDiscount ? (
 51 |             <>
 52 |               Use code{' '}
 53 |               <span className="bg-black px-1 py-0.5 font-mono font-semibold text-white sm:px-2 sm:py-1 dark:bg-white dark:text-black">
 54 |                 {featuredDiscount.code}
 55 |               </span>{' '}
 56 |               for <span className="font-bold">{featuredDiscount.percentage}% off</span> –{' '}
 57 |               {featuredDiscount.description.toLowerCase()}. Expires {featuredDiscount.expiry.toLocaleDateString()}.
 58 |             </>
 59 |           ) : savedProducts.length > 0 ? (
 60 |             <>
 61 |               You have <span className="font-bold">{savedProducts.length} saved products</span> waiting for you. Ready
 62 |               to continue shopping?
 63 |             </>
 64 |           ) : (
 65 |             <>Ready to discover something new? Start browsing our latest collection.</>
 66 |           )}
 67 |         </p>
 68 |         <div className="mt-2 flex flex-wrap gap-4">
 69 |           {featuredDiscount && (
 70 |             <Link href="/user" className="inline-flex items-center text-xs font-semibold tracking-wide uppercase">
 71 |               {discounts.length > 1 ? `View all ${discounts.length} discounts` : 'View discount details'} →
 72 |             </Link>
 73 |           )}
 74 |           {savedProducts.length > 0 && (
 75 |             <Link href="/user" className="inline-flex items-center text-xs font-semibold tracking-wide uppercase">
 76 |               View Saved Items ({savedProducts.length}) →
 77 |             </Link>
 78 |           )}
 79 |           {!featuredDiscount && savedProducts.length === 0 && (
 80 |             <Link href="/all" className="inline-flex items-center text-xs font-semibold tracking-wide uppercase">
 81 |               Start Shopping →
 82 |             </Link>
 83 |           )}
 84 |         </div>
 85 |       </MotionDiv>
 86 |     </Boundary>
 87 |   );
 88 | }
 89 | 
 90 | export function GeneralBanner() {
 91 |   return (
 92 |     <Boundary hydration="server">
 93 |       <div className="flex flex-col justify-between pb-6">
 94 |         <span className="mb-3 inline-block w-fit bg-black px-2.5 py-1 text-xs font-bold tracking-[0.2em] text-white uppercase dark:bg-white dark:text-black">
 95 |           Member Perks
 96 |         </span>
 97 |         <h3 className="mb-5 font-sans text-2xl leading-tight font-bold tracking-tight">Unlock Exclusive Discounts</h3>
 98 |         <p className="text-sm leading-relaxed text-gray-800 dark:text-gray-200">
 99 |           <Link href="/sign-in" className="font-bold">
100 |             Sign up
101 |           </Link>{' '}
102 |           to access special offers on your favorite products.
103 |         </p>
104 |       </div>
105 |     </Boundary>
106 |   );
107 | }
108 | 


--------------------------------------------------------------------------------
/components/internal/Boundary.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import React, { useRef, useEffect, useState } from 'react';
  4 | import { cn } from '@/utils/cn';
  5 | import { useBoundaryMode } from './BoundaryProvider';
  6 | 
  7 | type RenderingType = 'static' | 'dynamic' | 'hybrid';
  8 | type HydrationType = 'server' | 'client' | 'hybrid';
  9 | 
 10 | type Props = {
 11 |   children: React.ReactNode;
 12 |   rendering?: RenderingType;
 13 |   hydration?: HydrationType;
 14 |   label?: string;
 15 |   showLabel?: boolean;
 16 |   cached?: boolean;
 17 | };
 18 | 
 19 | const renderingColors = {
 20 |   dynamic: 'border-blue-500 bg-blue-50 dark:bg-blue-950/20',
 21 |   hybrid: 'border-purple-500 bg-purple-50 dark:bg-purple-950/20',
 22 |   static: 'border-red-500 bg-red-50 dark:bg-red-950/20',
 23 | } as const;
 24 | 
 25 | const componentColors = {
 26 |   client: 'border-blue-500 bg-blue-50 dark:bg-blue-950/20',
 27 |   hybrid: 'border-purple-500 bg-purple-50 dark:bg-purple-950/20',
 28 |   server: 'border-red-500 bg-red-50 dark:bg-red-950/20',
 29 | } as const;
 30 | 
 31 | export default function Boundary({ children, rendering, hydration, label, showLabel = true, cached = false }: Props) {
 32 |   const { mode } = useBoundaryMode();
 33 |   const containerRef = useRef<HTMLDivElement>(null);
 34 |   const [isSmall, setIsSmall] = useState(false);
 35 | 
 36 |   useEffect(() => {
 37 |     const checkSize = () => {
 38 |       if (containerRef.current) {
 39 |         const { width, height } = containerRef.current.getBoundingClientRect();
 40 |         setIsSmall(width < 60 || height < 60);
 41 |       }
 42 |     };
 43 | 
 44 |     checkSize();
 45 |     const resizeObserver = new ResizeObserver(checkSize);
 46 |     if (containerRef.current) {
 47 |       resizeObserver.observe(containerRef.current);
 48 |     }
 49 | 
 50 |     return () => {
 51 |       resizeObserver.disconnect();
 52 |     };
 53 |   }, []);
 54 | 
 55 |   if (mode === 'off') {
 56 |     return <>{children}</>;
 57 |   }
 58 | 
 59 |   const showRendering = mode === 'rendering' && rendering;
 60 |   const showComponent = mode === 'hydration' && hydration;
 61 | 
 62 |   if (!showRendering && !showComponent) {
 63 |     return <>{children}</>;
 64 |   }
 65 | 
 66 |   let colorClasses = '';
 67 |   let labelText = '';
 68 |   let labelColor = '';
 69 | 
 70 |   if (showRendering) {
 71 |     colorClasses = renderingColors[rendering!];
 72 |     if (showLabel) {
 73 |       labelText = label || `${rendering} rendering`;
 74 |       labelColor =
 75 |         rendering === 'dynamic'
 76 |           ? 'text-blue-700 dark:text-blue-300'
 77 |           : rendering === 'hybrid'
 78 |             ? 'text-purple-700 dark:text-purple-300'
 79 |             : 'text-red-700 dark:text-red-300';
 80 |     }
 81 |   } else if (showComponent) {
 82 |     colorClasses = componentColors[hydration!];
 83 |     if (showLabel) {
 84 |       labelText = label || `${hydration} component`;
 85 |       labelColor =
 86 |         hydration === 'client'
 87 |           ? 'text-blue-700 dark:text-blue-300'
 88 |           : hydration === 'hybrid'
 89 |             ? 'text-purple-700 dark:text-purple-300'
 90 |             : 'text-red-700 dark:text-red-300';
 91 |     }
 92 |   }
 93 | 
 94 |   if (isSmall) {
 95 |     let circleColorClasses = '';
 96 | 
 97 |     if (showRendering) {
 98 |       circleColorClasses =
 99 |         rendering === 'dynamic' ? 'border-blue-500' : rendering === 'hybrid' ? 'border-purple-500' : 'border-red-500';
100 |     } else if (showComponent) {
101 |       circleColorClasses =
102 |         hydration === 'client' ? 'border-blue-500' : hydration === 'hybrid' ? 'border-purple-500' : 'border-red-500';
103 |     }
104 | 
105 |     return (
106 |       <div className="relative">
107 |         <div ref={containerRef}>{children}</div>
108 |         <div
109 |           className={cn('absolute -top-1 -right-1 h-3 w-3 rounded-full border-2 border-dashed', circleColorClasses)}
110 |           title={labelText || 'Boundary indicator'}
111 |         />
112 |       </div>
113 |     );
114 |   }
115 | 
116 |   return (
117 |     <div ref={containerRef} className={cn('relative rounded-md border-2 border-dashed', colorClasses)}>
118 |       {showLabel && labelText && (
119 |         <div className="absolute -top-2 left-2 z-10 flex gap-2">
120 |           <div
121 |             className={cn(
122 |               'rounded border bg-white px-2 py-0.5 font-mono text-xs font-normal lowercase shadow-sm dark:bg-black',
123 |               labelColor,
124 |             )}
125 |           >
126 |             {labelText}
127 |           </div>
128 |           {cached && mode === 'rendering' && (
129 |             <div className="rounded border border-green-500 bg-green-50 px-2 py-0.5 font-mono text-xs font-normal text-green-700 lowercase shadow-sm dark:bg-green-950/20 dark:text-green-300">
130 |               cached
131 |             </div>
132 |           )}
133 |         </div>
134 |       )}
135 |       {children}
136 |     </div>
137 |   );
138 | }
139 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | import Link from 'next/link';
  2 | import { Suspense } from 'react';
  3 | import WelcomeBanner from '@/components/banner/WelcomeBanner';
  4 | import Boundary from '@/components/internal/Boundary';
  5 | import LinkButton from '@/components/ui/LinkButton';
  6 | import { getIsAuthenticated } from '@/features/auth/auth-queries';
  7 | import FeaturedCategories from '@/features/category/components/FeaturedCategories';
  8 | import FeaturedProducts from '@/features/product/components/FeaturedProducts';
  9 | import Hero from '@/features/product/components/Hero';
 10 | import Recommendations, { RecommendationsSkeleton } from '@/features/user/components/Recommendations';
 11 | 
 12 | export default async function HomePage() {
 13 |   return (
 14 |     <div className="flex flex-col gap-10">
 15 |       <Hero />
 16 |       <WelcomeBanner />
 17 |       <Suspense>
 18 |         <PersonalizedSection />
 19 |       </Suspense>
 20 |       <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
 21 |         <h2 className="text-xl font-bold tracking-tight uppercase sm:text-2xl">Featured Categories</h2>
 22 |         <Link href="/all" className="text-xs font-semibold tracking-wide uppercase sm:text-sm">
 23 |           View All →
 24 |         </Link>
 25 |       </div>
 26 |       <FeaturedCategories />
 27 |       <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
 28 |         <h2 className="text-xl font-bold tracking-tight uppercase sm:text-2xl">Featured Products</h2>
 29 |         <Link href="/all" className="text-xs font-semibold tracking-wide uppercase sm:text-sm">
 30 |           View All Products →
 31 |         </Link>
 32 |       </div>
 33 |       <FeaturedProducts />
 34 |       <section className="grid gap-6 md:grid-cols-2">
 35 |         <div className="bg-accent/10 dark:bg-accent/20 border-divider dark:border-divider-dark border p-6">
 36 |           <h3 className="mb-2 text-xl font-bold tracking-tight uppercase">Member Rewards</h3>
 37 |           <p className="mb-4 text-sm">
 38 |             Unlock exclusive perks like extra discounts, early product launches, and priority support. Sign in to access
 39 |             your dashboard and discover new offers!
 40 |           </p>
 41 |           <Suspense fallback={<GeneralMembershipLink />}>
 42 |             <PersonalMembershipLink />
 43 |           </Suspense>
 44 |         </div>
 45 |         <div className="border-divider dark:border-divider-dark border bg-black/5 p-6 dark:bg-white/10">
 46 |           <h3 className="mb-2 text-xl font-bold tracking-tight uppercase">Trade-In Program</h3>
 47 |           <p className="mb-4 text-sm">Upgrade your devices and get credit towards your next purchase.</p>
 48 |           <LinkButton href="/about" variant="primary">
 49 |             Learn More
 50 |           </LinkButton>
 51 |         </div>
 52 |       </section>
 53 |       <section>
 54 |         <h2 className="mb-4 text-2xl font-bold tracking-tight uppercase">Quick Links</h2>
 55 |         <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6">
 56 |           <LinkButton href="/about">Price Match</LinkButton>
 57 |           <LinkButton href="/about">Support</LinkButton>
 58 |           <LinkButton href="/about">Free Delivery</LinkButton>
 59 |           <LinkButton href="/user">My Account</LinkButton>
 60 |           <LinkButton href="/about">Returns</LinkButton>
 61 |           <LinkButton href="/about">Gift Cards</LinkButton>
 62 |         </div>
 63 |       </section>
 64 |     </div>
 65 |   );
 66 | }
 67 | 
 68 | async function PersonalizedSection() {
 69 |   const loggedIn = await getIsAuthenticated();
 70 | 
 71 |   if (!loggedIn) {
 72 |     return null;
 73 |   }
 74 | 
 75 |   return (
 76 |     <>
 77 |       <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
 78 |         <div>
 79 |           <h2 className="text-xl font-bold tracking-tight uppercase sm:text-2xl">Something for You?</h2>
 80 |           <p className="text-xs text-gray-600 sm:text-sm dark:text-gray-400">
 81 |             Personalized recommendations based on your interests
 82 |           </p>
 83 |         </div>
 84 |         <Link href="/user" className="text-xs font-semibold tracking-wide uppercase sm:text-sm">
 85 |           View Saved →
 86 |         </Link>
 87 |       </div>
 88 |       <Suspense fallback={<RecommendationsSkeleton />}>
 89 |         <Recommendations />
 90 |       </Suspense>
 91 |     </>
 92 |   );
 93 | }
 94 | 
 95 | async function PersonalMembershipLink() {
 96 |   const loggedIn = await getIsAuthenticated();
 97 |   if (!loggedIn) return <GeneralMembershipLink />;
 98 | 
 99 |   return (
100 |     <Boundary rendering="dynamic" hydration="server">
101 |       <LinkButton href="/user" variant="primary">
102 |         Go to Dashboard
103 |       </LinkButton>
104 |     </Boundary>
105 |   );
106 | }
107 | 
108 | function GeneralMembershipLink() {
109 |   return (
110 |     <LinkButton href="/sign-in" variant="primary">
111 |       Sign In to Join
112 |     </LinkButton>
113 |   );
114 | }
115 | 


--------------------------------------------------------------------------------
/.vscode/snippets.code-snippets:
--------------------------------------------------------------------------------
  1 | {
  2 |     "welcomeBanner": {
  3 |         "scope": "typescriptreact",
  4 |         "prefix": "welcomeBanner",
  5 |         "body": [
  6 |             "export default function WelcomeBanner() {",
  7 |             "  return (",
  8 |             "    <BannerContainer>",
  9 |             "      <Suspense fallback={<GeneralBanner />}>",
 10 |             "        <PersonalBanner />",
 11 |             "      </Suspense>",
 12 |             "    </BannerContainer>",
 13 |             "  );",
 14 |             "}"
 15 |         ],
 16 |     },
 17 |     "membershipLink": {
 18 |         "scope": "typescriptreact",
 19 |         "prefix": "membershipLink",
 20 |         "body": [
 21 |             "<Suspense fallback={<GeneralMembershipLink />}>",
 22 |             "  <PersonalMembershipLink />",
 23 |             "</Suspense>"
 24 |         ]
 25 |     },
 26 |     "generateStaticParams": {
 27 |         "scope": "typescriptreact",
 28 |         "prefix": "generateStaticParams",
 29 |         "body": [
 30 |             "export async function generateStaticParams() {",
 31 |             "  return [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }];",
 32 |             "}"
 33 |         ]
 34 |     },
 35 |     "bookmarkSuspense": {
 36 |         "scope": "typescriptreact",
 37 |         "prefix": "bookmarkSuspense",
 38 |         "body": [
 39 |             "<Suspense fallback={<Bookmark aria-hidden className=\"text-gray size-5\" />}>",
 40 | 
 41 |         ]
 42 |     },
 43 |     "useAuth": {
 44 |         "scope": "typescriptreact",
 45 |         "prefix": "useAuth",
 46 |         "body": [
 47 |             "const { loggedIn: loggedInPromise } = useAuth()",
 48 |             "const loggedIn = use(loggedInPromise);"
 49 |         ]
 50 |     },
 51 |     "suspenseWithFallback": {
 52 |         "scope": "typescriptreact",
 53 |         "prefix": "suspenseWithFallback",
 54 |         "body": [
 55 |             "<Suspense fallback={<Skeleton />}>",
 56 |             "  ${TM_SELECTED_TEXT}",
 57 |             "</Suspense>"
 58 |         ],
 59 |         "description": "Wraps selected component with Suspense and duplicates the name for fallback Skeleton."
 60 |     },
 61 |     "isAuth": {
 62 |         "scope": "typescriptreact",
 63 |         "prefix": "isAuth",
 64 |         "body": [
 65 |             "const loggedIn = await getIsAuthenticated();",
 66 |         ]
 67 |     },
 68 |     "getDiscountData": {
 69 |         "scope": "typescriptreact",
 70 |         "prefix": "getDiscountData",
 71 |         "body": [
 72 |             "const [account, discounts, savedProducts] = await Promise.all([",
 73 |             "  getCurrentAccount(),",
 74 |             "  getUserDiscounts(),",
 75 |             "  getSavedProducts(),",
 76 |             "]);",
 77 |         ]
 78 |     },
 79 |     "bannerContainer": {
 80 |         "scope": "typescriptreact",
 81 |         "prefix": "bannerContainer",
 82 |         "body": [
 83 |             "export default function BannerContainer({children}: { children: React.ReactNode }) {",
 84 |         ]
 85 |     },
 86 |     "uc": {
 87 |         "scope": "typescriptreact",
 88 |         "prefix": "uc",
 89 |         "body": [
 90 |             "\"use cache\"",
 91 |         ]
 92 |     },
 93 |     "cacheApis": {
 94 |         "scope": "typescriptreact",
 95 |         "prefix": "cacheApis",
 96 |         "body": [
 97 |             "cacheTag('featured-product')",
 98 |             "revalidateTag('featured-product')",
 99 |             "cacheLife('days')"
100 |         ]
101 |     },
102 |     "loadingPage": {
103 |         "scope": "typescriptreact",
104 |         "prefix": "loadingPage",
105 |         "body": [
106 |             "export default function Loading() {",
107 |             "  return (",
108 |             "    <>",
109 |             "      <SearchSkeleton />",
110 |             "      <div className=\"flex h-full grow gap-12\">",
111 |             "        <div className=\"hidden w-64 shrink-0 lg:block\">",
112 |             "          <div className=\"sticky top-4\">",
113 |             "            <h3 className=\"mb-5 text-lg font-bold tracking-tight uppercase\">Categories</h3>",
114 |             "            <CategoryFiltersSkeleton />",
115 |             "          </div>",
116 |             "        </div>",
117 |             "        <div className=\"flex flex-1 flex-col gap-6\">",
118 |             "          <div className=\"flex flex-col gap-4 lg:hidden\">",
119 |             "            <CategoryFiltersSkeleton />",
120 |             "            <div className=\"flex justify-end\">",
121 |             "              <SortButtonSkeleton />",
122 |             "            </div>",
123 |             "          </div>",
124 |             "          <div className=\"hidden justify-end lg:flex\">",
125 |             "            <SortButtonSkeleton />",
126 |             "          </div>",
127 |             "          <ProductListSkeleton />",
128 |             "        </div>",
129 |             "      </div>",
130 |             "    </>",
131 |             "  );",
132 |             "}"
133 |         ]
134 |     }
135 | }
136 | 
137 | 


--------------------------------------------------------------------------------
/app/about/page.tsx:
--------------------------------------------------------------------------------
  1 | import { ArrowRight, Award, Gift, Package, RefreshCw, Shield, Truck } from 'lucide-react';
  2 | import React from 'react';
  3 | import Card from '@/components/ui/Card';
  4 | import Divider from '@/components/ui/Divider';
  5 | import LinkButton from '@/components/ui/LinkButton';
  6 | 
  7 | export default function AboutPage() {
  8 |   return (
  9 |     <div className="mx-auto max-w-6xl space-y-16">
 10 |       <div className="space-y-6 text-center">
 11 |         <span className="mb-4 inline-block w-fit bg-black px-2.5 py-1 text-xs font-bold tracking-[0.2em] text-white uppercase dark:bg-white dark:text-black">
 12 |           About Us
 13 |         </span>
 14 |         <h1 className="text-4xl font-bold tracking-tight uppercase md:text-5xl">Premium Electronics & Services</h1>
 15 |         <p className="mx-auto mt-4 max-w-3xl text-xl text-gray-600 dark:text-gray-400">
 16 |           Your trusted partner for cutting-edge technology and exceptional service.
 17 |         </p>
 18 |         <LinkButton variant="primary" href="/">
 19 |           Start Shopping <ArrowRight className="ml-2 h-4 w-4" />
 20 |         </LinkButton>
 21 |       </div>
 22 |       <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
 23 |         <ServiceCard
 24 |           icon={<Award className="h-8 w-8" />}
 25 |           title="Price Match Guarantee"
 26 |           description="Found a lower price? We'll match it and beat it by 5%."
 27 |           badge="Best Price"
 28 |         />
 29 |         <ServiceCard
 30 |           icon={<Truck className="h-8 w-8" />}
 31 |           title="Free Delivery"
 32 |           description="Complimentary shipping on orders over $50 with same-day processing."
 33 |           badge="Free Shipping"
 34 |         />
 35 |         <ServiceCard
 36 |           icon={<RefreshCw className="h-8 w-8" />}
 37 |           title="Trade-In Program"
 38 |           description="Get instant credit towards your next purchase with our certified appraisal."
 39 |           badge="Instant Credit"
 40 |         />
 41 |         <ServiceCard
 42 |           icon={<Shield className="h-8 w-8" />}
 43 |           title="24/7 Support"
 44 |           description="Expert technical support available around the clock."
 45 |           badge="Expert Help"
 46 |         />
 47 |         <ServiceCard
 48 |           icon={<Package className="h-8 w-8" />}
 49 |           title="Easy Returns"
 50 |           description="30-day hassle-free returns with free return shipping."
 51 |           badge="30-Day Policy"
 52 |         />
 53 |         <ServiceCard
 54 |           icon={<Gift className="h-8 w-8" />}
 55 |           title="Gift Cards"
 56 |           description="Perfect for tech enthusiasts. No expiration date, digital delivery available."
 57 |           badge="No Expiry"
 58 |         />
 59 |       </div>
 60 |       <Divider variant="dotted" />
 61 |       <div className="grid gap-12 lg:grid-cols-2">
 62 |         <div className="space-y-6">
 63 |           <h2 className="text-3xl font-bold tracking-tight uppercase">Built for Excellence</h2>
 64 |           <p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
 65 |             Our platform leverages Next.js 15 with advanced caching for lightning-fast performance and seamless shopping
 66 |             experiences.
 67 |           </p>
 68 |           <div className="grid grid-cols-2 gap-4 text-center">
 69 |             <StatCard number="50K+" label="Happy Customers" />
 70 |             <StatCard number="99.9%" label="Uptime" />
 71 |           </div>
 72 |         </div>
 73 |         <div className="space-y-6">
 74 |           <h2 className="text-3xl font-bold tracking-tight uppercase">Our Promise</h2>
 75 |           <p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
 76 |             Quality products, exceptional service, and customer satisfaction are the pillars of our business.
 77 |           </p>
 78 |           <div className="flex flex-col gap-4 sm:flex-row">
 79 |             <LinkButton href="/all" variant="primary">
 80 |               Browse Products
 81 |             </LinkButton>
 82 |             <LinkButton href="/user" variant="secondary">
 83 |               Contact Support
 84 |             </LinkButton>
 85 |           </div>
 86 |         </div>
 87 |       </div>
 88 |     </div>
 89 |   );
 90 | }
 91 | 
 92 | function ServiceCard({
 93 |   icon,
 94 |   title,
 95 |   description,
 96 |   badge,
 97 | }: {
 98 |   icon: React.ReactNode;
 99 |   title: string;
100 |   description: string;
101 |   badge: string;
102 | }) {
103 |   return (
104 |     <Card className="relative overflow-hidden pt-12">
105 |       <div className="absolute top-4 right-4">
106 |         <span className="bg-accent/20 text-accent-foreground rounded px-2 py-1 text-xs font-medium">{badge}</span>
107 |       </div>
108 |       <div className="flex items-start gap-4">
109 |         <div className="flex-shrink-0 rounded-lg bg-black/5 p-3 dark:bg-white/10">{icon}</div>
110 |         <div className="flex-1 space-y-2">
111 |           <h3 className="text-lg font-bold tracking-tight">{title}</h3>
112 |           <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">{description}</p>
113 |         </div>
114 |       </div>
115 |     </Card>
116 |   );
117 | }
118 | 
119 | function StatCard({ number, label }: { number: string; label: string }) {
120 |   return (
121 |     <div className="space-y-2">
122 |       <div className="text-3xl font-bold tracking-tight">{number}</div>
123 |       <div className="text-sm tracking-wide text-gray-600 uppercase dark:text-gray-400">{label}</div>
124 |     </div>
125 |   );
126 | }
127 | 


--------------------------------------------------------------------------------
/features/product/product-queries.ts:
--------------------------------------------------------------------------------
  1 | import 'server-only';
  2 | 
  3 | import { notFound } from 'next/navigation';
  4 | import { cache } from 'react';
  5 | import { prisma } from '@/db';
  6 | import { slow } from '@/utils/slow';
  7 | import { verifyAuth } from '../auth/auth-actions';
  8 | 
  9 | export const getProduct = cache(async (productId: number) => {
 10 |   await slow();
 11 | 
 12 |   if (!productId || isNaN(productId) || productId <= 0) {
 13 |     notFound();
 14 |   }
 15 | 
 16 |   const product = await prisma.product.findUnique({
 17 |     where: { id: productId },
 18 |   });
 19 |   if (!product) {
 20 |     notFound();
 21 |   }
 22 |   return product;
 23 | });
 24 | 
 25 | export const getProductDetails = cache(async (productId: number) => {
 26 |   await slow();
 27 | 
 28 |   if (!productId || isNaN(productId) || productId <= 0) {
 29 |     notFound();
 30 |   }
 31 | 
 32 |   const productDetails = await prisma.productDetail.findUnique({
 33 |     where: { productId },
 34 |   });
 35 | 
 36 |   if (!productDetails) {
 37 |     notFound();
 38 |   }
 39 |   return productDetails;
 40 | });
 41 | 
 42 | export const getProducts = cache(
 43 |   async (searchQuery?: string, sort?: 'asc' | 'desc', page = 1, limit = 9, category?: string) => {
 44 |     const skip = (page - 1) * limit;
 45 | 
 46 |     const whereClause: {
 47 |       name?: { contains: string; mode: 'insensitive' };
 48 |       category?: { equals: string; mode: 'insensitive' };
 49 |     } = {};
 50 | 
 51 |     if (searchQuery) {
 52 |       whereClause.name = {
 53 |         contains: searchQuery,
 54 |         mode: 'insensitive' as const,
 55 |       };
 56 |     }
 57 | 
 58 |     if (category) {
 59 |       whereClause.category = {
 60 |         equals: category,
 61 |         mode: 'insensitive' as const,
 62 |       };
 63 |     }
 64 | 
 65 |     const [products, total] = await prisma.$transaction([
 66 |       prisma.product.findMany({
 67 |         orderBy: {
 68 |           name: sort === 'asc' ? 'asc' : 'desc', // Fixed: was reversed
 69 |         },
 70 |         select: {
 71 |           category: true,
 72 |           createdAt: true,
 73 |           description: true,
 74 |           id: true,
 75 |           name: true,
 76 |           price: true,
 77 |         },
 78 |         skip,
 79 |         take: limit,
 80 |         where: whereClause,
 81 |       }),
 82 |       prisma.product.count({
 83 |         where: whereClause,
 84 |       }),
 85 |     ]);
 86 | 
 87 |     return {
 88 |       currentPage: page,
 89 |       products,
 90 |       total,
 91 |       totalPages: Math.ceil(total / limit),
 92 |     };
 93 |   },
 94 | );
 95 | 
 96 | export const getReviews = cache(async (productId: number) => {
 97 |   await slow();
 98 | 
 99 |   return prisma.review.findMany({
100 |     orderBy: { createdAt: 'desc' },
101 |     where: { productId },
102 |   });
103 | });
104 | 
105 | export const isSavedProduct = cache(async (productId: number) => {
106 |   const accountId = await verifyAuth();
107 | 
108 |   const savedProduct = await prisma.savedProduct.findUnique({
109 |     where: {
110 |       accountId_productId: {
111 |         accountId,
112 |         productId,
113 |       },
114 |     },
115 |   });
116 | 
117 |   return !!savedProduct;
118 | });
119 | 
120 | export const getSavedProducts = cache(async () => {
121 |   await slow();
122 | 
123 |   const accountId = await verifyAuth();
124 | 
125 |   const savedProducts = await prisma.savedProduct.findMany({
126 |     include: {
127 |       product: true,
128 |     },
129 |     orderBy: { createdAt: 'desc' },
130 |     where: { accountId },
131 |   });
132 | 
133 |   return savedProducts.map(saved => {
134 |     return saved.product;
135 |   });
136 | });
137 | 
138 | export const getFeaturedProducts = cache(async (limit = 4) => {
139 |   await slow(2000);
140 | 
141 |   const featuredProducts = await prisma.product.findMany({
142 |     orderBy: { updatedAt: 'desc' },
143 |     take: limit,
144 |     where: { featured: true },
145 |   });
146 | 
147 |   if (featuredProducts.length < limit) {
148 |     const additionalNeeded = limit - featuredProducts.length;
149 |     const featuredIds = featuredProducts.map(p => {
150 |       return p.id;
151 |     });
152 | 
153 |     const recentProducts = await prisma.product.findMany({
154 |       orderBy: { createdAt: 'desc' },
155 |       take: additionalNeeded,
156 |       where: {
157 |         id: { notIn: featuredIds },
158 |       },
159 |     });
160 | 
161 |     return [...featuredProducts, ...recentProducts];
162 |   }
163 | 
164 |   return featuredProducts;
165 | });
166 | 
167 | export const getRecommendedProducts = cache(async (limit = 4) => {
168 |   await slow(500);
169 | 
170 |   const accountId = await verifyAuth();
171 | 
172 |   // Get user's saved products to understand their preferences
173 |   const savedProducts = await prisma.savedProduct.findMany({
174 |     include: {
175 |       product: true,
176 |     },
177 |     where: { accountId },
178 |   });
179 | 
180 |   let recommendedProducts: Awaited<ReturnType<typeof prisma.product.findMany>> = [];
181 | 
182 |   if (savedProducts.length > 0) {
183 |     // Get a random category from saved products
184 |     const categories = Array.from(
185 |       new Set(
186 |         savedProducts
187 |           .map(sp => {
188 |             return sp.product.category;
189 |           })
190 |           .filter(Boolean),
191 |       ),
192 |     );
193 |     const randomCategory = categories[Math.floor(Math.random() * categories.length)];
194 | 
195 |     if (randomCategory) {
196 |       // Get products from that category, excluding already saved ones
197 |       recommendedProducts = await prisma.product.findMany({
198 |         orderBy: { createdAt: 'desc' },
199 |         take: limit,
200 |         where: {
201 |           category: {
202 |             equals: randomCategory,
203 |             mode: 'insensitive',
204 |           },
205 |           id: {
206 |             notIn: savedProducts.map(sp => {
207 |               return sp.product.id;
208 |             }),
209 |           },
210 |         },
211 |       });
212 |     }
213 |   }
214 | 
215 |   // If no recommendations or not enough, fall back to featured products
216 |   if (recommendedProducts.length < limit) {
217 |     const featuredProducts = await getFeaturedProducts(limit);
218 |     const excludeIds = [
219 |       ...savedProducts.map(sp => {
220 |         return sp.product.id;
221 |       }),
222 |       ...recommendedProducts.map(p => {
223 |         return p.id;
224 |       }),
225 |     ];
226 | 
227 |     const additionalProducts = featuredProducts.filter(product => {
228 |       return !excludeIds.includes(product.id);
229 |     });
230 | 
231 |     recommendedProducts = [...recommendedProducts, ...additionalProducts];
232 |   }
233 | 
234 |   return recommendedProducts.slice(0, limit);
235 | });
236 | 
237 | export async function setFeaturedProduct(productId: number) {
238 |   if (!productId || isNaN(productId) || productId <= 0) {
239 |     throw new Error('Invalid product ID');
240 |   }
241 | 
242 |   // First, unfeatured all other products
243 |   await prisma.product.updateMany({
244 |     data: { featured: false },
245 |     where: { featured: true },
246 |   });
247 | 
248 |   // Then feature the specified product
249 |   const updatedProduct = await prisma.product.update({
250 |     data: { featured: true },
251 |     where: { id: productId },
252 |   });
253 | 
254 |   if (!updatedProduct) {
255 |     throw new Error('Product not found');
256 |   }
257 | 
258 |   return updatedProduct;
259 | }
260 | 


--------------------------------------------------------------------------------
/STEPS.md:
--------------------------------------------------------------------------------
  1 | # DEMO STEPS
  2 | 
  3 | ## Setup and problem
  4 | 
  5 | - This is a simple app mimicking e commerce platform.
  6 | - Show app. Home page user dep, browse page, product about page, login page, page user dep page. We have a good mix of static and dynamic content because of our user dependent features. (Everything here looks pretty decent, but there's certainly too many loading states for an ecommerce app.)
  7 | - Let's see the code.
  8 | - App router, I have all my pages here. I'm using feature slicing to keep the app router folder clean and easy to read. Services and queries talking to my db which is using Prisma ORM. Purposefully added slowness to my data fetching.
  9 | - App actually has commonly seen issues with prop drilling making it hard to maintain and refactor features, excessive client side JS, and lack of static rendering strategies leading to additional server costs and degraded performance.
 10 | - The goal here is to improve this regular Next.js codebase and enhance it with examples of modern patterns regarding architecture, composition, and caching capabilities, to make it faster, more scalable, and easier to maintain.
 11 | - (Improvements based on my exp building with server comp also and other codebases I have seen, and what devs commonly do wrong or struggle to find solutions for).
 12 | 
 13 | ## Excessive prop drilling -> component level fetching and authProvider: app/page.tsx
 14 | 
 15 | - Let's start simple, the first issue is with architecture and deep prop drilling.
 16 | - I'm noticing some issues. Fetching auth state top level, passing to components multiple levels down. This is a common problem, making our components less reusable and composable, and the code hard to read.
 17 | - But we are blocking the initial load, might be hard to know. We don't need to fetch top level with server components. Best practice is to push promises to resolve deeper down. We will see later how we can get help with this though. Co-locate data fetching with UI.
 18 | - Refactor to add reach cache to deduplicate multiple calls to this per page load. If using fetch it's auto deduped. Fetch inside components, improve structure: PersonalizedSection suspend.
 19 | - (MembershipTile, suspend the personalized for the general, ensuring we have a proper fallback and avoiding CLS).
 20 | - What about client WelcomeBanner, WelcomeBanner? Cant use my await isAuth. Always need this dep when using WelcomeBanner, passing it multiple levels down, forcing the parent to handle this dep, cant move this freely. This loggedIn a dep we will encounter forever into the future of our apps life.
 21 | - Let's utilize a smart pattern. Add authprovider. Let's not await this and block the root page, instead pass it as a promise down, keep it as a promise in the client provider.
 22 | - Welcomebanner: Remove prop all the way down, rather read it with use() inside PersonalBanner. Now we need to suspend Personalbanner with GeneralBanner, same pattern as before to avoid CLS and provide something useful, while promise resolves with use(). WelcomeBanner is now composable again.
 23 | - Any time we need the logged in variable, with is a lot, we can fetch it locally either with async functions or this auth provider, avoiding a lot of future prop drilling.
 24 | - Bonus: Create a custom hook useLoggedIn to avoid using use() inside components. Showcase in Provider.
 25 | - (Same problem in our user profile, getting the logged in state of a user on the server and passing it to the client. Do the same refactor here, login button composable and easily reused somewhere else in the future.)
 26 | - Since our welcomebanner is composable again, we can add it to the all page easily.
 27 | - Through those patterns, by fetching inside components and utilizing cache() and use() we can now maintain good component architecture. Reusable and composable.
 28 | 
 29 | ## Excessive client JS -> Client/Server composition: WelcomeBanner
 30 | 
 31 | - The next issue is excessive client side JS, and large components with multiple responsibilities.
 32 | - (Check out this client-side Pagination using search params. Client side due to nav status with a transition. Preventing default. There are some new tools we can use to handle this very common use case better. Remove all client side code here and isPending. Lost interactivity).
 33 | - (Replace with LinkStatus. A rather new nextjs feature, useLinkStatus. Like useFormStatus, avoid lack of feedback on stale navigation while waiting for the search param. See local pending state, using this also on the category links in the bottom here and the sort. Very small amount of client JS added, only what is needed for interactivity).
 34 | - Revisit the WelcomeBanner. It's dismissing this with a useState(). Switched to client side fetching with useSWR just to make this dismissable, multiple ways to fetch now with API layer, no types.
 35 | - Also, we break separation of concerns by involving UI logic with data. Instead, let's extract a client component wrapper, and use whats referred to as the donut pattern. Cut all except top line of comp. New file bannerContainer: use client here, rename, children, wrapper. We won't covert the content of this to client because it's a prop, could be any prop. It's a reference to server-rendered content.
 36 | - PersonalBanner remove use client and switch to server fetching getDiscountData, isAuth and return general, and delete API layer, no longer needed. Export WelcomeBanner client wrapper with suspense. Type safe also.
 37 | - Still have an error. For the motion.div, this simple animation might still be forcing the entire banner to be client. Let's move this to a MotionWrapper component, that can be reused for other animations. Could also switch to a react view transition! Back to server components now. Delete API layer.
 38 | - I have a boundary UI helper here. Turn on hydration mode, marking my components. See the donut pattern visual. Notice other boundaries, like client side search, and these server side categories.
 39 | - Since we learned the donut pattern, let's use it for something else as well. I want to hide the some categories if theres many. Notice the individual server components here. We again want to avoid excessive client side JS, so avoid creating API endpoints and converting everything. Replace div with ShowMore client wrapper and React.Children to maintain our separation of concerns. Now, we have this reusable and interactive ShowMore wrapper, and reusable categories. Notice the boundaries client and server, donut pattern again.
 40 | - The compositional power of server components, Categories is passed into this ShowMore, handles its own data. Both can be used freely all over the app.
 41 | - Donut pattern can be used for anything, like carousels and modals more. Actually using it for this quick preview modal, showcase modal boundary donut pattern again. Remember this next time you want to add interactivity to a server component.
 42 | - Learned donut pattern, how to utilize composition, we avoided client side js, which means we can move further to the last issue. Remove boundary UI.
 43 | 
 44 | ## Discuss dynamic issues
 45 | 
 46 | - The last issue is a lack of static rendering strategies.
 47 | - See build output: The entire app is entirely dynamic, problem is clear. Every page has a dynamic API dependency.
 48 | - This is preventing us from using static rendering benefits and for example using ISR, even though so much of the app is static.
 49 | - Demo all pages: wasting server resources constantly, slowing down our app. Why is this happening?
 50 | - (Crawlers will wait for content and it can be indexed, and the QWV is not terrible, but it's slower than it needs to be).
 51 | - The main culprit is actually this auth check in my layout. My header is hiding my user profile, which is using cookies, which is forcing dynamic rendering. Auth check in layout, which I definitely need. Classic mistake. Everything I do is now dynamically being run on the server. Because remember, my pages are either be static OR dynamic.
 52 | - (Even my non-user personalized content on my home screen like the featured product, I need to suspend too to avoid blocking the page, and even my about page which doesn't even have a dynamic API dep!)
 53 | - This is a common issue and something that's been solved before. Let's briefly see which solutions people might resort to in previous versions of Next.
 54 | 
 55 | ### Static/dynamic split
 56 | 
 57 | - Open new vs code branch and web browser deployed branch.
 58 | - Could make a route group. Move all static pages out, simple auth layout. Create AppLayout and pass it data from the auth layout.
 59 | - Show build output about page. Good for apps with very clear static/dynamic page boundaries.
 60 | - Now we have additional layouts and deps to remember, and more complexity.
 61 | - And still, the home page is dynamic because of the recommendations and banner loggedIn, and product page due to this save feature and dynamic reviews. Route groups is not a good solution for this app. These are important pages. What else can we try?
 62 | 
 63 | ### Request context
 64 | 
 65 | - Open next vs code branch and web browser deployed branch. Here, I created a request context URL param, that is being set in middleware, now called proxy. Encoded request context in the URL.
 66 | - We can generateStaticParams the different variants of loggedIn/nonLoggedIn state.
 67 | - Call this function instead of isAuthenticated now. Avoiding doing auth check in the components themselves.
 68 | - This is actually a common pattern, and is also recommended by the vercel flags sdk using a precompute function. And used by i18n libraries.
 69 | - But to be able to cache this product page, I need to client side fetch with useSWR the user specific stuff on the product page, and the reviews because we want them fresh. All to get this cache HIT!
 70 | - (Passing lot's of props now from the server side params, losing compositional benefits.)
 71 | - It's even more complex, hassle API endpoints, multiple data fetching strategies again. Pages routes flashbacks.
 72 | - (And we're even breaking the sweet new feature typed routes! Need this as Route everywhere.)
 73 | - And what about the home page, do we need to client side fetch everything user specific here too?
 74 | - This is a viable pattern, and useful for many regardless etc, but let's say we are actually not interested in rewriting our app.
 75 | - What if we could avoid all of these smart workarounds? What if there was a simpler way?
 76 | - Go back to real vscode.
 77 | 
 78 | ## Excessive dynamic rendering -> Composable caching with 'use cache'
 79 | 
 80 | ### Home page
 81 | 
 82 | - There is a simpler way: Enable  next 16 cacheComponents. This will opt all our async calls into dynamic, and also give us errors whenever an async call does not have a suspense boundary above it, and allow us to use the new 'use cache' directive to mark components, functions, or pages as cachable.
 83 | - First', let's review the rendering strategy of our apps home page. Let's go back to our banner on the Home page.
 84 | - Toggle the rendering boundary, see the dynamic WelcomeBanner, user profile dynamic too.
 85 | - What about these other ones? For example Hero.
 86 | - Hero.tsx is async, but doesn't depend on dynamic APIs. In this dynamic route, its slow. In a static, would be fast. Marked hybrid, also notice mark on FeaturedCategories, FeaturedProducts, not depending on dynamic APIs either.
 87 | - Now, everything here that's marked as hybrid can be cached. It's async and fetching something, but it does not depend on request time information like cookies, so we can share it across multiple users. Notice how right now its loading on every request.
 88 | - (Try "use cache" Home page, see the error. Dynamic components imported here.)
 89 | - Add "use cache" to the Hero to cache this. Add cacheApis snippet: cacheTag for fine grained revalidation with revalidateTag, cacheLife revalidation period. Mark it as "cached". We can remove this suspense boundary and skeleton. See it's no longer loading.
 90 | - (One cache key linked to components, no hassle revalidating many different pages).
 91 | - And every cached segment will included in the statically generated shell from Partial Prerendering, cached on the CDN. PPR goes down as far as the cache goes, until it meets a dynamic API, like the WelcomeBanner or the PersonalizedSection. Our Hero can be included in the static shell.
 92 | - Do the same for the FeaturedCategories and FeaturedProducts: use cache and mark, remove suspense. Less stress with skeletons and CLS.
 93 | - Now they're all cached, no longer loading on every request. Only thing that loads is the personalized content. We are no longer bound to page level static/dynamic rendering.
 94 | - If I had this auth dep here, PPR would not be able to include anything in the static shell. That's why my pattern of resolving promises deeper is good for both composition and caching.
 95 | 
 96 | ### All page
 97 | 
 98 | - See the rest of the boundaries pre-marked on other pages: all products. Categories and products. Reload -> we can cache this too.
 99 | - We have an error from nextjs though, categories doesn't have a suspense above it. Blocking route. Ah, my page actually blocked, slow loading.
100 | - CacheComponents helping identifying blocking calls, a is common problem, avoiding performance issues. Next.js tells us we should either cache or suspend this. Make a choice: I can either a loading.tsx, or cache the data fetch.
101 | - Simple solution, add huge loading.tsx skeleton code. That works, not useful loading UI though, cant interact with anything.
102 | - So, with cacheComponents, dynamic is like a scale, and it's up to us to decide how much static we want. Let's shift the page more towards static, and create a bigger static shell here. Delete loading.tsx.
103 | - Use pattern we learned in the beginning, resolve getCategories deeper down, inside the CategoryFilters component twice for my responsive view, add react cache() deduping, not a problem for my responsive view. Add use cache to this, and mark it as cached, dont need to suspend.
104 | - As you can see, CacheComponents making sure we follow best practices for RSC, and actually helping us think about where we resolve our promises, improving component architecture.
105 | - Still error on searchparams, dynamic API, cant cache this. Refactor to resolve deeper down. Now I have a bigger static shell. Error gone, suspended by the product list.
106 | - Loading state, search is now accessible from the start, and I can see my welcome banner and close this already. Great UX improvement.
107 | - Keep my Products hybrid, because I want them fresh.
108 | - Footer -> Categories: Can only use cache async functions, but since we already use the donut here it’s not a problem for the ShowMore, allowing us to cache more content as well as getting compositional benefits. It's all connected. Remove suspense.
109 | - See initial load, big static shell, only product list loads.
110 | 
111 | ### Product page
112 | 
113 | - Let's finally tackle the product page, also pre-marked with boundaries.
114 | - Add "use cache" to Product, mark cached, remove suspense, it's no longer loading on every request.
115 | - Try add use cache to the product details. It fails, exposing our dynamic API. Why? We have a dynamic dep. A pretty cool optimistic save product button, showing the saved state of that product for the user. Instead of importing the dynamic dep, slot as children, and interleave it. Composable caching! Children reference can change without affecting the cache entry. Donut pattern, but for caching. Now, we can cache the ProductDetails, mark cached.
116 | - Remove details suspense, add the suspense there with Bookmark! Interactive user specific content still works.
117 | - Keep the Reviews hybrid, want them fresh.
118 | - No longer loading on every request. Small chunk of dynamic content only, pushed the loading state all the way down.
119 | - Error in product page, no cache above params. We will still see this params resolve in the deployment, it's inside params, so it can't be static. Either we add a loading.tsx, or we can use generateStaticParams. Add an example generateStaticParams for a few products. Now it will ready for those, then cached as it's generated by users. The error is gone. Pick what is best for your use case and data set.
120 | - (For incrementally adopting cacheComponents, we would need to start high up with a dep, then build down and refactor out our dynamic APIs).
121 | - Done with the codebase refactor. Head over to a deployed version.
122 | 
123 | ## Final demo
124 | 
125 | - Remember i have purposefully added a lot of slows to this app.
126 | - New tab: see the initial page loads. Almost my entire home page is already available. Only the personalized section and banner load. Navigate to the all products page, then the product page.
127 | - See the boundary: again, every cached segment will be a part of the statically generated shell from Partial Prerendering, and in prod, improved prefetching new client side router from next 16, shell is prefetched for even faster navigations.
128 | - (Params are already known for all links on the page. Clicking categories within the app already resolved search params, so the shell is already there. Only on reload can we see it resolve here).
129 | - (With just a few code changes and smart patterns, we improved components architecture, removed redundant client js and allowed for more component reuse, and by caching more content we increased performance drastically and reduce server costs.)
130 | - To summarize, with cacheComponents, there is no static OR dynamic pages. We don't need to be avoiding dynamic APIs anymore, or compromise dynamic content. Skip creating complex hacks or workarounds or add multiple data fetching strategies, and make the developer experience worse, just for that cache HIT.
131 | - In modern Next.js, dynamic vs static is a scale, and we decide how much static we want in our apps. By following certain patterns, we can use this one mental model, performant, composable and salable by default.
132 | 


--------------------------------------------------------------------------------
/prisma/seed.ts:
--------------------------------------------------------------------------------
   1 | /* eslint-disable no-console */
   2 | import { PrismaClient } from '@prisma/client';
   3 | 
   4 | const prisma = new PrismaClient();
   5 | 
   6 | const CATEGORIES = [
   7 |   {
   8 |     description: 'Essential gadgets and accessories to enhance your productivity.',
   9 |     name: 'Accessories',
  10 |   },
  11 |   {
  12 |     description: 'Premium headphones, speakers, and audio equipment for conference-quality sound.',
  13 |     name: 'Audio',
  14 |   },
  15 |   {
  16 |     description: 'High-performance devices and electronics for professionals.',
  17 |     name: 'Electronics',
  18 |   },
  19 |   {
  20 |     description: 'Essential items and appliances to enhance your living space.',
  21 |     name: 'Home',
  22 |   },
  23 |   {
  24 |     description: 'Premium kitchen appliances and tools for your modern kitchen.',
  25 |     name: 'Kitchen',
  26 |   },
  27 |   {
  28 |     description: 'Connect your workspace with intelligent automation solutions.',
  29 |     name: 'Smart Home',
  30 |   },
  31 |   {
  32 |     description: 'Smart devices to track your health and productivity.',
  33 |     name: 'Wearables',
  34 |   },
  35 | ];
  36 | 
  37 | const ACCOUNTS = [
  38 |   {
  39 |     address: '123 Tech Street',
  40 |     birthDate: new Date('1990-03-15'),
  41 |     city: 'San Francisco',
  42 |     country: 'United States',
  43 |     email: 'jane.smith@gmail.com',
  44 |     firstName: 'Jane',
  45 |     id: 'a833bc10-64dd-4069-8573-4bbb4b0065ed',
  46 |     lastName: 'Smith',
  47 |     name: 'Jane Smith',
  48 |     phone: '+1-555-0123',
  49 |     zipCode: '94105',
  50 |   },
  51 | ];
  52 | 
  53 | const ACCOUNT_DETAILS = [
  54 |   {
  55 |     accountId: 'a833bc10-64dd-4069-8573-4bbb4b0065ed',
  56 |     language: 'en',
  57 |     newsletter: true,
  58 |     notifications: true,
  59 |     theme: 'dark',
  60 |     timezone: 'America/Los_Angeles',
  61 |   },
  62 | ];
  63 | 
  64 | const PRODUCTS = [
  65 |   // Audio Category (6 products)
  66 |   {
  67 |     category: 'Audio',
  68 |     description: 'High-quality noise cancelling headphones with 20 hours battery life',
  69 |     featured: true,
  70 |     id: 1,
  71 |     name: 'Wireless Headphones',
  72 |     price: 199.99,
  73 |   },
  74 |   {
  75 |     category: 'Audio',
  76 |     description: 'Waterproof Bluetooth speaker with 360-degree sound',
  77 |     id: 3,
  78 |     name: 'Portable Speaker',
  79 |     price: 79.99,
  80 |   },
  81 |   {
  82 |     category: 'Audio',
  83 |     description: 'Premium studio-quality headphones for audio professionals',
  84 |     id: 13,
  85 |     name: 'Studio Headphones',
  86 |     price: 299.99,
  87 |   },
  88 |   {
  89 |     category: 'Audio',
  90 |     description: 'Compact earbuds with active noise cancellation',
  91 |     id: 14,
  92 |     name: 'True Wireless Earbuds',
  93 |     price: 129.99,
  94 |   },
  95 |   {
  96 |     category: 'Audio',
  97 |     description: 'High-power Bluetooth speaker with deep bass',
  98 |     id: 15,
  99 |     name: 'Bass Speaker',
 100 |     price: 149.99,
 101 |   },
 102 |   {
 103 |     category: 'Audio',
 104 |     description: 'Professional USB microphone for podcasting and streaming',
 105 |     id: 16,
 106 |     name: 'USB Microphone',
 107 |     price: 89.99,
 108 |   },
 109 | 
 110 |   // Wearables Category (5 products)
 111 |   {
 112 |     category: 'Wearables',
 113 |     description: 'Fitness tracker with heart rate monitor and sleep tracking',
 114 |     id: 2,
 115 |     name: 'Smart Watch',
 116 |     price: 149.95,
 117 |   },
 118 |   {
 119 |     category: 'Wearables',
 120 |     description: 'Advanced fitness tracker with GPS and water resistance',
 121 |     id: 17,
 122 |     name: 'Fitness Tracker Pro',
 123 |     price: 199.99,
 124 |   },
 125 |   {
 126 |     category: 'Wearables',
 127 |     description: 'Smart ring for health monitoring and sleep analysis',
 128 |     id: 18,
 129 |     name: 'Smart Ring',
 130 |     price: 249.99,
 131 |   },
 132 |   {
 133 |     category: 'Wearables',
 134 |     description: 'Kids smartwatch with GPS tracking and parental controls',
 135 |     id: 19,
 136 |     name: 'Kids Smart Watch',
 137 |     price: 99.99,
 138 |   },
 139 |   {
 140 |     category: 'Wearables',
 141 |     description: 'Heart rate monitor chest strap for serious athletes',
 142 |     id: 20,
 143 |     name: 'Heart Rate Monitor',
 144 |     price: 69.99,
 145 |   },
 146 | 
 147 |   // Accessories Category (6 products)
 148 |   {
 149 |     category: 'Accessories',
 150 |     description: 'Ergonomic wireless mouse with precision tracking',
 151 |     id: 4,
 152 |     name: 'Wireless Mouse',
 153 |     price: 29.99,
 154 |   },
 155 |   {
 156 |     category: 'Accessories',
 157 |     description: 'Mechanical keyboard with RGB backlighting',
 158 |     id: 5,
 159 |     name: 'Gaming Keyboard',
 160 |     price: 89.95,
 161 |   },
 162 |   {
 163 |     category: 'Accessories',
 164 |     description: 'Ultra-thin laptop stand with adjustable height',
 165 |     id: 6,
 166 |     name: 'Laptop Stand',
 167 |     price: 39.99,
 168 |   },
 169 |   {
 170 |     category: 'Accessories',
 171 |     description: 'Fast wireless charger compatible with all Qi devices',
 172 |     id: 7,
 173 |     name: 'Wireless Charger',
 174 |     price: 24.99,
 175 |   },
 176 |   {
 177 |     category: 'Accessories',
 178 |     description: 'Multi-port USB-C hub with 4K HDMI output',
 179 |     id: 21,
 180 |     name: 'USB-C Hub',
 181 |     price: 79.99,
 182 |   },
 183 |   {
 184 |     category: 'Accessories',
 185 |     description: 'Premium leather laptop sleeve with magnetic closure',
 186 |     id: 22,
 187 |     name: 'Laptop Sleeve',
 188 |     price: 49.99,
 189 |   },
 190 | 
 191 |   // Electronics Category (6 products)
 192 |   {
 193 |     category: 'Electronics',
 194 |     description: 'HD webcam with auto-focus and noise reduction',
 195 |     id: 8,
 196 |     name: 'HD Webcam',
 197 |     price: 59.99,
 198 |   },
 199 |   {
 200 |     category: 'Electronics',
 201 |     description: 'Portable power bank with 20,000mAh capacity',
 202 |     id: 9,
 203 |     name: 'Power Bank',
 204 |     price: 49.95,
 205 |   },
 206 |   {
 207 |     category: 'Electronics',
 208 |     description: '4K action camera with image stabilization',
 209 |     id: 23,
 210 |     name: '4K Action Camera',
 211 |     price: 199.99,
 212 |   },
 213 |   {
 214 |     category: 'Electronics',
 215 |     description: 'Wireless charging pad with fast charging support',
 216 |     id: 24,
 217 |     name: 'Charging Pad',
 218 |     price: 34.99,
 219 |   },
 220 |   {
 221 |     category: 'Electronics',
 222 |     description: 'Portable projector with wireless connectivity',
 223 |     id: 25,
 224 |     name: 'Mini Projector',
 225 |     price: 299.99,
 226 |   },
 227 |   {
 228 |     category: 'Electronics',
 229 |     description: 'Digital photo frame with Wi-Fi and cloud sync',
 230 |     id: 26,
 231 |     name: 'Digital Photo Frame',
 232 |     price: 129.99,
 233 |   },
 234 | 
 235 |   // Smart Home Category (5 products)
 236 |   {
 237 |     category: 'Smart Home',
 238 |     description: 'Smart home security camera with night vision',
 239 |     id: 10,
 240 |     name: 'Security Camera',
 241 |     price: 129.99,
 242 |   },
 243 |   {
 244 |     category: 'Smart Home',
 245 |     description: 'Smart doorbell with video and two-way audio',
 246 |     id: 27,
 247 |     name: 'Smart Doorbell',
 248 |     price: 179.99,
 249 |   },
 250 |   {
 251 |     category: 'Smart Home',
 252 |     description: 'Smart light bulbs with color changing and app control',
 253 |     id: 28,
 254 |     name: 'Smart Light Bulbs',
 255 |     price: 39.99,
 256 |   },
 257 |   {
 258 |     category: 'Smart Home',
 259 |     description: 'Smart thermostat with energy saving features',
 260 |     id: 29,
 261 |     name: 'Smart Thermostat',
 262 |     price: 249.99,
 263 |   },
 264 |   {
 265 |     category: 'Smart Home',
 266 |     description: 'Smart plug with voice control and scheduling',
 267 |     id: 30,
 268 |     name: 'Smart Plug',
 269 |     price: 19.99,
 270 |   },
 271 | 
 272 |   // Kitchen Category (5 products)
 273 |   {
 274 |     category: 'Kitchen',
 275 |     description: 'Premium coffee maker with programmable timer',
 276 |     id: 11,
 277 |     name: 'Coffee Maker',
 278 |     price: 179.95,
 279 |   },
 280 |   {
 281 |     category: 'Kitchen',
 282 |     description: 'Smart air fryer with app control and presets',
 283 |     id: 31,
 284 |     name: 'Smart Air Fryer',
 285 |     price: 149.99,
 286 |   },
 287 |   {
 288 |     category: 'Kitchen',
 289 |     description: 'High-speed blender with multiple speed settings',
 290 |     id: 32,
 291 |     name: 'High-Speed Blender',
 292 |     price: 199.99,
 293 |   },
 294 |   {
 295 |     category: 'Kitchen',
 296 |     description: 'Electric kettle with temperature control',
 297 |     id: 33,
 298 |     name: 'Electric Kettle',
 299 |     price: 69.99,
 300 |   },
 301 |   {
 302 |     category: 'Kitchen',
 303 |     description: 'Food processor with multiple attachments',
 304 |     id: 34,
 305 |     name: 'Food Processor',
 306 |     price: 129.99,
 307 |   },
 308 | 
 309 |   // Home Category (5 products)
 310 |   {
 311 |     category: 'Home',
 312 |     description: 'Air purifier with HEPA filter for clean air',
 313 |     id: 12,
 314 |     name: 'Air Purifier',
 315 |     price: 249.99,
 316 |   },
 317 |   {
 318 |     category: 'Home',
 319 |     description: 'Humidifier with essential oil diffuser function',
 320 |     id: 35,
 321 |     name: 'Humidifier',
 322 |     price: 89.99,
 323 |   },
 324 |   {
 325 |     category: 'Home',
 326 |     description: 'Robot vacuum with smart mapping technology',
 327 |     id: 36,
 328 |     name: 'Robot Vacuum',
 329 |     price: 399.99,
 330 |   },
 331 |   {
 332 |     category: 'Home',
 333 |     description: 'Tower fan with remote control and timer',
 334 |     id: 37,
 335 |     name: 'Tower Fan',
 336 |     price: 119.99,
 337 |   },
 338 |   {
 339 |     category: 'Home',
 340 |     description: 'LED desk lamp with wireless charging base',
 341 |     id: 38,
 342 |     name: 'LED Desk Lamp',
 343 |     price: 79.99,
 344 |   },
 345 | ];
 346 | 
 347 | const REVIEWS = [
 348 |   // Audio category reviews
 349 |   {
 350 |     comment: 'Best headphones I have ever owned. The noise cancellation is amazing!',
 351 |     productId: 1,
 352 |     rating: 5,
 353 |   },
 354 |   {
 355 |     comment: 'Great sound quality but a bit uncomfortable after long use.',
 356 |     productId: 1,
 357 |     rating: 4,
 358 |   },
 359 |   {
 360 |     comment: 'Good sound but not as loud as I expected.',
 361 |     productId: 3,
 362 |     rating: 3,
 363 |   },
 364 |   {
 365 |     comment: 'Incredible sound quality for studio work!',
 366 |     productId: 13,
 367 |     rating: 5,
 368 |   },
 369 |   {
 370 |     comment: 'Perfect for my daily commute, great noise cancellation.',
 371 |     productId: 14,
 372 |     rating: 5,
 373 |   },
 374 |   {
 375 |     comment: 'Amazing bass response, perfect for parties.',
 376 |     productId: 15,
 377 |     rating: 4,
 378 |   },
 379 |   {
 380 |     comment: 'Crystal clear audio for my podcast recordings.',
 381 |     productId: 16,
 382 |     rating: 5,
 383 |   },
 384 | 
 385 |   // Wearables category reviews
 386 |   {
 387 |     comment: 'Perfect fitness companion, battery lasts for days!',
 388 |     productId: 2,
 389 |     rating: 5,
 390 |   },
 391 |   {
 392 |     comment: 'GPS tracking is very accurate for my runs.',
 393 |     productId: 17,
 394 |     rating: 5,
 395 |   },
 396 |   {
 397 |     comment: 'Comfortable to wear 24/7, great sleep tracking.',
 398 |     productId: 18,
 399 |     rating: 4,
 400 |   },
 401 |   {
 402 |     comment: 'My kids love it and I feel more secure knowing their location.',
 403 |     productId: 19,
 404 |     rating: 5,
 405 |   },
 406 |   {
 407 |     comment: 'Very accurate heart rate monitoring for workouts.',
 408 |     productId: 20,
 409 |     rating: 4,
 410 |   },
 411 | 
 412 |   // Accessories category reviews
 413 |   {
 414 |     comment: 'Perfect mouse for daily use, very comfortable grip.',
 415 |     productId: 4,
 416 |     rating: 5,
 417 |   },
 418 |   {
 419 |     comment: 'Great tactile feedback and the RGB looks amazing!',
 420 |     productId: 5,
 421 |     rating: 4,
 422 |   },
 423 |   {
 424 |     comment: 'Sturdy build quality, perfect for my MacBook.',
 425 |     productId: 6,
 426 |     rating: 5,
 427 |   },
 428 |   {
 429 |     comment: 'Charges my phone quickly, very convenient.',
 430 |     productId: 7,
 431 |     rating: 4,
 432 |   },
 433 |   {
 434 |     comment: 'All the ports I need in one compact hub.',
 435 |     productId: 21,
 436 |     rating: 5,
 437 |   },
 438 |   {
 439 |     comment: 'Beautiful leather quality, fits my laptop perfectly.',
 440 |     productId: 22,
 441 |     rating: 5,
 442 |   },
 443 | 
 444 |   // Electronics category reviews
 445 |   {
 446 |     comment: 'Crystal clear video quality for video calls.',
 447 |     productId: 8,
 448 |     rating: 5,
 449 |   },
 450 |   {
 451 |     comment: 'Reliable power bank, charges my devices multiple times.',
 452 |     productId: 9,
 453 |     rating: 4,
 454 |   },
 455 |   {
 456 |     comment: 'Amazing 4K quality for my adventure videos.',
 457 |     productId: 23,
 458 |     rating: 5,
 459 |   },
 460 |   {
 461 |     comment: 'Fast charging and sleek design.',
 462 |     productId: 24,
 463 |     rating: 4,
 464 |   },
 465 |   {
 466 |     comment: 'Perfect for movie nights, surprisingly bright picture.',
 467 |     productId: 25,
 468 |     rating: 4,
 469 |   },
 470 |   {
 471 |     comment: 'Love seeing family photos displayed all day.',
 472 |     productId: 26,
 473 |     rating: 5,
 474 |   },
 475 | 
 476 |   // Smart Home category reviews
 477 |   {
 478 |     comment: 'Easy setup and great night vision quality.',
 479 |     productId: 10,
 480 |     rating: 5,
 481 |   },
 482 |   {
 483 |     comment: 'Never miss a delivery again, great video quality.',
 484 |     productId: 27,
 485 |     rating: 5,
 486 |   },
 487 |   {
 488 |     comment: 'Love changing colors to match my mood.',
 489 |     productId: 28,
 490 |     rating: 4,
 491 |   },
 492 |   {
 493 |     comment: 'Saves money on energy bills and very smart.',
 494 |     productId: 29,
 495 |     rating: 5,
 496 |   },
 497 |   {
 498 |     comment: 'Simple setup and works perfectly with voice commands.',
 499 |     productId: 30,
 500 |     rating: 4,
 501 |   },
 502 | 
 503 |   // Kitchen category reviews
 504 |   {
 505 |     comment: 'Makes excellent coffee, timer feature is very useful.',
 506 |     productId: 11,
 507 |     rating: 4,
 508 |   },
 509 |   {
 510 |     comment: 'Healthy cooking made easy, food comes out crispy.',
 511 |     productId: 31,
 512 |     rating: 5,
 513 |   },
 514 |   {
 515 |     comment: 'Powerful blender, makes perfect smoothies every time.',
 516 |     productId: 32,
 517 |     rating: 5,
 518 |   },
 519 |   {
 520 |     comment: 'Perfect temperature control for different teas.',
 521 |     productId: 33,
 522 |     rating: 4,
 523 |   },
 524 |   {
 525 |     comment: 'Saves so much time in meal prep.',
 526 |     productId: 34,
 527 |     rating: 5,
 528 |   },
 529 | 
 530 |   // Home category reviews
 531 |   {
 532 |     comment: 'Noticeably cleaner air, quiet operation.',
 533 |     productId: 12,
 534 |     rating: 5,
 535 |   },
 536 |   {
 537 |     comment: 'Perfect humidity levels and love the aromatherapy feature.',
 538 |     productId: 35,
 539 |     rating: 4,
 540 |   },
 541 |   {
 542 |     comment: 'Keeps my floors spotless without any effort.',
 543 |     productId: 36,
 544 |     rating: 5,
 545 |   },
 546 |   {
 547 |     comment: 'Quiet operation and powerful airflow.',
 548 |     productId: 37,
 549 |     rating: 4,
 550 |   },
 551 |   {
 552 |     comment: 'Great light quality and convenient wireless charging.',
 553 |     productId: 38,
 554 |     rating: 5,
 555 |   },
 556 | ];
 557 | 
 558 | const PRODUCT_DETAILS = [
 559 |   // Audio category details
 560 |   {
 561 |     brand: 'SoundMaster',
 562 |     dimensions: '7.5 x 6.5 x 3.2 inches',
 563 |     materials: 'Memory foam, aluminum, plastic',
 564 |     origin: 'Japan',
 565 |     productId: 1,
 566 |     sku: 'WH-NC100',
 567 |     stockCount: 45,
 568 |     warrantyInfo: '2 year limited warranty',
 569 |     weight: 0.25,
 570 |   },
 571 |   {
 572 |     brand: 'AudioPro',
 573 |     dimensions: '5.5 x 5.5 x 8.2 inches',
 574 |     materials: 'Rubber, fabric, plastic',
 575 |     origin: 'Taiwan',
 576 |     productId: 3,
 577 |     sku: 'PS-BT300',
 578 |     stockCount: 78,
 579 |     warrantyInfo: '1 year limited warranty',
 580 |     weight: 0.6,
 581 |   },
 582 |   {
 583 |     brand: 'ProAudio',
 584 |     dimensions: '8.2 x 7.1 x 3.8 inches',
 585 |     materials: 'Premium leather, steel, memory foam',
 586 |     origin: 'Germany',
 587 |     productId: 13,
 588 |     sku: 'SH-PRO130',
 589 |     stockCount: 23,
 590 |     warrantyInfo: '3 year limited warranty',
 591 |     weight: 0.35,
 592 |   },
 593 |   {
 594 |     brand: 'SoundMini',
 595 |     dimensions: '1.2 x 1.0 x 0.8 inches',
 596 |     materials: 'Silicone, titanium drivers',
 597 |     origin: 'Denmark',
 598 |     productId: 14,
 599 |     sku: 'TWE-NC140',
 600 |     stockCount: 67,
 601 |     warrantyInfo: '1 year limited warranty',
 602 |     weight: 0.01,
 603 |   },
 604 |   {
 605 |     brand: 'BassMax',
 606 |     dimensions: '8.0 x 8.0 x 12.5 inches',
 607 |     materials: 'Metal grille, rubber, plastic',
 608 |     origin: 'USA',
 609 |     productId: 15,
 610 |     sku: 'BS-MAX150',
 611 |     stockCount: 34,
 612 |     warrantyInfo: '2 year limited warranty',
 613 |     weight: 1.2,
 614 |   },
 615 |   {
 616 |     brand: 'StreamPro',
 617 |     dimensions: '3.5 x 3.5 x 8.0 inches',
 618 |     materials: 'Metal mesh, aluminum body',
 619 |     origin: 'Sweden',
 620 |     productId: 16,
 621 |     sku: 'USB-MIC160',
 622 |     stockCount: 89,
 623 |     warrantyInfo: '2 year limited warranty',
 624 |     weight: 0.4,
 625 |   },
 626 | 
 627 |   // Wearables category details
 628 |   {
 629 |     brand: 'TechFit',
 630 |     dimensions: '1.6 x 1.6 x 0.5 inches',
 631 |     materials: 'Silicone, aluminum, glass',
 632 |     origin: 'China',
 633 |     productId: 2,
 634 |     sku: 'SW-FIT200',
 635 |     stockCount: 32,
 636 |     warrantyInfo: '1 year limited warranty',
 637 |     weight: 0.05,
 638 |   },
 639 |   {
 640 |     brand: 'FitTrack',
 641 |     dimensions: '1.8 x 1.8 x 0.6 inches',
 642 |     materials: 'Titanium, sapphire glass, silicone',
 643 |     origin: 'Switzerland',
 644 |     productId: 17,
 645 |     sku: 'FT-PRO170',
 646 |     stockCount: 45,
 647 |     warrantyInfo: '2 year limited warranty',
 648 |     weight: 0.08,
 649 |   },
 650 |   {
 651 |     brand: 'HealthRing',
 652 |     dimensions: '0.8 x 0.8 x 0.3 inches',
 653 |     materials: 'Titanium, ceramic, medical-grade silicone',
 654 |     origin: 'Finland',
 655 |     productId: 18,
 656 |     sku: 'HR-SMART180',
 657 |     stockCount: 28,
 658 |     warrantyInfo: '1 year limited warranty',
 659 |     weight: 0.005,
 660 |   },
 661 |   {
 662 |     brand: 'KidSafe',
 663 |     dimensions: '1.4 x 1.4 x 0.5 inches',
 664 |     materials: 'Food-grade silicone, plastic',
 665 |     origin: 'Canada',
 666 |     productId: 19,
 667 |     sku: 'KS-WATCH190',
 668 |     stockCount: 76,
 669 |     warrantyInfo: '1 year limited warranty',
 670 |     weight: 0.04,
 671 |   },
 672 |   {
 673 |     brand: 'AthleteHR',
 674 |     dimensions: '2.5 x 1.5 x 0.8 inches',
 675 |     materials: 'Soft fabric strap, plastic sensor',
 676 |     origin: 'Norway',
 677 |     productId: 20,
 678 |     sku: 'AH-MONITOR200',
 679 |     stockCount: 123,
 680 |     warrantyInfo: '1 year limited warranty',
 681 |     weight: 0.06,
 682 |   },
 683 | 
 684 |   // Accessories category details
 685 |   {
 686 |     brand: 'ErgoTech',
 687 |     dimensions: '4.7 x 2.8 x 1.5 inches',
 688 |     materials: 'ABS plastic, rubber grip',
 689 |     origin: 'China',
 690 |     productId: 4,
 691 |     sku: 'WM-ERG400',
 692 |     stockCount: 156,
 693 |     warrantyInfo: '1 year limited warranty',
 694 |     weight: 0.1,
 695 |   },
 696 |   {
 697 |     brand: 'GamePro',
 698 |     dimensions: '17.3 x 5.1 x 1.4 inches',
 699 |     materials: 'Aluminum frame, mechanical switches',
 700 |     origin: 'Taiwan',
 701 |     productId: 5,
 702 |     sku: 'KB-RGB500',
 703 |     stockCount: 89,
 704 |     warrantyInfo: '2 year limited warranty',
 705 |     weight: 1.2,
 706 |   },
 707 |   {
 708 |     brand: 'DeskMate',
 709 |     dimensions: '10 x 9 x 6 inches',
 710 |     materials: 'Aluminum alloy, silicone pads',
 711 |     origin: 'USA',
 712 |     productId: 6,
 713 |     sku: 'LS-ADJ600',
 714 |     stockCount: 67,
 715 |     warrantyInfo: '1 year limited warranty',
 716 |     weight: 0.8,
 717 |   },
 718 |   {
 719 |     brand: 'ChargeFast',
 720 |     dimensions: '4 x 4 x 0.4 inches',
 721 |     materials: 'Tempered glass, aluminum',
 722 |     origin: 'Korea',
 723 |     productId: 7,
 724 |     sku: 'WC-QI700',
 725 |     stockCount: 234,
 726 |     warrantyInfo: '1 year limited warranty',
 727 |     weight: 0.2,
 728 |   },
 729 |   {
 730 |     brand: 'ConnectPro',
 731 |     dimensions: '4.5 x 2.0 x 0.7 inches',
 732 |     materials: 'Aluminum alloy, USB-C connectors',
 733 |     origin: 'Netherlands',
 734 |     productId: 21,
 735 |     sku: 'CP-HUB210',
 736 |     stockCount: 145,
 737 |     warrantyInfo: '2 year limited warranty',
 738 |     weight: 0.15,
 739 |   },
 740 |   {
 741 |     brand: 'LeatherCraft',
 742 |     dimensions: '14 x 10 x 0.5 inches',
 743 |     materials: 'Premium leather, microfiber lining',
 744 |     origin: 'Italy',
 745 |     productId: 22,
 746 |     sku: 'LC-SLEEVE220',
 747 |     stockCount: 87,
 748 |     warrantyInfo: '1 year limited warranty',
 749 |     weight: 0.25,
 750 |   },
 751 | 
 752 |   // Electronics category details
 753 |   {
 754 |     brand: 'StreamCam',
 755 |     dimensions: '3.7 x 2.1 x 2.1 inches',
 756 |     materials: 'Plastic housing, glass lens',
 757 |     origin: 'China',
 758 |     productId: 8,
 759 |     sku: 'HD-CAM800',
 760 |     stockCount: 123,
 761 |     warrantyInfo: '1 year limited warranty',
 762 |     weight: 0.15,
 763 |   },
 764 |   {
 765 |     brand: 'PowerMax',
 766 |     dimensions: '6.3 x 3 x 0.8 inches',
 767 |     materials: 'Lithium polymer, ABS plastic',
 768 |     origin: 'China',
 769 |     productId: 9,
 770 |     sku: 'PB-20K900',
 771 |     stockCount: 178,
 772 |     warrantyInfo: '1 year limited warranty',
 773 |     weight: 0.45,
 774 |   },
 775 |   {
 776 |     brand: 'ActionPro',
 777 |     dimensions: '2.5 x 1.8 x 1.2 inches',
 778 |     materials: 'Waterproof housing, glass lens',
 779 |     origin: 'Japan',
 780 |     productId: 23,
 781 |     sku: 'AP-4K230',
 782 |     stockCount: 56,
 783 |     warrantyInfo: '2 year limited warranty',
 784 |     weight: 0.12,
 785 |   },
 786 |   {
 787 |     brand: 'QuickCharge',
 788 |     dimensions: '6 x 4 x 0.5 inches',
 789 |     materials: 'Tempered glass, wireless coils',
 790 |     origin: 'Korea',
 791 |     productId: 24,
 792 |     sku: 'QC-PAD240',
 793 |     stockCount: 198,
 794 |     warrantyInfo: '1 year limited warranty',
 795 |     weight: 0.3,
 796 |   },
 797 |   {
 798 |     brand: 'MiniBeam',
 799 |     dimensions: '5.5 x 3.5 x 1.8 inches',
 800 |     materials: 'Aluminum housing, LED projector',
 801 |     origin: 'Taiwan',
 802 |     productId: 25,
 803 |     sku: 'MB-PROJ250',
 804 |     stockCount: 34,
 805 |     warrantyInfo: '2 year limited warranty',
 806 |     weight: 0.6,
 807 |   },
 808 |   {
 809 |     brand: 'PhotoDisplay',
 810 |     dimensions: '8.5 x 6.0 x 0.8 inches',
 811 |     materials: 'Wood frame, LCD display',
 812 |     origin: 'China',
 813 |     productId: 26,
 814 |     sku: 'PD-FRAME260',
 815 |     stockCount: 73,
 816 |     warrantyInfo: '1 year limited warranty',
 817 |     weight: 0.5,
 818 |   },
 819 | 
 820 |   // Smart Home category details
 821 |   {
 822 |     brand: 'SecureHome',
 823 |     dimensions: '4.5 x 4.5 x 6.2 inches',
 824 |     materials: 'Weather-resistant plastic, glass',
 825 |     origin: 'Taiwan',
 826 |     productId: 10,
 827 |     sku: 'SC-NV1000',
 828 |     stockCount: 56,
 829 |     warrantyInfo: '2 year limited warranty',
 830 |     weight: 0.35,
 831 |   },
 832 |   {
 833 |     brand: 'DoorGuard',
 834 |     dimensions: '4.8 x 2.4 x 1.0 inches',
 835 |     materials: 'Weather-resistant plastic, metal',
 836 |     origin: 'USA',
 837 |     productId: 27,
 838 |     sku: 'DG-BELL270',
 839 |     stockCount: 89,
 840 |     warrantyInfo: '2 year limited warranty',
 841 |     weight: 0.25,
 842 |   },
 843 |   {
 844 |     brand: 'LightSmart',
 845 |     dimensions: '2.4 x 2.4 x 4.3 inches',
 846 |     materials: 'Plastic housing, LED chips',
 847 |     origin: 'Netherlands',
 848 |     productId: 28,
 849 |     sku: 'LS-BULB280',
 850 |     stockCount: 267,
 851 |     warrantyInfo: '2 year limited warranty',
 852 |     weight: 0.08,
 853 |   },
 854 |   {
 855 |     brand: 'ClimateControl',
 856 |     dimensions: '4.2 x 4.2 x 1.0 inches',
 857 |     materials: 'Plastic, electronic components',
 858 |     origin: 'Germany',
 859 |     productId: 29,
 860 |     sku: 'CC-THERMO290',
 861 |     stockCount: 43,
 862 |     warrantyInfo: '3 year limited warranty',
 863 |     weight: 0.18,
 864 |   },
 865 |   {
 866 |     brand: 'PowerSmart',
 867 |     dimensions: '2.7 x 1.6 x 2.8 inches',
 868 |     materials: 'Fire-resistant plastic',
 869 |     origin: 'China',
 870 |     productId: 30,
 871 |     sku: 'PS-PLUG300',
 872 |     stockCount: 456,
 873 |     warrantyInfo: '1 year limited warranty',
 874 |     weight: 0.12,
 875 |   },
 876 | 
 877 |   // Kitchen category details
 878 |   {
 879 |     brand: 'BrewMaster',
 880 |     dimensions: '12 x 8 x 14 inches',
 881 |     materials: 'Stainless steel, glass carafe',
 882 |     origin: 'Germany',
 883 |     productId: 11,
 884 |     sku: 'CM-PRO1100',
 885 |     stockCount: 34,
 886 |     warrantyInfo: '3 year limited warranty',
 887 |     weight: 3.2,
 888 |   },
 889 |   {
 890 |     brand: 'CookSmart',
 891 |     dimensions: '14 x 11 x 13 inches',
 892 |     materials: 'Stainless steel, non-stick coating',
 893 |     origin: 'France',
 894 |     productId: 31,
 895 |     sku: 'CS-AIRFRY310',
 896 |     stockCount: 67,
 897 |     warrantyInfo: '2 year limited warranty',
 898 |     weight: 4.5,
 899 |   },
 900 |   {
 901 |     brand: 'BlendMax',
 902 |     dimensions: '7 x 8 x 17 inches',
 903 |     materials: 'Stainless steel blades, BPA-free plastic',
 904 |     origin: 'USA',
 905 |     productId: 32,
 906 |     sku: 'BM-BLEND320',
 907 |     stockCount: 45,
 908 |     warrantyInfo: '3 year limited warranty',
 909 |     weight: 3.8,
 910 |   },
 911 |   {
 912 |     brand: 'HotWater',
 913 |     dimensions: '9 x 6 x 10 inches',
 914 |     materials: 'Stainless steel, plastic base',
 915 |     origin: 'UK',
 916 |     productId: 33,
 917 |     sku: 'HW-KETTLE330',
 918 |     stockCount: 98,
 919 |     warrantyInfo: '2 year limited warranty',
 920 |     weight: 1.5,
 921 |   },
 922 |   {
 923 |     brand: 'ChopMaster',
 924 |     dimensions: '12 x 9 x 9 inches',
 925 |     materials: 'Stainless steel, BPA-free plastic',
 926 |     origin: 'Germany',
 927 |     productId: 34,
 928 |     sku: 'CM-PROC340',
 929 |     stockCount: 56,
 930 |     warrantyInfo: '2 year limited warranty',
 931 |     weight: 2.8,
 932 |   },
 933 | 
 934 |   // Home category details
 935 |   {
 936 |     brand: 'CleanAir',
 937 |     dimensions: '16 x 8 x 20 inches',
 938 |     materials: 'ABS plastic, HEPA filter',
 939 |     origin: 'Sweden',
 940 |     productId: 12,
 941 |     sku: 'AP-HEPA1200',
 942 |     stockCount: 45,
 943 |     warrantyInfo: '2 year limited warranty',
 944 |     weight: 4.8,
 945 |   },
 946 |   {
 947 |     brand: 'MoistureMax',
 948 |     dimensions: '8 x 8 x 12 inches',
 949 |     materials: 'BPA-free plastic, ceramic components',
 950 |     origin: 'Japan',
 951 |     productId: 35,
 952 |     sku: 'MM-HUMID350',
 953 |     stockCount: 78,
 954 |     warrantyInfo: '1 year limited warranty',
 955 |     weight: 2.1,
 956 |   },
 957 |   {
 958 |     brand: 'CleanBot',
 959 |     dimensions: '13.4 x 13.4 x 3.6 inches',
 960 |     materials: 'ABS plastic, rubber brushes',
 961 |     origin: 'Korea',
 962 |     productId: 36,
 963 |     sku: 'CB-ROBOT360',
 964 |     stockCount: 23,
 965 |     warrantyInfo: '2 year limited warranty',
 966 |     weight: 6.2,
 967 |   },
 968 |   {
 969 |     brand: 'AirFlow',
 970 |     dimensions: '12 x 12 x 42 inches',
 971 |     materials: 'Plastic housing, metal fan',
 972 |     origin: 'China',
 973 |     productId: 37,
 974 |     sku: 'AF-TOWER370',
 975 |     stockCount: 67,
 976 |     warrantyInfo: '2 year limited warranty',
 977 |     weight: 8.5,
 978 |   },
 979 |   {
 980 |     brand: 'DeskLight',
 981 |     dimensions: '6 x 6 x 18 inches',
 982 |     materials: 'Aluminum, LED strips, wireless charging coils',
 983 |     origin: 'Denmark',
 984 |     productId: 38,
 985 |     sku: 'DL-LAMP380',
 986 |     stockCount: 134,
 987 |     warrantyInfo: '2 year limited warranty',
 988 |     weight: 1.8,
 989 |   },
 990 | ];
 991 | 
 992 | const SAVED_PRODUCTS = [
 993 |   {
 994 |     accountId: 'a833bc10-64dd-4069-8573-4bbb4b0065ed',
 995 |     productId: 1,
 996 |   },
 997 |   {
 998 |     accountId: 'a833bc10-64dd-4069-8573-4bbb4b0065ed',
 999 |     productId: 3,
1000 |   },
1001 |   {
1002 |     accountId: 'a833bc10-64dd-4069-8573-4bbb4b0065ed',
1003 |     productId: 5,
1004 |   },
1005 |   {
1006 |     accountId: 'a833bc10-64dd-4069-8573-4bbb4b0065ed',
1007 |     productId: 8,
1008 |   },
1009 | ];
1010 | 
1011 | const DISCOUNTS = [
1012 |   {
1013 |     code: 'WELCOME20',
1014 |     description: '20% off your first order',
1015 |     expiry: new Date('2025-12-31'),
1016 |     id: 1,
1017 |     percentage: 20,
1018 |   },
1019 |   {
1020 |     code: 'LOYAL15',
1021 |     description: '15% off for loyal customers',
1022 |     expiry: new Date('2025-09-30'),
1023 |     id: 2,
1024 |     percentage: 15,
1025 |   },
1026 |   {
1027 |     code: 'TECH10',
1028 |     description: '10% off electronics',
1029 |     expiry: new Date('2025-08-15'),
1030 |     id: 3,
1031 |     percentage: 10,
1032 |   },
1033 | ];
1034 | 
1035 | const USER_DISCOUNTS = [
1036 |   {
1037 |     accountId: 'a833bc10-64dd-4069-8573-4bbb4b0065ed',
1038 |     discountId: 1,
1039 |   },
1040 |   {
1041 |     accountId: 'a833bc10-64dd-4069-8573-4bbb4b0065ed',
1042 |     discountId: 2,
1043 |   },
1044 |   {
1045 |     accountId: 'a833bc10-64dd-4069-8573-4bbb4b0065ed',
1046 |     discountId: 3,
1047 |   },
1048 | ];
1049 | 
1050 | async function seed() {
1051 |   // Delete all existing data in the correct order (respecting foreign key constraints)
1052 |   console.info('[SEED] Deleting existing data...');
1053 |   await prisma.userDiscount.deleteMany({});
1054 |   await prisma.discount.deleteMany({});
1055 |   await prisma.savedProduct.deleteMany({});
1056 |   await prisma.review.deleteMany({});
1057 |   await prisma.productDetail.deleteMany({});
1058 |   await prisma.product.deleteMany({});
1059 |   await prisma.accountDetail.deleteMany({});
1060 |   await prisma.account.deleteMany({});
1061 |   await prisma.category.deleteMany({});
1062 |   console.info('[SEED] Successfully deleted existing data');
1063 | 
1064 |   // Create categories first
1065 |   await Promise.all(
1066 |     CATEGORIES.map(category => {
1067 |       return prisma.category.create({
1068 |         data: {
1069 |           description: category.description,
1070 |           name: category.name,
1071 |         },
1072 |       });
1073 |     }),
1074 |   )
1075 |     .then(() => {
1076 |       return console.info('[SEED] Successfully created category records');
1077 |     })
1078 |     .catch(e => {
1079 |       return console.error('[SEED] Failed to create category records', e);
1080 |     });
1081 | 
1082 |   // Create accounts
1083 |   await Promise.all(
1084 |     ACCOUNTS.map(account => {
1085 |       return prisma.account.create({
1086 |         data: {
1087 |           address: account.address,
1088 |           birthDate: account.birthDate,
1089 |           city: account.city,
1090 |           country: account.country,
1091 |           email: account.email,
1092 |           firstName: account.firstName,
1093 |           id: account.id,
1094 |           lastName: account.lastName,
1095 |           name: account.name,
1096 |           phone: account.phone,
1097 |           zipCode: account.zipCode,
1098 |         },
1099 |       });
1100 |     }),
1101 |   )
1102 |     .then(() => {
1103 |       return console.info('[SEED] Successfully create account records');
1104 |     })
1105 |     .catch(e => {
1106 |       return console.error('[SEED] Failed to create account records', e);
1107 |     });
1108 | 
1109 |   // Create account details
1110 |   await Promise.all(
1111 |     ACCOUNT_DETAILS.map(detail => {
1112 |       return prisma.accountDetail.create({
1113 |         data: {
1114 |           accountId: detail.accountId,
1115 |           language: detail.language,
1116 |           newsletter: detail.newsletter,
1117 |           notifications: detail.notifications,
1118 |           theme: detail.theme,
1119 |           timezone: detail.timezone,
1120 |         },
1121 |       });
1122 |     }),
1123 |   )
1124 |     .then(() => {
1125 |       return console.info('[SEED] Successfully created account details records');
1126 |     })
1127 |     .catch(e => {
1128 |       return console.error('[SEED] Failed to create account details records', e);
1129 |     });
1130 | 
1131 |   // Create products
1132 |   await Promise.all(
1133 |     PRODUCTS.map(product => {
1134 |       return prisma.product.create({
1135 |         data: {
1136 |           category: product.category,
1137 |           description: product.description,
1138 |           id: product.id,
1139 |           name: product.name,
1140 |           price: product.price,
1141 |         },
1142 |       });
1143 |     }),
1144 |   )
1145 |     .then(() => {
1146 |       console.info('[SEED] Successfully created product records');
1147 |     })
1148 |     .catch(e => {
1149 |       console.error('[SEED] Failed to create product records', e);
1150 |     });
1151 | 
1152 |   // Create reviews
1153 |   await Promise.all(
1154 |     REVIEWS.map(review => {
1155 |       return prisma.review.create({
1156 |         data: {
1157 |           comment: review.comment,
1158 |           productId: review.productId,
1159 |           rating: review.rating,
1160 |         },
1161 |       });
1162 |     }),
1163 |   )
1164 |     .then(() => {
1165 |       console.info('[SEED] Successfully created review records');
1166 |     })
1167 |     .catch(e => {
1168 |       console.error('[SEED] Failed to create review records', e);
1169 |     });
1170 | 
1171 |   // Create product details
1172 |   await Promise.all(
1173 |     PRODUCT_DETAILS.map(detail => {
1174 |       return prisma.productDetail.create({
1175 |         data: {
1176 |           brand: detail.brand,
1177 |           dimensions: detail.dimensions,
1178 |           materials: detail.materials,
1179 |           origin: detail.origin,
1180 |           productId: detail.productId,
1181 |           sku: detail.sku,
1182 |           stockCount: detail.stockCount,
1183 |           warrantyInfo: detail.warrantyInfo,
1184 |           weight: detail.weight,
1185 |         },
1186 |       });
1187 |     }),
1188 |   )
1189 |     .then(() => {
1190 |       console.info('[SEED] Successfully created product details records');
1191 |     })
1192 |     .catch(e => {
1193 |       console.error('[SEED] Failed to create product details records', e);
1194 |     });
1195 | 
1196 |   // Create saved products
1197 |   await Promise.all(
1198 |     SAVED_PRODUCTS.map(savedProduct => {
1199 |       return prisma.savedProduct.create({
1200 |         data: {
1201 |           accountId: savedProduct.accountId,
1202 |           productId: savedProduct.productId,
1203 |         },
1204 |       });
1205 |     }),
1206 |   )
1207 |     .then(() => {
1208 |       console.info('[SEED] Successfully created saved products records');
1209 |     })
1210 |     .catch(e => {
1211 |       console.error('[SEED] Failed to create saved products records', e);
1212 |     });
1213 | 
1214 |   // Create discounts
1215 |   await Promise.all(
1216 |     DISCOUNTS.map(discount => {
1217 |       return prisma.discount.create({
1218 |         data: {
1219 |           code: discount.code,
1220 |           description: discount.description,
1221 |           expiry: discount.expiry,
1222 |           id: discount.id,
1223 |           percentage: discount.percentage,
1224 |         },
1225 |       });
1226 |     }),
1227 |   )
1228 |     .then(() => {
1229 |       console.info('[SEED] Successfully created discount records');
1230 |     })
1231 |     .catch(e => {
1232 |       console.error('[SEED] Failed to create discount records', e);
1233 |     });
1234 | 
1235 |   // Create user discounts
1236 |   await Promise.all(
1237 |     USER_DISCOUNTS.map(userDiscount => {
1238 |       return prisma.userDiscount.create({
1239 |         data: {
1240 |           accountId: userDiscount.accountId,
1241 |           discountId: userDiscount.discountId,
1242 |         },
1243 |       });
1244 |     }),
1245 |   )
1246 |     .then(() => {
1247 |       console.info('[SEED] Successfully created user discount records');
1248 |     })
1249 |     .catch(e => {
1250 |       console.error('[SEED] Failed to create user discount records', e);
1251 |     });
1252 | }
1253 | 
1254 | seed();
1255 | 


--------------------------------------------------------------------------------