npx create-next-app@latest storenpm run dev- in globals.css remove all code after directives
- page.tsx
function HomePage() {
return <h1 className="text-3xl">HomePage</h1>
}
export default HomePage- layout.tsx
export const metadata: Metadata = {
title: 'Next Store',
description: 'A nifty store built with Next.js',
}- get a hold of the README.MD
-
about
-
admin
-
cart
-
favorites
-
orders
-
products
-
reviews
-
new file - pageName/page.tsx
function AboutPage() {
return <div>AboutPage</div>
}
export default AboutPagenpx shadcn-ui@latest init
- New York
- Zinc
- CSS variables:YES
npx shadcn-ui@latest add buttonimport { Button } from '@/components/ui/button'
function HomePage() {
return (
<div>
<h1 className="text-3xl">HomePage</h1>
<Button variant="outline" size="lg" className="capitalize m-8">
Click me
</Button>
</div>
)
}
export default HomePagenpx shadcn-ui@latest add breadcrumb card checkbox dropdown-menu input label popover select separator table textarea toast skeleton carousel- components
- ui
- cart
- form
- global
- home
- navbar
- products
- single-product
-
create
-
navbar
- CartButton
- DarkMode
- LinksDropdown
- Logo
- Navbar
- NavSearch
- SignOutLink
- UserIcon
- create globals/Container.tsx
import { cn } from '@/lib/utils'
function Container({
children,
className,
}: {
children: React.ReactNode
className?: string
}) {
return (
<div className={cn('mx-auto max-w-6xl xl:max-w-7xl px-8', className)}>
{children}
</div>
)
}
export default Containercn() function takes any number of arguments (which are expected to be strings or falsy values), filters out any falsy values (like false, null, undefined, 0, NaN, and empty string ""), and then joins the remaining strings into a single string with spaces in between.
import Logo from './Logo'
import LinksDropdown from './LinksDropdown'
import DarkMode from './DarkMode'
import CartButton from './CartButton'
import NavSearch from './NavSearch'
import Container from '../global/Container'
function Navbar() {
return (
<nav className="border-b ">
<Container className="flex flex-col sm:flex-row sm:justify-between sm:items-center flex-wrap gap-4 py-8">
<Logo />
<NavSearch />
<div className="flex gap-4 items-center ">
<CartButton />
<DarkMode />
<LinksDropdown />
</div>
</Container>
</nav>
)
}
export default Navbar- layout.tsx
import Navbar from '@/components/navbar/Navbar'
import Container from '@/components/global/Container'
return (
<html lang="en">
<body className={inter.className}>
<Navbar />
<Container className="py-20">{children}</Container>
</body>
</html>
)npm install react-iconsLogo.tsx
import Link from 'next/link'
import { Button } from '../ui/button'
import { VscCode } from 'react-icons/vsc'
function Logo() {
return (
<Button size="icon" asChild>
<Link href="/">
<VscCode className="w-6 h-6" />
</Link>
</Button>
)
}
export default Logoimport { Input } from '../ui/input'
function NavSearch() {
return (
<Input
type="search"
placeholder="search product..."
className="max-w-xs dark:bg-muted "
/>
)
}
export default NavSearchimport { Button } from '@/components/ui/button'
import { LuShoppingCart } from 'react-icons/lu'
import Link from 'next/link'
async function CartButton() {
// temp
const numItemsInCart = 9
return (
<Button
asChild
variant="outline"
size="icon"
className="flex justify-center items-center relative"
>
<Link href="/cart">
<LuShoppingCart />
<span className="absolute -top-3 -right-3 bg-primary text-white rounded-full h-6 w-6 flex items-center justify-center text-xs">
{numItemsInCart}
</span>
</Link>
</Button>
)
}
export default CartButton- replace css variables in in globals.css
- create app/providers.tsx
'use client'
function Providers({ children }: { children: React.ReactNode }) {
return <>{children}</>
}
export default Providerslayout.tsx
import Providers from './providers'
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<Providers>
<Navbar />
<Container className="py-20">{children}</Container>
</Providers>
</body>
</html>
)npm install next-themes- create app/theme-provider.tsx
'use client'
import * as React from 'react'
import { ThemeProvider as NextThemesProvider } from 'next-themes'
import { type ThemeProviderProps } from 'next-themes/dist/types'
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}providers.tsx
'use client'
import { ThemeProvider } from './theme-provider'
function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
)
}
export default Providers- make sure you export as default !!!
'use client'
import * as React from 'react'
import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
import { useTheme } from 'next-themes'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
export default function ModeToggle() {
const { setTheme } = useTheme()
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme('light')}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}- create utils/links.ts
type NavLink = {
href: string
label: string
}
export const links: NavLink[] = [
{ href: '/', label: 'home' },
{ href: '/about', label: 'about' },
{ href: '/products', label: 'products' },
{ href: '/favorites', label: 'favorites' },
{ href: '/cart', label: 'cart' },
{ href: '/orders', label: 'orders' },
]import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu'
import { LuAlignLeft } from 'react-icons/lu'
import Link from 'next/link'
import { Button } from '../ui/button'
import { links } from '@/utils/links'
function LinksDropdown() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="flex gap-4 max-w-[100px]">
<LuAlignLeft className="w-6 h-6" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-40" align="start" sideOffset={10}>
{links.map((link) => {
return (
<DropdownMenuItem key={link.href}>
<Link href={link.href} className="capitalize w-full">
{link.label}
</Link>
</DropdownMenuItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
)
}
export default LinksDropdown- create account and organization
- create project
- setup password in .env (optional)
- add .env to .gitignore !!!
- it will take few minutes
- install prisma vs-code extension
Prisma ORM is a database toolkit that simplifies database access in web applications. It allows developers to interact with databases using a type-safe and auto-generated API, making database operations easier and more secure.
- Prisma server: A standalone infrastructure component sitting on top of your database.
- Prisma client: An auto-generated library that connects to the Prisma server and lets you read, write and stream data in your database. It is used for data access in your applications.
npm install prisma --save-dev
npm install @prisma/clientnpx prisma initIn development, the command next dev clears Node.js cache on run. This in turn initializes a new PrismaClient instance each time due to hot reloading that creates a connection to the database. This can quickly exhaust the database connections as each PrismaClient instance holds its own connection pool.
(Prisma Instance)[https://www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#solution]
- create utils/db.ts
import { PrismaClient } from '@prisma/client'
const prismaClientSingleton = () => {
return new PrismaClient()
}
type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClientSingleton | undefined
}
const prisma = globalForPrisma.prisma ?? prismaClientSingleton()
export default prisma
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma- add to .env
DATABASE_URL=""
DIRECT_URL=""- DATABASE_URL : Transaction + Password + "?pgbouncer=true&connection_limit=1"
- DIRECT_URL : Session + Password
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
directUrl = env("DIRECT_URL")
}
generator client {
provider = "prisma-client-js"
}
model TestProfile {
id String @id @default(uuid())
name String
- npx prisma migrate dev --name init
- npx prisma db push
npx prisma migrate dev --name init creates a new migration for your database schema changes and applies it, while npx prisma db push directly updates the database schema without creating a migration. In the context of databases, a migration is set of operations, that modify the database schema, helping it evolve over time while preserving existing data.
npx prisma db pushnpx prisma studio- Create Single Record
const task = await prisma.task.create({
data: {
content: 'some task',
},
})- Get All Records
const tasks = await prisma.task.findMany()- Get record by ID or unique identifier
// By unique identifier
const user = await prisma.user.findUnique({
where: {
email: '[email protected]',
},
})
// By ID
const task = await prisma.task.findUnique({
where: {
id: id,
},
})- Update Record
const updateTask = await prisma.task.update({
where: {
id: id,
},
data: {
content: 'updated task',
},
})- Update or create records
const upsertTask = await prisma.task.upsert({
where: {
id: id,
},
update: {
content: 'some value',
},
create: {
content: 'some value',
},
})- Delete a single record
const deleteTask = await prisma.task.delete({
where: {
id: id,
},
})about/page.tsx
import db from '@/utils/db'
async function AboutPage() {
const profile = await db.testProfile.create({
data: {
name: 'random name',
},
})
const users = await db.testProfile.findMany()
return (
<div>
{users.map((user) => {
return (
<h2 key={user.id} className="text-2xl font-bold">
{user.name}
</h2>
)
})}
</div>
)
}
export default AboutPagemodel Product {
id String @id @default(uuid())
name String
company String
description String
featured Boolean
image String
price Int
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
clerkId String
}
- stop server
npx prisma db push
npx prisma studio
npm run dev- create prisma/products.json
[
{
"name": "avant-garde lamp",
"company": "Modenza",
"description": "Cloud bread VHS hell of banjo bicycle rights jianbing umami mumblecore etsy 8-bit pok pok +1 wolf. Vexillologist yr dreamcatcher waistcoat, authentic chillwave trust fund. Viral typewriter fingerstache pinterest pork belly narwhal. Schlitz venmo everyday carry kitsch pitchfork chillwave iPhone taiyaki trust fund hashtag kinfolk microdosing gochujang live-edge",
"featured": true,
"image": "https://images.pexels.com/photos/943150/pexels-photo-943150.jpeg?auto=compress&cs=tinysrgb&w=1600",
"price": 100,
"clerkId": "clerkId"
},
{
"name": "chic chair",
"company": "Luxora",
"description": "Cloud bread VHS hell of banjo bicycle rights jianbing umami mumblecore etsy 8-bit pok pok +1 wolf. Vexillologist yr dreamcatcher waistcoat, authentic chillwave trust fund. Viral typewriter fingerstache pinterest pork belly narwhal. Schlitz venmo everyday carry kitsch pitchfork chillwave iPhone taiyaki trust fund hashtag kinfolk microdosing gochujang live-edge",
"featured": true,
"image": "https://images.pexels.com/photos/5705090/pexels-photo-5705090.jpeg?auto=compress&cs=tinysrgb&w=1600",
"price": 200,
"clerkId": "clerkId"
},
{
"name": "comfy bed",
"company": "Homestead",
"description": "Cloud bread VHS hell of banjo bicycle rights jianbing umami mumblecore etsy 8-bit pok pok +1 wolf. Vexillologist yr dreamcatcher waistcoat, authentic chillwave trust fund. Viral typewriter fingerstache pinterest pork belly narwhal. Schlitz venmo everyday carry kitsch pitchfork chillwave iPhone taiyaki trust fund hashtag kinfolk microdosing gochujang live-edge",
"featured": true,
"image": "https://images.pexels.com/photos/1034584/pexels-photo-1034584.jpeg?auto=compress&cs=tinysrgb&w=1600",
"price": 300,
"clerkId": "clerkId"
},
{
"name": "contemporary sofa",
"company": "Comfora",
"description": "Cloud bread VHS hell of banjo bicycle rights jianbing umami mumblecore etsy 8-bit pok pok +1 wolf. Vexillologist yr dreamcatcher waistcoat, authentic chillwave trust fund. Viral typewriter fingerstache pinterest pork belly narwhal. Schlitz venmo everyday carry kitsch pitchfork chillwave iPhone taiyaki trust fund hashtag kinfolk microdosing gochujang live-edge",
"featured": false,
"image": "https://images.pexels.com/photos/1571459/pexels-photo-1571459.jpeg?auto=compress&cs=tinysrgb&w=1600",
"price": 400,
"clerkId": "clerkId"
}
]- create prisma/seed.js
const { PrismaClient } = require('@prisma/client')
const products = require('./products.json')
const prisma = new PrismaClient()
async function main() {
for (const product of products) {
await prisma.product.create({
data: product,
})
}
}
main()
.then(async () => {
await prisma.$disconnect()
})
.catch(async (e) => {
console.error(e)
await prisma.$disconnect()
process.exit(1)
})node prisma/seed- check prisma studio
-
global
- EmptyList
- SectionTitle
- LoadingContainer
-
home
- FeaturedProducts
- Hero
- HeroCarousel
-
products
- FavoriteToggleButton
- FavoriteToggleForm
- ProductsContainer
- ProductsGrid
- ProductsList
import FeaturedProducts from '@/components/home/FeaturedProducts'
import Hero from '@/components/home/Hero'
function HomPage() {
return (
<>
<Hero />
<FeaturedProducts />
</>
)
}
export default HomPageimport { Separator } from '@/components/ui/separator'
function SectionTitle({ text }: { text: string }) {
return (
<div>
<h2 className="text-3xl font-medium tracking-wider capitalize mb-8">
{text}
</h2>
<Separator />
</div>
)
}
export default SectionTitleimport { cn } from '@/lib/utils'
function EmptyList({
heading = 'No items found.',
className,
}: {
heading?: string
className?: string
}) {
return <h2 className={cn('text-xl ', className)}>{heading}</h2>
}
export default EmptyList- create utils/actions.ts
import db from '@/utils/db'
export const fetchFeaturedProducts = async () => {
const products = await db.product.findMany({
where: {
featured: true,
},
})
return products
}
export const fetchAllProducts = () => {
return db.product.findMany({
orderBy: {
createdAt: 'desc',
},
})
}import { fetchFeaturedProducts } from '@/utils/actions'
import EmptyList from '../global/EmptyList'
import SectionTitle from '../global/SectionTitle'
import ProductsGrid from '../products/ProductsGrid'
async function FeaturedProducts() {
const products = await fetchFeaturedProducts()
if (products.length === 0) return <EmptyList />
return (
<section className="pt-24">
<SectionTitle text="featured products" />
<ProductsGrid products={products} />
</section>
)
}
export default FeaturedProducts- utils/format.ts
export const formatCurrency = (amount: number | null) => {
const value = amount || 0
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(value)
}import { FaHeart } from 'react-icons/fa'
import { Button } from '@/components/ui/button'
function FavoriteToggleButton({ productId }: { productId: string }) {
return (
<Button size="icon" variant="outline" className="p-2 cursor-pointer">
<FaHeart />
</Button>
)
}
export default FavoriteToggleButtonimport { Product } from '@prisma/client'
import { formatCurrency } from '@/utils/format'
import { Card, CardContent } from '@/components/ui/card'
import Link from 'next/link'
import Image from 'next/image'
import FavoriteToggleButton from './FavoriteToggleButton'
function ProductsGrid({ products }: { products: Product[] }) {
return (
<div className="pt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{products.map((product) => {
const { name, price, image } = product
const productId = product.id
const dollarsAmount = formatCurrency(price)
return (
<article key={productId} className="group relative">
<Link href={`/products/${productId}`}>
<Card className="transform group-hover:shadow-xl transition-shadow duration-500">
<CardContent className="p-4">
<div className="relative h-64 md:h-48 rounded overflow-hidden ">
<Image
src={image}
alt={name}
fill
sizes="(max-width:768px) 100vw,(max-width:1200px) 50vw,33vw"
priority
className="rounded w-full object-cover transform group-hover:scale-110 transition-transform duration-500"
/>
</div>
<div className="mt-4 text-center">
<h2 className="text-lg capitalize">{name}</h2>
<p className="text-muted-foreground mt-2">
{dollarsAmount}
</p>
</div>
</CardContent>
</Card>
</Link>
<div className="absolute top-7 right-7 z-5">
<FavoriteToggleButton productId={productId} />
</div>
</article>
)
})}
</div>
)
}
export default ProductsGrid/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.pexels.com',
},
],
},
}
export default nextConfigimport Link from 'next/link'
import { Button } from '@/components/ui/button'
import HeroCarousel from './HeroCarousel'
function Hero() {
return (
<section className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
<div>
<h1 className="max-w-2xl font-bold text-4xl tracking-tight sm:text-6xl">
We are changing the way people shop
</h1>
<p className="mt-8 max-w-xl text-lg leading-8 text-muted-foreground">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque et
voluptas saepe in quae voluptate, laborum maiores possimus illum
reprehenderit aut delectus veniam cum perferendis unde sint doloremque
non nam.
</p>
<Button asChild size="lg" className="mt-10">
<Link href="/products">Our Products</Link>
</Button>
</div>
<HeroCarousel />
</section>
)
}
export default HeroHeroCarousel
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from '@/components/ui/carousel'
import { Card, CardContent } from '@/components/ui/card'
import Image from 'next/image'
import hero1 from '@/public/images/hero1.jpg'
import hero2 from '@/public/images/hero2.jpg'
import hero3 from '@/public/images/hero3.jpg'
import hero4 from '@/public/images/hero4.jpg'
const carouselImages = [hero1, hero2, hero3, hero4]
function HeroCarousel() {
return (
<div className="hidden lg:block">
<Carousel>
<CarouselContent>
{carouselImages.map((image, index) => {
return (
<CarouselItem key={index}>
<Card>
<CardContent className="p-2">
<Image
src={image}
alt="hero"
className="w-full h-[24rem] rounded-md object-cover"
/>
</CardContent>
</Card>
</CarouselItem>
)
})}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
)
}
export default HeroCarouselfunction AboutPage() {
return (
<section>
<h1 className="flex flex-wrap gap-2 sm:gap-x-6 items-center justify-center text-4xl font-bold leading-none tracking-wide sm:text-6xl">
We love
<span className="bg-primary py-2 px-4 rounded-lg tracking-widest text-white">
store
</span>
</h1>
<p className="mt-6 text-lg tracking-wide leading-8 max-w-2xl mx-auto text-muted-foreground">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero hic
distinctio ducimus temporibus nobis autem laboriosam repellat, magni
fugiat minima excepturi neque, tenetur possimus nihil atque! Culpa nulla
labore nam?
</p>
</section>
)
}
export default AboutPageapp/page.tsx
import FeaturedProducts from '@/components/home/FeaturedProducts'
import Hero from '@/components/home/Hero'
import LoadingContainer from '@/components/global/LoadingContainer'
import { Suspense } from 'react'
function HomPage() {
return (
<>
<Hero />
<Suspense fallback={<LoadingContainer />}>
<FeaturedProducts />
</Suspense>
</>
)
}
export default HomPageimport { Skeleton } from '../ui/skeleton'
import { Card, CardContent } from '../ui/card'
function LoadingContainer() {
return (
<div className="pt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<LoadingProduct />
<LoadingProduct />
<LoadingProduct />
</div>
)
}
function LoadingProduct() {
return (
<Card>
<CardContent className="p-4">
<Skeleton className="h-48 w-full" />
<Skeleton className="h-4 w-3/4 mt-4" />
<Skeleton className="h-4 w-1/4 mt-4" />
</CardContent>
</Card>
)
}
export default LoadingContainer- create app/products/loading.tsx
'use client'
import LoadingContainer from '@/components/global/LoadingContainer'
function loading() {
return <LoadingContainer />
}
export default loadingimport ProductsContainer from '@/components/products/ProductsContainer'
async function ProductsPage({
searchParams,
}: {
searchParams: { layout?: string; search?: string }
}) {
const layout = searchParams.layout || 'grid'
const search = searchParams.search || ''
return (
<>
<ProductsContainer layout={layout} search={search} />
</>
)
}
export default ProductsPageimport ProductsGrid from './ProductsGrid'
import ProductsList from './ProductsList'
import { LuLayoutGrid, LuList } from 'react-icons/lu'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { fetchAllProducts } from '@/utils/actions'
import Link from 'next/link'
async function ProductsContainer({
layout,
search,
}: {
layout: string
search: string
}) {
const products = await fetchAllProducts()
const totalProducts = products.length
const searchTerm = search ? `&search=${search}` : ''
return (
<>
{/* HEADER */}
<section>
<div className="flex justify-between items-center">
<h4 className="font-medium text-lg">
{totalProducts} product{totalProducts > 1 && 's'}
</h4>
<div className="flex gap-x-4">
<Button
variant={layout === 'grid' ? 'default' : 'ghost'}
size="icon"
asChild
>
<Link href={`/products?layout=grid${searchTerm}`}>
<LuLayoutGrid />
</Link>
</Button>
<Button
variant={layout === 'list' ? 'default' : 'ghost'}
size="icon"
asChild
>
<Link href={`/products?layout=list${searchTerm}`}>
<LuList />
</Link>
</Button>
</div>
</div>
<Separator className="mt-4" />
</section>
{/* PRODUCTS */}
<div>
{totalProducts === 0 ? (
<h5 className="text-2xl mt-16">
Sorry, no products matched your search...
</h5>
) : layout === 'grid' ? (
<ProductsGrid products={products} />
) : (
<ProductsList products={products} />
)}
</div>
</>
)
}
export default ProductsContainerimport { formatCurrency } from '@/utils/format'
import Link from 'next/link'
import { Card, CardContent } from '@/components/ui/card'
import { Product } from '@prisma/client'
import Image from 'next/image'
import FavoriteToggleButton from './FavoriteToggleButton'
function ProductsList({ products }: { products: Product[] }) {
return (
<div className="mt-12 grid gap-y-8">
{products.map((product) => {
const { name, price, image, company } = product
const dollarsAmount = formatCurrency(price)
const productId = product.id
return (
<article key={productId} className="group relative">
<Link href={`/products/${productId}`}>
<Card className="transform group-hover:shadow-xl transition-shadow duration-500">
<CardContent className="p-8 gap-y-4 grid md:grid-cols-3">
<div className="relative h-64 md:h-48 md:w-48">
<Image
src={image}
alt={name}
fill
sizes="(max-width:768px) 100vw,(max-width:1200px) 50vw,33vw"
priority
className="w-full rounded-md object-cover"
/>
</div>
<div>
<h2 className="text-xl font-semibold capitalize">{name}</h2>
<h4 className="text-muted-foreground">{company}</h4>
</div>
<p className="text-muted-foreground text-lg md:ml-auto">
{dollarsAmount}
</p>
</CardContent>
</Card>
</Link>
<div className="absolute bottom-8 right-8 z-5">
<FavoriteToggleButton productId={productId} />
</div>
</article>
)
})}
</div>
)
}
export default ProductsList- install use-debounce
npm i use-debounce'use client'
import { Input } from '../ui/input'
import { useSearchParams, useRouter } from 'next/navigation'
import { useDebouncedCallback } from 'use-debounce'
import { useState, useEffect } from 'react'
function NavSearch() {
const searchParams = useSearchParams()
const { replace } = useRouter()
const [search, setSearch] = useState(
searchParams.get('search')?.toString() || ''
)
const handleSearch = useDebouncedCallback((value: string) => {
const params = new URLSearchParams(searchParams)
if (value) {
params.set('search', value)
} else {
params.delete('search')
}
replace(`/products?${params.toString()}`)
}, 300)
useEffect(() => {
if (!searchParams.get('search')) {
setSearch('')
}
}, [searchParams.get('search')])
return (
<Input
type="search"
placeholder="search product..."
className="max-w-xs dark:bg-muted "
onChange={(e) => {
setSearch(e.target.value)
handleSearch(e.target.value)
}}
value={search}
/>
)
}
export default NavSearch- refactor
ProductsContainer.tsx
const products = await fetchAllProducts({ search })- actions
export const fetchAllProducts = ({ search = '' }: { search: string }) => {
return db.product.findMany({
where: {
OR: [
{ name: { contains: search, mode: 'insensitive' } },
{ company: { contains: search, mode: 'insensitive' } },
],
},
orderBy: {
createdAt: 'desc',
},
})
}Navbar.tsx
import { Suspense } from 'react'
return (
<>
<Suspense>
<NavSearch />
</Suspense>
</>
)- actions.ts
import { redirect } from 'next/navigation'
export const fetchSingleProduct = async (productId: string) => {
const product = await db.product.findUnique({
where: {
id: productId,
},
})
if (!product) {
redirect('/products')
}
return product
}- create components/single-product
- AddToCart
- BreadCrumbs
- ProductRating
AddToCart.tsx
import { Button } from '../ui/button'
function AddToCart({ productId }: { productId: string }) {
return (
<Button className="capitalize mt-8" size="lg">
add to cart
</Button>
)
}
export default AddToCartBreadCrumbs.tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
function BreadCrumbs({ name }: { name: string }) {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/" className="capitalize text-lg">
home
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/products" className="capitalize text-lg">
products
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage className="capitalize text-lg">{name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}
export default BreadCrumbsProductRating.tsx
import { FaStar } from 'react-icons/fa'
async function ProductRating({ productId }: { productId: string }) {
const rating = 4.2
const count = 25
const className = `flex gap-1 items-center text-md mt-1 mb-4`
const countValue = `(${count}) reviews`
return (
<span className={className}>
<FaStar className="w-3 h-3" />
{rating} {countValue}
</span>
)
}
export default ProductRating- create app/products/[id]/page.tsx
import BreadCrumbs from '@/components/single-product/BreadCrumbs'
import { fetchSingleProduct } from '@/utils/actions'
import Image from 'next/image'
import { formatCurrency } from '@/utils/format'
import FavoriteToggleButton from '@/components/products/FavoriteToggleButton'
import AddToCart from '@/components/single-product/AddToCart'
import ProductRating from '@/components/single-product/ProductRating'
async function SingleProductPage({ params }: { params: { id: string } }) {
const product = await fetchSingleProduct(params.id)
const { name, image, company, description, price } = product
const dollarsAmount = formatCurrency(price)
return (
<section>
<BreadCrumbs name={product.name} />
<div className="mt-6 grid gap-y-8 lg:grid-cols-2 lg:gap-x-16">
{/* IMAGE FIRST COL */}
<div className="relative h-full">
<Image
src={image}
alt={name}
fill
sizes="(max-width:768px) 100vw,(max-width:1200px) 50vw,33vw"
priority
className="w-full rounded-md object-cover"
/>
</div>
{/* PRODUCT INFO SECOND COL */}
<div>
<div className="flex gap-x-8 items-center">
<h1 className="capitalize text-3xl font-bold">{name}</h1>
<FavoriteToggleButton productId={params.id} />
</div>
<ProductRating productId={params.id} />
<h4 className="text-xl mt-2">{company}</h4>
<p className="mt-3 text-md bg-muted inline-block p-2 rounded-md">
{dollarsAmount}
</p>
<p className="mt-6 leading-8 text-muted-foreground">{description}</p>
<AddToCart productId={params.id} />
</div>
</div>
</section>
)
}
export default SingleProductPage- create vercel account Vercel
- create github repository
- double check .gitignore
- update package.json
"scripts": {
"dev": "next dev",
"build": "npx prisma generate && next build",
"start": "next start",
"lint": "next lint"
},- push it up to github
git init
git add .
git commit -m "first commit"- deploy on vercel
- setup env variables
providers.tsx
'use client'
import { ThemeProvider } from './theme-provider'
import { Toaster } from '@/components/ui/toaster'
function Providers({ children }: { children: React.ReactNode }) {
return (
<>
<Toaster />
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</>
)
}
export default ProvidersClerk Docs Clerk + Next.js Setup
- create new application
npm install @clerk/nextjs- create .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=In Next.js, environment variables that start with NEXTPUBLIC are exposed to the browser. This means they can be accessed in your front-end code.
For example, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY can be used in both server-side and client-side code.
On the other hand, CLERK_SECRET_KEY is a server-side environment variable. It's not exposed to the browser, making it suitable for storing sensitive data like API secrets.
layout.tsx
import { ClerkProvider } from '@clerk/nextjs'
return (
<ClerkProvider>
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<Providers>
<Navbar />
<Container className="py-20">{children}</Container>
</Providers>
</body>
</html>
</ClerkProvider>
)- create middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
const isPublicRoute = createRouteMatcher(['/', '/products(.*)', '/about'])
export default clerkMiddleware((auth, req) => {
if (!isPublicRoute(req)) auth().protect()
})
export const config = {
matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
}- restart dev server
- customization
- avatars
'use client'
import { SignOutButton } from '@clerk/nextjs'
import { useToast } from '../ui/use-toast'
import Link from 'next/link'
function SignOutLink() {
const { toast } = useToast()
const handleLogout = () => {
toast({ description: 'Logging Out...' })
}
return (
<SignOutButton>
<Link href="/" className="w-full text-left" onClick={handleLogout}>
Logout
</Link>
</SignOutButton>
)
}
export default SignOutLinkimport { LuUser2 } from 'react-icons/lu'
import { currentUser } from '@clerk/nextjs/server'
async function UserIcon() {
const user = await currentUser()
const profileImage = user?.imageUrl
if (profileImage)
return (
<img src={profileImage} className="w-6 h-6 rounded-full object-cover" />
)
return <LuUser2 className="w-6 h-6 bg-primary rounded-full text-white" />
}
export default UserIconimport {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu'
import { LuAlignLeft } from 'react-icons/lu'
import Link from 'next/link'
import { Button } from '../ui/button'
import { links } from '@/utils/links'
import UserIcon from './UserIcon'
import SignOutLink from './SignOutLink'
import { SignInButton, SignUpButton, SignedIn, SignedOut } from '@clerk/nextjs'
function LinksDropdown() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="flex gap-4 max-w-[100px]">
<LuAlignLeft className="w-6 h-6" />
<UserIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-48" align="start" sideOffset={10}>
<SignedOut>
<DropdownMenuItem>
<SignInButton mode="modal">
<button className="w-full text-left">Login</button>
</SignInButton>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<SignUpButton mode="modal">
<button className="w-full text-left">Register</button>
</SignUpButton>
</DropdownMenuItem>
</SignedOut>
<SignedIn>
{links.map((link) => {
return (
<DropdownMenuItem key={link.href}>
<Link href={link.href} className="capitalize w-full">
{link.label}
</Link>
</DropdownMenuItem>
)
})}
<DropdownMenuSeparator />
<DropdownMenuItem>
<SignOutLink />
</DropdownMenuItem>
</SignedIn>
</DropdownMenuContent>
</DropdownMenu>
)
}
export default LinksDropdown- utils/links.ts
type NavLink = {
href: string
label: string
}
export const links: NavLink[] = [
{ href: '/', label: 'home' },
{ href: '/about', label: 'about' },
{ href: '/products', label: 'products' },
{ href: '/favorites', label: 'favorites' },
{ href: '/cart', label: 'cart' },
{ href: '/orders', label: 'orders' },
{ href: '/admin/sales', label: 'dashboard' },
]
export const adminLinks: NavLink[] = [
{ href: '/admin/sales', label: 'sales' },
{ href: '/admin/products', label: 'my products' },
{ href: '/admin/products/create', label: 'create product' },
]-
remove existing page.tsx
-
admin
- products
- [id]/edit/page.tsx
- create/page.tsx
- page.tsx
- sales/page.tsx
- layout.tsx
- Sidebar.tsx
- products
Sidebar.tsx
'use client'
import { adminLinks } from '@/utils/links'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Button } from '@/components/ui/button'
function Sidebar() {
const pathname = usePathname()
return (
<aside>
{adminLinks.map((link) => {
const isActivePage = pathname === link.href
const variant = isActivePage ? 'default' : 'ghost'
return (
<Button
asChild
className="w-full mb-2 capitalize font-normal justify-start"
variant={variant}
>
<Link key={link.href} href={link.href}>
{link.label}
</Link>
</Button>
)
})}
</aside>
)
}
export default Sidebarlayout.tsx
import { Separator } from '@/components/ui/separator'
import Sidebar from './Sidebar'
function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
<>
<h2 className="text-2xl pl-4">Dashboard</h2>
<Separator className="mt-2" />
<section className="grid lg:grid-cols-12 gap-12 mt-12">
<div className="lg:col-span-2">
<Sidebar />
</div>
<div className="lg:col-span-10 px-4">{children}</div>
</section>
</>
)
}
export default DashboardLayoutimport { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
import { NextResponse } from 'next/server'
const isPublicRoute = createRouteMatcher(['/', '/products(.*)', '/about'])
const isAdminRoute = createRouteMatcher(['/admin(.*)'])
export default clerkMiddleware(async (auth, req) => {
// console.log(auth().userId);
const isAdminUser = auth().userId === process.env.ADMIN_USER_ID
if (isAdminRoute(req) && !isAdminUser) {
return NextResponse.redirect(new URL('/', req.url))
}
if (!isPublicRoute(req)) auth().protect()
})
export const config = {
matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
}- add userId to .env
ADMIN_USER_ID=import { auth } from '@clerk/nextjs/server'
function LinksDropdown() {
const { userId } = auth()
const isAdmin = userId === process.env.ADMIN_USER_ID
return (
<>
{links.map((link) => {
if (link.label === 'dashboard' && !isAdmin) return null
return (
<DropdownMenuItem key={link.href}>
<Link href={link.href} className="capitalize w-full">
{link.label}
</Link>
</DropdownMenuItem>
)
})}
</>
)
}import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
const createProductAction = async (formData: FormData) => {
'use server'
const name = formData.get('name') as string
console.log(name)
}
function CreateProductPage() {
return (
<section>
<h1 className="text-2xl font-semibold mb-8 capitalize">create product</h1>
<div className="border p-8 rounded-md">
<form action={createProductAction}>
<div className="mb-2">
<Label htmlFor="name">Product Name</Label>
<Input id="name" name="name" type="text" />
</div>
<Button type="submit" size="lg">
Submit
</Button>
</form>
</div>
</section>
)
}
export default CreateProductPagenpm install @faker-js/faker --save-devimport { faker } from '@faker-js/faker'
function CreateProductPage() {
const name = faker.commerce.productName()
const company = faker.company.name()
const description = faker.lorem.paragraph({ min: 10, max: 12 })
return <Input id="name" name="name" type="text" defaultValue={name} />
}
export default CreateProductPage- components/form
- Buttons
- CheckBoxInput
- FormContainer
- FormInput
- ImageInput
- ImageInputContainer
- PriceInput
- TextAreaInput
FormInput.tsx
import { Label } from '../ui/label'
import { Input } from '../ui/input'
type FormInputProps = {
name: string
type: string
label?: string
defaultValue?: string
placeholder?: string
}
function FormInput({
label,
name,
type,
defaultValue,
placeholder,
}: FormInputProps) {
return (
<div className="mb-2">
<Label htmlFor={name} className="capitalize">
{label || name}
</Label>
<Input
id={name}
name={name}
type={type}
defaultValue={defaultValue}
placeholder={placeholder}
required
/>
</div>
)
}
export default FormInputimport { Label } from '../ui/label'
import { Input } from '../ui/input'
const name = 'price'
type FormInputNumberProps = {
defaultValue?: number
}
function PriceInput({ defaultValue }: FormInputNumberProps) {
return (
<div className="mb-2">
<Label htmlFor="price" className="capitalize">
Price ($)
</Label>
<Input
id={name}
type="number"
name={name}
min={0}
defaultValue={defaultValue || 100}
required
/>
</div>
)
}
export default PriceInputimport { Label } from '../ui/label'
import { Input } from '../ui/input'
function ImageInput() {
const name = 'image'
return (
<div className="mb-2">
<Label htmlFor={name} className="capitalize">
Image
</Label>
<Input id={name} name={name} type="file" required accept="image/*" />
</div>
)
}
export default ImageInputimport { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
type TextAreaInputProps = {
name: string
labelText?: string
defaultValue?: string
}
function TextAreaInput({ name, labelText, defaultValue }: TextAreaInputProps) {
return (
<div className="mb-2">
<Label htmlFor={name} className="capitalize">
{labelText || name}
</Label>
<Textarea
id={name}
name={name}
defaultValue={defaultValue}
rows={5}
required
className="leading-loose"
/>
</div>
)
}
export default TextAreaInput'use client'
import { Checkbox } from '@/components/ui/checkbox'
type CheckboxInputProps = {
name: string
label: string
defaultChecked?: boolean
}
export default function CheckboxInput({
name,
label,
defaultChecked = false,
}: CheckboxInputProps) {
return (
<div className="flex items-center space-x-2">
<Checkbox id={name} name={name} defaultChecked={defaultChecked} />
<label
htmlFor={name}
className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 capitalize"
>
{label}
</label>
</div>
)
}components/form/Buttons.tsx
'use client'
import { ReloadIcon } from '@radix-ui/react-icons'
import { useFormStatus } from 'react-dom'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { SignInButton } from '@clerk/nextjs'
import { FaRegHeart, FaHeart } from 'react-icons/fa'
import { LuTrash2, LuPenSquare } from 'react-icons/lu'
type btnSize = 'default' | 'lg' | 'sm'
type SubmitButtonProps = {
className?: string
text?: string
size?: btnSize
}
export function SubmitButton({
className = '',
text = 'submit',
size = 'lg',
}: SubmitButtonProps) {
const { pending } = useFormStatus()
return (
<Button
type="submit"
disabled={pending}
className={cn('capitalize', className)}
size={size}
>
{pending ? (
<>
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
Please wait...
</>
) : (
text
)}
</Button>
)
}- create utils/types.ts
export type actionFunction = (
prevState: any,
formData: FormData
) => Promise<{ message: string }>
export type CartItem = {
productId: string
image: string
title: string
price: string
amount: number
company: string
}
export type CartState = {
cartItems: CartItem[]
numItemsInCart: number
cartTotal: number
shipping: number
tax: number
orderTotal: number
}FormContainer.tsx
'use client'
import { useFormState } from 'react-dom'
import { useEffect } from 'react'
import { useToast } from '@/components/ui/use-toast'
import { actionFunction } from '@/utils/types'
const initialState = {
message: '',
}
function FormContainer({
action,
children,
}: {
action: actionFunction
children: React.ReactNode
}) {
const [state, formAction] = useFormState(action, initialState)
const { toast } = useToast()
useEffect(() => {
if (state.message) {
toast({ description: state.message })
}
}, [state])
return <form action={formAction}>{children}</form>
}
export default FormContainer- actions.ts
'use server'
export const createProductAction = async (
prevState: any,
formData: FormData
): Promise<{ message: string }> => {
return { message: 'product created' }
}page.tsx
import FormInput from '@/components/form/FormInput'
import { SubmitButton } from '@/components/form/Buttons'
import FormContainer from '@/components/form/FormContainer'
import { createProductAction } from '@/utils/actions'
import ImageInput from '@/components/form/ImageInput'
import PriceInput from '@/components/form/PriceInput'
import TextAreaInput from '@/components/form/TextAreaInput'
import { faker } from '@faker-js/faker'
import CheckboxInput from '@/components/form/CheckboxInput'
function CreateProduct() {
const name = faker.commerce.productName()
const company = faker.company.name()
// const description = faker.commerce.productDescription();
const description = faker.lorem.paragraph({ min: 10, max: 12 })
return (
<section>
<h1 className="text-2xl font-semibold mb-8 capitalize">create product</h1>
<div className="border p-8 rounded-md">
<FormContainer action={createProductAction}>
<div className="grid gap-4 md:grid-cols-2 my-4">
<FormInput
type="text"
name="name"
label="product name"
defaultValue={name}
/>
<FormInput
type="text"
name="company"
label="company"
defaultValue={company}
/>
<PriceInput />
<ImageInput />
</div>
<TextAreaInput
name="description"
labelText="product description"
defaultValue={description}
/>
<div className="mt-6">
<CheckboxInput name="featured" label="featured" />
</div>
<SubmitButton text="Create Product" className="mt-8" />
</FormContainer>
</div>
</section>
)
}
export default CreateProduct- actions.ts
import { auth, currentUser } from '@clerk/nextjs/server'
const renderError = (error: unknown): { message: string } => {
console.log(error)
return {
message: error instanceof Error ? error.message : 'An error occurred',
}
}
const getAuthUser = async () => {
const user = await currentUser()
if (!user) {
throw new Error('You must be logged in to access this route')
}
return user
}- get/store product images in public/images
export const createProductAction = async (
prevState: any,
formData: FormData
): Promise<{ message: string }> => {
const user = await getAuthUser()
try {
const name = formData.get('name') as string
const company = formData.get('company') as string
const price = Number(formData.get('price') as string)
const image = formData.get('image') as File
const description = formData.get('description') as string
const featured = Boolean(formData.get('featured') as string)
await db.product.create({
data: {
name,
company,
price,
image: '/images/product-1.jpg',
description,
featured,
clerkId: user.id,
},
})
return { message: 'product created' }
} catch (error) {
return renderError(error)
}
}- lots of code code just to access input values
- no validation (only html one)
Zod is a JavaScript library for building schemas and validating data, providing type safety and error handling.
npm install zod- setup utils/schemas.ts
import { z, ZodSchema } from 'zod'
export const productSchema = z.object({
name: z.string().min(4),
company: z.string().min(4),
price: z.coerce.number().int().min(0),
description: z.string(),
featured: z.coerce.boolean(),
})- actions.ts
export const createProductAction = async (
prevState: any,
formData: FormData
): Promise<{ message: string }> => {
const user = await getAuthUser()
try {
const rawData = Object.fromEntries(formData)
const validatedFields = productSchema.parse(rawData)
await db.product.create({
data: {
...validatedFields,
image: '/images/product-1.jpg',
clerkId: user.id,
},
})
return { message: 'product created' }
} catch (error) {
return renderError(error)
}
}- error messages are not user friendly
schemas.ts
import { z, ZodSchema } from 'zod'
export const productSchema = z.object({
name: z
.string()
.min(2, {
message: 'name must be at least 2 characters.',
})
.max(100, {
message: 'name must be less than 100 characters.',
}),
company: z.string(),
featured: z.coerce.boolean(),
price: z.coerce.number().int().min(0, {
message: 'price must be a positive number.',
}),
description: z.string().refine(
(description) => {
const wordCount = description.split(' ').length
return wordCount >= 10 && wordCount <= 1000
},
{
message: 'description must be between 10 and 1000 words.',
}
),
})try {
const rawData = Object.fromEntries(formData);
const validatedFields = productSchema.safeParse(rawData);
if (!validatedFields.success) {
const errors = validatedFields.error.errors.map((error) => error.message);
throw new Error(errors.join(','));
}
await db.product.create({
data: {
...validatedFields.data,
image: '/images/product-1.jpg',
clerkId: user.id,
},
});
return { message: 'product created' };
}schemas.ts
export function validateWithZodSchema<T>(
schema: ZodSchema<T>,
data: unknown
): T {
const result = schema.safeParse(data)
if (!result.success) {
const errors = result.error.errors.map((error) => error.message)
throw new Error(errors.join(','))
}
return result.data
}actions.ts
try {
const rawData = Object.fromEntries(formData);
const validatedFields = validateWithZodSchema(productSchema, rawData);
await db.product.create({
data: {
...validatedFields,
image: '/images/product-1.jpg',
clerkId: user.id,
},
});
return { message: 'product created' };
}schemas.ts
export const imageSchema = z.object({
image: validateImageFile(),
})
function validateImageFile() {
const maxUploadSize = 1024 * 1024
const acceptedFileTypes = ['image/']
return z
.instanceof(File)
.refine((file) => {
return !file || file.size <= maxUploadSize
}, `File size must be less than 1 MB`)
.refine((file) => {
return (
!file || acceptedFileTypes.some((type) => file.type.startsWith(type))
)
}, 'File must be an image')
}actions.ts
try {
const rawData = Object.fromEntries(formData);
const file = formData.get('image') as File;
const validatedFields = validateWithZodSchema(productSchema, rawData);
const validatedFile = validateWithZodSchema(imageSchema, { image: file });
console.log(validatedFile);
await db.product.create({
data: {
...validatedFields,
image: '/images/product-1.jpg',
clerkId: user.id,
},
});
return { message: 'product created' };
}SUPABASE_URL=
SUPABASE_KEY=npm install @supabase/supabase-jsutils/supabase.ts
import { createClient } from '@supabase/supabase-js'
const bucket = 'your-bucket-name'
// Create a single supabase client for interacting with your database
export const supabase = createClient(
process.env.SUPABASE_URL as string,
process.env.SUPABASE_KEY as string
)
export const uploadImage = async (image: File) => {
const timestamp = Date.now()
// const newName = `/users/${timestamp}-${image.name}`;
const newName = `${timestamp}-${image.name}`
const { data, error } = await supabase.storage
.from(bucket)
.upload(newName, image, {
cacheControl: '3600',
})
if (!data) throw new Error('Image upload failed')
return supabase.storage.from(bucket).getPublicUrl(newName).data.publicUrl
}- actions.ts
export const createProductAction = async (
prevState: any,
formData: FormData
): Promise<{ message: string }> => {
const user = await getAuthUser()
try {
const rawData = Object.fromEntries(formData)
const file = formData.get('image') as File
const validatedFields = validateWithZodSchema(productSchema, rawData)
const validatedFile = validateWithZodSchema(imageSchema, { image: file })
const fullPath = await uploadImage(validatedFile.image)
await db.product.create({
data: {
...validatedFields,
image: fullPath,
clerkId: user.id,
},
})
} catch (error) {
return renderError(error)
}
redirect('/admin/products')
}- add supabase url to remote patterns
next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.pexels.com',
},
{
protocol: 'https',
hostname: 'pldbjxhkrlailuixuvhz.supabase.co',
},
],
},
}
export default nextConfig- actions.ts
const getAdminUser = async () => {
const user = await getAuthUser()
if (user.id !== process.env.ADMIN_USER_ID) redirect('/')
return user
}
// refactor createProductAction
export const fetchAdminProducts = async () => {
await getAdminUser()
const products = await db.product.findMany({
orderBy: {
createdAt: 'desc',
},
})
return products
}- app/admin/products/page.tsx
import EmptyList from '@/components/global/EmptyList'
import { fetchAdminProducts } from '@/utils/actions'
import Link from 'next/link'
import { formatCurrency } from '@/utils/format'
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
async function ItemsPage() {
const items = await fetchAdminProducts()
if (items.length === 0) return <EmptyList />
return (
<section>
<Table>
<TableCaption className="capitalize">
total products : {items.length}
</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Product Name</TableHead>
<TableHead>Company</TableHead>
<TableHead>Price</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{items.map((item) => {
const { id: productId, name, company, price } = item
return (
<TableRow key={productId}>
<TableCell>
<Link
href={`/products/${productId}`}
className="underline text-muted-foreground tracking-wide capitalize"
>
{name}
</Link>
</TableCell>
<TableCell>{company}</TableCell>
<TableCell>{formatCurrency(price)}</TableCell>
<TableCell className="flex items-center gap-x-2"></TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</section>
)
}
export default ItemsPagetype actionType = 'edit' | 'delete'
export const IconButton = ({ actionType }: { actionType: actionType }) => {
const { pending } = useFormStatus()
const renderIcon = () => {
switch (actionType) {
case 'edit':
return <LuPenSquare />
case 'delete':
return <LuTrash2 />
default:
const never: never = actionType
throw new Error(`Invalid action type: ${never}`)
}
}
return (
<Button
type="submit"
size="icon"
variant="link"
className="p-2 cursor-pointer"
>
{pending ? <ReloadIcon className=" animate-spin" /> : renderIcon()}
</Button>
)
}- actions.ts
import { revalidatePath } from 'next/cache'
export const deleteProductAction = async (prevState: { productId: string }) => {
const { productId } = prevState
await getAdminUser()
try {
await db.product.delete({
where: {
id: productId,
},
})
revalidatePath('/admin/products')
return { message: 'product removed' }
} catch (error) {
return renderError(error)
}
}import FormContainer from '@/components/form/FormContainer'
import { IconButton } from '@/components/form/Buttons'
import { deleteProductAction } from '@/utils/actions'
return (
<>
<TableCell className="flex items-center gap-x-2">
<Link href={`/admin/products/${productId}/edit`}>
<IconButton actionType="edit"></IconButton>
</Link>
<DeleteProduct productId={productId} />
</TableCell>
</>
)
function DeleteProduct({ productId }: { productId: string }) {
const deleteProduct = deleteProductAction.bind(null, { productId })
return (
<FormContainer action={deleteProduct}>
<IconButton actionType="delete" />
</FormContainer>
)
}- utils/supabase.ts
export const deleteImage = (url: string) => {
const imageName = url.split('/').pop()
if (!imageName) throw new Error('Invalid URL')
return supabase.storage.from(bucket).remove([imageName])
}export const deleteProductAction = async (prevState: { productId: string }) => {
const { productId } = prevState
await getAdminUser()
try {
const product = await db.product.delete({
where: {
id: productId,
},
})
await deleteImage(product.image)
revalidatePath('/admin/products')
return { message: 'product removed' }
} catch (error) {
return renderError(error)
}
}- actions.ts
export const fetchAdminProductDetails = async (productId: string) => {
await getAdminUser()
const product = await db.product.findUnique({
where: {
id: productId,
},
})
if (!product) redirect('/admin/products')
return product
}
export const updateProductAction = async (
prevState: any,
formData: FormData
) => {
return { message: 'Product updated successfully' }
}
export const updateProductImageAction = async (
prevState: any,
formData: FormData
) => {
return { message: 'Product Image updated successfully' }
}- app/admin/products/[id]/edit/page.tsx
import { fetchAdminProductDetails, updateProductAction } from '@/utils/actions'
import FormContainer from '@/components/form/FormContainer'
import FormInput from '@/components/form/FormInput'
import PriceInput from '@/components/form/PriceInput'
import TextAreaInput from '@/components/form/TextAreaInput'
import { SubmitButton } from '@/components/form/Buttons'
import CheckboxInput from '@/components/form/CheckboxInput'
async function EditProductPage({ params }: { params: { id: string } }) {
const { id } = params
const product = await fetchAdminProductDetails(id)
const { name, company, description, featured, price } = product
return (
<section>
<h1 className="text-2xl font-semibold mb-8 capitalize">update product</h1>
<div className="border p-8 rounded-md">
{/* Image Input Container */}
<FormContainer action={updateProductAction}>
<div className="grid gap-4 md:grid-cols-2 my-4">
<input type="hidden" name="id" value={id} />
<FormInput
type="text"
name="name"
label="product name"
defaultValue={name}
/>
<FormInput
type="text"
name="company"
label="company"
defaultValue={company}
/>
<PriceInput defaultValue={price} />
</div>
<TextAreaInput
name="description"
labelText="product description"
defaultValue={description}
/>
<div className="mt-6">
<CheckboxInput
name="featured"
label="featured"
defaultChecked={featured}
/>
</div>
<SubmitButton text="update product" className="mt-8" />
</FormContainer>
</div>
</section>
)
}
export default EditProductPageactions.ts
export const updateProductAction = async (
prevState: any,
formData: FormData
) => {
await getAdminUser()
try {
const productId = formData.get('id') as string
const rawData = Object.fromEntries(formData)
const validatedFields = validateWithZodSchema(productSchema, rawData)
await db.product.update({
where: {
id: productId,
},
data: {
...validatedFields,
},
})
revalidatePath(`/admin/products/${productId}/edit`)
return { message: 'Product updated successfully' }
} catch (error) {
return renderError(error)
}
}'use client'
import { useState } from 'react'
import Image from 'next/image'
import { Button } from '../ui/button'
import FormContainer from './FormContainer'
import ImageInput from './ImageInput'
import { SubmitButton } from './Buttons'
import { type actionFunction } from '@/utils/types'
type ImageInputContainerProps = {
image: string
name: string
action: actionFunction
text: string
children?: React.ReactNode
}
function ImageInputContainer(props: ImageInputContainerProps) {
const { image, name, action, text } = props
const [isUpdateFormVisible, setUpdateFormVisible] = useState(false)
return (
<div className="mb-8">
<Image
src={image}
width={200}
height={200}
className="rounded-md object-cover mb-4 w-[200px] h-[200px]"
alt={name}
/>
<Button
variant="outline"
size="sm"
onClick={() => setUpdateFormVisible((prev) => !prev)}
>
{text}
</Button>
{isUpdateFormVisible && (
<div className="max-w-md mt-4">
<FormContainer action={action}>
{props.children}
<ImageInput />
<SubmitButton size="sm" />
</FormContainer>
</div>
)}
</div>
)
}
export default ImageInputContainerEditProductPage.tsx
return (
<div className="border p-8 rounded-md">
{/* Image Input Container */}
<ImageInputContainer
action={updateProductImageAction}
name={name}
image={product.image}
text="update image"
>
<input type="hidden" name="id" value={id} />
<input type="hidden" name="url" value={product.image} />
</ImageInputContainer>
</div>
)- actions.ts
export const updateProductImageAction = async (
prevState: any,
formData: FormData
) => {
await getAuthUser()
try {
const image = formData.get('image') as File
const productId = formData.get('id') as string
const oldImageUrl = formData.get('url') as string
const validatedFile = validateWithZodSchema(imageSchema, { image })
const fullPath = await uploadImage(validatedFile.image)
await deleteImage(oldImageUrl)
await db.product.update({
where: {
id: productId,
},
data: {
image: fullPath,
},
})
revalidatePath(`/admin/products/${productId}/edit`)
return { message: 'Product Image updated successfully' }
} catch (error) {
return renderError(error)
}
}- create components/global/LoadingTable.tsx
import { Skeleton } from '../ui/skeleton'
function LoadingTable({ rows = 5 }: { rows?: number }) {
const tableRows = Array.from({ length: rows }, (_, index) => {
return (
<div className="mb-4" key={index}>
<Skeleton className="w-full h-8 rounded" />
</div>
)
})
return <>{tableRows}</>
}
export default LoadingTable- create admin/products/loading.tsx
'use client'
import LoadingTable from '@/components/global/LoadingTable'
function loading() {
return <LoadingTable />
}
export default loadingmodel Product {
favorites Favorite[]
}
model Favorite {
id String @id @default(uuid())
clerkId String
product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
productId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}npx prisma db push- restart server
- components/form/Buttons.tsx
export const CardSignInButton = () => {
return (
<SignInButton mode="modal">
<Button
type="button"
size="icon"
variant="outline"
className="p-2 cursor-pointer"
asChild
>
<FaRegHeart />
</Button>
</SignInButton>
)
}
export const CardSubmitButton = ({ isFavorite }: { isFavorite: boolean }) => {
const { pending } = useFormStatus()
return (
<Button
type="submit"
size="icon"
variant="outline"
className=" p-2 cursor-pointer"
>
{pending ? (
<ReloadIcon className=" animate-spin" />
) : isFavorite ? (
<FaHeart />
) : (
<FaRegHeart />
)}
</Button>
)
}- actions.ts
export const fetchFavoriteId = async ({ productId }: { productId: string }) => {
const user = await getAuthUser()
const favorite = await db.favorite.findFirst({
where: {
productId,
clerkId: user.id,
},
select: {
id: true,
},
})
return favorite?.id || null
}
export const toggleFavoriteAction = async () => {
return { message: 'toggle favorite action' }
}- components/products/FavoriteToggleButton.tsx
import { auth } from '@clerk/nextjs/server'
import { CardSignInButton } from '../form/Buttons'
import { fetchFavoriteId } from '@/utils/actions'
import FavoriteToggleForm from './FavoriteToggleForm'
async function FavoriteToggleButton({ productId }: { productId: string }) {
const { userId } = auth()
if (!userId) return <CardSignInButton />
const favoriteId = await fetchFavoriteId({ productId })
return <FavoriteToggleForm favoriteId={favoriteId} productId={productId} />
}
export default FavoriteToggleButton'use client'
import { usePathname } from 'next/navigation'
import FormContainer from '../form/FormContainer'
import { toggleFavoriteAction } from '@/utils/actions'
import { CardSubmitButton } from '../form/Buttons'
type FavoriteToggleFormProps = {
productId: string
favoriteId: string | null
}
function FavoriteToggleForm({
productId,
favoriteId,
}: FavoriteToggleFormProps) {
const pathname = usePathname()
const toggleAction = toggleFavoriteAction.bind(null, {
productId,
favoriteId,
pathname,
})
return (
<FormContainer action={toggleAction}>
<CardSubmitButton isFavorite={favoriteId ? true : false} />
</FormContainer>
)
}
export default FavoriteToggleForm- actions.ts
export const toggleFavoriteAction = async (prevState: {
productId: string
favoriteId: string | null
pathname: string
}) => {
const user = await getAuthUser()
const { productId, favoriteId, pathname } = prevState
try {
if (favoriteId) {
await db.favorite.delete({
where: {
id: favoriteId,
},
})
} else {
await db.favorite.create({
data: {
productId,
clerkId: user.id,
},
})
}
revalidatePath(pathname)
return { message: favoriteId ? 'Removed from Faves' : 'Added to Faves' }
} catch (error) {
return renderError(error)
}
}- test in home, products and single product page
export const fetchUserFavorites = async () => {
const user = await getAuthUser()
const favorites = await db.favorite.findMany({
where: {
clerkId: user.id,
},
include: {
product: true,
},
})
return favorites
}- favorites/loading.tsx
'use client'
import LoadingContainer from '@/components/global/LoadingContainer'
function loading() {
return <LoadingContainer />
}
export default loadingpage.tsx
import { fetchUserFavorites } from '@/utils/actions'
import SectionTitle from '@/components/global/SectionTitle'
import ProductsGrid from '@/components/products/ProductsGrid'
async function FavoritesPage() {
const favorites = await fetchUserFavorites()
if (favorites.length === 0)
return <SectionTitle text="You have no favorites yet." />
return (
<div>
<SectionTitle text="Favorites" />
<ProductsGrid products={favorites.map((favorite) => favorite.product)} />
</div>
)
}
export default FavoritesPagenpm i react-share- create NEXT_PUBLIC_WEBSITE_URL in .env
- get url from vercel
components/single-product/ShareButton.tsx
'use client'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover'
import { Button } from '../ui/button'
import { LuShare2 } from 'react-icons/lu'
import {
TwitterShareButton,
EmailShareButton,
LinkedinShareButton,
TwitterIcon,
EmailIcon,
LinkedinIcon,
} from 'react-share'
function ShareButton({ productId, name }: { productId: string; name: string }) {
const url = process.env.NEXT_PUBLIC_WEBSITE_URL
const shareLink = `${url}/products/${productId}`
return (
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="icon" className="p-2">
<LuShare2 />
</Button>
</PopoverTrigger>
<PopoverContent
side="top"
align="end"
sideOffset={10}
className="flex items-center gap-x-2 justify-center w-full"
>
<TwitterShareButton url={shareLink} title={name}>
<TwitterIcon size={32} round />
</TwitterShareButton>
<LinkedinShareButton url={shareLink} title={name}>
<LinkedinIcon size={32} round />
</LinkedinShareButton>
<EmailShareButton url={shareLink} subject={name}>
<EmailIcon size={32} round />
</EmailShareButton>
</PopoverContent>
</Popover>
)
}
export default ShareButton- products/[id]/page.tsx
import ShareButton from '@/components/single-product/ShareButton'
return (
<div className="flex gap-x-8 items-center">
<h1 className="capitalize text-3xl font-bold">{name}</h1>
<div className="flex items-center gap-x-2">
<FavoriteToggleButton productId={params.id} />
<ShareButton name={product.name} productId={params.id} />
</div>
</div>
)model Product {
reviews Review []
}
model Review {
id String @id @default(uuid())
clerkId String
rating Int
comment String
authorName String
authorImageUrl String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
productId String
}npx prisma db push- restar the server
- actions.ts
export const createReviewAction = async (
prevState: any,
formData: FormData
) => {
return { message: 'review submitted successfully' }
}
export const fetchProductReviews = async () => {}
export const fetchProductReviewsByUser = async () => {}
export const deleteReviewAction = async () => {}
export const findExistingReview = async () => {}
export const fetchProductRating = async () => {}- components/reviews
- RatingInput.tsx
- Comment.tsx
- ProductReviews.tsx
- Rating.tsx
- ReviewCard.tsx
- SubmitReview.tsx
import { Label } from '@/components/ui/label'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
const RatingInput = ({
name,
labelText,
}: {
name: string
labelText?: string
}) => {
const numbers = Array.from({ length: 5 }, (_, i) => {
const value = i + 1
return value.toString()
}).reverse()
return (
<div className="mb-2 max-w-xs">
<Label htmlFor={name} className="capitalize">
{labelText || name}
</Label>
<Select defaultValue={numbers[0]} name={name} required>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{numbers.map((number) => {
return (
<SelectItem key={number} value={number}>
{number}
</SelectItem>
)
})}
</SelectContent>
</Select>
</div>
)
}
export default RatingInput'use client'
import { useState } from 'react'
import { SubmitButton } from '@/components/form/Buttons'
import FormContainer from '@/components/form/FormContainer'
import { Card } from '@/components/ui/card'
import RatingInput from '@/components/reviews/RatingInput'
import TextAreaInput from '@/components/form/TextAreaInput'
import { Button } from '@/components/ui/button'
import { createReviewAction } from '@/utils/actions'
import { useUser } from '@clerk/nextjs'
function SubmitReview({ productId }: { productId: string }) {
const [isReviewFormVisible, setIsReviewFormVisible] = useState(false)
const { user } = useUser()
return (
<div>
<Button
size="lg"
className="capitalize"
onClick={() => setIsReviewFormVisible((prev) => !prev)}
>
leave review
</Button>
{isReviewFormVisible && (
<Card className="p-8 mt-8">
<FormContainer action={createReviewAction}>
<input type="hidden" name="productId" value={productId} />
<input
type="hidden"
name="authorName"
value={user?.firstName || 'user'}
/>
<input
type="hidden"
name="authorImageUrl"
value={user?.imageUrl || ''}
/>
<RatingInput name="rating" />
<TextAreaInput
name="comment"
labelText="feedback"
defaultValue="Outstanding product!!!"
/>
<SubmitButton className="mt-4" />
</FormContainer>
</Card>
)}
</div>
)
}
export default SubmitReview- render in app/products/[id]/page.tsx after second column
import SubmitReview from '@/components/reviews/SubmitReview'
import ProductReviews from '@/components/reviews/ProductReviews'
return (
<>
<ProductReviews productId={params.id} />
<SubmitReview productId={params.id} />
</>
)- schemas.ts
export const reviewSchema = z.object({
productId: z.string().refine((value) => value !== '', {
message: 'Product ID cannot be empty',
}),
authorName: z.string().refine((value) => value !== '', {
message: 'Author name cannot be empty',
}),
authorImageUrl: z.string().refine((value) => value !== '', {
message: 'Author image URL cannot be empty',
}),
rating: z.coerce
.number()
.int()
.min(1, { message: 'Rating must be at least 1' })
.max(5, { message: 'Rating must be at most 5' }),
comment: z
.string()
.min(10, { message: 'Comment must be at least 10 characters long' })
.max(1000, { message: 'Comment must be at most 1000 characters long' }),
})- actions.ts
export const createReviewAction = async (
prevState: any,
formData: FormData
) => {
const user = await getAuthUser()
try {
const rawData = Object.fromEntries(formData)
const validatedFields = validateWithZodSchema(reviewSchema, rawData)
await db.review.create({
data: {
...validatedFields,
clerkId: user.id,
},
})
revalidatePath(`/products/${validatedFields.productId}`)
return { message: 'Review submitted successfully' }
} catch (error) {
return renderError(error)
}
}import { FaStar, FaRegStar } from 'react-icons/fa'
function Rating({ rating }: { rating: number }) {
// rating = 2
// 1 <= 2 true
// 2 <= 2 true
// 3 <= 2 false
// ....
const stars = Array.from({ length: 5 }, (_, i) => i + 1 <= rating)
return (
<div className="flex items-center gap-x-1">
{stars.map((isFilled, i) => {
const className = `w-3 h-3 ${
isFilled ? 'text-primary' : 'text-gray-400'
}`
return isFilled ? (
<FaStar className={className} key={i} />
) : (
<FaRegStar className={className} key={i} />
)
})}
</div>
)
}
export default Rating'use client'
import { useState } from 'react'
import { Button } from '@/components/ui/button'
function Comment({ comment }: { comment: string }) {
const [isExpanded, setIsExpanded] = useState(false)
const toggleExpanded = () => {
setIsExpanded(!isExpanded)
}
const longComment = comment.length > 130
const displayComment =
longComment && !isExpanded ? `${comment.slice(0, 130)}...` : comment
return (
<div>
<p className="text-sm">{displayComment}</p>
{longComment && (
<Button
variant="link"
className="pl-0 text-muted-foreground"
onClick={toggleExpanded}
>
{isExpanded ? 'Show Less' : 'Show More'}
</Button>
)}
</div>
)
}
export default Commentexport const fetchProductReviews = async (productId: string) => {
const reviews = await db.review.findMany({
where: {
productId,
},
orderBy: {
createdAt: 'desc',
},
})
return reviews
}import { fetchProductReviews } from '@/utils/actions'
import ReviewCard from './ReviewCard'
import SectionTitle from '../global/SectionTitle'
async function ProductReviews({ productId }: { productId: string }) {
const reviews = await fetchProductReviews(productId)
return (
<div className="mt-16">
<SectionTitle text="product reviews" />
<div className="grid md:grid-cols-2 gap-8 my-8">
{reviews.map((review) => {
const { comment, rating, authorImageUrl, authorName } = review
const reviewInfo = {
comment,
rating,
image: authorImageUrl,
name: authorName,
}
return <ReviewCard key={review.id} reviewInfo={reviewInfo} />
})}
</div>
</div>
)
}
export default ProductReviewsimport { Card, CardContent, CardHeader } from '@/components/ui/card'
import Rating from './Rating'
import Comment from './Comment'
import Image from 'next/image'
type ReviewCardProps = {
reviewInfo: {
comment: string
rating: number
name: string
image: string
}
children?: React.ReactNode
}
function ReviewCard({ reviewInfo, children }: ReviewCardProps) {
return (
<Card className="relative">
<CardHeader>
<div className="flex items-center">
<Image
src={reviewInfo.image}
alt={reviewInfo.name}
width={48}
height={48}
className="w-12 h-12 rounded-full object-cover"
/>
<div className="ml-4">
<h3 className="text-sm font-bold capitalize mb-1">
{reviewInfo.name}
</h3>
<Rating rating={reviewInfo.rating} />
</div>
</div>
</CardHeader>
<CardContent>
<Comment comment={reviewInfo.comment} />
</CardContent>
<div className="absolute top-3 right-3">{children}</div>
</Card>
)
}
export default ReviewCard- next.config.mjs
{
protocol: 'https',
hostname: 'img.clerk.com',
},export const fetchProductRating = async (productId: string) => {
const result = await db.review.groupBy({
by: ['productId'],
_avg: {
rating: true,
},
_count: {
rating: true,
},
where: {
productId,
},
})
// empty array if no reviews
return {
rating: result[0]?._avg.rating?.toFixed(1) ?? 0,
count: result[0]?._count.rating ?? 0,
}
}- components/single-product/ProductRating.tsx
const { rating, count } = await fetchProductRating(productId)export const fetchProductReviewsByUser = async () => {
const user = await getAuthUser()
const reviews = await db.review.findMany({
where: {
clerkId: user.id,
},
select: {
id: true,
rating: true,
comment: true,
product: {
select: {
image: true,
name: true,
},
},
},
})
return reviews
}
export const deleteReviewAction = async (prevState: { reviewId: string }) => {
const { reviewId } = prevState
const user = await getAuthUser()
try {
await db.review.delete({
where: {
id: reviewId,
clerkId: user.id,
},
})
revalidatePath('/reviews')
return { message: 'Review deleted successfully' }
} catch (error) {
return renderError(error)
}
}- setup "reviews" link in utils/links.ts
- create app/reviews/page.tsx and app/reviews/loading.tsx
page.tsx
import { deleteReviewAction, fetchProductReviewsByUser } from '@/utils/actions'
import ReviewCard from '@/components/reviews/ReviewCard'
import SectionTitle from '@/components/global/SectionTitle'
import FormContainer from '@/components/form/FormContainer'
import { IconButton } from '@/components/form/Buttons'
async function ReviewsPage() {
const reviews = await fetchProductReviewsByUser()
if (reviews.length === 0)
return <SectionTitle text="you have no reviews yet" />
return (
<>
<SectionTitle text="Your Reviews" />
<section className="grid md:grid-cols-2 gap-8 mt-4 ">
{reviews.map((review) => {
const { comment, rating } = review
const { name, image } = review.product
const reviewInfo = {
comment,
rating,
name,
image,
}
return (
<ReviewCard key={review.id} reviewInfo={reviewInfo}>
<DeleteReview reviewId={review.id} />
</ReviewCard>
)
})}
</section>
</>
)
}
const DeleteReview = ({ reviewId }: { reviewId: string }) => {
const deleteReview = deleteReviewAction.bind(null, { reviewId })
return (
<FormContainer action={deleteReview}>
<IconButton actionType="delete" />
</FormContainer>
)
}
export default ReviewsPageloading.tsx
'use client'
import { Card, CardHeader } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
function loading() {
return (
<section className="grid md:grid-cols-2 gap-8 mt-4 ">
<ReviewLoadingCard />
<ReviewLoadingCard />
</section>
)
}
const ReviewLoadingCard = () => {
return (
<Card>
<CardHeader>
<div className="flex items-center">
<Skeleton className="w-12 h-12 rounded-full" />
<div className="ml-4">
<Skeleton className="w-[150px] h-4 mb-2" />
<Skeleton className="w-[100px] h-4" />
</div>
</div>
</CardHeader>
</Card>
)
}
export default loadingactions.ts
export const findExistingReview = async (userId: string, productId: string) => {
return db.review.findFirst({
where: {
clerkId: userId,
productId,
},
})
}- app/products/[id]/page.tsx
import { fetchSingleProduct, findExistingReview } from '@/utils/actions'
import { auth } from '@clerk/nextjs/server'
async function SingleProductPage({ params }: { params: { id: string } }) {
const { userId } = auth()
const reviewDoesNotExist =
userId && !(await findExistingReview(userId, product.id))
return (
<>
<ProductReviews productId={params.id} />
{reviewDoesNotExist && <SubmitReview productId={params.id} />}
</>
)
}- prisma/schema.prisma
model Product{
cartItems CartItem[]
}
model Cart {
id String @id @default(uuid())
clerkId String
cartItems CartItem[]
numItemsInCart Int @default(0)
cartTotal Int @default(0)
shipping Int @default(5)
tax Int @default(0)
taxRate Float @default(0.1)
orderTotal Int @default(0)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model CartItem {
id String @id @default(uuid())
product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
productId String
cart Cart @relation(fields: [cartId], references: [id], onDelete: Cascade)
cartId String
amount Int
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
- actions.ts
export const fetchCartItems = async () => {}
const fetchProduct = async () => {}
export const fetchOrCreateCart = async () => {}
const updateOrCreateCartItem = async () => {}
export const updateCart = async () => {}
export const addToCartAction = async () => {}
export const removeCartItemAction = async () => {}
export const updateCartItemAction = async () => {}- actions.ts
export const fetchCartItems = async () => {
const { userId } = auth()
const cart = await db.cart.findFirst({
where: {
clerkId: userId ?? '',
},
select: {
numItemsInCart: true,
},
})
return cart?.numItemsInCart || 0
}- components/navbar/CartButton.tsx
async function CartButton() {
const numItemsInCart = await fetchCartItems()
}- components/form/Buttons.tsx
export const ProductSignInButton = () => {
return (
<SignInButton mode="modal">
<Button type="button" size="default" className="mt-8">
Please Sign In
</Button>
</SignInButton>
)
}- create components/single-product/SelectProductAmount.tsx
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
export enum Mode {
SingleProduct = 'singleProduct',
CartItem = 'cartItem',
}
type SelectProductAmountProps = {
mode: Mode.SingleProduct
amount: number
setAmount: (value: number) => void
}
type SelectCartItemAmountProps = {
mode: Mode.CartItem
amount: number
setAmount: (value: number) => Promise<void>
isLoading: boolean
}
function SelectProductAmount(
props: SelectProductAmountProps | SelectCartItemAmountProps
) {
const { mode, amount, setAmount } = props
const cartItem = mode === Mode.CartItem
return (
<>
<h4 className="mb-2">Amount : </h4>
<Select
defaultValue={amount.toString()}
onValueChange={(value) => setAmount(Number(value))}
disabled={cartItem ? props.isLoading : false}
>
<SelectTrigger className={cartItem ? 'w-[100px]' : 'w-[150px]'}>
<SelectValue placeholder={amount} />
</SelectTrigger>
<SelectContent>
{Array.from({ length: cartItem ? amount + 10 : 10 }, (_, index) => {
const selectValue = (index + 1).toString()
return (
<SelectItem key={index} value={selectValue}>
{selectValue}
</SelectItem>
)
})}
</SelectContent>
</Select>
</>
)
}
export default SelectProductAmount'use client'
import { useState } from 'react'
import SelectProductAmount from './SelectProductAmount'
import { Mode } from './SelectProductAmount'
import FormContainer from '../form/FormContainer'
import { SubmitButton } from '../form/Buttons'
import { addToCartAction } from '@/utils/actions'
import { useAuth } from '@clerk/nextjs'
import { ProductSignInButton } from '../form/Buttons'
function AddToCart({ productId }: { productId: string }) {
const [amount, setAmount] = useState(1)
const { userId } = useAuth()
return (
<div className="mt-4">
<SelectProductAmount
mode={Mode.SingleProduct}
amount={amount}
setAmount={setAmount}
/>
{userId ? (
<FormContainer action={addToCartAction}>
<input type="hidden" name="productId" value={productId} />
<input type="hidden" name="amount" value={amount} />
<SubmitButton text="add to cart" size="default" className="mt-8" />
</FormContainer>
) : (
<ProductSignInButton />
)}
</div>
)
}
export default AddToCart- actions.ts
import { Cart } from '@prisma/client'
const fetchProduct = async (productId: string) => {
const product = await db.product.findUnique({
where: {
id: productId,
},
})
if (!product) {
throw new Error('Product not found')
}
return product
}
const includeProductClause = {
cartItems: {
include: {
product: true,
},
},
}
export const fetchOrCreateCart = async ({
userId,
errorOnFailure = false,
}: {
userId: string
errorOnFailure?: boolean
}) => {
let cart = await db.cart.findFirst({
where: {
clerkId: userId,
},
include: includeProductClause,
})
if (!cart && errorOnFailure) {
throw new Error('Cart not found')
}
if (!cart) {
cart = await db.cart.create({
data: {
clerkId: userId,
},
include: includeProductClause,
})
}
return cart
}
const updateOrCreateCartItem = async ({
productId,
cartId,
amount,
}: {
productId: string
cartId: string
amount: number
}) => {
let cartItem = await db.cartItem.findFirst({
where: {
productId,
cartId,
},
})
if (cartItem) {
cartItem = await db.cartItem.update({
where: {
id: cartItem.id,
},
data: {
amount: cartItem.amount + amount,
},
})
} else {
cartItem = await db.cartItem.create({
data: { amount, productId, cartId },
})
}
}
export const updateCart = async (cart: Cart) => {
const cartItems = await db.cartItem.findMany({
where: {
cartId: cart.id,
},
include: {
product: true, // Include the related product
},
})
let numItemsInCart = 0
let cartTotal = 0
for (const item of cartItems) {
numItemsInCart += item.amount
cartTotal += item.amount * item.product.price
}
const tax = cart.taxRate * cartTotal
const shipping = cartTotal ? cart.shipping : 0
const orderTotal = cartTotal + tax + shipping
await db.cart.update({
where: {
id: cart.id,
},
data: {
numItemsInCart,
cartTotal,
tax,
orderTotal,
},
})
}
export const addToCartAction = async (prevState: any, formData: FormData) => {
const user = await getAuthUser()
try {
const productId = formData.get('productId') as string
const amount = Number(formData.get('amount'))
await fetchProduct(productId)
const cart = await fetchOrCreateCart({ userId: user.id })
await updateOrCreateCartItem({ productId, cartId: cart.id, amount })
await updateCart(cart)
} catch (error) {
return renderError(error)
}
redirect('/cart')
}-
create components/cart
- CartItemColumns.tsx
- CartItemsList.tsx
- CartTotals.tsx
- ThirdColumn.tsx
-
app/cart/page.tsx
import CartItemsList from '@/components/cart/CartItemsList'
import CartTotals from '@/components/cart/CartTotals'
import SectionTitle from '@/components/global/SectionTitle'
import { fetchOrCreateCart, updateCart } from '@/utils/actions'
import { auth } from '@clerk/nextjs/server'
import { redirect } from 'next/navigation'
async function CartPage() {
const { userId } = auth()
if (!userId) redirect('/')
const cart = await fetchOrCreateCart({ userId })
await updateCart(cart)
if (cart.numItemsInCart === 0) {
return <SectionTitle text="Empty cart" />
}
return (
<>
<SectionTitle text="Shopping Cart" />
<div className="mt-8 grid gap-4 lg:grid-cols-12">
<div className="lg:col-span-8">
<CartItemsList cartItems={cart.cartItems} />
</div>
<div className="lg:col-span-4 lg:pl-4">
<CartTotals cart={cart} />
</div>
</div>
</>
)
}
export default CartPageimport { Card, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { formatCurrency } from '@/utils/format'
import { createOrderAction } from '@/utils/actions'
import FormContainer from '../form/FormContainer'
import { SubmitButton } from '../form/Buttons'
import { Cart } from '@prisma/client'
function CartTotals({ cart }: { cart: Cart }) {
const { cartTotal, shipping, tax, orderTotal } = cart
return (
<div>
<Card className="p-8 ">
<CartTotalRow label="Subtotal" amount={cartTotal} />
<CartTotalRow label="Shipping" amount={shipping} />
<CartTotalRow label="Tax" amount={tax} />
<CardTitle className="mt-8">
<CartTotalRow label="Order Total" amount={orderTotal} lastRow />
</CardTitle>
</Card>
<FormContainer action={createOrderAction}>
<SubmitButton text="Place Order" className="w-full mt-8" />
</FormContainer>
</div>
)
}
function CartTotalRow({
label,
amount,
lastRow,
}: {
label: string
amount: number
lastRow?: boolean
}) {
return (
<>
<p className="flex justify-between text-sm">
<span>{label}</span>
<span>{formatCurrency(amount)}</span>
</p>
{lastRow ? null : <Separator className="my-2" />}
</>
)
}
export default CartTotals- cart/CartItemColumns.tsx
import { formatCurrency } from '@/utils/format'
import Image from 'next/image'
import Link from 'next/link'
export const FirstColumn = ({
name,
image,
}: {
image: string
name: string
}) => {
return (
<div className="relative h-24 w-24 sm:h-32 sm:w-32">
<Image
src={image}
alt={name}
fill
sizes="(max-width:768px) 100vw,(max-width:1200px) 50vw,33vw"
priority
className="w-full rounded-md object-cover"
/>
</div>
)
}
export const SecondColumn = ({
name,
company,
productId,
}: {
name: string
company: string
productId: string
}) => {
return (
<div className=" sm:w-48">
<Link href={`/products/${productId}`}>
<h3 className="capitalize font-medium hover:underline">{name}</h3>
</Link>
<h4 className="mt-2 capitalize text-xs">{company}</h4>
</div>
)
}
export const FourthColumn = ({ price }: { price: number }) => {
return <p className="font-medium md:ml-auto">{formatCurrency(price)}</p>
}- utils/types.ts
import { Prisma } from '@prisma/client'
export type CartItemWithProduct = Prisma.CartItemGetPayload<{
include: { product: true }
}>import { Card } from '@/components/ui/card'
import { FirstColumn, SecondColumn, FourthColumn } from './CartItemColumns'
import ThirdColumn from './ThirdColumn'
import { CartItemWithProduct } from '@/utils/types'
function CartItemsList({ cartItems }: { cartItems: CartItemWithProduct[] }) {
return (
<div>
{cartItems.map((cartItem) => {
const { id, amount } = cartItem
const { id: productId, image, name, company, price } = cartItem.product
return (
<Card
key={id}
className="flex flex-col gap-y-4 md:flex-row flex-wrap p-6 mb-8 gap-x-4"
>
<FirstColumn image={image} name={name} />
<SecondColumn name={name} company={company} productId={productId} />
<ThirdColumn id={id} quantity={amount} />
<FourthColumn price={price} />
</Card>
)
})}
</div>
)
}
export default CartItemsList- optional
actions.ts
export const removeCartItemAction = async (
prevState: any,
formData: FormData
) => {
return { message: 'Item removed from cart' }
}'use client'
import { useState } from 'react'
import SelectProductAmount from '../single-product/SelectProductAmount'
import { Mode } from '../single-product/SelectProductAmount'
import FormContainer from '../form/FormContainer'
import { SubmitButton } from '../form/Buttons'
import { removeCartItemAction, updateCartItemAction } from '@/utils/actions'
import { useToast } from '../ui/use-toast'
function ThirdColumn({ quantity, id }: { quantity: number; id: string }) {
const [amount, setAmount] = useState(quantity)
const handleAmountChange = async (value: number) => {
setAmount(value)
}
return (
<div className="md:ml-8">
<SelectProductAmount
amount={amount}
setAmount={handleAmountChange}
mode={Mode.CartItem}
isLoading={false}
/>
<FormContainer action={removeCartItemAction}>
<input type="hidden" name="id" value={id} />
<SubmitButton size="sm" className="mt-4" text="remove" />
</FormContainer>
</div>
)
}
export default ThirdColumn- actions.ts
eexport const removeCartItemAction = async (
prevState: any,
formData: FormData
) => {
const user = await getAuthUser();
try {
const cartItemId = formData.get('id') as string;
const cart = await fetchOrCreateCart({
userId: user.id,
errorOnFailure: true,
});
await db.cartItem.delete({
where: {
id: cartItemId,
cartId: cart.id,
},
});
await updateCart(cart);
revalidatePath('/cart');
return { message: 'Item removed from cart' };
} catch (error) {
return renderError(error);
}
};- actions.ts
export const updateCartItemAction = async ({
amount,
cartItemId,
}: {
amount: number
cartItemId: string
}) => {
const user = await getAuthUser()
try {
const cart = await fetchOrCreateCart({
userId: user.id,
errorOnFailure: true,
})
await db.cartItem.update({
where: {
id: cartItemId,
cartId: cart.id,
},
data: {
amount,
},
})
await updateCart(cart)
revalidatePath('/cart')
return { message: 'cart updated' }
} catch (error) {
return renderError(error)
}
}'use client'
import { useState } from 'react'
import SelectProductAmount from '../single-product/SelectProductAmount'
import { Mode } from '../single-product/SelectProductAmount'
import FormContainer from '../form/FormContainer'
import { SubmitButton } from '../form/Buttons'
import { removeCartItemAction, updateCartItemAction } from '@/utils/actions'
import { useToast } from '../ui/use-toast'
import { ReloadIcon } from '@radix-ui/react-icons'
import { Button } from '../ui/button'
function ThirdColumn({ quantity, id }: { quantity: number; id: string }) {
const [amount, setAmount] = useState(quantity)
const [isLoading, setIsLoading] = useState(false)
const { toast } = useToast()
const handleAmountChange = async (value: number) => {
setIsLoading(true)
toast({ description: 'Calculating...' })
const result = await updateCartItemAction({
amount: value,
cartItemId: id,
})
setAmount(value)
toast({ description: result.message })
setIsLoading(false)
}
return (
<div className="md:ml-8">
<SelectProductAmount
amount={amount}
setAmount={handleAmountChange}
mode={Mode.CartItem}
isLoading={isLoading}
/>
<FormContainer action={removeCartItemAction}>
<input type="hidden" name="id" value={id} />
<SubmitButton size="sm" className="mt-4" text="remove" />
</FormContainer>
</div>
)
}
export default ThirdColumn-
make CartItemsList client component ('use client' directive)
-
refactor updateCart
actions.ts
export const updateCart = async (cart: Cart) => {
const cartItems = await db.cartItem.findMany({
where: {
cartId: cart.id,
},
include: {
product: true, // Include the related product
},
orderBy: {
createdAt: 'asc',
},
})
let numItemsInCart = 0
let cartTotal = 0
for (const item of cartItems) {
numItemsInCart += item.amount
cartTotal += item.amount * item.product.price
}
const tax = cart.taxRate * cartTotal
const shipping = cartTotal ? cart.shipping : 0
const orderTotal = cartTotal + tax + shipping
const currentCart = await db.cart.update({
where: {
id: cart.id,
},
data: {
numItemsInCart,
cartTotal,
tax,
orderTotal,
},
include: includeProductClause,
})
return { currentCart, cartItems }
}- app/cart/page.tsx
import CartItemsList from '@/components/cart/CartItemsList'
import CartTotals from '@/components/cart/CartTotals'
import SectionTitle from '@/components/global/SectionTitle'
import { fetchOrCreateCart, updateCart } from '@/utils/actions'
import { auth } from '@clerk/nextjs/server'
import { redirect } from 'next/navigation'
async function CartPage() {
const { userId } = auth()
if (!userId) redirect('/')
const previousCart = await fetchOrCreateCart({ userId })
const { cartItems, currentCart } = await updateCart(previousCart)
if (cartItems.length === 0) {
return <SectionTitle text="Empty cart" />
}
return (
<>
<SectionTitle text="Shopping Cart" />
<div className="mt-8 grid gap-4 lg:grid-cols-12">
<div className="lg:col-span-8">
<CartItemsList cartItems={cartItems} />
</div>
<div className="lg:col-span-4 lg:pl-4">
<CartTotals cart={currentCart} />
</div>
</div>
</>
)
}
export default CartPagemodel Order {
id String @id @default(uuid())
clerkId String
products Int @default(0)
orderTotal Int @default(0)
tax Int @default(0)
shipping Int @default(0)
email String
isPaid Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}export const createOrderAction = async (prevState: any, formData: FormData) => {
const user = await getAuthUser()
try {
const cart = await fetchOrCreateCart({
userId: user.id,
errorOnFailure: true,
})
const order = await db.order.create({
data: {
clerkId: user.id,
products: cart.numItemsInCart,
orderTotal: cart.orderTotal,
tax: cart.tax,
shipping: cart.shipping,
email: user.emailAddresses[0].emailAddress,
},
})
await db.cart.delete({
where: {
id: cart.id,
},
})
} catch (error) {
return renderError(error)
}
redirect('/orders')
}
export const fetchUserOrders = async () => {
const user = await getAuthUser()
const orders = await db.order.findMany({
where: {
clerkId: user.id,
isPaid: true,
},
orderBy: {
createdAt: 'desc',
},
})
return orders
}
export const fetchAdminOrders = async () => {
const user = await getAdminUser()
const orders = await db.order.findMany({
where: {
isPaid: true,
},
orderBy: {
createdAt: 'desc',
},
})
return orders
}- utils/format.ts
export const formatDate = (date: Date) => {
return new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
}).format(date)
}- create app/orders/loading.tsx
'use client'
import LoadingTable from '@/components/global/LoadingTable'
function loading() {
return <LoadingTable />
}
export default loading- app/orders/page.tsx
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import SectionTitle from '@/components/global/SectionTitle'
import { fetchUserOrders } from '@/utils/actions'
import { formatCurrency, formatDate } from '@/utils/format'
async function OrdersPage() {
const orders = await fetchUserOrders()
return (
<>
<SectionTitle text="Your Orders" />
<div>
<Table>
<TableCaption>Total orders : {orders.length}</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Products</TableHead>
<TableHead>Order Total</TableHead>
<TableHead>Tax</TableHead>
<TableHead>Shipping</TableHead>
<TableHead>Date</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{orders.map((order) => {
const { id, products, orderTotal, tax, shipping, createdAt } =
order
return (
<TableRow key={order.id}>
<TableCell>{products}</TableCell>
<TableCell>{formatCurrency(orderTotal)}</TableCell>
<TableCell>{formatCurrency(tax)}</TableCell>
<TableCell>{formatCurrency(shipping)}</TableCell>
<TableCell>{formatDate(createdAt)}</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</div>
</>
)
}
export default OrdersPage- create app/admin/sales/loading.tsx
'use client'
import LoadingTable from '@/components/global/LoadingTable'
function loading() {
return <LoadingTable />
}
export default loading- app/admin/sales/page.tsx
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { fetchAdminOrders } from '@/utils/actions'
import { formatCurrency, formatDate } from '@/utils/format'
async function SalesPage() {
const orders = await fetchAdminOrders()
return (
<div>
<Table>
<TableCaption>Total orders : {orders.length}</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Email</TableHead>
<TableHead>Products</TableHead>
<TableHead>Order Total</TableHead>
<TableHead>Tax</TableHead>
<TableHead>Shipping</TableHead>
<TableHead>Date</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{orders.map((order) => {
const {
id,
products,
orderTotal,
tax,
shipping,
createdAt,
email,
} = order
return (
<TableRow key={order.id}>
<TableCell>{email}</TableCell>
<TableCell>{products}</TableCell>
<TableCell>{formatCurrency(orderTotal)}</TableCell>
<TableCell>{formatCurrency(tax)}</TableCell>
<TableCell>{formatCurrency(shipping)}</TableCell>
<TableCell>{formatDate(createdAt)}</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</div>
)
}
export default SalesPage- setup and add keys to .env
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=- install
npm install --save @stripe/react-stripe-js @stripe/stripe-js stripe axiosmodel Order {
isPaid Boolean @default(false)
}export const createOrderAction = async (prevState: any, formData: FormData) => {
const user = await getAuthUser()
let orderId: null | string = null
let cartId: null | string = null
try {
const cart = await fetchOrCreateCart({
userId: user.id,
errorOnFailure: true,
})
cartId = cart.id
await db.order.deleteMany({
where: {
clerkId: user.id,
isPaid: false,
},
})
const order = await db.order.create({
data: {
clerkId: user.id,
products: cart.numItemsInCart,
orderTotal: cart.orderTotal,
tax: cart.tax,
shipping: cart.shipping,
email: user.emailAddresses[0].emailAddress,
},
})
orderId = order.id
} catch (error) {
return renderError(error)
}
redirect(`/checkout?orderId=${orderId}&cartId=${cartId}`)
}+--------+ Fetch clientSecret +--------+ Request +---------+
| Client | -----------------------> | Server | ---------------> | Stripe |
| | | | | API |
| | | | <--------------- | |
| | <----------------------- | | clientSecret | |
| | clientSecret response | | | |
+--------+ +--------+ +---------+
Checkout.tsx payment/route.ts
- create app/checkout/page.tsx
'use client'
import axios from 'axios'
import { useSearchParams } from 'next/navigation'
import React, { useCallback } from 'react'
import { loadStripe } from '@stripe/stripe-js'
import {
EmbeddedCheckoutProvider,
EmbeddedCheckout,
} from '@stripe/react-stripe-js'
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string
)
export default function CheckoutPage() {
const searchParams = useSearchParams()
const orderId = searchParams.get('orderId')
const cartId = searchParams.get('cartId')
const fetchClientSecret = useCallback(async () => {
// Create a Checkout Session
const response = await axios.post('/api/payment', {
orderId: orderId,
cartId: cartId,
})
return response.data.clientSecret
}, [])
const options = { fetchClientSecret }
return (
<div id="checkout">
<EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
<EmbeddedCheckout />
</EmbeddedCheckoutProvider>
</div>
)
}- create api/payment/route.ts
import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string)
import { type NextRequest } from 'next/server'
import db from '@/utils/db'
export const POST = async (req: NextRequest) => {
const requestHeaders = new Headers(req.headers)
const origin = requestHeaders.get('origin')
const { orderId, cartId } = await req.json()
const order = await db.order.findUnique({
where: {
id: orderId,
},
})
const cart = await db.cart.findUnique({
where: {
id: cartId,
},
include: {
cartItems: {
include: {
product: true,
},
},
},
})
if (!order || !cart) {
return Response.json(null, {
status: 404,
statusText: 'Not Found',
})
}
const line_items = cart.cartItems.map((cartItem) => {
return {
quantity: cartItem.amount,
price_data: {
currency: 'usd',
product_data: {
name: cartItem.product.name,
images: [cartItem.product.image],
},
unit_amount: cartItem.product.price * 100, // price in cents
},
}
})
try {
const session = await stripe.checkout.sessions.create({
ui_mode: 'embedded',
metadata: { orderId, cartId },
line_items: line_items,
mode: 'payment',
return_url: `${origin}/api/confirm?session_id={CHECKOUT_SESSION_ID}`,
})
return Response.json({ clientSecret: session.client_secret })
} catch (error) {
console.log(error)
return Response.json(null, {
status: 500,
statusText: 'Internal Server Error',
})
}
}- product structure
return {
quantity: 1,
price_data: {
currency: 'usd',
product_data: {
name: 'product name',
images: ['product image url'],
},
unit_amount: cartItem.product.price * 100, // price in cents
},
}+--------+ Checkout Session ID +--------+ redirect +---------+
| Server | -----------------------> | Server | ---------------> | Orders |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+--------+ +--------+ +---------+
payment/route.ts confirm/route.ts orders page
import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string)
import { redirect } from 'next/navigation'
import { type NextRequest } from 'next/server'
import db from '@/utils/db'
export const GET = async (req: NextRequest) => {
const { searchParams } = new URL(req.url)
const session_id = searchParams.get('session_id') as string
try {
const session = await stripe.checkout.sessions.retrieve(session_id)
// console.log(session);
const orderId = session.metadata?.orderId
const cartId = session.metadata?.cartId
if (session.status === 'complete') {
await db.order.update({
where: {
id: orderId,
},
data: {
isPaid: true,
},
})
await db.cart.delete({
where: {
id: cartId,
},
})
}
} catch (err) {
console.log(err)
return Response.json(null, {
status: 500,
statusText: 'Internal Server Error',
})
}
redirect('/orders')
}