Learn complete JavaScript from zero to hero in this comprehensive 7.5+ hour Amharic tutorial. Master fundamental programming concepts, modern ES6+ features, DOM Manipulation, functions, arrays, objects, and asynchronous JavaScript (Promises & Async/Await) to become a job-ready web developer.

የጃቫስክሪፕት (JavaScript) ሙሉ ኮርስ በአማርኛ ከነፃ እስከ ፕሮፌሽናል ደረጃ። በዚህ 7.5 ሰዓታት በሚወስደው ኮርስ የዌብ ዲቨሎፕመንት (Web Development) መሰረታዊ እና የላቁ ፅንሰ-ሃሳቦችን በተግባር ይማሩ።

📌 What You Will Learn in This Course:
– JavaScript Fundamentals & Core Syntax
– Variables (Var, Let, Const) and Scopes
– Data Types, Arrays, and Objects
– Control Flow (If/Else, Switch, and Loops)
– Functions, Arrow Functions, and Recursion
– DOM Manipulation & Event Handling
– Asynchronous JavaScript (Promises & Async/Await)
– Capstone Project: Building the World Countries Dashboard

📂 Source Code & Course Materials:
– Full JavaScript Course GitHub Repository: https://github.com/Haile1221/JavaScript-full-course
– Complete JavaScript Amharic Course Playlist: https://www.youtube.com/watch?v=6Kd7shiUseM&list=PL1wMmwENJNELLsg_J9j5WBZ0Ai-Qft3sY

🌐 Connect With Beshilo Coding Academy:
– Official Website: https://h-digitalbusiness.com
– YouTube Channel: https://youtube.com/channel/UCEY6mPRCSw6zQWyhnUxbmEg
– Telegram Community: https://t.me/beshilocodingacademy

📚 Official Web Development References & Documentation:
– MDN Web Docs (JavaScript Guide): https://developer.mozilla.org/en-US/docs/Web/JavaScript
– ECMAScript Language Specification: https://tc39.es/ecma262/
– Visual Studio Code Editor: https://code.visualstudio.com/

⏱️ Timestamps & Topics:
00:00:00 – Course Introduction & Roadmap
00:01:17 – Computer Programming Fundamentals (Binary vs. High-Level)
00:04:24 – The Evolution of JavaScript & Web Interactivity
00:07:20 – How JavaScript Works (Engines & V8)
00:10:01 – Pros, Cons & Security in JavaScript
00:11:46 – Setting Up the Workspace: VS Code & Extensions
00:13:38 – Writing Your First Script (Console & Alerts)
00:15:30 – Connecting JS to HTML (Inline, Internal, External)
00:22:00 – Deep Dive: Variables (Var, Let, Const)
00:27:43 – Understanding Scope (Global vs. Local) & Hoisting
00:35:15 – Data Types & Dynamic Typing Explained
00:42:36 – Arrays & Objects: Complex Data Structures
00:51:28 – Arithmetic & Assignment Operators
01:01:08 – String Manipulation & Template Literals
01:04:16 – Comparison Operators & Unicode Logic
01:11:43 – User Interaction: Alert, Prompt & Confirm
01:20:41 – Control Flow: Mastering If, Else If, and Else
01:29:29 – Decision Logic: Switch Statements
01:33:57 – Introduction to Loops: Avoiding Repetition
01:37:31 – While & Do-While Loops
01:42:24 – For Loops: The Professional Standard
01:45:00 – Special Loops: For-Of, For-In, and Map
01:56:35 – Functions Part 1: Logic Blocks & Reuse
02:10:00 – Functions Part 2: Return Statements & Parameters
02:19:30 – Advanced Functions: Recursion & Factorials
02:27:14 – Modern JS: Arrow Functions & Function Expressions
02:38:55 – Deep Dive: Objects, Literals & Nested Data
03:07:18 – Object Constructors & The ‘This’ Keyword
03:14:08 – JavaScript Classes: Blueprints for Objects
03:33:58 – Getters & Setters: Protecting Your Data
03:41:00 – Inheritance: Extending Classes (Super & Sub)
04:28:14 – The DOM (Document Object Model) Explained
04:35:22 – Selecting Elements: By ID, Name, Tag & Class
04:49:40 – Styling HTML Elements via JavaScript
05:04:40 – Traversing the DOM: Parent, Child & Siblings
05:42:56 – Creating & Inserting New HTML Elements
05:52:14 – Event Handling: Making Your Site Interactive
06:23:32 – BOM (Browser Object Model): History & Location
06:33:14 – Asynchronous JavaScript: Sync vs. Async
06:49:10 – Promises & Handling Future Data
07:04:38 – Modern Async: Async/Await & Error Handling
07:17:28 – Capstone Project: Building the World Countries App

#JavaScriptInAmharic #JavaScriptFullCourse #BeshiloCodingAcademy #AmharicCoding #WebDevelopmentAmharic #LearnJavaScript #EthiopianTech

### **Refined Exact Timestamps**

**Part 1: Foundations & Architecture**

