Full Stack React E-Commerce: L11 | Firebase Authentication & User Profiles [በአማርኛ]
Welcome back to Beshilo Coding Academy! In Lesson 11 of our Full Stack React E-Commerce series, we dive deep into building a secure **Firebase Authentication** system and managing **User Profiles**.

We cover essential security logic, such as preventing unauthenticated users from checking out, monitoring authentication state changes with observers, and syncing local shopping cart data with **Cloud Firestore**. This lesson is crucial for anyone looking to build production-ready React applications with a persistent backend.

**Key Technical Concepts Covered:**
* **Firebase Auth Implementation:** Setting up Login, Registration, and Password Reset.
* **Firestore User Profiles:** Creating and fetching user metadata documents.
* **Cart Synchronization:** Bridging the gap between Redux state and Cloud storage.
* **Local Storage Utilities:** Implementing browser caching to prevent data loss on refresh.
* **Observer Pattern:** Using `onAuthStateChanged` for real-time user monitoring.

—

**⏱️ Video Chapters (Timestamps):**

00:00 – Project Demo & Lesson Objectives
01:16 – Firebase Auth Dashboard Overview
01:50 – Designing the Auth Context & State Management
02:18 – Building Auth Services (Login, Register, Logout)
03:09 – User Profile Services & Firestore Integration
03:52 – Implementing Checkout Page Logic & Protected Routes
05:18 – Deep Dive: `createUserWithEmailAndPassword` Implementation
07:34 – Managing User MetaData & Profile Document Creation
12:09 – Syncing Cart Data to the Cloud (CartSync Logic)
15:58 – Restoring User Cart from Database Backups
17:04 – Local Storage Utility: Browser Caching & Data Persistence
20:11 – Logout Workflow: Clearing Local Storage Data
21:05 – The Observer Hook: `onAuthStateChanged` Explained
23:10 – Best Practices: Unsubscribing from Auth State for Performance

—

💬 Questions? Join the discussion in the comments!

#ReactJS #Firebase #WebDevelopment #BeshiloCodingAcademy #AmharicCoding #FullStack #SoftwareEngineering #FirebaseAuth #Firestore

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