β One-stop e-commerce app for all your daily needs.
πView Demo
Anonymous Cart
anonymous-cart.mp4
User Cart
user-cart.mp4
Stripe Checkout
stripe-checkout.mp4
Anonymous & User Cart
anonymous-and-user-cart.mp4
Note
The main purpose of this project was to learn the integration of stripe payments and utilize webhooks for listening to various events like payment completion
- OAuth Authentication
- User & Anonymous Carts
- Stripe Checkout
- View Previous Orders
- Clone the repository:
git clone https://github.com/ranepaarth/next-photo-album.git
- Navigate to the project directory:
cd next-photo-album
- Install the dependencies:
npm install
Add a .env
file in the root directory and follow
#It is the secret used to encode the JWT and encrypt things in transit
# This can be generated via the CLI with "npx auth secret" or via openssl with "openssl rand -base64 33".
AUTH_SECRET
# For development http://localhost:3000
# After deployment this will change to your domain: e.g. https://example.com
AUTH_URL
# Refer https://authjs.dev/getting-started/providers/google to setup env values
AUTH_GOOGLE_ID
AUTH_GOOGLE_SECRET
# The following variables will be useful while setting up the Docker Container for Postgres and Adminer
POSTGRES_DB
POSTGRES_USER
POSTGRES_PASSWORD
# The Postgres Database connection URL
(postgresql://POSTGRES_USER:POSTGRES_PASSWORD@localhost:5432/POSTGRES_DB)
DATABASE_URL
# After signing into stripe, visit "https://dashboard.stripe.com/test/apikeys" to retrieve below values
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
STRIPE_SECRET_KEY
# For development http://localhost:3000
# After deployment this will cahnge to your domain: e.g. https://example.com
CLIENT
- Download the Stripe CLI and log in with your Stripe account
$ stripe login
- Forward events to your webhook
$ stripe listen --forward-to localhost:3000/api/webhook
- Your Webhook Signing secret is ready to be used
$ Ready! Your webhook signing secret is '{{WEBHOOK_SIGNING_SECRET}}' (^C to quit)
- Add the webhook secret inside the
.env
file
STRIPE_WEBHOOK_SECRET = whsec_1234
This generated webhook secret is used to listen to the events in your Stripe account on your webhook endpoint so your integration can automatically trigger reactions. Learn more about Stripe Webhooks
- Start development server
npm run dev
- Get your postgres and adminer images up and running by executing
docker-compose up
. You can use the-d
flag to execute this operation in detached mode. - Get your prisma studio up and running using
npx prisma studio
command and visit http://localhost:5555 to start editing in your database. - Open your Browser and visit http://localhost:3000 to view the website
- NextJs 14 App routing & SSR
- Auth.js Authentication
- Extending User sessions
- Server Actions
- Stripe payment and checkout
- Stripe CLI