Bano Qabil – Web Development 2 (React + Advanced Tools)

Welcome to the Bano Qabil – Web Development 2 repository 🚀 This repo contains all class codes, examples, and projects taught in the Bano Qabil Web Development Batch 02.

After mastering HTML, CSS, and JavaScript in Web Dev 1, this course takes you a step further into modern frontend development with ReactJS and popular tools from the ecosystem.

---

📚 What’s Inside?

• React basics to advanced concepts
• Class-wise code examples
• Mini projects using React + libraries
• UI component libraries for building modern UIs
• Forms, state management, and hooks
• Vite setup for fast development
• Assignments + final project

---

🛠️ Technologies & Tools Covered

• ReactJS – Components, Props, State, Hooks
• React Router – Navigation & routing
• React Hook Form – Easy and efficient form handling
• UI Libraries – Material UI, Tailwind CSS, ShadCN UI (as used in projects)
• Vite – Next-generation build tool for React apps
• State Management – Context API (Redux optional)
• API Integration – Fetching and managing data from APIs
• Project Structuring – Clean and maintainable code organization

---

📖 Syllabus Overview

1. React Basics – JSX, Components, Props, Events
2. State & Hooks – useState, useEffect, useRef, useContext
3. Forms – Controlled/Uncontrolled, React Hook Form
4. Routing – Single Page Application with React Router
5. UI Libraries – Material UI, Tailwind CSS, ShadCN for sleek design
6. Vite – Setting up and optimizing React apps
7. API Calls – Fetch API, Axios, async/await, error handling
8. Mini Projects – Todo App, Weather App, E-commerce Cart, Dashboard UI
9. Final Project – A complete multi-page React web app with authentication & API integration

---

🚀 How to Use

1. Clone the repository

   git clone https://github.com/your-username/bano-qabil-web-dev-2.git

2. Navigate into the project folder

   cd bano-qabil-web-dev-2

3. Install dependencies

   npm install

4. Run the development server

   npm run dev

5. Open in your browser 👉 http://localhost:5173

---

🌟 Features

• Beginner to Advanced React roadmap
• Modern UI development with reusable components
• Covers best practices for project structure
• Hands-on mini projects for practice
• Final project to showcase complete React skills

---

📬 Contact

For queries, feedback, or improvements, feel free to connect. Let’s keep building amazing things with React ⚛️✨