CaseCobra - A Modern Fullstack E-Commerce Shop for Custom Phone Cases

Features

• 🛠️ Complete shop built from scratch in Next.js 14
• 💻 Beautiful landing page included
• 💳 Secret admin dashboard to manage orders
• 🖥️ Drag-and-drop file uploads
• 🛍️ Customers can purchase directly from you
• 🌟 Clean, modern UI on top of shadcn-ui
• 🛒 Completely custom phone case configurator
• 🔑 Authentication using Kinde
• ✉️ Beautiful thank-you email after purchase
• ✅ Apple-inspired configuration design
• ⌨️ 100% written in TypeScript
• 🎁 ...much more

Third-party services

• File Uploads For Next.js Developers (FREE) - paid alternatives: Amazon S3 bucket or CloudFlare R2

Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

  git clone https://github.com/antpngl92/e-commerce

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env.local in the root of your project and add the following content:

# Retrieved from our auth provider Kinde
KINDE_CLIENT_ID=
KINDE_CLIENT_SECRET=
KINDE_ISSUER_URL=https://<your-kinde-app>.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/

NEXT_PUBLIC_SERVER_URL=http://localhost:3000

# Retrieved from our payment provider stripe
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

# Retrieved from file uploading service uploadthing
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

# Retrieved from our hosted database at neon.tech
DATABASE_URL=

# (optional) Your email to access the secret admin dashboard
ADMIN_EMAIL=

# (optional) Retrieved from email sending service resend
RESEND_API_KEY=

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

License

MIT