Uncategorized

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

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

Uncategorized

Full Stack Ecommerce Project in Amharic: React & Firebase (Part 1)

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

Uncategorized

React E-Commerce Full Project: Phase 2 Summary Review | በአማርኛ (Everything we built!)

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/

Uncategorized

Product Search & Categories | React E-Commerce Lesson 7 [በአማርኛ]

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

Uncategorized

React Full Stack E-Commerce [ በአማርኛ ] | Lesson 6: Dynamic Routing & Product Details

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

Uncategorized

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

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

***

Uncategorized

Data Fetching & Product Display | React Full-Stack E-Commerce From Scratch | Lesson 4 [በአማርኛ]

Master Data Fetching & Product Display in React | Full-Stack E-Commerce Series | Lesson 4

Welcome to Lesson 4 of our Full-Stack E-Commerce course! In this comprehensive tutorial, we dive deep into the heart of modern web development: **Data Flow**. You will learn three different professional methods to fetch and display products, taking you from a beginner level to understanding how real-world production apps manage data.

**In this lesson, we cover:**
✅ Hardcoding local data for rapid prototyping.
✅ Fetching dynamic data from External REST APIs (DummyJSON).
✅ Integrating a Custom Local Backend (Node.js/MongoDB) for a full-stack experience.
✅ Building a reusable `ProductCard` component.
✅ Advanced styling with CSS Grid and Responsive layouts.

This video shows every step—from manually organizing image assets to writing complex fetch logic—to ensure beginners understand the complete development workflow.


### **📌 Video Chapters (Timestamps)**

**00:00** – Introduction: What we are building today
**01:00** – Overview of React Data Flow: Static vs. Dynamic
**01:50** – **Method 1: Hardcoding Local Data Objects**
**03:00** – Using the `.map()` method to render product lists
**04:05** – **Method 2: Fetching Data from External APIs**
**04:30** – Implementing `useEffect` and `useState` for API calls
**05:35** – Inspecting API Responses in the Browser Console
**07:30** – Handling External Images and Placeholders
**09:10** – Managing Local Assets: Image Downloading & Folder Structure
**11:45** – **Component Architecture: Building the ProductCard**
**12:50** – Passing Data via Props (Industry Standard)
**14:20** – **Method 3: Integrating a Custom Local API (Backend)**
**16:05** – Connecting React to Localhost:5000 (Node.js/Express)
**17:30** – Real-world Data Entry: Adding Items to MongoDB
**20:15** – **Professional Styling: CSS Modules**
**22:10** – Creating a Responsive Product Grid Layout
**24:45** – Final UI Refinement & Hover Effects
**26:30** – Summary & What’s coming in Lesson 5

