{"id":22246598,"url":"https://github.com/el634dev/next-prisma-worshop","last_synced_at":"2026-05-02T14:40:22.917Z","repository":{"id":233449580,"uuid":"787205218","full_name":"el634dev/next-prisma-worshop","owner":"el634dev","description":"Next.js and Prisma Tutorial","archived":false,"fork":false,"pushed_at":"2024-12-15T01:18:12.000Z","size":309,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T10:30:29.043Z","etag":null,"topics":["nextjs","prisma"],"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/el634dev.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":"2024-04-16T04:57:02.000Z","updated_at":"2024-04-16T17:21:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"4437d904-f382-4798-ac85-a01af8e358d0","html_url":"https://github.com/el634dev/next-prisma-worshop","commit_stats":null,"previous_names":["el634dev/next-prisma-worshop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el634dev%2Fnext-prisma-worshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el634dev%2Fnext-prisma-worshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el634dev%2Fnext-prisma-worshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el634dev%2Fnext-prisma-worshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/el634dev","download_url":"https://codeload.github.com/el634dev/next-prisma-worshop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245451239,"owners_count":20617479,"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"],"created_at":"2024-12-03T05:28:19.489Z","updated_at":"2026-05-02T14:40:17.895Z","avatar_url":"https://github.com/el634dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js X Prisma Workshop\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).\n\u003e\nTutorial is [here](https://www.youtube.com/watch?v=aim8Mk-ETK0)\n\n- Next.js: fullstack React framework\n- Prisma: next-generation ORM for Node.js and TypeScript\n\n## Prerequisites\nFor this workshop, knowledge of JavaScript and React is strongly recommended. 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- [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## App architecture\n- Next.js\n- Prisma\n\n## What you'll be building\nThroughout this workshop you'll build a feedback app where users can submit feedback.\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## Problem starting npm run dev\nFollow along with these commands in your terminal.\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```\nAfter running the above commands, run `npm audit` and then `npm audit --force`\nThen if you are getting an error about the React version, use [this](https://nextjs.org/docs/messages/react-version).\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### 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\n### `feedback` endpoint\n\n```\n\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%2Fel634dev%2Fnext-prisma-worshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fel634dev%2Fnext-prisma-worshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fel634dev%2Fnext-prisma-worshop/lists"}