DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A feature-rich Google Drive clone with Next.js, Firebase, Stripe, and Clerk

NextJS Firebase Stripe Clerk – Google Drive Clone Project

A feature-rich Google Drive clone with Next.js, Firebase, Stripe, and Clerk

A feature-rich Google Drive clone with Next.js, Firebase, Stripe, and Clerk

Embark on an exciting journey of building a Google Drive clone with the Next.js framework Firebase for backend functionality Stripe for payment integration and Clerk for authentication. This comprehensive course is designed for web developers eager to enhance their skills by creating a feature-rich cloud storage application that mirrors the functionality of Google Drive.

🚀 Demo

https://drive.sammi.app

🧐 Features

Here’re some of the project’s best features:

  • Stripe Integration
  • Clerk Authentication
  • Firebase Backend
  • Light and Dark mode 🌓
  • List rename delete drag & drop reorder and copy
  • Stripe subscription for each organization to unlock unlimited boards
  • Zustand state management
  • Detail-oriented effects and animations using TailwindCSS
  • Environment Typescript NextJS Setup

🛠️ Installation Steps:

  1. Install packages
npm install & yarn install

Enter fullscreen mode Exit fullscreen mode
  1. Setup .env file
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_STRIPE_SECRET_KEY=
NEXT_PUBLIC_DOMAIN=

Enter fullscreen mode Exit fullscreen mode
  1. Start the app
npm run dev & yarn dev

Enter fullscreen mode Exit fullscreen mode

💻 Built with

Technologies used in the project:

  • ReactJS
  • NextJS app routes
  • NodeJS
  • TailwindCSS
  • ShadcnUI
  • Clerk
  • Stripe
  • TypeScript

GitHub

View Github

Top comments (0)