Nextjs Google Drive Clone

Bojko Drive - Google Drive clone built with T3 stack - Next.js, TypeScript, TailwindCSS

• Database hosted on SingleStore
• Project hosted on Netlify
• Auth implemented with Clerk
• Analytics implemented with PostHog

Live demo:

https://bojko-drive.netlify.app/

How to run locally:

Requirements:

• Node.js (v18+)
• pnpm
• Git

Steps:

• Clone this repo
• Install packages: pnpm install
• Setup .env file by copying and filling out the .env.example
• Run project by pnpm dev and enjoy on http://localhost:3000
• Eventually you can run pnpm build and pnpm start to build and run the production version

Reccomended Development Tools:

• Visual Studio Code with the following extensions:
  • ESLint
  • Prettier
  • Tailwind CSS IntelliSense

Handy Commands:

• pnpm dev - run the development server
• pnpm build - build the project for production
• pnpm start - start the production server
• pnpm check - run lint with ESLint and type checks with TypeScript
• pnpm db:push - push the database schema to SingleStore
• pnpm db:studio - open the Drizzle Studio to manage the database

Tech Stack:

• Next.js 15
• TypeScript
• TailwindCSS
• ShadCN/UI
• Drizzle ORM
• Zod
• Uploadthing
• MySQL (SingleStore)
• CI pipeline (GitHub Actions)

CI/CD Pipeline:

The CI/CD pipeline uses GitHub Actions and Netlify CD, ensuring that code is automatically checked, linted, correctly built and deployed. The pipeline includes the following steps:

🛠 CI (Continuous Integration)

1. Checkout of the code – Loads the repository code into the GitHub Actions runner.
2. Dependencies Install – We use pnpm to install all necessary dependencies for the project.
3. Copy .env file – Copies the .env.example to .env for the CI environment.
4. Typecheck – Checks TypeScript types to ensure type safety across the codebase.
5. Lint – Runs ESLint to check for code quality and style issues.

🚀 CD (Continuous Deployment)

Deployment is triggered automatically by Netlify when changes are pushed. Netlify builds the project and deploys it to the live environment.

MAIN TODO:

• Set up database and data model (finished 10.04.2025)
• Move folder open state to URL
• Add ClerkAuth
• Add file uploading (only images for now)
• Add analytics (Posthog)
• Make sure the sort order is consistent
• 'Delete file' button
• Add ownership to folders, each user sees only his folders
• Real homepage + Onboarding
• Create folder
• Rename folder after creating
• Delete folder - fetch all folders that have it as parent and their children too, then delete them all
• Make a "file view" page
• Toasts after file upload, Loading states, better UX
• Gray out a row while it's being deleted - set states in component etc.