**Unlock the power of secure online payments!** 🚀 In Lesson 14 of our Full-Stack E-Commerce series, we master the integration of **Stripe Checkout** using **React 19** and **Firebase**. Whether you’re a beginner or an advanced developer, this tutorial covers everything from shipping forms to real-time credit card validation.

በዚህ ትምህርት የStripe ክፍያ ሲስተምን ከReact እና Firebase ጋር እንዴት እንደምናገናኝ በዝርዝር እናያለን። የክሬዲት ካርድ ክፍያ፣ የባንክ ትራንስፈር እና የኦርደር ሂስትሪ አሰራርን ሙሉ በሙሉ እንሸፍናለን።

**🚀 What You’ll Learn in This Lesson:**

* Setting up Stripe API with React 19.
* Building a dynamic Shipping Information form with Country/City detection.
* Real-time Credit Card validation (Visa vs. Mastercard detection).
* Handling Bank Transfers and Order History in Firebase.
* Securely managing environment variables (.env).

—–

### **📌 CHAPTERS (Timestamps)**

00:00 – Introduction & Project Demo (በዚህ ሌሰን ምን እንሰራለን?)
01:18 – Shipping Information & Country Detection (የሃገርና የከተማ መምረጫ አሰራር)
02:37 – Payment Methods: Credit Card vs. Bank Transfer
04:09 – Backend Logic: Importing Stripe & Country Packages
05:32 – Coding the Checkout Functional Component
07:44 – Form Data Handling & Validation Logic
08:48 – Styling the Checkout Container (CSS Deep Dive)
10:05 – Integrating Stripe API & Card Flip Animation
12:25 – Building the Payment Portal & Selection Logic
15:10 – Firebase Database: Managing Order Success & History
19:30 – Full End-to-End Testing (Register to Purchase)
23:15 – Final Thoughts & Future Roadmap (ቀጣይ ዲፕሎይመንት)

—–

### **💻 Tech Stack Used:**

* **Frontend:** React 19, CSS3 (Custom Animations)
* **Backend/Database:** Firebase
* **Payments:** Stripe API
* **Tools:** React-Country-Region-Selector, Vite

**🔗 Useful Links:**

* Full Course: https://www.youtube.com/watch?v=s0wEkHTXW-M&list=PL1wMmwENJNEI2uC0Ss6Iw7q4YhDtbFKTZ
* Join our Telegram Group: https://t.me/beshilocodingacedemy

**Support the Channel:**
If this tutorial helped you, don’t forget to **LIKE**, **SUBSCRIBE**, and hit the **BELL** icon! 🔔 Your support keeps Beshilo Coding Academy growing!

#BeshiloCoding #ReactJS #StripePayment #FullStackAmharic #CodingTutorial #WebDevelopment #Firebase #AmharicTech

In Lesson 13 of our Full Stack E-Commerce series, we implement a complete User Authentication system using React and Firebase. We cover everything from building the UI for Login and Registration to handling backend logic and securing user sessions.

**What you will learn in this lesson:**

* Setting up React State for authentication forms.
* Integrating Firebase Auth to register new users (Sign Up).
* Implementing Login logic with error handling (Toast notifications).
* Managing user sessions and implementing the Logout feature.
* Building a dynamic Navbar that changes based on the user’s login status.
* Adding a “Forgot Password” recovery flow.

**Chapters & Timestamps:**
0:00 – Introduction & Demo of Authentication Flow
0:48 – Lesson 13 Project Setup
1:20 – Implementing Login Logic & State Management
3:07 – Registration Page UI & Firebase Integration
5:40 – Handling Post-Auth Navigation (Redirecting Users)
6:25 – Managing Registration States & Input Validation
8:20 – Forgot Password Logic & Email Recovery Setup
10:15 – Dynamic Navbar: Toggling Login/Logout Based on User State
11:30 – Implementing the Logout Functionality
12:45 – Final Testing & Summary of Lesson 13

**Resources:**

* **Firebase Documentation:** https://firebase.google.com/docs/auth

If you found this tutorial helpful, don’t forget to **Like, Share, and Subscribe** to **Beshilo Coding Academy** for more full-stack development content!

#ReactJS #Firebase #WebDevelopment #FullStack #EcommerceProject #BeshiloCodingAcademy #Authentication #CodingTutorial #JavaScript

🚀 Master Data Fetching in React !

Data fetching is the backbone of any full-stack application, but handling it incorrectly can lead to infinite loops, slow performance, and messy code. In this comprehensive live stream, we break down the three essential types of data fetching you must master to build enterprise-grade full-stack projects.

Whether you are building a small project or a massive web application, this ultimate guide will teach you exactly how, when, and where to fetch your data.

In Lesson 12 of our Full Stack React E-Commerce series, we tackle one of the most important features of a real-world app: **Cloud Persistence and Security.**

Today, you will learn how to take your Redux Toolkit cart items and sync them automatically with **Firebase Firestore**. This ensures that if a user logs in from a different device, their shopping cart is waiting for them. We also dive deep into **Protected Routes** using React Router to ensure only logged-in users can reach the checkout page.

**What you will master in this video:**
* **Firebase Firestore:** Saving and retrieving complex cart objects.
* **Protected Routes:** Building a wrapper component to secure private pages.
* **Persistence Logic:** Managing the user’s session even when they refresh or go offline.
* **Redux-Auth Sync:** Keeping your Redux store perfectly in sync with Firebase Authentication.

### 📍 Timestamp
These chapters are designed to keep viewers engaged and help them navigate to specific technical solutions.

**00:00** – Lesson Introduction: Transitioning from Local State to Cloud Persistence
**00:16** – The Security Problem: Why the Checkout Page must be Protected
**01:10** – Firestore Architecture: Structuring User Profiles for the Database
**02:32** – Redux Setup: Integrating Firestore Storage Logic into the Store
**04:06** – Handling App States: Implementing `setLoading` for Database Requests
**05:56** – Core Logic: Syncing Redux Cart Items with Firestore in Real-time
**08:20** – Auth State Listeners: Detecting User Login/Logout to Clear Data
**11:15** – Code Refactoring: Making the Logic Reusable for the Profile Page
**14:32** – Database Persistence: Ensuring Data Remains Available Offline
**15:05** – Security Logic: Validating Passwords and Authentication tokens
**17:05** – Building the `ProtectedRoute` Component: The “Gatekeeper” Logic
**18:56** – Route Integration: Wrapping the Checkout Page in Security
**19:45** – Live Technical Demo: Registering a New User & Verifying Data in Firestore
**21:00** – Summary & Next Steps: Preparing for Lesson 13

—

**Join the Community:**
Subscribe to **Beshilo Coding Academy** for more Amharic-language coding tutorials!

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