🌐 Web Development Essentials & MERN Stack Mini Project

This repository is a complete collection of my web development practice and learning journey, covering:

• HTML → All essential fundamentals.
• ReactJS → Step-by-step learning of concepts with 40+ examples and a mini project.
• Backend (Node + Express + MongoDB) → Covers essential backend concepts with a full-stack mini project.

It’s designed to act as a reference repo for beginners and intermediate developers who want to explore the MERN stack.

---

📂 Repository Structure

01-HTML

Contains essential HTML topics in separate files:

• 02-fundamentals.html → Basics of HTML
• 03-relativeLink.html → Linking concepts
• 04-semanticTags.html → Semantic elements
• 05-tagsFundamentals.html → Tag fundamentals
• 06-list.html → Ordered & unordered lists
• 07-table.html → Tables
• 08-form.html → Forms & input handling
• 09-iframeAndVideoTag.html → Iframes & videos
• 10-button.html → Buttons

---

02-ReactJs

Contains 40+ subfolders, each focusing on an essential React topic:

• React 1 → State, toggle, props, default props, props with JSX
• React 2 → Handling input, checkboxes, radio buttons, dropdowns
• React 3 → Looping in JSX with .map()
• React 4 → Clock component (color change via props)
• React 5 → Nested looping
• React 6 → Hooks with useEffect
• React 7 → Lifecycle with useEffect
• React 8 → Dynamic & conditional inline styles
• React 9 → CSS modules & styled components
• React 10 → Bootstrap integration
• React 11 → useRef hook
• React 12 → Uncontrolled components
• React 13 → Passing functions as props
• React 14 → ForwardRef
• React 15 → useFormStatus hook
• React 16 → useTransition hook
• React 17 → Derived state
• React 18 → Lifting state up
• React 19 → Updating objects in state
• React 20 → Updating arrays in state
• React 21 → Use action hooks
• React 22 → Custom hooks
• React 23 → Custom API
• React 24 → React Router 7, links, and 404 page
• React 25 → Nested navigation
• React 26 → Layout & index routes
• React 27 → Dynamic routes
• React 28 → Optional segments in routes
• React 29 → Active class in router
• React 30 → Tailwind CSS integration
• React 31 → API basics
• React 32 → Server API integration & loaders
• React 33 → User list + add user + POST API
• React 34 → Delete data via API
• React 35 → Edit + update data with PUT API
• React 36 → Simple validation
• React 37 → Validation with action state
• React 38 → useReducer
• React 39 → Lazy loading & Suspense fallback
• React 40 → API usage
• React 41 → Mini project: Color Mixture App

---

03-Backend (MERN)

Covers Node.js, Express.js, MongoDB, and Mongoose step by step:

• 01-NodeJs → First Node program, nodemon, test module, exports

• 02-NodeJs → Creating a server

• 03-NodeJs → Express setup & server creation

• 04-NodeJs → Middleware usage

• 05-NodeJs → Route-level middleware & .env

• 06-NodeJs → MongoDB CRUD operations

• 07-NodeJs → Mongoose ORM usage

• 08-NodeJs → MVC architecture

• 09-NodeJs (Mini Project) →
  Full stack CRUD app where users can:

  • Add details (name, phone, email, message)
  • View them in a table
  • Update or delete records

  Tech used:

  • Node.js + Express.js
  • MongoDB
  • React.js
  • Tailwind CSS
  • React-Toastify
  • SweetAlert2

---

🚀 Full Stack Mini Project (Highlight)

The mini project (03-Backend → 09-NodeJs) is a MERN-based CRUD application:

• Frontend: React, Tailwind CSS, Toastify, SweetAlert2
• Backend: Node.js, Express.js
• Database: MongoDB

👉 Features:

• Create new user records
• View them in a table
• Update and delete with alerts/notifications

---

🛠️ Tech Stack

• Frontend → React, Tailwind CSS, React-Toastify, SweetAlert2
• Backend → Node.js, Express.js
• Database → MongoDB
• Markup → HTML

---

📌 How to Run

1. Clone the repository:

   git clone https://github.com/your-username/your-repo.git
   

👨‍💻 Author

Rahul Rouchan Gogoi
📧 [email protected]
🔗 LinkedIn
💻 GitHub

---