TL;DR

• This so called Zircon Blue is just a simple Google Drive Clone that I made based on JavaScript Mastery's video, but there is a bit of adjustment just only for Vietnamese.
• The live website is in the description. You can try it out, althought I'm only making it for my friends, and my personal research lab.

What can it do?

• 💽 Working as a imperfect clone of Google Drive.

Donate

You can support financially with this QR code bank scanning, thank you very much <3:

Learn More

Techstack

• React 19
• Next.js 15
• Appwrite
• TailwindCSS
• ShadCN
• TypeScript

This is a Next.js project bootstrapped with create-next-app.

This project uses next/font to automatically optimize and load Nunito, a custom Google Font.

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying folders and it's contents. The page auto-updates as you edit the file.

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!

If you want to build it?

• Config your Appwrite Database like the JavaScript Mastery's Google Drive Clone video.
• Clone the repo:

git clone https://github.com/Coder-Blue/zircon-blue.git
cd zircon-blue

• Install:

npm install --legacy-peer-dep

• Create a file named .env.local in the root of your project and add the following content:

NEXT_PUBLIC_APPWRITE_ENDPOINT="https://cloud.appwrite.io/v1"
NEXT_PUBLIC_APPWRITE_PROJECT=""
NEXT_PUBLIC_APPWRITE_DATABASE=""
NEXT_PUBLIC_APPWRITE_USERS_COLLECTION=""
NEXT_PUBLIC_APPWRITE_FILES_COLLECTION=""
NEXT_PUBLIC_APPWRITE_BUCKET=""
NEXT_APPWRITE_KEY=""

• Develop the project:

npm run dev

Support

• You can ask me if there is any problem:

Join my Discord server: https://discord.gg/5Nmwm24dWV

Email contact: trananhquan1009@gmail.com

Facebook contact: Noah Trần