├── .gitignore ├── README.md ├── UserStories.md ├── github.png └── readme-banner.png /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next.js Full Stack Project 2 | 3 | ## With Next.js 15 and React 19 4 | 5 | In this series, we’ll build a full stack web application for a Computer Repair Shop that manages customers and repair tickets. 6 | 7 | ### Gratitude 8 | 9 | This Next.js Full Stack Project tutorial series is made possible by [Sentry](https://bit.ly/try-sentry-dg). I consider [Sentry](https://bit.ly/try-sentry-dg) to be an essential part of my tech stack, and we will be using [Sentry](https://bit.ly/try-sentry-dg) in this Next.js full stack project. 10 | 11 | ![Next.js Full Stack Project](./readme-banner.png?raw=true) 12 | 13 | ## Lesson Help 14 | If you get stuck on any lesson in the series, (1) navigate to the course branch for your current lesson and (2) view or (3) download the code for more help. 15 | 16 | ![Preview of downloading code in github](./github.png?raw=true) 17 | 18 | ## Prerequisites 19 | In this series, I’ll assume you have an intermediate skill level and are not a beginner. You should have some experience with React and understand a full stack project includes both client and server code environments. Prior experience with Next.js is not required. 20 | 21 | ### 💻 You will need: 22 | - [Node.js (npm / npx)](https://nodejs.org/) 23 | 24 | ### 💻 Recommended Tools: 25 | - [VS Code](https://code.visualstudio.com/) 26 | - [git & git bash](https://git-scm.com/) 27 | 28 | ## Project Setup 29 | 30 | ```sh 31 | npm install --legacy-peer-deps 32 | ``` 33 | 34 | ### Compile and Hot-Reload for Development 35 | 36 | ```sh 37 | npm run dev 38 | ``` 39 | 40 | ### Compile and Minify for Production 41 | 42 | ```sh 43 | npm run build 44 | ``` 45 | 46 | ## After You Have Completed the Lessons 47 | 48 | I am attempting to keep a deployed version of this project up-to-date with the latest dependencies and changes in the Next.js ecosystem. You can [view the repository with my latest changes here](https://github.com/gitdagray/comp-repair-shop). 49 | 50 | --- 51 | 52 | ### 📚 References 53 | - 🔗 [Next.js](https://nextjs.org/) 54 | - 🔗 [React](https://react.dev/) 55 | - 🔗 [TypeScript](https://www.typescriptlang.org/) 56 | - 🔗 [TailwindCSS](https://tailwindcss.com/) 57 | - 🔗 [ShadCN/ui](https://ui.shadcn.com/) 58 | - 🔗 [Sentry](https://bit.ly/sentry-docs-dg) 59 | - 🔗 [Kinde Auth](https://kinde.com/dgray-nextjsstack/) 60 | - 🔗 [Neon Postgres](https://fyi.neon.tech/davegray) 61 | - 🔗 [Drizzle ORM](https://orm.drizzle.team/) 62 | - 🔗 [react-hook-form](https://react-hook-form.com/) 63 | - 🔗 [Zod](https://zod.dev/) 64 | - 🔗 [next-safe-action](https://next-safe-action.dev/) 65 | - 🔗 [TanStack Table](https://tanstack.com/table/latest) 66 | - 🔗 [Vercel](https://vercel.com/home) 67 | 68 | --- 69 | 70 | ### Author Links 71 | 72 | 👋 Hello, I'm Dave Gray. 73 | 74 | 👉 [My Courses](https://courses.davegray.codes/) 75 | 76 | ✅ [Check out my YouTube Channel with hundreds of tutorials](https://www.youtube.com/DaveGrayTeachesCode). 77 | 78 | 🚩 [Subscribe to my channel](https://bit.ly/3nGHmNn) 79 | 80 | 💖 [Support My Content](https://patreon.com/davegray) 81 | 82 | ☕ [Buy Me A Coffee](https://buymeacoffee.com/DaveGray) 83 | 84 | 🚀 Follow Me: 85 | 86 | - 🔗 [Twitter](https://twitter.com/yesdavidgray) 87 | - 🔗 [LinkedIn](https://www.linkedin.com/in/davidagray/) 88 | - 🔗 [Blog](https://davegray.codes) 89 | 90 | --- 91 | 92 | ### 🎓 Academic Honesty 93 | 94 | **DO NOT COPY FOR AN ASSIGNMENT** - Avoid plagiarism and adhere to the spirit of this [Academic Honesty Policy](https://www.freecodecamp.org/news/academic-honesty-policy/). 95 | -------------------------------------------------------------------------------- /UserStories.md: -------------------------------------------------------------------------------- 1 | # User Stories for Repair Shop App 2 | 3 | 1. [ ] Replace current sticky note system 4 | 2. [ ] Add a public facing page with basic contact info 5 | 3. [ ] Add a passwordless employee login to the app 6 | 4. [ ] Show a real-time open tickets page after login 7 | 5. [ ] Provide easy navigation & search for customers & tickets 8 | 6. [ ] Provide a logout option 9 | 7. [ ] Require users to login at least once per week 10 | 8. [ ] Provide a way to remove employee access asap if needed 11 | 9. [ ] Customers have an ID, full address, phone, email & notes 12 | 10. [ ] Tickets have an ID, title, notes, created & updated dates 13 | 11. [ ] Tickets are either OPEN or COMPLETED 14 | 12. [ ] Tickets are assigned to specific employees 15 | 13. [ ] Users can have Employee, Manager, or Admin permissions 16 | 14. [ ] All users can create and view tickets 17 | 15. [ ] All users can create, edit and view customers 18 | 16. [ ] Employees can only edit their assigned tickets 19 | 17. [ ] Managers and Admins can view, edit, and delete all tickets 20 | 18. [ ] Desktop mode is most important but the app should be usable on tablet devices as well. 21 | 19. [ ] Light / Dark mode option requested by employees 22 | 20. [ ] Expects quick support if anything goes wrong with the app -------------------------------------------------------------------------------- /github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/nextjs-full-stack-project/9f61bdaa728a4ac75e01168e7e7540952b663a83/github.png -------------------------------------------------------------------------------- /readme-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/nextjs-full-stack-project/9f61bdaa728a4ac75e01168e7e7540952b663a83/readme-banner.png --------------------------------------------------------------------------------