{"id":25290470,"url":"https://github.com/mritzreal/driver-tutorial","last_synced_at":"2026-04-10T02:40:56.909Z","repository":{"id":277178734,"uuid":"931035643","full_name":"MrItzreal/driver-tutorial","owner":"MrItzreal","description":"A Google Drive tutorial to learn new technologies such as: Drizzle ORM, SQLite, and Clerk Auth, while improving on known ones such as: TypeScript, Tailwind, Next.js. Tutorial taught by Theo(t3).","archived":false,"fork":false,"pushed_at":"2025-04-04T20:50:14.000Z","size":86,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T21:37:24.675Z","etag":null,"topics":["clerkauth","drizzle-orm","nextjs","reactjs","sqlite","tailwind","typescript"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/watch?v=c-hKSbzooAg\u0026list=PLwUFQpzS-tRJHwT-qaI90vl-OLQcZz2Ck\u0026index=23","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/MrItzreal.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}},"created_at":"2025-02-11T16:06:48.000Z","updated_at":"2025-04-04T20:50:18.000Z","dependencies_parsed_at":"2025-02-12T15:47:18.687Z","dependency_job_id":"89044f9c-34ea-4cd9-a1bb-43cd60b4c3e8","html_url":"https://github.com/MrItzreal/driver-tutorial","commit_stats":null,"previous_names":["mritzreal/driver-tutorial"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrItzreal%2Fdriver-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrItzreal%2Fdriver-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrItzreal%2Fdriver-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrItzreal%2Fdriver-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrItzreal","download_url":"https://codeload.github.com/MrItzreal/driver-tutorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247527211,"owners_count":20953215,"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":["clerkauth","drizzle-orm","nextjs","reactjs","sqlite","tailwind","typescript"],"created_at":"2025-02-13T00:26:29.536Z","updated_at":"2026-04-10T02:40:56.881Z","avatar_url":"https://github.com/MrItzreal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drive Tutorial Notes \u0026 TODO's\n\n## TODO\n\n- [ ] Set up database and data model\n- [ ] Move folder open state to URL\n- [ ] Add auth\n- [ ] Add file uploading\n- [ ] Add analytics\n- [ ] Make sure sort order is consistent\n- [ ] Add delete\n- [ ] Real homepage + onboarding\n\n## Note from 2-15-2025\n\nJust finished up connecting database, next steps:\n\n- [ ] Update schema to show files and folders\n- [ ] Manually insert examples\n- [ ] Render them in the UI\n- [ ] Push and make sure it all works\n\n# Project Overview\n\nThis document provides a comprehensive overview of the project, including its technology stack, setup instructions, and key concepts discussed.\n\n## Technology Stack\n\n- **Next.js:** A React framework for building web applications with server-side rendering and static site generation.\n- **TypeScript:** A superset of JavaScript that adds static typing.\n- **Tailwind CSS:** A utility-first CSS framework for rapid UI development.\n- **Drizzle:** Object-Relational Mappers (ORMs) for database interactions. \n- **SingleStore:** A distributed SQL database for handling large-scale data and real-time analytics.\n- **Zod:** A TypeScript-first schema declaration and validation library for runtime type checking.\n- **npm:** Node package manager.\n- **npx:** npm package executor.\n- **GitHub Actions:** For Continuous Integration (CI).\n\n## Key Concepts\n\n### T3 Stack\n\n- A modern web development stack focused on simplicity, modularity, and full-stack type safety.\n- Core technologies: Next.js, tRPC, Tailwind CSS, TypeScript, Prisma/Drizzle, NextAuth.js.\n- Emphasizes type safety, modularity, and rapid development.\n\n### Modular Architecture\n\n- A design approach that structures a system as a collection of independent modules.\n- Benefits: Maintainability, reusability, testability, scalability, and improved teamwork.\n\n### pnpm vs. npx\n\n- **pnpm:** A package manager for managing project dependencies.\n- **npx:** A package runner for executing Node.js packages.\n- pnpm is used to install project dependencies, while npx is used to run packages or commands.\n\n### GitHub Actions (CI)\n\n- **Continuous Integration (CI):** An automated process for building, testing, and deploying code changes.\n- `.github/workflows/ci.yaml` defines the CI workflow.\n- The `jobs` section in `ci.yaml` defines the steps to be executed.\n- The Actions tab on GitHub displays the results of the CI workflow.\n\n### Zod\n\n- A TypeScript-first schema declaration and validation library.\n- Performs runtime data validation.\n- Provides type safety and detailed error messages.\n- Used to validate data from forms, APIs, and other external sources.\n- Important to use Zod because Typescript types are erased at runtime.\n\n### SingleStore\n\n- A distributed SQL database designed for large-scale data and real-time analytics.\n- Uses SQL as its query language.\n- Highly scalable and optimized for performance.\n- Drizzle ORM is used to interact with SingleStore database.\n\n### `export function` vs. `export default function`\n\n- **`export function` (Named Exports):** Allows multiple exports per file. Import using `{ name }`.\n- **`export default function` (Default Export):** Allows only one default export per file. Import using `name`.\n\n### `import type`\n\n- Used to import TypeScript types specifically.\n- Improves code readability and helps with tree-shaking.\n- Avoids unintended side effects.\n\n### `drizzle-kit push` vs `drizzle-kit generate`\n\n- `drizzle-kit push` updates the database schema directly, but does not update the github repo.\n- `drizzle-kit generate` generates migration files, which should be pushed to the github repo.\n\n## Setup Instructions\n\n1.  **Install pnpm (if using pnpm):**\n\n    ```bash\n    npm install -g pnpm\n    ```\n\n2.  **Verify pnpm installation:**\n\n    ```bash\n    pnpm --version\n    ```\n\n3.  **Create a new project (using npx or pnpm):**\n\n    ```bash\n    npx create-next-app@latest # or\n    pnpm create-next-app@latest\n    ```\n\n4.  **Install dependencies:**\n\n    ```bash\n    npm install # or pnpm install\n    ```\n\n5.  **Configure `.env` files:**\n\n    Copy `.env.example` files to `.env` files.\n\n6.  **Run development server:**\n\n    ```bash\n    npm run dev # or pnpm run dev\n    ```\n\n7.  **Set up SingleStore:**\n\n    - Create a SingleStore Database.\n    - Configure connection strings in your `.env` file.\n    - Use Drizzle to interact with the database.\n\n8.  **Setup GitHub Actions:**\n    - Create a `.github/workflows/ci.yaml` file.\n    - Configure the CI workflow for your project.\n    - Make sure to change pnpm commands to npm commands if your project uses npm.\n\n## Example CI Configuration (`.github/workflows/ci.yaml`)\n\n```yaml\nname: CI\n\non: [push]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v2\n\n      - name: Install Dependencies\n        run: npm install\n\n      - name: Copy .env.example files\n        shell: bash\n        run: find . -type f -name \".env.example\" -exec sh -c 'cp \"\u003cspan class=\"math-inline\"\u003e1\" \"\u003c/span\u003e{1%.*}\"' _ {} \\;\n\n      - name: Typecheck\n        run: npm run typecheck\n\n      - name: Lint\n        run: npm run lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmritzreal%2Fdriver-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmritzreal%2Fdriver-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmritzreal%2Fdriver-tutorial/lists"}