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

This is a full course to learn Full Stack Development with Nextjs. I am going to show you a very simple way to build the back-end and the front-end of a software from scratch.

✖️ Additional content ( SOURCE CODE )
Full Source code Part 1 and Part 2 : [Here](https://www.patreon.com/sylvaincodes/...)

📚Learn Frontend Basics:
🎓 Learn Javascript in 1 Hour 👉   / fatest-way-to-117619789  
🎓 Learn HTML in 1 Hour 👉   / html-in-one-hour-116677123  

⬇️ Download 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 document link: https://app.swaggerhub.com/apis-docs/...


✖️Additional content

✍️Source code part 1:
https://github.com/sylvaincodes/youtu...

✍️Source code part 2:
Will be available when part 2 is released!

✍️Full Source code Backend + Frontend:   / sylvaincodes  


Watch, learn, do research, try to build your own project and DO NOT GIVE UP.

This course is divided into Two parts:

👉 First part : Building scalable back-end application for the online store

👉 Second part: Building Front-end Application including:

👉 Dashboard both admin - sellers

👉 Store Front Website and Customer Dashboard


🎯What skills you will learn

Throughout this course, you will improve software development skills such as:

✅Software development Concepts

Understanding software development process

Understanding software developer titles and roles


✅Back-end development

Understanding API Principles

Understanding Nextjs Basics Concepts

Building robust APIs

Securing API with token and Authorization

Securing API with CORS

DevOps CI-CD with GitHub actions and Vercel

Documenting API


✅Front-end development

Learning how to integrate a full figma design from scratch using Tailwind Css and NextJs

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

Integrating client side validation with Zod Validator

Learning NextJs Optimization such as Server Side Rendering , Static Side Generation, Client Side Rendering, Incremental Static Regeneration

Learning Nextjs SEO Concepts and practices.

Testing your application with Cypress.


✅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.12.0 or later installed.

Operating systems: macOS, Windows (including WSL), or Linux.

VSCode or another text editor of your choice.


⏱️ Timestamp

00:00:00 Intro

00:02:10 Who is this course for?

00:02:56 Course structure

00:03:16 Part 1 : Structure

00:06:06 Part 1 : What you will learn ?

00:08:44 Demo Project

00:18:14 Basics Concepts Software development

00:22:43 Setting Back-end environment

00:37:24 DevOps Continuous Deployment

01:06:25 Setting Mongo Database

01:22:10 Setting Jest

01:40:42 DevOps Continuous Integration

02:08:35 Basics UML Concepts

02:10:32 Create Schema with Mongoose

02:51:02 Secure API With Clerk Auth Token

03:02:08 Secure API Authorization with Clerk RBAC

03:09:10 API Principles

03:09:52 Create and Test API Route Tokens

03:51:52 Secure API with CORS

03:58:19 Create and Test API Route for Brands model

04:24:10 Deploy back-end project to Vercel

04:31:29 Document your API

04:58:02 What's Next in Part 2 ?



🔗 MUSIC
-------------------------------
https://pixabay.com


⚠️ 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.

#nextjs
#frontend
#backend
#fullstack
#ecommerce
#fromscratch
#cypress
#react