gem-hunter
主要言語: TypeScript
A modern ecommerce platform built with Next.js, TypeScript, Postgres, Prisma & ShadCN
A full featured Ecommerce website built with Next.js, TypeScript, PostgreSQL and Prisma.
This project is from my Next.js Ecommerce course
npm install
Note: Some dependencies may have not yet been upadated to support React 19. If you get any errors about depencency compatability, run the following:
npm install --legacy-peer-deps
Rename the .example-env file to .env and add the following
Sign up for a free PostgreSQL database through Vercel. Log into Vercel and click on "Storage" and create a new Postgres database. Then add the URL.
Example:
DATABASE_URL="postgresql://username:password@host:port/dbname"
Generate a secret with the following command and add it to your .env:
openssl rand -base64 32
Example:
NEXTAUTH_SECRET="xmVpackzg9sdkEPzJsdGse3dskUY+4ni2quxvoK6Go="
Create a PayPal developer account and create a new app to get the client ID and secret.
Example:
PAYPAL_CLIENT_ID="AeFIdonfA_dW_ncys8G4LiECWBI9442IT_kRV15crlmMApC6zpb5Nsd7zlxj7UWJ5FRZtx"
PAYPAL_APP_SECRET="REdG53DEeX_ShoPawzM4vQHCYy0a554G3xXmzSxFCDcSofBBTq9VRqjs6xsNVBcbjqz--HiiGoiV"
Create a Stripe account and get the publishable and secret key.
Example:
STRIPE_SECRET_KEY="sk_test_51QIr0IG87GyTererxmXxEeqV6wuzbmC0TpkRzabxqy3P4BpzpzDqnQaC1lZhmYg6IfNarnvpnbjjw5dsBq4afd0FXkeDriR"
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_51QIr0Ids7GyT6H7X6R5GoEA68lYDcbcC94VU0U02SMkrrrYZT2CgSMZ1h22udb5Rg1AuonXyjmAQZESLLj100W3VGVwze"
Sign up for an account at https://uploadthing.com/ and get the token, secret and app ID.
Example:
UPLOADTHING_TOKEN='tyJhcGlLZXkiOiJza19saXZlXzQ4YTE2ZjhiMDE5YmFiOgrgOWQ4MmYxMGQxZGU2NTM3YzlkZGI3YjNiZDk3MmRhNGZmNGMwMmJlOWI2Y2Q0N2UiLCJhcHBJZCI6InRyejZ2NHczNzUiLCJyZWdpb25zIjpbInNlYTEiXX0='
UPLOADTHIUG_SECRET='gg'
UPLOADTHING_APPID='trz6vd475'
Sign up for an account at https://resend.io/ and get the API key.
Example:
RESEND_API_KEY="re_ZnhUfrjR_QD2cDqdee3iYCrkfvPYFCYiXm"
# Run in development mode npm run dev # Build for production npm run build # Run in production mode npm start # Export static site npm run export
Open http://localhost:3000 with your browser to see the result.
To open Prisma Studio, run the following command:
npx prisma studio
To seed the database with sample data, run the following command:
npx tsx ./db/seed
I am not sure how long I will have this demo up but you can view it here:
https://prostore-one.vercel.app/
After deploying your app you may be getting a build error along the lines of:
The Edge Function "middleware size is 1.03 MB and your plan size limit is 1MB
For the solution to resolve this please see Brads Gist here
There is also a new lesson added for this fix at the end of the course - Vercel Hobby Tier Fix
If a logged in user adds items to their cart and logs out then a different user logs in on the same machine, they will inherit the first users cart.
To fix this we can delete the current users Cart from the database in our lib/actions/user.actions.ts signOutUser action.
Changes can be seen in lib/actions/user.actions.ts
If a user knows the Order.id of another users order it is possible for them to
visit /order/<Order.id> and see that other users order. This isn't likely to
happen in reality but should be something we protect against by redirecting the
user to our /unauthorized page if they are not the owner of the order.
In app/(root)/order/[id]/page.tsx we can import the redirect function from Next:
import { notFound, redirect } from 'next/navigation';
Then check if the user is the owner of the order and redirect them if not:
// Redirect the user if they don't own the order if (order.userId !== session?.user.id && session?.user.role !== 'admin') { return redirect('/unauthorized'); }
Changes can be seen in app/(root)/order/[id]/page.tsx
On our /cart page you may notice that when you increment or decrement the
quantity of an item in the cart, then the loader shows for all buttons after we
click. This is because all the buttons use the same pending state from our
use of useTransition in our app/(root)/cart/cart-table.tsx
We can solve this by breaking out the Buttons into their own AddButton and
RemoveButton components, each using their own useTransition and so having
their own pending state.
You can if you wish move these components to their own files/modules but for ease of following along they can be seen in the same file.
Changes can be seen in app/(root)/cart/cart-table.tsx
In our app/not-found.tsx we currently have:
<Button variant='outline' className='mt-4 ml-2' onClick={() => (window.location.href = '/')} > Back To Home </Button>
So we navigate the user back to the home page with a JavaScript click event,
but this should really be a <a /> (link) instead.
So we can change the code to:
<Button variant='outline' className='mt-4 ml-2' asChild> <Link href='/'>Back To Home</Link> </Button>
Changes can be seen in app/not-found.tsx
You may be seeing warnings from TS in your auth.ts and auth.config.ts
about using the any Type.
Normally the Types are inferred from NextAuth, and you don't need to do anything.
Here however it's any because we added in other properties to the JWT, User and the Session Types, namely role, sub and name.
So because the callbacks no longer match the built in types, then TS defaults to any
The correct way to remedy it would be to tell TS about those additions by Augmenting the NextAuth types.
So if you haven't already then you would need to create a types/next-auth.d.ts file with the following:
import { DefaultSession } from 'next-auth'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import NextAuth from 'next-auth'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { JWT } from 'next-auth/jwt'; declare module 'next-auth/jwt' { /** Returned by the `jwt` callback and `getToken`, when using JWT sessions */ interface JWT { sub: string; role: string; name: string; } } declare module 'next-auth' { /** * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context */ interface Session { user: { role: string; } & DefaultSession['user']; } interface User { role: string; } }
This augments the built in types so TS will know about our modifications.
You can then remove the use of the any type in auth.ts and auth.config.ts.
You will also need to define the config object directly in the NextAuth
constructor, rather than creating the config object first.
Changes can be seen in:
Many of you are running into issues following the course because TailwindCSS recently had a major update.
By default, you'll install the latest version (Tailwind v4), but the course was recorded with Tailwind v3.
If you want to follow the course exactly, you should install Tailwind v3 and refer to the v3 docs:
🔗 Tailwind v3 Setup for Next.js
Make sure your tailwind.config.ts matches this file
If you'd rather use Tailwind v4, there is a tailwind4 branch of this repository where you can grab the updated code:
🔗 Updated Repo
tailwind.config.ts (if it exists).globals.css to match this file.postcss.config.mjs to match this filetailwindcss-animate package installed - npm i tailwindcss-animateIf you've already started the course with Tailwind v3, some Radix UI components may break due to class name changes.
The easiest fix is to use Tailwind's migration tool:
npx @tailwindcss/upgrade
If you use the migration tool, you don't need to manually:
If you run into issues, please post over on Discord or in the Udemy Q&A for the course.
MIT License
Copyright (c) [2025] [Traversy Media]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall