Build, Test, Deploy a Full Stack Nextjs E-Commerce Multi Vendor Sass From Scratch in 2025 - Part2

Build, Test, Deploy a Full Stack Nextjs E-Commerce Multi Vendor Sass From Scratch in 2025 - Part2

9.911 Lượt nghe
Build, Test, Deploy a Full Stack Nextjs E-Commerce Multi Vendor Sass From Scratch in 2025 - Part2
If you're looking for a well-designed front-end roadmap, here's one of the best you'll see. We'll also build a front-end application from scratch, so you can start your front-end application with ease. Watch, learn, try to build your own project ## ✖️ Additional content ( SOURCE CODE ) - Full Source code Part 1 and Part 2 : [Here](https://www.patreon.com/sylvaincodes/shop/download-orion-sass-multi-vendor-source-635862?source=storefront) 📚 Materials/References: GitHub Repository: https://github.com/sylvaincodes/youtube_orion_admin Part 1: Backend development with NextJs : https://www.youtube.com/watch?v=IgnzfALHjdA 📚 Frontend Courses: 🎓 Learn Javascript: https://www.patreon.com/posts/fatest-way-to-117619789 🎓 Learn HTML: https://www.patreon.com/posts/html-in-one-hour-116677123 ## ASSETS 🟢Online Store Website ORION MULTI VENDOR - Store Website : https://orion-store-prod.vercel.app - Figma Store Front : https://www.figma.com/design/izslJAyRNNXZrlpoVAOCbK/Orion---eCommerce-Marketplace 🔴Admin - Seller Dashboard ORION MULTI VENDOR - Dashboard Admin - Seller : https://orion-api-five.vercel.app - API documentation link: https://app.swaggerhub.com/apis-docs/SYLVAINCODEUR/Nextjs/1.0.0#/ ⬇️Amazon fonts: https://developer.amazon.com/en-US/alexa/branding/echo-guidelines/identity-guidelines/typography ⏰TIMESTAMPS 00:00:00 -- Intro 00:01:28 -- What is Frontend Development ? 00:02:40 -- What do Frontend Developers do ? 00:04:00 -- What skills will you need to get hired in 2025 ? 00:15:30 -- Demo: Frontend Project 00:21:22 -- Prerequisites 00:22:38 -- Install Nextjs Project 00:30:07 -- Folder Structure 00:34:47 -- Setup ShadCn UI 00:39:45 -- Setup Branding - Fonts 00:44:36 -- Setting up Responsive Design 00:51:56 -- Setup Branding - Colors 00:57:14 -- Setup Branding - Typography 01:05:00 -- Setup Clerk Auth 01:35:35 -- Marketing page 03:17:52 -- Admin Dashboard - UI 03:56:19 -- Admin Dashboard - Fetching data on server side 04:08:14 -- Admin Settings UI 04:20:13 -- Admin Settings - Fetching data on client side 05:19:00 -- Admin Subcategories - List UI 05:51:01 -- Admin Subcategories - List UI - Fetching data client side 06:01:01 -- Admin Subcategories - Form UI 06:23:00 -- Admin Subcategories - Form - Fetching data client side 07:22:00 -- Setup Cloudinary 07:58:14 -- Fixing bugs 08:11:25 -- Admin Subcategories - Form - Mutations 09:09:00 -- What you learnt 09:10:00 -- Your tasks 09:10:54 -- What's next ? ❓WHO THIS COURSE FOR Beginners in JavaScript Web developers Passionate learners    ✍️ COURSE STRUCTURE Admin part :  Building Front-end Application for admin Store part: Building Front-end Application for the store   📑 WHAT WILL YOU LEARN ? Learning Responsive design using Tailwind Css and NextJs Learning how to structure your Front-end application with NextJs Learning how to create reusable components with React and NextJs Learning how to integrate Restful APIs  with useSWR Integrating client side validation with Zod Validator ✍️ TODO i won't actually build all the modules. I'm just going to show you how to do and it's going to be your turn. You're welcome So here are your tasks  Create forms and lists for modules such as categories tags collections products orders shippings stores sellers campaigns withdrawals vendors store 👩‍💻 IF YOU HAVE ISSUES:  💻Get the source code and solve problems at your own. your can do research using https://chatgpt.com/. 🚀your can send me a message through community section https://www.patreon.com/messages/?mode=campaign&tab=chats ✅Prerequisite knowledge This course assumes knowledge of HTML, CSS, JavaScript. ✅ System requirements Before you start this course, make sure you have the following installed: Node.js 20.x or later installed. Operating systems: macOS, Windows (including WSL), or Linux. VSCode or another text editor of your choice. ⚠️ DISCLAIMER The disclaimer video is intended for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, reporting current affairs, teaching, scholarship and research. Fair use is permitted by copyright law that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use. #nextjs15 #frontend #frontenddeveloper #2025