Benimaru

I have made a simple E-Commerce website to practice Next.js and React.

• Next.js 14
• NextAuth.js 5 beta
• Prisma
• shadcn/ui
• Tailwind CSS

Preparation

Create accounts and generate API Keys

• Resend : Email Verification, Password Reset
• Google OAuth : Google Login
• Supabase : Database (Postgresql)

Create .env file

$ copy .env.example .env

Update env file (setting API Keys, URL and Domain info)

If you just want to run demo, only need to update the list below in env file

• Google OAuth Client Id and Secret

  • GOOGLE_CLIENT_ID
  • GOOGLE_CLIENT_SECRET

• Supabase DB Connection URI

  • DATABASE_URL
  • DIRECT_URL

• Resend API Key

  • RESEND_API_KEY

Getting Started

First, generate demo files:

$ npm run demo

Second, run the development server:

$ npm run dev

Open http://localhost:3000 with your browser to see the result.

Screenshots

Desktop Home

Mobile Home

Shopping Cart

Desktop Category Menu

Mobile Category Menu

Product Detail

Product list by Category

References

Auth

• Next Auth V5 - Advanced Guide (2024)

Design

• Nike
• Chanel
• Next.js 14 E-Commerce Website with Stripe, and Sanity.io

Demo Photos

Slide photos

• Photo by Alyssa Strohmann on Unsplash

• Photo by Sara Kurfeß on Unsplash

• Photo by Jason Briscoe on Unsplash

• Photo by Dusabimana Aimable on Unsplash

• Photo by Angela Bailey on Unsplash

Product photos

• Photo by Md Salman on Unsplash

• Photo by Sarah Dorweiler on Unsplash

• Photo by Nimble Made on Unsplash

• Photo by Frank Flores on Unsplash

• Photo by Mediamodifier on Unsplash

License

Licensed under the MIT License.