* **00:00:00** – Lesson Overview: Tech Stack (React 19, Firebase, Stripe)
* **00:03:08** – Project Demo: Final E-Commerce Site Functionality Preview
* **00:08:48** – Roadmap: Defining the 6 Development Phases
* **00:11:32** – Prerequisites: Node.js Installation & Environment Verification
* **00:13:13** – Phase 1: Initializing React with Vite & Boilerplate Cleanup
* **00:15:16** – Architecture: Defining Global CSS Variables & Core Styles

**Part 2: Backend Integration & Routing**

* **00:19:21** – Firebase Setup: Project Creation, Auth & Firestore Console
* **00:23:45** – Integration: Exporting Auth & Database Instances in React
* **00:34:40** – Navigation: Building Global Header Component
* **00:36:18** – Dynamic Routing: React Router DOM Installation & Path Config

**Part 3: Data Fetching & Product Display**

* **00:44:47** – Phase 2: Implementation of Product Display Logic
* **00:46:50** – Local Data: Mocking Initial Product Objects
* **00:49:00** – API Integration: Fetching External Data from DummyJSON
* **01:00:00** – Advanced Fetching: Connecting to Local Node.js/MongoDB API
* **01:12:48** – Axios Configuration: Setting Up Global API Instance

**Part 4: State Management & Shopping Cart**

* **01:31:50** – Phase 3: Initializing Shopping Cart Logic
* **02:11:29** – Global State: Setting Up Redux Toolkit & Cart Slice
* **02:15:21** – Logic: Add to Cart, Increment, Decrement & Remove Actions
* **02:27:06** – Redux Store: Configuring Persisted State to LocalStorage
* **02:53:45** – Billing: Subtotal & Grand Total Calculation Logic

**Part 5: User Authentication & Security**

* **03:01:41** – Phase 4: Implementing Firebase Auth Services
* **03:04:13** – Auth Provider: Creating Global Context for User State
* **03:07:05** – Identity Logic: User Registration, Login & Logout Methods
* **03:19:03** – Persistence: Synchronizing Auth Identity with LocalStorage
* **03:30:39** – Security: Building Protected Routes (AuthGuard Component)

**Part 6: Checkout, Payments & Deployment**

* **04:00:25** – Phase 5: Initializing Checkout & Shipping State
* **04:05:03** – Geolocation: Dynamic Country & State Selection Integration
* **04:10:35** – Stripe: Building the Payment Portal & Card Processing
* **04:15:36** – Fulfillment: Order Success Logic & Firestore Data Backups
* **04:24:42** – Phase 6: Final Deployment & Hosting on Firebase
* **04:30:08** – Outro: Project Summary & Completion

[React.js Full Course in Amharic | Learn React in 5 Hours (Zero to Hero)](https://studio.youtube.com/video/hO5 Structure: React.js Zero to Hero (Amharic)**

####Module 1: The Foundation & Setup**

0:00:00** – **Lesson 0: Course Overview & Roadmap**
Introduction to the learning path and what we are building.
0:09:31** – **Lesson 1: Introduction to React & JS Transition**
Understanding the “Why” of React and modern JavaScript prerequisites.
0:58:58** – **Lesson 2: Environment Setup & Folder Structure**
Installing Vite, setting up the development environment, and project architecture.

#### **Module 2: Mastering JSX & Components**

*1:22:51** – **Lesson 3: JSX Syntax & Rules**
Writing declarative UI and embedding JavaScript expressions.
1:51:17** – **Lesson 4: List Rendering & Keys**
Efficiently rendering data using `.map()` and the importance of unique keys.
2:22:14** – **Lesson 5: Functional Components Step-by-Step**
* Building UI building blocks and understanding component-based architecture.

**Module 3: Props, Data Flow & Interaction**

*2:46:29** – **Lesson 6: Mastering Props & Data Flow**
* Passing data from parents to children and unidirectional data flow.
3:10:19** – **Lesson 7: Advanced Props & Logic**
* Function props and passing components as props for flexibility.
3:28:03** – **Lesson 8: Conditional Rendering**
* Displaying UI based on state logic (Short-circuiting vs. Ternaries).

#### **Module 4: State Management & Forms**

3:47:43** – **Lesson 9: State Management with `useState`**
* Adding interactivity and managing local component memory
3:59:51** – **Lesson 10: Handling Forms & Controlled Components**
Managing inputs, form submission, and data validation in React.
Module 5: Side Effects & Performance**

4:18:16** – **Lesson 11: Performance Optimization Basics**
Understanding re-renders and React’s internal reconciliation.
4:35:10** – **Lesson 12: Mastering the `useEffect` Hook**
Handling API calls, subscriptions, and the dependency array lifecycle.
4:44:54** – **Course Conclusion & Next Steps**
Transitioning from basic React to Full-Stack development.

🚀 Get the Code on GitHub: https://github.com/Haile1221/reactJS-Full-Course
📢 Join our Telegram Community: t.me/beshilocodingacademy

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