[ { "path": ".eslintrc.cjs", "content": "/** @type {import(\"eslint\").Linter.Config} */\nconst config = {\n parser: \"@typescript-eslint/parser\",\n parserOptions: {\n project: true,\n },\n plugins: [\"@typescript-eslint\"],\n extends: [\n \"next/core-web-vitals\",\n \"plugin:@typescript-eslint/recommended-type-checked\",\n \"plugin:@typescript-eslint/stylistic-type-checked\",\n ],\n rules: {\n // These opinionated rules are enabled in stylistic-type-checked above.\n // Feel free to reconfigure them to your own preference.\n \"@typescript-eslint/array-type\": \"off\",\n \"@typescript-eslint/consistent-type-definitions\": \"off\",\n\n \"@typescript-eslint/consistent-type-imports\": [\n \"warn\",\n {\n prefer: \"type-imports\",\n fixStyle: \"inline-type-imports\",\n },\n ],\n \"@typescript-eslint/no-unused-vars\": [\"warn\", { argsIgnorePattern: \"^_\" }],\n },\n}\n\nmodule.exports = config\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\n\non: [push, pull_request]\n\nenv:\n DATABASE_URL: \"https://fake.com\"\n SKIP_ENV_VALIDATION: true\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout\n uses: actions/checkout@v2\n\n - name: Bun\n uses: oven-sh/setup-bun@v1\n\n - name: Install Dependencies\n run: bun install\n\n - name: Typecheck\n run: bun run typecheck\n\n - name: Lint\n run: bun run lint\n\n - name: Print Environment Variable\n run: echo $MY_ENV_VAR\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# database\n/prisma/db.sqlite\n/prisma/db.sqlite-journal\n\n# next.js\n/.next/\n/out/\nnext-env.d.ts\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables\n.env\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\n" }, { "path": "README.md", "content": "## Project using bleeding-edge stack. Drizzle ORM + Neon postgres + Clerk auth + Shadcn/ui + everything new in Next.js 13 (server components, server actions, streaming ui, parallel routes, intercepting routes). Now fully edge runtime deployed.\n\n### Full Tech Stack\n\n- Next.js 13\n- CreateT3App Bootrapped\n- Neon (postgres)\n- Drizzle ORM\n- Tailwind + Shadcn/ui\n- Clerk\n- Lucide Icons\n- Zod Validation\n- Stripe\n\n### Project Description\n\nNetflix clone, project inspired by [@sadmann17](https://twitter.com/sadmann17). Bootrapped with CreateT3App. Project uses 100% server actions, zero api endpoints aside for webhooks. [next-safe-action](https://github.com/TheEdoRan/next-safe-action) library for typesafe server actions. Each account can have up to 4 profiles. Each profiles have it's own avatar and list of saved shows. Feature includes ability to search show catalog, SaaS subscription service with Stripe, optimistic update, and infinite scrolling.\n\n### How To Run Locally\nClone repo, install dependencies, and set environment variables inside \".env.example\", remember to rename \".env.exmaple\" to \".env\". Run \"npm run dev\" -> \"npm run stripe:listen\"(forward stripe events to local). \n\n### Overall Thoughts\n\nNext.js 13 app router overall was a joy to work with and is GREATLY superior to page router. I will say the Next.js app router docs are currently very terrible and you will be left to figure out many things on your own. However, the tools that Next.js 13 gives you are very powerful and things you won't find in any other framework. Server components are underrated and more powerful than you may think. There is an art to interweaving server and client components that is hard to grasp until you get down and dirty with them. Parrallel and intercepting routes are incredibly useful although very buggy. Lucky for you, I've already figured out most of the bugs/tricky bits so just read the \"Tricky things\" section. Streaming ui and suspense is great. It really makes it easy to handle loading states. This is one of the most impactful things about app dir vs page dir. I saved the most important topic for last. When I first started using server actions I really didn't understand the point. They kind of felt like another way to write api endpoints and just felt like a worst version of tRPC. The Next.js docs will push you to use the server component version of server actions using forms but trust me, don't use server actions with forms. If you do, you are giving up the best feature of server actions which is the tRPC like typesafety. To get the best DX out of server actions, I recommend using [next-safe-actions](https://github.com/TheEdoRan/next-safe-action/tree/main/packages/next-safe-action), this lib is a game changer. It made server actions felt just like tRPC and overall was just an amazing DX. I think it's still too early for server actions to replace tRPC but the nice thing is that it requires zero setup. Setting tRPC up for app dir would be a headache right now. Also note, [revalidatePath/Tag currently only work with server actions](https://github.com/pingdotgg/zact) and you will definitely need them.\n\n### Thoughts about Clerk\n\nClerk was amazing to work with in terms of DX. Extremely easy to setup and get rolling. However, there is a major problems that's a deal breakers until they fix it.\n\n- Clerk causes your entire app to be dyamically rendered. Meaning you can not benefit from things like SSG and ISR. Override with \"cache: force-cache\" or \"revalidate = 0\" is not possible.\n ![Screenshot (83)](https://github.com/Apestein/nextflix/assets/107362680/6d2d89d0-63f3-4d6c-97a7-3a12f514868e)\n\n### Thoughts about Neon\n\n- Error prone, not production ready, support is slow to respond, and hard to get help because they don't have Discord. Wouldn't recommend for serious projects. Foreign key contraint is nice to have compared to Planetscale. The biggest pro is the [data branching](https://planetscale.com/docs/concepts/data-branching) feature is free. On Planetscale you need \"Scaler Pro\" for this feature. Data branching makes a huge difference for development/debugging. I do miss not having Planetscale's \"Slowest queries during the last 24 hours\" panel in the dashboard.\n\n### Thoughts about Drizzle\n\nFantastic. Noticeably faster than Prisma. Schema file being in typescript results in superior DX. Their docs are a little lacking though.\n\n### Project Setup\n\nCreateT3App comes with some nice things like T3 Env and Typescript-Eslint preconfigured. To bootstrap with CreateT3App, you just need to delete page dir and create app dir. And VERY important, in next.config.mjs you must delete \"i18n\" property.\n\n### Project Structure\n\nSome people like to break everything down into neat little components and organize them into different files. I prefer big files, nothing gets extracted until it gets used in at least 2 different places.\nIf your site is complex you will probably need many different layout. Your root layout.tsx file should contain only the things shared by your entire app. For parts of your site that need different layout use [route groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups).\n![Screenshot (74)](https://github.com/Apestein/nextflix/assets/107362680/44bffd04-e537-49ca-a945-1b1185a4b64f)\n\n### Tricky Things To Consider (I will be going over things I found tricky or difficult in this section)\n\n#### 1. You will no doubt run into problems with Next.js aggressive caching. To invalidate router cache, you must use [RevalidatePath/Tage in server action](https://nextjs.org/docs/app/building-your-application/caching#invalidation-1). However, Revalidate/Tag also causes the current page to refresh. I don't know why Next.js decided to do this but get around this I use this [LinkButton](https://github.com/Apestein/nextflix/blob/main/src/components/link-button.tsx) component. See the problem below.\n\n[scrnli_8_22_2023_12-30-04 PM2.webm](https://github.com/Apestein/nextflix/assets/107362680/da7dd256-0a91-4ce5-99c6-698bc37d8013)\n\n#### 2. When a new user creates an account or signs in with Clerk's oauth I needed to create an account and profile in my database. At first, I was using Clerk's webhook to create them but the problem was users would get redirected to the landing page before the webhook could add the account and profile to the database. As a result, when users first creates the account. The UserButton component that displayed their avatar and profile infomation was missing. To get around this, I had a [CustomUserComponent]() check if the user exist in the database or not (if not, add).\n\n```ts\nasync function CustomeUserButton() {\n const { userId } = auth()\n if (!userId) return\n const existingAccount = await getAccountWithActiveProfile()\n const account = existingAccount ?? (await createAccountAndProfile())\n ...\n}\n```\n\nAdditionally, you should wrap the component in suspense to not block the UI and prevent unresponsiveness.\n\n```ts\n}>\n \n\n```\n\n#### 3. I had an object that I needed to extract a tuple from to validate with zod. [Here is how](https://github.com/Apestein/nextflix/blob/main/src/lib/configs.ts).\n\n```ts\nexport const createCheckoutSession = authAction(\n z.object({\n stripeProductId: z.string(),\n planName: z.enum(planTuple),\n }),\n}\n```\n\n![Screenshot (78)](https://github.com/Apestein/nextflix/assets/107362680/98e2f8f8-3b44-46d7-baa6-abe95d8463fa)\n\n#### 4. Infinite scrolling can be tricky to implement yourself. Typically, I would use React Query/SWR to do this but I wanted to implement it with [server actions](https://github.com/Apestein/nextflix/blob/main/src/actions/index.ts) this time.\n\n```ts\n// actions/index.ts\nexport const getMyShowsInfinite = authAction(\n z.object({\n index: z.number().min(0),\n limit: z.number().min(2).max(50),\n }),\n async (input) => {\n const account = await getAccountWithActiveProfile()\n const shows = await db.query.myShows.findMany({\n where: eq(myShows.profileId, account.activeProfileId),\n limit: input.limit + 1,\n offset: input.index * input.limit,\n })\n const hasNextPage = shows.length > input.limit ? true : false\n if (hasNextPage) shows.pop()\n const filteredShows = await getMyShowsFromTmdb(shows)\n return { shows: filteredShows, hasNextPage }\n },\n)\n```\n\nThen, I use this modified [infinite scroll component](https://github.com/Apestein/better-react-infinite-scroll) that I created. See the implementation [here](), ignore the stuff about simulated shows. Important thing to understand is inside IntersectionObserver callback function, you must use refs instead of state. That is because of scoping, the callback is only created once and all the variables inside are snapshotted. To get around this you need to use refs. There maybe other ways, I'm just listing what I know.\n\n```ts\nconst observer = new IntersectionObserver((entries) => {\n if (!hasNextPageRef.current) return // <= must use ref, don't use state\n})\n```\n\n[scrnli_8_22_2023_12-42-31 PM3.webm](https://github.com/Apestein/nextflix/assets/107362680/e9ceae54-1ea0-4c89-97c7-0d87d12bd135)\n\n#### 5. For Stripe intergration. Reference these 2 repos and mine also of course. Be careful with webhooks, use the Stripe CLI to forward events to your local environment when testing.\n\n- [Official Next.js example using server actions](https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript)\n- [Taxonomy](https://github.com/shadcn-ui/taxonomy)\n\n#### 6. Optimistic update with server actions can be tricky. Using next-safe-action's useOptimisticAction hook helps here. [Here is how I did it](https://github.com/Apestein/nextflix/blob/main/src/components/modal-card.tsx).\n\n[scrnli_8_22_2023_12-17-36 PM.webm](https://github.com/Apestein/nextflix/assets/107362680/00f9690a-8698-498a-b639-5e45b5e5518c)\n\n#### 7. To prevent the search function from firing with every keystroke. Use the [use-debounce package](https://www.npmjs.com/package/use-debounce). [See my implementation here](). All data fetching can be done with server component by using router.push()/replace(). Pretty crazy pattern if you ask me🤯.\n\n[scrnli_8_22_2023_12-51-37 PM4.webm](https://github.com/Apestein/nextflix/assets/107362680/3dda2e70-97f5-4d88-beca-1cfda53fc344)\n\n#### 8. Very frustrating problem I ran into was the scrollbar causing layout shift. When users navigate from a page with scrollbar to a page without scrollbar there would be an annoying layout shift.\n\nhttps://github.com/Apestein/nextflix/assets/107362680/4136a245-e38f-404a-b66e-2a9c4bc1b266\n\nThe solution is to use [scrollbar-gutter css property](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter). However, the documentation is terrible and I couldn't get it to work after many hours of debugging. I ended up just googling \"scrollbar-gutter not working\" and found this [stackoverflow answer](https://stackoverflow.com/questions/75732399/why-doesnt-scrollbar-gutter-stable-work-on-the-body-element) lol. Basically, I just need to place scrollbar-gutter:stable on the [HTML element](https://github.com/Apestein/nextflix/blob/main/src/app/layout.tsx)🤦‍♂️. However this introduced a new bug when using \"scrollbar-gutter\" with modals, specifically Shadcn/ui & Radix modals. Opening a modal causes layout shift.\n\n[scrnli_8_25_2023_5-58-40 PM5.webm](https://github.com/Apestein/nextflix/assets/107362680/9e5e7f93-8d1a-493f-8eba-c6dc2b283805)\n\nMoreover, since I must set \"scrollbar-gutter\" on the HTML element. This meant that my whole application will have a gutter (small padding on the right) on every page, we wouldn't want a gutter on our auth pages for example. After some research, here is the solution that I came up with:\n\n```ts\n//app/layout.tsx\n\n ...\n\n```\n\n```ts\n//app/(main)/layout.tsx\n\n
\n {children}\n