Build Full Stack Portfolio & CMS: Next.js, React.js, Tailwind CSS, Shadcn UI and Supabase | 2024
🌐 Introduction:
Welcome to Simple Dev Code! In this comprehensive tutorial, we'll guide you through the process of creating your own full stack portfolio website from scratch. Whether you're a beginner or an experienced developer, this step-by-step guide will help you showcase your skills and projects in style.
🔧 What You'll Learn:
⚙️ Setting up the development environment Next.js/React.js
🗄️ Setting up supabase project with Next.js
📲 Shadcn UI installation and usage
🔐 Authentication
🏁 Next.js 14 API App router creation and usage
🛡 Private router creation and authentication
📊 Dynamic Routes creation and usage in Next.js 14
📝 Notion theme editor integration
🔌 CRUD API creation using Next.js 14 (API routing)
🗃️ Creating/Alter supabase PostgreSQL table
🌆 Storing and retrieve images via supabase storage
🧩 Image Upload API Implementation ultimate guide
🗒️ Pagination and search operation API creation and implementation
🔎 Debounce API call method tutorial in Next.js 14
🚀 Deploying portfolio website and CMS online for the world to see
⚙️ Tools and Technologies Used:
✔️ Next.js 14
✔️ React.js
✔️ Tailwind CSS
✔️ TypeScript
✔️ Shadcn ui
✔️ Supabase/PostgreSQL
👨💻 Who Should Watch:
Aspiring Full Stack Developers
Web/Frontend Developers looking to enhance their skills
Students and Beginners in programming
🔗 Links:
Git Link: https://topmate.io/simpledevcode/1127513
Demo URL: https://full-stack-portfolio-sable.ve...
Login credentials:
Username: [email protected]
Password: demo@123
👍 Connect with Simple Dev Code:
Subscribe for more tutorials: / @simpledevcode
Follow on Instagram: / simpledevcode
Follow on LinkedIn: / simpledevcode
📌 Timestamps:
00:05 CMS application demo
02:14 What you will learn in this project
03:01 Setting up the Development Environment
03:44 Creating Supabase project creation and using in Next.js Project
04:53 Base Authentication setup
11:02 CMS Dashboard and layout design
14:46 Shadcn UI installation and usage
15:10 CMS Menu and page creation
24:50 Notion theme editor installation and usage
34:05 Creation blog table in Supabase
34:48 API Router creating for Request method GET, POST, PATCH, DELETE
36:37 Blog create API integration
41:43 Blogs GET API integration and list the data
56:31 Blog DELETE API creation and UI Implementation
01:06:27 Blog Single GET API creation and UI Implementation
01:16:23 Image upload API creation and UI Implementation
01:20:14 Multi select dropdown(react-select) installation and usage
01:32:33 Creation project table in Supabase
01:32:48 Projects API integration and usage in project
01:36:50 Projects GET API integration and list the data
01:37:55 Blog Single GET API creation and UI Implementation
01:38:40 CMS Dashboard heading display programmatically
01:43:15 CMS Main dashboard design and APP API creation and usage
01:52:23 Blogs debounce search implementation and API creation
01:58:10 Project debounce search implementation and API creation
01:58:10 Blogs pagination implementation and API creation
02:07:16 Projects pagination implementation and API creation
02:09:23 Menu active link class name adding in Next.js
02:11:20 Large resolution screen CMS pages UI perfection
02:13:55 Deployment on vercel
02:16:11 Live CMS App demo
🚨 Note: Make sure to pause the video and follow along with the code. Feel free to ask questions in the comments section!
🙏 Thanks for watching! Don't forget to like, share, and subscribe for more tutorials.
👨💻 Happy coding!
Music provided by http://spoti.fi/NCS
Design inspiration: https://www.figma.com/community/file/...
Search related keywords:
developer portfolio front end portfolio html portfolio website react portfolio template best simple portfolio website portfolio website html css javascript react latest react projects coding personal portfolio how to create portfolio for full stack developer react typescript portfolio website portfolio website using react and tailwind css how to make portfolio website react website project nextjs website project full stack portfolio website react modern portfolio website react crud actions create read update delete portfolio website nextjs full stack projects for beginners with source code best portfolio website with source code react next js portfolio full stack developer portfolio website best developer portfolio personal portfolio website ideas
#FullStack #PortfolioWebsite #WebDevelopmentTutorial #CodingTutorial #FullStackDevelopment #nextjstutorial #nextjsprojects #reactjsprojects #reacttutorial #tailwindcss #tailwind #shadcnui #supabase #fullstackwebdevelopment #fullstacksoftwareengineering #students #studentsvideo #csstudent #csstudents #typescriptdevelopment #typescripttutorial #typescript
Смотрите видео Build Full Stack Portfolio & CMS: Next.js, React.js, Tailwind CSS, Shadcn UI and Supabase | 2024 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Simple Dev Code 17 Январь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 23,552 раз и оно понравилось 629 людям.