PantherCanvas is a Next.js-based e-commerce platform specializing in customizable mobile cases for iPhone models. Users can upload their favorite images, choose colors, select phone models, and pick from a variety of styles and materials for their cases. The platform integrates Stripe for secure payments
🌐 Responsive UI made with ShadCN and Tailwind CSS for a seamless experience across devices
💳 Stripe payment gateway integration for secure and reliable payments
🖼️ Drag-and-drop image uploads with Uploadthing, making it easy to add custom designs
🗄️ PostgreSQL database with Prisma ORM for efficient data management
📱 Users can customize their phone cases with their favorite images
📧 Order details emailed to users via Resend and React Emails
🔑 Authentication using Kinde for secure user access
🛠️ Admin dashboard to manage orders, and more
⚡ And many more features!
Client: React, ReactQuery, TailwindCSS, Next.js, React-email
Server: Node, Express, Next.js, Stripe, Resend,
Database: Postgresql, Prisma
Payment Gateway: Stripe
To get started with PantherCanvas, follow these steps:
Prerequisites
Make sure you have the following installed on your machine:
Git, Node.js, npm (Node Package Manager)
git clone https://github.com/krishnadev7/caseCanvas.git cd caseCanvas npm install npm run dev5. Open your browser and navigate to http://localhost:3000 to view the application.
6. Set up your environment variables by creating a .env.local file based on the .env.example provided.
To run this project, you will need to add the following environment variables to your .env file
KINDE_CLIENT_ID: go to kinde dashboard and paste your client id here
KINDE_CLIENT_SECRET: your kinde secret key here
KINDE_ISSUER_URL=https://yourkindeurl.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL =http://localhost:3000/auth-callback`
STRIPE_SECRET_KEY: go to stripe dashboard and paste your stripe secret key here
ADMIN_EMAIL: add any email to access the admin dashboard
UPLOADTHING_SECRET: go to uploadthing website and paste your uploadthing secret key here
UPLOADTHING_APP_ID: go to uploadthing website and paste your uploadthing app id key here
DATABASE_URL: go to any postgresql db provider and paste DATABASE_URL here
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
STRIPE_WEBHOOK_SECRET: create a stripe webhook secret key and paste here
RESEND_API_KEY: go to Resend and paste your api key here
Krishnadev.V.s.Video.-.Sep.14.2024.mp4
