Build, Test, Deploy A Frontend Ecommerce App with Nextjs, React from Scratch (2024)

📍 Introduction
Hi, I’m SylvainCodes,

You are new to React and you are ready to learn Next Js. This course is definitely for you. I made everything easier for you to help you learn step by step all the frontend development with NextJs.

You will start from the basics concepts of Nextjs then you will grow up by learning responsive design with TailwindCss and Nextjs from a Figma Design template and so much more.

🎯 What skills you will learn

Throughout this course, you will improve your technical frontend skill set such as:

✔️ Proficiency in JavaScript (ES6+), React.js, and Next.js framework.

✔️ Knowledge of React Components, State Management, and Hooks;

✔️ Experience with server-side rendering (SSR), static site generation (SSG), client-side rendering, etc.;

✔️ Experience with RESTful APIs and efficient methods of requesting data from backend servicesetc…;

✔️ Experience with CSS Framework (Tailwindcss) and the principles of responsive web design;

✔️ Experience with version control systems (Git)

✔️ Experience with testing frameworks (Jest,React testing library, Cypress) and experience with code quality tools;

✔️ Basic knowledge of web performance optimization techniques and the principles of an accessible web.

📚 Get files & Links

🔴FRONTEND WEBSITE
👉Source code www.github.com/sylvaincodes/fractal
👉Demo www.fractal-mu-lac.vercel.app

🟢BACKEND API/ADMIN
👉Source code: www.patreon.com/posts/become-nextjs-111436229
👉Demo link : www.fractal-api-test.vercel.app

🚨DOWNLOAD ALL FILES FROM THE REPOSITORY README SECTION.

📧 FOLLOW ME ON
————————————————

💻 Github: www.github.com/sylvaincodes
🔴 Patrean www.patreon.com/sylvaincodes

⌚ Timestamps

00:00:00 – INTRO
00:02:25 – PREREQUISITES
00:03:03 – INSTALL NODE JS AND NPM
00:04:26 – CREATE YOUR FIRST NEXTJS PROJECT
00:08:28 – EXPLORE THE PROJECT STRUCTURE
00:21:00 – SETUP FIGMA THEME
01:03:09 – SETUP MAIN LAYOUT
01:06:59 – SETUP JEST
01:22:59 – SETUP CYPRESS
01:28:18 – SETUP CLERK
01:59:38 – HEADER UI
05:02:30 – FOOTER UI
05:42:21 – HOME UI
07:46:24 – PRODUCTS PAGE

Have a good one.

🎵 MUSIC
——————————-
Pixabay: www.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
#ecommerce
#fromscratch
#cypress
#react
#testing