Ready to take your Full-Stack E-Commerce project to production grade? In this lesson, we review our completed React & Redux Toolkit Shopping Cart System and kick off Phase 4: Firebase Identity Verification

In this complete Full-Stack E-Commerce project tutorial in Amharic, we build a real-world, production-ready online store from scratch! You will master cutting-edge frontend development using React 19, real-time database management and authentication with Firebase, and secure credit card payment processing using Stripe.

Whether you are a beginner looking to step up your coding game or an intermediate developer wanting to add an enterprise-grade project to your portfolio/resume, this step-by-step masterclass is for you.
🛠️ TOOLS & RESOURCES USED:
Source Code (GitHub): [INSERT_GITHUB_LINK]

React 19 Docs: https://react.dev
Firebase Console: https://firebase.google.com
Stripe Dashboard: https://stripe.com
#BeshiloCodingAcademy #React19 #Firebase #Stripe #AmharicCoding #FullStackDeveloper #WebDevelopment #EthiopiaCoding #EcommerceProject

**Build React Shopping Cart UI with Redux Toolkit | React E-Commerce | Lesson 10**

In this 10th lesson of our React E-Commerce series, we build a fully functional Shopping Cart UI and integrate it with Redux Toolkit for state management. This is a critical part of the project where you’ll learn how to connect your UI to the central store to handle real-world shopping logic.

**What you will learn in this lesson:**
* How to use `useSelector` to pull dynamic data from the Redux store.
* The essential role of `useDispatch` in triggering cart actions.
* Mapping through state to display items in a responsive list.
* Implementing quantity controls (plus and minus buttons).
* Preventing duplicate items from being added to the cart.
* Handling empty cart states and conditional UI rendering.
* Calculating subtotals and total prices in real-time.

—
### **Video Chapters**

00:00 – Introduction & Finished Cart Demo
00:41 – Setting up Cart Page & Redux Hooks (useSelector/useDispatch)
01:30 – Deep Dive: How Dispatch and Actions Work
02:54 – Handling Empty Cart States (Conditional Rendering)
04:42 – Implementing “Clear Cart” Functionality
05:10 – Mapping Cart State to the UI
06:40 – Removing Individual Items from the Cart
07:25 – Building Quantity Controls (+ & – Buttons)
08:44 – Real-time Cart Updates & Performance Check
09:55 – Connecting Product Details to Cart Logic
11:42 – Logic to Prevent Duplicate Item Entry
14:13 – Layout & Styling with CSS Grid and Modules
15:55 – “View Bag” vs. “Add to Cart” Button Toggle
18:20 – Creating the Order Summary Section
20:18 – Calculating Real-time Subtotals & Totals
22:20 – Empty Cart “Start Shopping” Navigation
24:38 – Redux Slice & Store Architecture Review
27:10 – Lesson 11 Preview: Firebase Authentication
27:52 – Conclusion & Community Questions
—