### **💻 Resources & Links**
* **Previous Lesson (Lesson 3):** [React Router & Page Navigation](https://studio.youtube.com/video/Cp7wFJzicL4)
* **External API Used:** [DummyJSON](https://dummyjson.com/products)
* **Subscribe for more:** [Beshilo Coding Academy](https://youtube.com/@BeshiloCodingAcademy)

### **💬 Connect with Us**
If you have questions about `useEffect` or setting up your local backend, drop a comment below! I’ll be answering as many as I can to help you get unstuck.

#ReactJS #WebDevelopment #AmharicCoding #FullStack #EcommerceProject #BeshiloCodingAcademy #Javascript #CodingTutorial #EthiopiaCoding

Uncategorized

React Full-stack Ecommerce Project | Phase One Summary በአማርኛ

** Build a Professional React Full-stack Ecommerce App | Phase 1 Complete Summary (Amharic)**

Master modern web development with **Beshilo Coding Academy**! In this video, we conduct a deep-dive summary of **Phase One** for our Full-stack React Ecommerce project. This phase establishes the critical foundation for any scalable web application, focusing on clean architecture, responsive UI, and backend integration.

**In this video, you will learn:**
✅ **React Component Architecture:** How we organized the project into modular, reusable components.
✅ **Routing Logic:** Implementing dynamic navigation using `react-router-dom`.
✅ **Modern UI Styling:** Using CSS Modules to create a sleek “Premium Tech & Style” interface.
✅ **Firebase Integration:** Setting up the initial connection for Authentication and Firestore.
✅ **Security Best Practices:** Managing sensitive API keys and configuration using Environment Variables (`.env`).

Whether you’re a beginner or looking to sharpen your React skills, this walkthrough provides the roadmap for building a production-ready store from scratch in Amharic.

**What’s Coming in Phase 2?**
We’ll move from static layouts to dynamic data, implementing the product grid, state management for the shopping cart, and real-time database updates.

### *Timestamps**

00:00 – Introduction & Phase One Development Roadmap
00:03 – Live Project Walkthrough: Front-end UI Showcase
00:15 – Core App Logic: Analyzing `App.js` & Component Tree
00:30 – Routing Strategy: `react-router-dom` Setup & Links
00:33 – Header & Navbar: Functional Components Breakdown
00:46 – Modular Styling: CSS Modules for the Navbar
00:55 – Global Components: Implementing the Footer
01:00 – Main Layout: Homepage Structure & Responsive Design
01:10 – User Interface: Login & Authentication Pages Setup
01:15 – Shopping Cart: UI Layout & Container Logic
01:20 – Root Styles: Global CSS Variables & Typography
01:29 – Backend Foundation: Initializing Firebase & Firestore
01:40 – Data Protection: Configuring Environment Variables (`.env`)
01:43 – Summary & Preview of Phase Two: Dynamic Features

**Support the Academy:**
🔔 **Subscribe** to join our coding community and never miss a lesson.
👍 **Like** this video if it helped you understand the project structure.
💬 **Comment below** with any questions or features you’d like to see in Phase 2!

#ReactJS #FullStack #Ecommerce #BeshiloCodingAcademy #AmharicTutorial #WebDevelopment #Firebase #ReactRouter #CodingAmharic #Programming

Uncategorized

Full-Stack E-Commerce: React & Firebase Masterclass | Lesson 2: Firebase & Firestore [በአማርኛ]

🚀 **Full-Stack E-Commerce Masterclass: Firebase & Firestore Setup [በአማርኛ] — Project Lesson 2**

In this second phase of the **Beshilo Mall** build, we are moving from local code to the cloud. We are integrating **Google Firebase** to serve as our backend power engine. You will learn how to initialize a project, set up **Cloud Firestore** for real-time data, and establish a professional connection between your React frontend and your cloud infrastructure.

እንኳን ወደ React JS ሙሉ ኮርስ በአማርኛ በሰላም መጣችሁ! 🚀 በዚህ ሁለተኛ የፕሮጀክት ክፍል (Project Lesson 2) የዌብሳይታችን “ጀርባ” ወይም ባክኤንድ (Backend) የሚሆነውን የጎግል ፋየርቤዝ (Google Firebase) አጠቃቀምን እንማራለን። ፕሮጀክት እንዴት እንደሚከፈት፣ ዳታቤዝ (Cloud Firestore) እንዴት እንደሚዘጋጅ እና ሪአክት ከፋየርቤዝ ጋር በፕሮፌሽናል መንገድ እንዴት እንደሚገናኝ በተግባር እናያለን።

⏱️ **Video Chapters (Timestamps):**
0:00 – Introduction to Firebase & Project Creation
1:10 – App Registration & Project Configuration
1:35 – Installing Firebase SDK via NPM
2:10 – Setting up Authentication (Email & Password)
2:45 – Cloud Firestore Database Initialization
4:00 – Professional Firebase Config in React
5:20 – Secure Environment Variables (.env) Setup
7:10 – Testing Connection & Creating Page Components
11:15 – Building the Login UI & Card Components
15:20 – Navigation Bar (Navbar) Implementation

📘 **What You Will Master:**
✅ **Cloud Backend:** Mastering the Firebase Console to manage your application infrastructure.
✅ **NoSQL Databases:** Understanding Collections and Documents within **Cloud Firestore**.
✅ **Secure Integration:** Setting up API keys and configuration objects safely using `.env` files.
✅ **Real-time Sync:** Preparing your store for instant data updates across all users.
✅ **SDK Implementation:** Installing and configuring the modular Firebase SDK in a Vite environment.

📘 **REACT FUNDAMENTALS (Full Series):**
* **Lesson 0:** [React JS Full Course Intro](https://studio.youtube.com/video/s0wEkHTXW-M)
* **Lesson 1:** [Introduction & The JS Transition](https://studio.youtube.com/video/kmSE7GXnFgc)
* **Lesson 2:** [React Vite Setup & Folder Structure](https://studio.youtube.com/video/XJKVBwH8rJ0)
* **Lesson 3:** [JSX Syntax Rules & Expressions](https://studio.youtube.com/video/dBoGUA6DOc4)
* **Lesson 4:** [React List Rendering with .map()](https://studio.youtube.com/video/XOMwEFtRYU0)
* **Lesson 5:** [React Components Step-by-Step](https://studio.youtube.com/video/qeUNEVkYuyc)
* **Lesson 6:** [Mastering Props & Data Flow](https://studio.youtube.com/video/3ehitDdpuik)
* **Lesson 7:** [Advanced Props & Operators](https://studio.youtube.com/video/13iG0IL96vY)
* **Lesson 8:** [Event Handling Fundamentals](https://studio.youtube.com/video/JOZ3HysT6bk)
* **Lesson 9:** [Master the useState Hook](https://studio.youtube.com/video/aecZNNhIkLQ)
* **Lesson 10:** [Master Controlled Components](https://studio.youtube.com/video/Hya4IGb5U6c)
* **Lesson 11:** [Form Validation Best Practices](https://studio.youtube.com/video/-Z0OgyAtTZs)
* **Lesson 12:** [Mastering the React useEffect Hook](https://studio.youtube.com/video/aBOCRL0vsMA)
* **Lesson 13:** [Ultimate Form Validation with Hook Form](https://studio.youtube.com/video/FaHe9vEI9vU)

🛒 **PHASE 2: FULL-STACK E-COMMERCE MASTERCLASS**
* **Project Lesson 1:** [E-Commerce Roadmap & Architecture](https://studio.youtube.com/video/S-95RsyWrd8)
* **Project Lesson 2:** [Firebase & Firestore Setup [በአማርኛ]](video/x7EhwHcNLRQ)
* **Project Lesson 3:** [React Router & Navigation [በአማርኛ]](video/Cp7wFJzicL4)

💻 **RESOURCES & COMMUNITY:**
🔗 **Phase 2 Source Code:** https://github.com/Haile1221/reactJS-Full-Course
📢 **Join Our Telegram:** https://t.me/beshilocodingacedemy
📘 **Official Firebase Docs:** https://firebase.google.com/docs

🏆 **WHY BESHILO CODING ACADEMY?**
At **Beshilo Coding Academy**, we provide high-quality, academic-style programming education in Amharic to prepare you for the global software development industry. By understanding the “Why” behind the “How,” you become a developer who writes optimized, professional-grade software.

#ReactJS #Firebase #Firestore #FullStack #WebDevelopment #BeshiloCodingAcademy #BackendSetup #JavaScript #ReactAmharic #CodingEthiopia #CloudComputing

Scroll to Top