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

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env file in root directory.
4. 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="your.email@example.com"

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

# admin email
ADMIN_EMAIL="admin.email@example.com"

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

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

KINDE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
KINDE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

7. Kinde Issuer and Callback URL

1. In the same Kinde application settings, locate the Issuer URL and configure the callback URLs.
2. 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
3. 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

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

UPLOADTHING_APP_ID=xxxxxxxxxxxx
UPLOADTHING_SECRET=sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

9. Neon DB URI

1. Visit the Neon website and log in to your account.
2. Navigate to the "Databases" section and create a new PostgreSQL database if you haven't already.
3. Obtain the connection URI from the database settings.
4. 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

1. Visit the Stripe website and log in to your account.
2. Navigate to the "Developers" section and click on "API keys".
3. Copy the Secret Key and add it to your .env file:
4. 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

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

RESEND_API_KEY=re_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
RESEND_SENDER_EMAIL="your.email@example.com"

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="admin.email@example.com"

14. 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.

💎 Acknowledgements

Useful resources and dependencies that are used in CaseCobra.

• @headlessui/react: ^2.0.4
• @kinde-oss/kinde-auth-nextjs: ^2.2.13
• @paralleldrive/cuid2: ^2.2.2
• @prisma/client: ^5.15.0
• @radix-ui/react-aspect-ratio: ^1.0.3
• @radix-ui/react-dialog: ^1.1.0
• @radix-ui/react-dropdown-menu: ^2.0.6
• @radix-ui/react-icons: ^1.3.0
• @radix-ui/react-label: ^2.0.2
• @radix-ui/react-progress: ^1.0.3
• @radix-ui/react-scroll-area: ^1.0.5
• @radix-ui/react-slot: ^1.0.2
• @react-email/components: ^0.0.19
• @tanstack/react-query: ^5.45.1
• @uploadthing/react: ^6.6.0
• class-variance-authority: ^0.7.0
• clsx: ^2.1.1
• framer-motion: ^11.2.10
• lucide-react: ^0.394.0
• next: 14.2.4
• next-themes: ^0.3.0
• prisma: ^5.15.0
• react: ^18
• react-dom: ^18
• react-dom-confetti: ^0.2.0
• react-dropzone: ^14.2.3
• react-rnd: ^10.4.11
• resend: ^3.3.0
• sharp: ^0.32.6
• sonner: ^1.5.0
• stripe: ^15.12.0
• tailwind-merge: ^2.3.0
• tailwindcss-animate: ^1.0.7
• uploadthing: ^6.12.0
• zod: ^3.23.8
• @types/node: ^20
• @types/react: ^18
• @types/react-dom: ^18
• eslint: ^8
• eslint-config-next: 14.2.4
• eslint-plugin-unused-imports: ^4.0.0
• postcss: ^8
• prettier: ^3.3.2
• prettier-plugin-tailwindcss: ^0.6.5
• tailwindcss: ^3.4.1
• typescript: ^5

❤️ Sponsor Me

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)