CaseCobra - Custom high-quality phones cases

📔 Table of Contents

Folder Structure
Getting Started
Screenshots
Tech Stack
Stats
Contribute
Acknowledgements
Sponsor Me
Follow Me
Learn More
Deploy on Vercel
Give A Star
Star History
Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

casecobra/
  |- app/
    |-- api/
        |--- auth/[kindeAuth]/
        |--- uploadthing/
        |--- webhooks/stripe/
    |-- auth-callback/
    |-- configure/
    |-- dashboard/
    |-- thank-you/
    |-- apple-icon.png
    |-- error.tsx
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
    |-- loading.tsx
    |-- not-found.tsx
    |-- page.tsx
  |- components/
    |-- emails/
    |-- modals/
    |-- ui/
    |-- footer.tsx
    |-- handle-component.tsx
    |-- icons.tsx
    |-- loader.tsx
    |-- max-width-wrapper.tsx
    |-- navbar.tsx
    |-- phone-preview.tsx
    |-- phone.tsx
    |-- providers.tsx
    |-- reviews.tsx
    |-- steps.tsx
  |- config/
    |-- index.ts
    |-- products.ts
  |- db/
    |-- index.ts
  |- lib/
    |-- stripe.ts
    |-- uploadthing.ts
    |-- utils.ts
  |- prisma/
    |-- schema.prisma
  |- public/
  |- validators/
    |-- option-validator.ts
  |- .env
  |- .env.example
  |- .eslintrc.json
  |- .gitignore
  |- .prettierrc.json
  |- bun.lockb
  |- components.json
  |- environment.d.ts
  |- next.config.mjs
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env file in root directory.
Contents of .env:

# .env

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# kinde client id and secret
KINDE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
KINDE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# kinde issuer and callback url
KINDE_ISSUER_URL=https://exampleapp.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

# uploadthing app id and secret
UPLOADTHING_APP_ID=xxxxxxxxxxxx
UPLOADTHING_SECRET=sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# neon db uri
DATABASE_URL="postgresql://<user>:<password>@<host>:<port>/casecobra?sslmode=require"

# stripe key and webhook
STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# resend api key and sender email
RESEND_API_KEY=re_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
RESEND_SENDER_EMAIL="[email protected]"

# app base url
NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000

# admin email
ADMIN_EMAIL="[email protected]"

5. Disable Next.js Telemetry

To disable Next.js telemetry, add the following line to your .env file:

NEXT_TELEMETRY_DISABLED=1

6. Kinde Client ID and Secret

Visit the Kinde website and log in to your account.
Navigate to the "Applications" section and create a new application if you haven't already.
After creating the application, you will find the Client ID and Client Secret in the application settings.
Copy these values and add them to your .env file:

KINDE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
KINDE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

7. Kinde Issuer and Callback URL

In the same Kinde application settings, locate the Issuer URL and configure the callback URLs.
Set the callback URLs to match your local development setup:
- Post Login Redirect URL: http://localhost:3000/auth-callback
- Post Logout Redirect URL: http://localhost:3000
Add these values to your .env file:

KINDE_ISSUER_URL=https://exampleapp.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

8. UploadThing App ID and Secret

Visit the UploadThing website and log in to your account.
Navigate to the "API Keys" section and create a new API key.
Copy the App ID and Secret values.
Add these values to your .env file:

UPLOADTHING_APP_ID=xxxxxxxxxxxx
UPLOADTHING_SECRET=sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

9. Neon DB URI

Visit the Neon website and log in to your account.
Navigate to the "Databases" section and create a new PostgreSQL database if you haven't already.
Obtain the connection URI from the database settings.
Replace <user>, <password>, <host>, and <port> with your database credentials and add the value to your .env file:

DATABASE_URL="postgresql://<user>:<password>@<host>:<port>/casecobra?sslmode=require"

10. Stripe Key and Webhook

Visit the Stripe website and log in to your account.
Navigate to the "Developers" section and click on "API keys".
Copy the Secret Key and add it to your .env file:
Navigate to "Webhook" settings, create a new webhook, and copy the Webhook Secret:

STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

11. Resend API Key and Sender Email

Visit the Resend website and log in to your account.
Navigate to the "API Keys" section and generate a new API key.
Copy the API Key and add it to your .env file.
Set your sender email address:

RESEND_API_KEY=re_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
RESEND_SENDER_EMAIL="[email protected]"

12. Application Base URL

Set the base URL for your application to match your local development environment:

NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000

13. Admin Email

Set the admin email address:

ADMIN_EMAIL="[email protected]"

Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.