In Lesson 15 of our Full-Stack React E-Commerce series, we take our project live! This final tutorial covers the entire process of deploying a production-ready React application to Firebase Hosting for free. We also walk through the essential step of pushing your final source code to GitHub to ensure your project is saved and shareable.

Whether you’re building your portfolio or launching a real business, this lesson gives you the tools to move from local development to a public URL.

🌐 **Live Demo:** https://beshilo-store.web.app
💻 **GitHub Repository:** https://github.com/Haile1221/React-ecommerce-full-stack-project
Telegram: https//t.me/beshilocodingacademy

—–

### **📍 Timestamps & Lessons**

**0:00 – Introduction & Firebase Setup**
Brief overview of the deployment goal and verifying your Firebase project settings and database status.

**0:54 – Firebase CLI Login & Authentication**
Step-by-step instructions on logging into Firebase via the terminal and selecting the correct Google account for your project.

**1:33 – Initializing Firebase Hosting**
Configuring your project directory (`firebase init`), selecting the Hosting feature, and linking it to your existing Firebase project.

**2:06 – Build Configuration & “Dist” Folder**
Setting up the public directory settings and preparing the production build for deployment.

**2:30 – Creating the Production Build**
Running the build command to optimize your React code for high performance on the web.

**2:54 – Deploying to Firebase Hosting**
Executing the final deployment command and troubleshooting common React Router path issues to ensure a smooth launch.

**3:33 – Success! Testing the Live Site**
Verifying the deployment, navigating the live URL, and testing the app’s functionality in an incognito window.

**4:08 – Version Control with GitHub**
Initializing your local repository, staging the final changes, and committing your code.

**4:38 – Pushing Code to the Cloud**
Completing the GitHub push to ensure your repository is up-to-date and accessible for your portfolio.

**5:05 – Series Conclusion & Final Thoughts**
Wrapping up the Lesson 15 series and what to look forward to in future coding projects.

—–

### **🚀 Key Takeaways**

* How to use Firebase CLI for rapid deployment.
* The importance of the “Dist” folder in React production.
* Fixing “404 Not Found” errors in single-page applications (SPA).
* Finalizing your project workflow with GitHub.

**If you found this series helpful, don’t forget to Like, Subscribe, and leave a comment below with your feedback!**

#ReactJS #FirebaseHosting #FullStackDevelopment #GitHub #WebDevelopment #BeshiloCodingAcademy #AmharicTutorial

**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