{"id":28320845,"url":"https://github.com/thomascode92/drive-tutorial","last_synced_at":"2026-04-08T18:31:13.572Z","repository":{"id":295280345,"uuid":"987470588","full_name":"ThomasCode92/drive-tutorial","owner":"ThomasCode92","description":"A Google Drive Clone built with the latest tools and technologies of the Web Development industry. 🗂️☁️","archived":false,"fork":false,"pushed_at":"2025-06-01T19:21:36.000Z","size":135,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T20:44:46.380Z","etag":null,"topics":["netlify","nextjs","reactjs","t3-stack","typescript","youtube-tutorial"],"latest_commit_sha":null,"homepage":"https://t4s-drive-tutorial.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThomasCode92.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-21T05:59:49.000Z","updated_at":"2025-06-01T19:21:34.000Z","dependencies_parsed_at":"2025-05-26T11:35:57.324Z","dependency_job_id":null,"html_url":"https://github.com/ThomasCode92/drive-tutorial","commit_stats":null,"previous_names":["thomascode92/drive-tutorial"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ThomasCode92/drive-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Fdrive-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Fdrive-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Fdrive-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Fdrive-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasCode92","download_url":"https://codeload.github.com/ThomasCode92/drive-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Fdrive-tutorial/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261487014,"owners_count":23166005,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["netlify","nextjs","reactjs","t3-stack","typescript","youtube-tutorial"],"created_at":"2025-05-25T12:12:36.673Z","updated_at":"2025-12-30T22:58:02.749Z","avatar_url":"https://github.com/ThomasCode92.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drive Tutorial - Building a Google Drive Clone\n\nA _Google Drive Clone_ built with the latest tools and technologies of the Web\nDevelopment industry. 🗂️☁️\n\n\u003e This project is inspired by a YouTube tutorial of [Theo](https://x.com/theo).\n\u003e Check out [this link](https://www.youtube.com/watch?v=d5x0JCZbAJs) to watch\n\u003e the full video.\n\n## 📖 About This Project\n\nThis project utilizes the [T3 Stack](https://create.t3.gg/) and was initialized\nwith `create-t3-app`. It demonstrates a modern, high-performance approach to\napplication development through seamless integration of cutting-edge tools and\ntechnologies.\n\nFor more information about the technologies used in this project, consult the\nofficial documentation linked below. Additional support is available via the\n[T3 Community Discord](https://t3.gg/discord).\n\n- [Next.js](https://nextjs.org)\n- [Drizzle](https://orm.drizzle.team)\n- [Tailwind CSS](https://tailwindcss.com)\n\n### 🎨 UI Scaffolding\n\nThe base UI for this project was created using [v0](https://v0.dev/), a tool\nthat enables fast UI generation through _vibe coding_. An\n[example](https://v0.dev/chat/google-drive-clone-ui-6jEAM0wxOgc?b=b_fFQhsfElqQi\u0026f=0)\nof this approach can be seen in Theo’s walkthrough on YouTube.\n\nTo apply the same base UI in a project, run the following command:\n\n```bash\nnpx shadcn@latest add \"https://v0.dev/chat/b/b_fFQhsfElqQi\"\n```\n\n#### 🏠 Homepage\n\nThe homepage layout was also crafted using v0. The generation prompt for it was:\n\n```text\nA minimal homepage for a Google Drive clone named T4S Drive. It should be just a\nmarketing page with a \"get started\" button. A gradient would be nice, please use\nblack and dark neutral grays.\n```\n\n### 🧰 Learn More about the T3 Stack\n\nTo explore more about the [T3 Stack](https://create.t3.gg/), refer to the\nfollowing resources:\n\n- [Official Documentation](https://create.t3.gg/)\n- [Learning Resources](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available)\n  — A collection of awesome tutorials\n\nVisit the\n[create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) for\nfeedback and contributions.\n\n## 🚀 Getting Started\n\n### 🛠️ Environment Variables\n\nTo configure the environment variables, copy the example file and update the\nvalues as needed:\n\n```bash\ncp .env.example .env\n```\n\nOpen the `.env` file and fill in the required fields based on the project’s\nneeds (e.g., database credentials, API keys, etc.).\n\n### 🗄️ Database Setup\n\nThis project uses [SingleStore](https://www.singlestore.com/) as the primary\ndatabase, with [Drizzle ORM](https://orm.drizzle.team) for type-safe, efficient\ndata access and schema management.\n\n```bash\npnpm run db:push       # Push the schema to the database\npnpm run db:studio     # Launch Drizzle Studio\n```\n\n### 🕹️ Development Server\n\nTo start the local development server:\n\n```bash\npnpm run dev\n```\n\n## 🚧 Development Logbook\n\nTracking progress on key features and tasks for the project.\n\n- [x] 🛢️ Set up the database and define data models\n- [x] 🔗 Sync folder open state with the URL\n- [x] 🔐 Implement user authentication\n- [x] 📁 Enable file upload functionality\n- [x] 📊 Add analytics tracking\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand the logbook\u003c/summary\u003e\n\n### 📝 Note from 5-28-2025\n\nJust finished up the database connection, next steps:\n\n- [x] Update schema to show files and folders\n- [x] Manually insert examples\n- [x] Render them in the UI\n\n### 📝 Note from 6-4-2025\n\nThe database and UI are now connected, some improvements to make:\n\n- [x] Change folders to link components, remove all client state\n- [x] Clean up the database and data fetching patterns\n- [x] Real homepage\n\n### 📝 Note from 7-4-2025\n\nUploading a file to '[uploadthing](https://uploadthing.com/)' works, things that\ncan be approved:\n\n- [x] Add \"ownership\" to files and folders\n- [x] Upload files to the right folder\n- [x] Delete file button\n- [x] Allow files that are not images to be uploaded\n\n\u003c/details\u003e\n\n## 🎯 Fun Follow Ups\n\n- [ ] **Folder creation**\u003cbr /\u003e Make a server action that takes a name and\n      parentId, and creates a folder with that name and parentId (don't forget\n      to set the ownerId).\n- [ ] **Folder deletion**\u003cbr /\u003e Make sure to fetch all of the folders that have\n      it as a parent, and their children too.\n- [ ] **Access Control**\u003cbr /\u003e Check if user is owner before showing the folder\n      page.\n- [ ] **Make a \"file view\" page**\n- [ ] **Access control**\n- [ ] **Toasts notifications**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomascode92%2Fdrive-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomascode92%2Fdrive-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomascode92%2Fdrive-tutorial/lists"}