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/...)
📚 Materials/References:
GitHub Repository: https://github.com/sylvaincodes/youtu...
Part 1: Backend development with NextJs : • Build, Test, Deploy a Full Stack Nextjs E-...
📚 Frontend Courses:
🎓 Learn Javascript: / fatest-way-to-117619789
🎓 Learn HTML: / 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/izslJAyR...
🔴Admin - Seller Dashboard ORION MULTI VENDOR
Dashboard Admin - Seller : https://orion-api-five.vercel.app
API documentation link: https://app.swaggerhub.com/apis-docs/...
⬇️Amazon fonts: https://developer.amazon.com/en-US/al...
⏰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/?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.
⚠️ 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
