Next js 13 And Tailwind CSS Ticketier project with CRUD and Search
Next Js Tutorial For Beginners | Next js 13 And Tailwind CSS Ticketier project with CRUD and Search
📝 Completed codes: https://github.com/mohammad-taheri1/t...
In this Next js Full Course , we will create a Next js 13 project called Ticketier and implement full CRUD functionality into it. We use Next js 13 (App router), Tailwind CSS, TypeScript, Axios, Moment, React hook form, React hot toast and React icons.
Also, we add Search functionality in it and we implement debounced Searching by creating a useDebounce custom hook .
Moreover, We talk about these topics in Next js 13 using app router:
SSG - Static Site Generaion
ISR - Incremental Site Regeneration
SSR - Server Side Rendering
CSR - Client Side Rendering
The focus of this project is to show you how you can build a front-end project using
Next js 13 with new App router
Tailwind CSS
TypeScript
Axios
Moment
React hook form
React hot toast
and React icons from 0 to 100 and build a complete CRUD with debounced search application.
The project is divided to little tasks so it is easy to follow. Also, The video is categorized to them and you can click on it's time to watch that task from below list:
(00:00:00) Intro
(00:00:54) Demo
(00:06:07) Create new next js with typescript project
(00:09:19) Clean up our project
(00:11:35) Install and config Tailwind CSS
(00:14:03) Create Navbar component
(00:22:03) Create BackButton Component
(00:26:14) Create Breadcrumb Component
(00:35:42) Create Custom Spinner Component
(00:38:57) Create General InnerTitle Component
(00:42:22) Develope Home page
(00:50:11) Create Loading Page
(00:51:25) Create NotFound Page
(00:58:04) Create Tickets List page
(01:35:02) SSR, SSG, ISR, CSR in next js app router
(01:38:29) Create Error Page (Error boundary)
(01:44:20) Add Search Functionality to Tickets List page (Debounced Serch)
(02:03:43) Create TicketCreate page
(02:32:32) Create TicketDetails page
(02:46:38) Create TicketEdit page
(03:01:37) Create TicketDelete page
(03:18:22) Overview & Outro
🌎 Me:
Telegram: https://t.me/DevEmpower
LinkedIn: / mohammad-taheri1
GitHub: https://github.com/mohammad-taheri1
Medium: / devempower
Portfolio: https://devempower.ir/
💖 Hope you enjoy it 💖
💖 If you loved this Next Js Tutorial For Beginners, leave comments, like, and subscribe 💖
💖 You can Buy me a coffee to support: https://www.buymeacoffee.com/DevEmpower 💖
Music - "Electric Sunrise" by Josh Woodward. Free download: http://joshwoodward.com/