How To Make Complete E-Commerce Website Using React JS | React JS Ecommerce Project 2024
GreatStack
2024. 8. 19.
Learn How To Build Complete Ecommerce Website Using React JS & Tailwind CSS | React JS Ecommerce Project 2024 π Source Code: https://greatstack.dev/go/forever π Download the assets: https://greatstack.dev/assets/forever-react π Live Preview: https://foreverbuy.in SUBSCRIBE: @GreatStackDev ------------------- In this tutorial we will create an eCommerce website / Web App using React JS and Tailwind CSS. We will create the Home page where we will display the Latest products, best selling products, newsletter subscription box and Footer. We will also make products collection page to display all products added on this online shopping website. On this product collection page we will create product filter, product sort and product search features also. Then we will create the product page where it will display product image gallery, title, price, description, add to cart button and Related products. After that we will create Place Order page, Cart page, My Order List page, About Page, Contact Page, Login and Signup page. After completing this ecommerce website for customers, we will create the website for admin. Where admin can add new products on website, list and delete the products, display and update the orders. To build this E-commerce website we will use React JS & Tailwind CSS. After completing this front-end eCommerce project, we will build the backend in the next tutorial, To create the back-end we will use Node JS, Express, MongoDB and React JS. So this is going to be a MERN Stack Ecommerce Project. ------------------- Watch Full Stack Food Order Website tutorial: π https://youtu.be/DBMPXJJfQEA Watch Full Stack Chat App tutorial: π https://youtu.be/gbocZlm71nE Watch Full Stack Music Streaming Website π https://youtu.be/KdGfhSpT6pc Watch Full Stack Blog Website Tutorial π https://youtu.be/HdWCh_4XE1Q ------------------------------------- Build more React JS projects: Complete Portfolio Website In React: π https://youtu.be/4ag1LsgIUc0 Build ChatGPT Clone In React: π https://youtu.be/EzkWAviyYgg Build AI Image Generator with OpenAI In React π https://youtu.be/PZG2MvOjud0 Create Weather App In React π https://youtu.be/7JqdjWB88Kk ------------------------------------- Time stamp: 00:00 Project Overview 11:00 React Project Setup 21:56 Create Pages and Routing 31:35 Create Navigation bar 55:52 Header section 01:09:06 Latest Products section 01:28:07 Best Seller Products 01:35:11 Policies and Newsletter box 01:43:59 Footer Section 01:50:25 Collection Page 02:09:07 Product Filters 02:23:48 Product sort 02:30:30 Search Feature 02:46:31 Product page 03:26:00 Create Add to cart feature 03:41:51 Cart Page 04:18:02 Place Order Page 04:34:19 My Order Page 04:43:24 Login Page 04:56:07 About Us Page 05:03:20 Contact Us Page ------------------------------------- Images Credit: https://www.pexels.com/ https://unsplash.com/ ------------------------------------- Connect with me: π https://linktr.ee/iamavinashkr Connect with GreatStack: Instagram: https://instagram.com/GreatStackDev Twitter: https://twitter.com/GreatStackDev Facebook: https://facebook.com/GreatStack
Recommanded Videos
GopherCon Korea 2024 λΆμ€ μ΄λ²€νΈ μΆμ²¨ λ°©μ‘
2024. 10. 17.
λΈλ‘μ²΄μΈ κ΄λ ¨ μ± μ ν κΆ μ°λ €κ³ ν©λλ€
π λ©€λ²μ κ°μ κ°μ¬ν©λλ€! seongjun Minλ, jminλ, κΉλ―Όμ€λ, μ¨μμ¨μλ, For my somethingλ, junλ, kan58danλ, νμ€νλ, λ건νΈλ, kennyλ, Jasonλ, orange007λ, Toots Kimλ, Economicλ, Charles Gardesλ, λλΉλλ°λ€κ²‘μλ, Yechan Kimλ, λλΉλλ, Minλ, romλ, justsoSOλ, μμλ무λ, rnwkdbs12λ, μνΈλΌμ΄λ, Kmsλ, ν±ν¬λ³΄μ΄λ, NA Kλ, μ΅κ²½λ½λ, Sydneyλ, λΉκ·Όμ΄μ€μλ, jy Pλ, λ±μλ, catch22λ, mas chaeλ, κ³νλνμ°λ, μ΄λνΌμ€λ, λ©λ₯λ©λ₯λ, Ba Keemλ π λλ¬λΈ λλ¬κ°κΈ° https://www.nullable.cc/ π₯ μ‘μν μ±λμ κ°μ νμ¬ ννμ λλ €λ³΄μΈμ. https://www.youtube.com/channel/UCSQRF8yIhSMVRXhIqLxQnsw/join π μΆκ°μμ γμ½κ² μ€λͺ ν μλ°μ€ν¬λ¦½νΈγ 보λ¬κ°κΈ° μμ€24: https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=344435187 κ΅λ³΄λ¬Έκ³ : https://product.kyobobook.co.kr/detail/S000213996137 μλΌλ: https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=344435187 π μΆκ°μμ γUX λμμΈμ λͺ¨λ κ²γ λ³΄λ¬ κ°κΈ° κ΅λ³΄λ¬Έκ³ https://product.kyobobook.co.kr/detail/S000001842178 μμ€24 https://www.yes24.com/Product/Goods/99397396 μλΌλ https://www.aladin.co.kr/m/mproduct.aspx?ItemId=269572938 π© λΉμ¦λμ€ λ¬Έμ : joshephan0204@gmail.com π λμν°νλΌμ΄μ¦: https://nullenterprise.com ποΈ νλ μ€μΉ: https://flexweb.io/ π λΈλ‘κ·Έ: https://hansanghoon.com/
2024. 10. 8.
![[μ·¨μ
μ μν CS μ§μ] 5κ°. μ»΄ν¨ν°κ° μ΄ν΄νλ μ 보 | β‘λͺ
λ Ήμ΄](https://i1.ytimg.com/vi/4e0KONyJf2A/hqdefault.jpg)
[μ·¨μ μ μν CS μ§μ] 5κ°. μ»΄ν¨ν°κ° μ΄ν΄νλ μ 보 | β‘λͺ λ Ήμ΄
λ³Έ κ°μλ γμ΄κ²μ΄ μ·¨μ μ μν μ»΄ν¨ν° κ³Όνμ΄λ€ with CS κΈ°μ λ©΄μ γμ λ΄μ©μ λ°νμΌλ‘ μ μνμμ΅λλ€. π¨βπ«μ£Όμ κ°μ λ΄μ© CH 02 μ»΄ν¨ν° ꡬ쑰 2. μ»΄ν¨ν°κ° μ΄ν΄νλ μ 보(λ°μ΄ν°μ λͺ λ Ήμ΄) - λͺ λ Ήμ΄ ----- β μ΄λ€ λ΄μ©μ λ€λ£¨κ³ μλμ? β’ μ»΄ν¨ν° ꡬ쑰 β’ μ΄μ체μ β’ μλ£κ΅¬μ‘° β’ λ€νΈμν¬ β’ λ°μ΄ν°λ² μ΄μ€ β β νΉλ³ μ 곡β + CS κΈ°μ λ©΄μ μ§λ¬Έ 100μ (λμ μλ‘) + CS Note: https://csnote.net β β β λꡬλ₯Ό μν μ± μΈκ°μ? β’ κΈ°μ λ©΄μ μ μλ μ·¨μ μ€λΉμ β’ λΆμ‘±ν CS μ§μμ 보μνκ³ μΆμ μ»΄ν¨ν° 곡ν μ 곡μ β’ μ€λ¬΄μ νμν CS κ°λ μ 체κ³μ μΌλ‘ μ 리νκ³ μΆμ κ°λ°μ πλμ μμΈν보기: https://bit.ly/3XaghGC πμ μλκ» μ§λ¬ΈνκΈ°: https://github.com/kangtegong/cs/issues #κ°λ°μ #μ·¨μ #κΈ°μ λ©΄μ #CSμ§μ #μ»΄ν¨ν°κ³Όν #μ»΄ν¨ν°κ΅¬μ‘° #λͺ λ Ήμ΄
2024. 9. 26.
Next.js 15 Upgrade Problems You Need to Fix NOW
If you're upgrading from Next.js 14 to 15, watch this video to learn about common problems you may encounter and how to fix them. Next video to watch: https://www.youtube.com/watch?v=BfQZ-nTcCKc&ab_channel=OrcDev βοΈ Join The Horde - Newsletter: https://www.orcdev.com/newsletter - Discord: https://discord.com/invite/uFB5YzH9YG - Github: https://github.com/TheOrcDev Some of the projects to check: Connector: https://github.com/TheOrcDev/orcish-openai-connector AI Framework: https://github.com/TheOrcDev/orcish-ai-nextjs-framework Orcish Admin: https://github.com/TheOrcDev/orcish-admin My first SaaS project, register and get 5 free tokens! https://www.textualgames.com/ #webdevelopment #orcdev #upgrade #react #nextjs #typescript
2024. 10. 28.
μ½λ©? λλΆ? βμ΄λ° μ§μ μ μμΌλ‘ 10λ λ κ³μ κ°λλ€β | AI μλμλ μΈκΈ°μμ μ§μ
π₯ κ°λ°μ μ·¨μ λ Ένμ° ν νλ¦Ώ λ€μ΄λ‘λ : https://bit.ly/4a10f5N λ¬Έκ³Όμμ μν IT μ©μ΄ ν΄μ€ λ¬΄λ£ κ°μ : https://bit.ly/3UdCkdL ChatGPTλ‘ λ Έμ½λ μΉμ¬μ΄νΈ λ§λ€κΈ° : https://bit.ly/3vuiEs7 κ°λ°μμ νμ μ μν κΈ°μ΄ μ½λ© μ©μ΄ : https://bit.ly/3tDdzNI μ·¨μ , μ΄μ§μ μ€λΉνμλ λΆλ€μ μν λ λ§μ μ 보λ μλλ₯Ό μ°Έμ‘°ν΄μ£ΌμΈμ. 2024λ λ΄μΌλ°°μμΉ΄λ λ°κΈ, μ¬μ©λ°©λ² : https://bit.ly/3vCX2tV λΆνΈμΊ ν μ νμ κΌ μ²΄ν¬ν΄μΌ ν 5κ°μ§ : https://bit.ly/4aFdKZA λΆνΈμΊ νλ 9to9μ μ νν΄μΌ νλ μ΄μ : https://bit.ly/3vnSfMH λλ₯Ό λͺ°μ νκ² λ§λλ λΆνΈμΊ νκ° μ€μν μ΄μ : https://bit.ly/4aGmIWv νμ§μκ° λ§νλ AI μλμ κ°μΆ°μΌ νλ μ΄μ : https://bit.ly/3HcZae9 λΉμ 곡μμ λ€μν μ΄μΌκΈ°λ€ μ격 λΆνΈμΊ νλ‘ κΈμ΅κΆ IT ν©κ²©νμ΄μ! : https://bit.ly/3NMqZOn μμ μ¬μ νλ€κ° κ°λ°μλ‘ μ ν₯νμ΄μ! : https://bit.ly/3S35V8P λ κΆκΈνμ κ²λ€μ λκΈλ‘ λ¨κ²¨μ£ΌμΈμ! μμμ΄λ λΈλ‘κ·Έλ₯Ό ν΅ν΄ κ°μ₯ μ΅μ μ λ³΄λ‘ μλ €λλ¦¬κ² μ΅λλ€. κ°μ¬ν©λλ€.
2024. 9. 30.
10 Coding Principles Explained in 5 Minutes
Get a Free System Design PDF with 158 pages by subscribing to our weekly newsletter: https://bit.ly/bytebytegoytTopic Animation tools: Adobe Illustrator and After Effects. Checkout our bestselling System Design Interview books: Volume 1: https://amzn.to/3Ou7gkd Volume 2: https://amzn.to/3HqGozy The digital version of System Design Interview books: https://bit.ly/3mlDSk9 ABOUT US: Covering topics and trends in large-scale system design, from the authors of the best-selling System Design Interview series.
2024. 5. 6.