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

[@sylvaincodes593]

✖ Additional content ( SOURCE CODE )
- Full Source code Part 1 and Part 2 : [Here](www.patreon.com/sylvaincodes/shop/download-orion-sass-multi-vendor-source-635862?source=storefront)
📚 Materials/References:
GitHub Repository: github.com/sylvaincodes/youtube_orion_admin
Part 1: Backend development with NextJs : ua-cam.com/video/IgnzfALHjdA/v-deo.html
📚 Frontend Courses:
🎓 Learn Javascript in 1 Hour 👉 www.patreon.com/posts/fatest-way-to-117619789
🎓 Learn HTML in 1 Hour 👉 www.patreon.com/posts/html-in-one-hour-116677123
🟢Online Store Website ORION MULTI VENDOR
- Store Website : orion-store-prod.vercel.app
- Figma Store Front : www.figma.com/design/izslJAyRNNXZrlpoVAOCbK/Orion---eCommerce-Marketplace
🔴Admin - Seller Dashboard ORION MULTI VENDOR
- Dashboard Admin - Seller : orion-api-five.vercel.app
- API documentation link: app.swaggerhub.com/apis-docs/SYLVAINCODEUR/Nextjs/1.0.0#/
## ✖ Additional content ( SOURCE CODE )
- Full Source code Part 1 and Part 2 : [Here](www.patreon.com/sylvaincodes/shop/download-orion-sass-multi-vendor-source-635862?source=storefront)
⬇Amazon fonts: 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 chatgpt.com/.
🚀your can send me a message through community section www.patreon.com/messages/?mod...
✅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.

[@ParfaiteAdande]

This front-end road map is actually wide. Great job.

[@sabafarzan]

Thanks for your amazing content ❤

[@joshprog-qu6hy]

I was looking for a frontend Roadmap, That's great. 🥰

[@gbwarzoneshield9792]

Amazing ❤

[@Mim-ns2ox]

Great job !

[@officialcallege]

Thank you so much sir ☺️❤