{"id":20043292,"url":"https://github.com/m-abdelwahab/nextjs-prisma-workshop","last_synced_at":"2025-05-05T08:32:43.202Z","repository":{"id":45367384,"uuid":"407121688","full_name":"m-abdelwahab/nextjs-prisma-workshop","owner":"m-abdelwahab","description":"Workshop: Build a fullstack app using Next.js and Prisma","archived":true,"fork":false,"pushed_at":"2021-12-17T12:39:57.000Z","size":164,"stargazers_count":47,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-26T03:08:21.526Z","etag":null,"topics":["nextjs","prisma","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","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/m-abdelwahab.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}},"created_at":"2021-09-16T10:31:58.000Z","updated_at":"2025-03-05T18:42:49.000Z","dependencies_parsed_at":"2022-08-04T14:15:09.731Z","dependency_job_id":null,"html_url":"https://github.com/m-abdelwahab/nextjs-prisma-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-abdelwahab%2Fnextjs-prisma-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-abdelwahab%2Fnextjs-prisma-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-abdelwahab%2Fnextjs-prisma-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-abdelwahab%2Fnextjs-prisma-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m-abdelwahab","download_url":"https://codeload.github.com/m-abdelwahab/nextjs-prisma-workshop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252466915,"owners_count":21752462,"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":["nextjs","prisma","tailwindcss","typescript"],"created_at":"2024-11-13T10:55:46.884Z","updated_at":"2025-05-05T08:32:40.732Z","avatar_url":"https://github.com/m-abdelwahab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js X Prisma Workshop\n\n![Prisma   NextAuth js 2](https://user-images.githubusercontent.com/27310414/136209309-bdfba81f-0faa-4ba7-9537-23ec03425697.png)\n\nThis is a workshop that will teach you how to build a fullstack app using [Next.js](https://nextjs.org) and [Prisma](https://prisma.io). If you prefer to watch this workshop in [video format](https://youtu.be/aim8Mk-ETK0)\n\n\n\n## Prerequisites\n\nFor this workshop, knowledge of JavaScript and React is strongly recommended, since you'll be using Next.js. Having some basic understanding of relational databases is helpful but not required. You also don't need to know TypeScript to complete this workshop.\n\nYou can check out the following resources:\n\n- [Prisma's Data guide](https://prisma.io/dataguide)\n- [The beginner's guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)\n\n\n\n## Introduction\n\n\nNext.js is a fullstack React framework, it allows you to build your frontend using React and easily set up an API. The framework also supports different data fetching strategies: you can fetch data at build time, client-side or server-side.\n\n\nPrisma is a next-generation ORM for Node.js and TypeScript. It makes working with databases easy by providing you with simple workflows.\n\n## App architecture\n\n## Next.js\n\n\n\n## Prisma\n\n## What you'll be building\n\nThroughout this workshop you'll build a feedback app where users can submit feedback.\n\nThis is what the final app will look like:\n\n\n\nTo follow along run the following commands. \n\n```bash\ngit clone -b starter https://github.com/m-abdelwahab/nextjs-prisma-workshop\ncd nextjs-prisma-workshop\nnpm install \nnpm run dev\n```\n\nThis will clone the starter branch, install the dependencies and start the development server.\nThe app will be running at [http://localhost:3000](http://localhost:3000).\n\n## Project structure\n\nThe starter project includes the following dependencies installed:\n\n- [TypeScript](https://typescriptlang.org/): type-safe JavaScript\n- [react-hot-toast](https://react-hot-toast.com/): library for displaying toast notifications\n- [framer-motion](https://framer.com/motion): animation library for React\n- [TailwindCSS](https://tailwindcss.com/): utility-first CSS framework\n- [SWR](https://swr.vercel.app/): react hooks for remote data fetching\n- [react-hook-form](https://react-hook-form.com/): form validation library\n\n\nYou'll find the following project structure\n\n```feedback-app/\n┣ data/\n┃ ┗ feedback.ts\n┣ pages/\n┃ ┣ feedback/\n┃ ┃ ┗ [id].tsx\n┃ ┣ _app.tsx\n┃ ┣ feedback.tsx\n┃ ┗ index.tsx\n┣ public/\n┣ styles/\n┣ .eslintrc.json\n┃ ┗ tailwind.css\n┣ .gitignore\n┣ README.md\n┣ next-env.d.ts\n┣ next.config.js\n┣ package-lock.json\n┣ package.json\n┣ postcss.config.js\n┣ tailwind.config.js\n┗ tsconfig.json\n```\n\n- `pages`: Next.js has file-system based routing, where each file in this directory is autimatically a route.\n  -  `index.tsx` renders the page located at `http:///localhost:3000`, which contains a form If you want to add more routes, create a new JS/TS file with the name of thr route (i.e. `about.tsx`, which will create a new page located at `http://localhost:3000/about)\n  -  `_app`: global `App` component that wraps around your entire app. This file is used to add global styles using TailwindCSS\n  -  `feedback.tsx`: page that will display a list of user-submitted feedback. Data is hard-coded and loaded from the `data/feedback.ts` file, which contains a list of feedback items\n  -  `public`: folder for serving static assets such as images, fonts, etc.\n  -  `styles/tailwind.css`: set up for TailwindCSS, imported in `_app.tsx`\n  -  `postcss.config.js`: postcss config file, required to use TailwindCSS\n  -  `tailwind.config.js`: TailwindCSS configuration file\n\n## Setting up the database layer using Prisma\n\n```\nnpm install prisma -D\n```\n\n### Initialize Prisma in your project\n\n```\nnpx prisma init\n```\n\n### Writing the database schema using Prisma\n\n\n```prisma\n\ndatasource db {\n  provider = \"postgresql\"\n  url      = env(\"DATABASE_URL\")\n}\n\ngenerator client {\n  provider = \"prisma-client-js\"\n}\n\nmodel Feedback {\n  id           String       @id @default(uuid())\n  createdAt    DateTime     @default(now())\n  updatedAt    DateTime     @updatedAt\n  feedbackType FeedbackType\n  message      String\n  email        String\n  name         String\n}\n\nenum FeedbackType {\n  ISSUE\n  IDEA\n  FEEDBACK\n}\n\n```\n\n### Creating a migration\n\n\n```bash\nnpx prisma db push\n\n```\n### Writing a seeding script\n\n\n```ts\n// prisma/seed.ts\nimport { PrismaClient } from '@prisma/client';\n\nconst prisma = new PrismaClient();\n\nasync function main() {\n  await prisma.feedback.createMany({\n    data: [\n      {\n        message: 'Lovely app',\n        feedbackType: 'FEEDBACK',\n        email: 'mahmoud@prisma.io',\n        name: 'Mahmoud',\n      },\n      {\n        message: 'Add dark mode',\n        feedbackType: 'IDEA',\n        email: 'dan@prisma.io',\n        name: 'Dan',\n      },\n      {\n        message: 'layout is broken on mobile',\n        feedbackType: 'ISSUE',\n        email: 'alex@prisma.io',\n        name: 'Alex',\n      },\n    ],\n  });\n}\n\nmain()\n  .catch((e) =\u003e {\n    console.error(e);\n    process.exit(1);\n  })\n  .finally(async () =\u003e await prisma.$disconnect);\n\n\n```\n### Using Prisma Studio to explore the database\n\n\n```bash\nnpx prisma studio\n```\n\n### Setting up Prisma Client\n\n```\nnpm install @prisma/client\n```\n\n```ts\nimport { PrismaClient } from '@prisma/client';\n\ndeclare global {\n  var prisma: PrismaClient | undefined;\n}\n\nexport const prisma = global.prisma || new PrismaClient();\n\nif (process.env.NODE_ENV !== 'production') global.prisma = prisma;\n\n```\n## Creating the API using Next.js\n\n### `/api` folder\n\n### `create` endpoint to submit feedback\n\n```\n\n\n```\n\n```ts\n    try {\n      fetch('http://localhost:3000/api/create', {\n        body: JSON.stringify(data),\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      });\n    } catch (error) {\n      throw new Error(error);\n    }\n```\n\n\n## Next steps\n\nCongratulations! You just built a fullstack app using Next.js, here are some next steps you can take\n\n### Creating a dynamic route for each feedback\n\n### Adding Authentication to secure the `/api/feedback` endpoint and the `/feedback` page\n### Deployment\n\n\n### Other cool features you can build\n\n- Filter feedback by type\n- Dark mode\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-abdelwahab%2Fnextjs-prisma-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm-abdelwahab%2Fnextjs-prisma-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-abdelwahab%2Fnextjs-prisma-workshop/lists"}