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

***

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

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

Full-Stack E-Commerce: React & Firebase Masterclass | Lesson 3: React Router & Navigation [በአማርኛ]

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

Build a Complete E-commerce System: Full-Stack Project [በአማርኛ]

Welcome to the ultimate Full-Stack Masterclass! In this comprehensive series, we are building “Beshilo Mall”—a professional-grade E-commerce system using React.js and Firebase.

In Lesson 1, we lay the foundation. We cover the full 6-phase project roadmap, professional feature-based directory architecture, and set up our cloud infrastructure with Firebase. Whether you are a beginner or looking to upgrade your architectural skills, this project is designed for you.

🚀 What we are building:
Phase 1: Professional Setup & SPA Routing
Phase 2: Product Engine (External API Integration)
Phase 3: Firebase Auth & Identity System
Phase 4: Real-time Firestore Cart Sync & Hybrid State
Phase 5: Checkout, Shipping & Order Management
Phase 6: Global Deployment (Firebase & Netlify)

🛠️ Prerequisites:
VS Code: https://code.visualstudio.com
Node.js: https://nodejs.org/

Verify: Run node -v and npm -v in your terminal.

🕒 Video Chapters (Timestamps)
Copy and paste these into your video description:

0:00 – Introduction to Beshilo Mall Project
1:15 – The 6-Phase Full-Stack Roadmap
3:45 – Software Requirements & Prerequisites
5:10 – Creating the Project with Vite
7:20 – Feature-Based Directory Structure Explained

9:45 – Professional CSS System: Variables & Global Styles
12:30 – Firebase Cloud Console Setup
14:50 – Security Layer: Environment Variables (.env)
17:10 – Implementing React Router (Navigation)

20:00 – Connecting the Navbar & Links
23:15 – Initial App Test & Architecture Review
25:00 – Summary & What’s coming in Lesson 2

💬 Stuck? Drop your questions below! Our community is here to help.

Next Step: Once you finish this, move to Lesson 2: Firebase Setup

**Build a professional, full-stack E-commerce store from scratch!**

In this “Lesson 0,” we are doing a deep-dive project demo. Stop building simple “To-Do” lists and start building real-world applications. I am showing you the complete architecture and the exact code we will be writing to fulfill the full order lifecycle.

🚀 **Join our Telegram community for Materials & Source Code:**
👉 [https://t.me/beshilocodingacademy]

–
We aren’t just building a UI; we are mastering the entire sequence of a modern professional application. By the end of this project, you will have built this exact flow:

**User ➔ Browse ➔ Cart ➔ Checkout ➔ Order ➔ Payment ➔ Success ➔ History**

—

### 🛠️ What You Will Master
* **The Browse Experience:** Real-time product fetching with Firebase.
* **The Cart System:** Persistent state management in React.
* **The Checkout Bridge:** Moving from Cart to Order creation.
* **Stripe Integration:** Handling real credit card payments securely.
* **Success & History:** Managing user data and order tracking in Firestore.

**The Promise:** If you follow this sequential series, you will have a high-end, production-ready portfolio piece that actually works.

🔔 **Subscribe to Beshilo Coding Academy** and hit the bell to never miss a lesson!

#ReactJS #AmharicTutorial #BeshiloCodingAcademy #EcommerceProject #Firebase #Stripe #WebDev2026

Master Form Validation in Amharic | React Hook Form Full Course | Lesson 14
In Lesson 14 of our React Series, we are diving into React Hook Form. Learn how to handle form validation in React without the headache of multiple useState hooks. We cover everything from installation to advanced “Watch” features and custom password matching.

[Timestamps]
0:00 Intro to React Hook Form
0:07 Installation & Setup
1:59 Register & HandleSubmit
2:34 Handling Form Submission
3:40 Displaying Validation Errors

[What you will learn in this lesson]

How to install and set up react-hook-form.
Using the register function to connect input fields.
Displaying real-time error messages with formState: { errors }.
Implementing a “Password Strength” meter using the watch hook.
Custom validation for “Confirm Password” fields.
Resetting the form automatically after a successful submission.

[Resources]
✅ Source Code GitHub: [https://github.com/Haile1221/reactJS-Full-Course]
💬 Join our Telegram for Support: https://t.me/beshilocodingacademy
Previous Lesson : [https://www.youtube.com/watch?v=aBOCRL0vsMA]
[Next Lesson]
Don’t miss Lesson 15: React Routing!

#ReactJS #ReactHookForm #WebDevelopment #BeshiloCodingAcademy #Javascript #FormValidation #FrontendTutorial

## 📚 React Js Course Curriculum

| **Lesson 0** | React JS Complete Course & Learning Roadmap | (https://www.youtube.com/watch?v=s0wEkHTXW-M) |
| **Lesson 1** | What is React? Introduction & JS Transition | (https://www.youtube.com/watch?v=kmSE7GXnFgc) |
| **Lesson 2** | Project Folder Structure & Setup | (https://www.youtube.com/watch?v=XJKVBwH8rJ0) |
| **Lesson 3** | JSX Syntax Rules & Expressions | (https://www.youtube.com/watch?v=dBoGUA6DOc4) |
| **Lesson 4** | React List Rendering with map() & Keys Explained | (https://www.youtube.com/watch?v=XOMwEFtRYU0) |
| **Lesson 5** | React Components Explained: Step-by-Step | (https://www.youtube.com/watch?v=qeUNEVkYuyc) |
| **Lesson 7** | React Props Explained: Pass Data Easily | (https://www.youtube.com/watch?v=3ehitDdpuik) |
| **Lesson 8** | React Props Pro: Map, Spread & Rest Operators | (https://www.youtube.com/watch?v=13iG0IL96vY) |
| **Lesson 9** | React Event Handling Fundamentals | (https://www.youtube.com/watch?v=JOZ3HysT6bk) |
| **Lesson 10** | React State Explained: Master the useState Hook | (https://www.youtube.com/watch?v=aecZNNhIkLQ) |
| **Lesson 11** | React Forms Tutorial: Master Controlled Components | (https://www.youtube.com/watch?v=Hya4IGb5U6c) |
| **Lesson 12** | How to Validate Forms in React: Best Practices | (https://www.youtube.com/watch?v=-Z0OgyAtTZs) |
| **Lesson 13** | React useEffect Hook Tutorial | (https://www.youtube.com/watch?v=aBOCRL0vsMA) |
| **Lesson 14** | React Hook Form Tutorial | (https://www.youtube.com/watch?v=FaHe9vEI9vU) |