**Resources & Links:**
* **Previous Lesson (Lesson 9):** [Save Your Cart! Redux Store Setup & LocalStorage Persistence](https://studio.youtube.com/video/Q6wIjX-8lTY)

#ReactJS #ReduxToolkit #WebDevelopment #CodingTutorial #BeshiloCodingAcademy #EcommerceProject #Javascript #StateManagement #WebDev2024

# 🚀 Save Your Cart! Redux Store Setup & LocalStorage Persistence | React E-Commerce | Lesson 9 [በአማርኛ]

Don’t let your users lose their shopping carts! In this lesson, we implement **Redux Store Persistence** using the LocalStorage API. We ensure that even after a page refresh, the user’s cart items remain intact. We also cover the high-efficiency **VS Code Internal Browser** update to streamline your development workflow.

—

### 📑 Lesson Chapters (Precise Timestamps)
* **00:00** – VS Code Internal Browser Update: Faster Dev Workflow
* **00:40** – Initializing the Redux Store (`store.js`)
* **01:36** – Creating the `loadState` Utility for Persistence
* **02:35** – Data Validation: Handling LocalStorage Parsing
* **02:55** – State Hydration: Restoring Cart Data on Startup
* **03:13** – Redux `subscribe()`: Auto-Saving State Changes
* **05:13** – App Integration: Providing the Store Globally
* **06:18** – `useSelector` Hook: Syncing the Navbar Cart Counter
* **07:05** – Testing & Verification: Persistence Final Demo

### 🛠️ Technical Implementation Details
1. **Redux Toolkit Setup:** Configuring the centralized `configureStore` to manage global state.
2. **LocalStorage API:** Implementing `localStorage.setItem` and `localStorage.getItem` within a robust `try/catch` block for data safety.
3. **Automatic Persistence:** Using the Redux `store.subscribe()` method to listen for state changes and update the browser memory instantly.
4. **UI Data Mapping:** Connecting the global cart `totalQuantity` to your header component using `useSelector` for a live, professional user experience.

—

### 💬 Support Beshilo Coding Academy
If this lesson helped you, please:
✅ **Like** the video to help it reach more Ethiopian developers.
✅ **Subscribe** for the next part of this series!
✅ **Comment** “Lesson 9” if your persistence logic is working!

#ReactJS #ReduxToolkit #LocalStorage #EcommerceProject #WebDevelopment #AmharicCoding #BeshiloCoding #StatePersistence #ReactCourse #EthiopiaTech #VScodeUpdate

🚀 **Redux Toolkit Shopping Cart Logic | React E-Commerce | Lesson 8 [በአማርኛ] **

Welcome back to **Beshilo Coding Academy**! In this lesson, we take our React E-Commerce project to the next level by implementing the core Shopping Cart logic using **Redux Toolkit (RTK)**.

Managing state for a cart is one of the most critical skills for any React Developer. We are implementing professional-grade logic including dynamic quantity updates, total price calculations, and item normalization.

🔥 **What You Will Learn:**
* **Redux Toolkit Setup:** Installation and configuration of `@reduxjs/toolkit`.
* **State Management:** Creating a robust `cartSlice` for global cart states.
* **Complex Reducer Logic:** Efficiently adding, removing, and updating quantities.
* **Data Normalization:** Converting raw data into clean state objects.

—

### 📌 Chapters (የቪዲዮው ክፍሎች)

00:00 – **Intro: E-Commerce Shopping Cart Demo** | መግቢያ፡ የገበያ ጋሪው ማሳያ
01:15 – **Project Roadmap: Starting Phase 3** | የፕሮጀክቱ ሂደት፡ ምዕራፍ 3 መጀመሪያ
01:48 – **How to Install Redux Toolkit & React-Redux** | Redux Toolkit እንዴት መጫን ይቻላል?
02:40 – **Creating the cartSlice.js File** | የ cartSlice.js ፋይል አፈጣጠር
03:00 – **State Logic: Checking if Item Exists in Cart** | እቃው ጋሪ ውስጥ መኖሩን ማረጋገጫ Logic
04:00 – **Data Normalization: Parsing Price & Quantity** | የዋጋ እና ብዛት የዳታ አሰካክ (Normalization)
05:43 – **Defining InitialState for Shopping Cart** | ለጋሪው መነሻ State (InitialState) መወሰን
06:10 – **Building addToCart Action Logic** | እቃ ወደ ጋሪ መጨመሪያ (addToCart) Logic
09:18 – **Building removeFromCart Action Logic** | እቃ ከጋሪ መቀነሻ (removeFromCart) Logic
11:15 – **Implementing removeProduct Feature** | እቃን ሙሉ በሙሉ የማስወገጃ ዘዴ
12:20 – **Implementing clearCart Reducer** | ጋሪውን ባዶ ማድረጊያ (clearCart) አሰራር
13:00 – **Summary: Redux Toolkit Best Practices** | ማጠቃለያ፡ የ Redux Toolkit ምርጥ አጠቃቀሞች
14:10 – **Exporting Actions & Reducers** | Actions እና Reducers ለ Store ማዘጋጀት

🔗 **Resources & Important Links:**
* 📁 **Full Source Code (GitHub):** https://github.com/Haile1221/
* 🌐 **Official Redux Toolkit Documentation:** https://redux-toolkit.js.org/
* 📺 **Watch the Full React E-Commerce Playlist:** https://www.youtube.com/playlist?list=PL1wMmwENJNELLsg_J9j5WBZ0Ai-Qft3sY
* 💻 **Subscribe to Beshilo Coding Academy:** https://www.youtube.com/channel/UCEY6mPRCSw6zQWyhnUxbmEg?sub_confirmation=1

—

**Support the Channel!**
If this tutorial helps you, please **Like** the video and **Subscribe** for more professional web development content. Hit the notification bell 🔔 so you never miss a lesson!

#ReactJS #ReduxToolkit #WebDevelopment #AmharicCoding #BeshiloCoding #ECommerceWebsite #StateManagement #JavaScript #CodingTutorial #ReactHooks #FrontendDeveloper

# 🚀 Build a Complete Ecommerce App (React & Firebase) | Part 1

**The Ultimate Full Stack Web Development Guide in Amharic (በአማርኛ)**

Are you ready to build a production-level project for your portfolio? In this masterclass, we dive deep into **Full Stack Development** by building a modern Ecommerce System from the ground up!

This tutorial is specifically designed for the Ethiopian developer community, combining the power of **React.js** and **Google Firebase** to create a lightning-fast, scalable application. Whether you are a student at **Beshilo Coding Academy** or a self-taught coder, this series will bridge the gap between “beginner” and “pro.”

—

### 🔥 What You Will Master in This Series:

* **React 18+ Features:** Using Functional Components, Hooks (useState, useEffect), and optimized state management.
* **Firebase Integration:** Real-time Database, Secure Authentication, and Cloud Hosting.
* **Modern UI/UX:** Responsive design that looks perfect on mobile and desktop.
* **Full Stack Logic:** Handling real-world ecommerce workflows, from product listings to secure checkout.

### 🌟 Why This Project?

In 2026, employers are looking for developers who can build *real* solutions. This isn’t just a “demo”—it’s a complete system featuring user auth, cart logic, and a dynamic database. By the end of this Part 1, you will have your project environment fully configured and your core authentication system running.

—

### 🛠️ Tech Stack Used:

* **Frontend:** React.js (Vite)
* **Backend/Database:** Firebase
* **Styling:** Tailwind CSS / CSS3
* **State Management:** React Context API / Redux

### 📢 Join the Discussion

I want to hear from you! What is the most challenging part of building an ecommerce site?

1. The Shopping Cart Logic?
2. Payment Integration?
3. Database Architecture?
**Drop your answer in the comments! 👇**

—

### ✅ Don’t Forget to:

* **Subscribe** to Beshilo Coding Academy for the Part 2 notification!
* **Like** this video if you want more Full Stack projects in Amharic.
* **Share** this with your fellow developers to grow the Ethiopian tech ecosystem.

**#ReactJS #Firebase #Amharic #CodingInAmharic #FullStack #EcommerceProject #BeshiloCodingAcademy #EthiopiaTech #WebDevelopment2026 #ReactTutorial #ProgrammingAmharic**

React E-Commerce Full Project: Phase 2 Summary Review | በአማርኛ (Everything we built!)
In this video, we review the complete progress of Phase 2 in our React E-Commerce Full Project. We’ve successfully implemented dynamic routing, advanced search logic, and professional product detail pages. This summary is designed to help you organize your code and ensure your project structure is ready for the next level.

**What we covered in Phase 2:**
✅ App Routing & Dynamic Product Detail Pages
✅ Search Input Logic & Product Card Filtering
✅ Reusable UI: Rating Stars, Stock Management & Descriptions
✅ Global Styling with CSS Variables
✅ Code Architecture & Firebase Status

Stay tuned for Phase 3, where we will start building the **Shopping Cart & Checkout** functionality!

—

**📌 Chapter Timestamps:**
00:00 – Phase 2 Summary Overview (መግቢያ)
00:18 – App Routes & Product Detail Setup
00:53 – Search Input & Product Card Integration
01:10 – Firebase Update & Product Detail Logic
01:42 – Global CSS Variables & Styling
01:48 – Phase 2 Final Demo & UI Review
01:55 – Coming Soon: Phase 3 Cart & Checkout Logic
02:14 – Q&A and Community Wrap-up

—
🔗 Resources & Social Links: 💻 GitHub Repository: https://github.com/Haile1221
📚 Full Playlist: https://www.youtube.com/playlist?list=PLpZ2Xun_V_m_eYj31-NAtS9I2Wstz5vXJ 💬 Telegram Community: [@beshilocodingacademy ]
**Follow Beshilo Coding Academy:**
🌐 Website: https//h-digitalbusiness.com/

Product Search & Categories | React Full-Stack E-Commerce Lesson 7 [በአማርኛ]
In this 7th lesson of our Full-Stack React E-Commerce series, we implement a powerful **Product Search** and **Category Filtering** system. These features are essential for modern web applications, ensuring users can find products efficiently based on keywords or specific categories.

**In this video, you will master:**
* **Advanced React State:** Managing search queries and category selections.
* **Complex Filtering Logic:** Writing clean JavaScript to filter arrays by multiple criteria.
* **Dynamic Category Mapping:** Using the `new Set()` object to automatically generate unique category lists from your data.
* **Search UI Components:** Creating functional, styled search bars and dropdown menus.
* **Empty State Management:** Implementing “No Results Found” logic for better UX.

Whether you are a beginner or looking to sharpen your React logic, this step-by-step tutorial (explained in Amharic) will help you build professional-grade features.

—

### **🚀 Resources & Code**
* **Source Code (GitHub):** [https://github.com/Haile1221/](https://github.com/Haile1221)

### **📺 Watch the Full Series**
Catch up on previous lessons to follow the project from scratch:
* **Lesson 1: Project Roadmap** – [Watch Here](https://studio.youtube.com/video/S-95RsyWrd8)
* **Lesson 2: Firebase Setup** – [Watch Here](https://studio.youtube.com/video/x7EhwHcNLRQ)
* **Lesson 6: Dynamic Routing** – [Watch Here](https://studio.youtube.com/video/-tRo93vtIGk)

### **📍 Chapters (Time-Stamps)**
00:00 Introduction & Feature Overview
01:11 Initializing Search & Category State
01:57 Implementing Multi-Criteria Filtering Logic
02:54 Dynamic Category Extraction using JavaScript `new Set()`
03:30 Building the Search Input & Category Dropdown (JSX)
04:46 Professional Styling with CSS Modules
06:54 Real-time Testing: Search & Filter Performance
08:03 Handling “No Products Found” Logic
09:33 Summary & Preview: Responsive Web Design (Lesson 8)
—

### **🔗 Connect with Beshilo Coding Academy**
* **Subscribe:** [Beshilo Coding Academy](https://www.youtube.com/channel/UCEY6mPRCSw6zQWyhnUxbmEg)
* **Telegram:** Search for “@beshilocodingacademy”
* **Facebook/Instagram:** @BeshiloCodingAcademy

#ReactJS #WebDevelopment #CodingAmharic #EcommerceProject #Javascript #BeshiloCodingAcademy #SearchLogic #Programming #FullStackReact #EthiopiaTech

**Build a Dynamic Product Detail Page with React Router & useParams [ በአማርኛ ]**

In Lesson 6 of our **React Full-Stack E-Commerce series**, we master **Dynamic Routing** and build a functional **Product Detail Page**. You will learn how to use the `useParams` hook from React Router to identify specific products and fetch their data dynamically from an API.

**What you will learn in this tutorial:**
✅ Setting up dynamic routes in App.js
✅ Using the `useParams` hook to get IDs from the URL
✅ Creating a reusable Product Service for fetching data by ID
✅ Conditional rendering for “In Stock” vs “Out of Stock”
✅ Professional styling with CSS Modules for detail pages

**🚀 Watch the Full Series (Playlist):**
[React Full-Stack E-Commerce From Scratch Playlist](https://www.youtube.com/playlist?list=PL1wMmwENJNELLsg_J9j5WBZ0Ai-Qft3sY)

**⏮️ Previous Lessons:**
* [Lesson 5: Fetch Products with Axios & Display Product List](https://studio.youtube.com/video/bXV4TWngsIg)
* [Lesson 4: Data Fetching & Product Display](https://studio.youtube.com/video/zLfVRkr7KtU)
* [Lesson 3: React Router & Page Navigation](https://studio.youtube.com/video/Cp7wFJzicL4)

**💻 Resources & Source Code:**
* **GitHub (Official Code Repository):** [Beshilo Coding Academy GitHub](https://github.com/Haile1221/reactJS-Full-Course)
* **Teaching Materials:** [Google Slides Presentation](https://docs.google.com/presentation/d/1yU6DmMX0GNT3YMamEF1CND3-Oh2N_qdDaBLMKZG_uQ0/edit)

**📱 Connect with Beshilo Coding Academy:**
* **Telegram (Tech Community):** [Beshilo Coding Academy Telegram](https://t.me/beshilocodingacademy)
* **Subscribe for More:** [Beshilo Coding Academy YouTube](https://www.youtube.com/channel/UCEY6mPRCSw6zQWyhnUxbmEg)

#ReactJS #AmharicCoding #WebDevelopment #ReactRouter #FullStack #EcommerceTutorial #BeshiloCodingAcademy #useParams #EthiopiaTech

00:00 – Introduction & Project Demo
01:09 – What is Dynamic Routing? (The “Why”)
01:42 – Creating the Product Detail Page Component
02:10 – Setting up Dynamic Routes in App.js
03:10 – Connecting Product Cards to Detail Pages
04:27 – Why React Uses IDs for Tracking
04:57 – Building the Product Service Fetch Logic
06:10 – Implementing UseEffect & Data Fetching
07:28 – Error Handling with Try-Catch Blocks
09:25 – How to Use the useParams Hook
10:10 – Handling “Product Not Found” States
11:15 – Displaying Product Title and Images
13:10 – Professional Styling with CSS Modules
14:41 – Adding Ratings and Descriptions
15:55 – Advanced Stock Logic Implementation
18:35 – Creating the “Buy Now” & “Add to Cart” Actions
20:13 – Final Summary & Code Review
22:18 – What’s Coming Next: Search & Filters

🚀 **Fetch Products with Axios & Display Product List | React Full-Stack E-Commerce | Lesson 5 [በአማርኛ]*

In this lesson, we take our React Full-Stack E-Commerce project to the next level by fetching real product data from an API using **Axios**. You will learn how to structure a professional service layer, manage application state with Hooks, and build a stunning, responsive product grid using CSS Grid and professional animations.

🔥 **What you will learn in this video:**
* How to install and configure **Axios** for centralized API calls.
* Creating a **Service Layer** to keep your code clean and scalable.
* Using `useState` and `useEffect` for data fetching and loading states.
* Building a responsive **CSS Grid** layout (`auto-fill`, `minmax`).
* Advanced UI styling: Hover effects, Glassmorphism, and Card designs.

—

### 🕒 **Chapter Timestamps**
00:00 – Introduction & Project Demo (የምንሰራው ፕሮጀክት ማሳያ)
00:44 – Installing Axios & API Configuration (አክሲዮስን መጫን እና ኮንፊግሬሽን)
02:47 – Creating the Product Service Layer (የሰርቪስ ለየር አደረጃጀት)
04:24 – Setting up the Home Page Structure (የሆም ፔጅ መዋቅር)
06:16 – Connecting CSS Modules (ሲኤስኤስ ኮኔክት ማድረግ)
07:44 – State Management: useState & useEffect (ዳታ ፌች ለማድረግ ስቴት መጠቀም)
09:17 – Implementing Try-Catch Error Handling (ኢረር ሃንድሊንግ)
12:11 – Mapping Data to the UI (ዳታውን በዩአይ ላይ ማሳየት)
13:58 – Handling Missing Data & Debugging (ችግሮችን መፈለግ እና ማስተካከል)
15:57 – Creating the Product Card Component (የካርድ ኮምፖነንት መፍጠር)
18:13 – Building a Responsive CSS Grid (ግሪድ ሌአውት መስራት)
21:52 – Advanced Card Styling & Hover Effects (አኒሜሽን እና ስታይሊንግ)
24:38 – Summary & Lesson 6 Teaser (ማጠቃለያ እና ቀጣይ ትምህርት)

—

### 💻 **Key Resources**
* **Watch this Video:** [Fetch Products with Axios & Display Product List | Lesson 5](https://youtube.com/video/bXV4TWngsIg)
* **Previous Lesson (Lesson 4):** [Data Fetching & Product Display | Lesson 4](https://youtube.com/video/zLfVRkr7KtU)
* **Official Axios Docs:** https://axios-http.com/docs/intro
* **React Docs:** https://react.dev/

—

### ✨ **About Beshilo Coding Academy**
Helping you become a professional Full-Stack Developer with high-quality tutorials in Amharic. We focus on modern technologies like React, Node.js, and Cloud Integration.

🔔 **Don’t forget to SUBSCRIBE, LIKE, and SHARE to support the channel!**

#ReactJS #Axios #WebDevelopment #AmharicTutorial #FullStack #EcommerceProject #BeshiloCoding #CodingInAmharic #ReactHooks #CSSGrid

***