Merge pull request #247 from codeharborhub/dev-1

Added docs for Full Stack

Author: ajay-dhangar

absolute-beginners/full-stack/backend/_category_.json

@@ -0,0 +1,9 @@
+{
+  "label": "Backend Development",
+  "position": 8,
+  "link": {
+    "type": "generated-index",
+    "title": "Backend Development: The Brain of the App",
+    "description": "Step behind the curtain and learn how to build powerful servers, manage databases, and create secure APIs. This track covers everything from Node.js and Express to database architecture and authentication."
+  }
+}

absolute-beginners/full-stack/backend/introduction.mdx

@@ -1 +1,63 @@
-<ComingSoon />
+---
+title: "Introduction to Backend Development"
+sidebar_label: "1. Introduction"
+sidebar_position: 1
+description: "Understand what happens behind the scenes of a website and learn about the Client-Server architecture. Get an overview of the backend tech stack and how it connects to the frontend."
+---
+
+Welcome to the "Brain" of the application! If you've been following the **CodeHarborHub** track, you already know how to build beautiful interfaces with React and Tailwind. Now, it's time to learn how to make those interfaces **functional** and **persistent**.
+
+## 1. What exactly is the "Backend"?
+
+The Backend (also called "Server-Side") is the part of the website you cannot see. It is responsible for:
+*   **Storing Data:** Saving user profiles, blog posts, and passwords in a database.
+*   **Business Logic:** Calculating the total of a shopping cart or checking if a user has permission to delete a post.
+*   **Communication:** Sending emails, processing payments, and talking to other services.
+
+## 2. The Client-Server Architecture
+
+To understand the backend, you must understand the relationship between the **Client** and the **Server**.
+
+1.  **The Client (Frontend):** This is the user's browser (Chrome, Safari) or a mobile app. It sends a **Request** (e.g., "Hey, I want to see Ajay's profile!").
+2.  **The Server (Backend):** This is a computer located somewhere in the world that stays on 24/7. It receives the request, talks to the **Database**, and sends back a **Response** (e.g., "Here is the data for Ajay's profile.").
+
+## 3. The Backend "Tech Stack"
+
+A professional backend at the Hub usually consists of three main parts:
+
+### 1. The Server (The Application)
+This is the code that handles requests. We will use **Node.js** with **Express.js**. Node.js allows us to use JavaScript (the same language you used for React!) to write server-side code.
+
+### 2. The Database (The Memory)
+Servers don't "remember" things once they restart. For permanent storage, we use databases.
+*   **Relational (SQL):** Like a spreadsheet (e.g., PostgreSQL).
+*   **Non-Relational (NoSQL):** Like a collection of JSON documents (e.g., **MongoDB**).
+
+### 3. The API (The Bridge)
+The **API** (Application Programming Interface) is the set of "doors" the server opens for the client. When you fetch a weather report or a cricket score, you are talking to an API.
+
+## 4. A Real-World Example: Logging In
+
+Let's see how the frontend and backend work together when you log into **CodeHarborHub**:
+
+1.  **Frontend:** You type your email and password and click "Login."
+2.  **Request:** The frontend sends that data to the server via an API.
+3.  **Backend Logic:** The server receives the data. It doesn't know who you are yet.
+4.  **Database Check:** The server asks the database: *"Do we have a user with this email?"* and *"Does this password match the one we have saved?"*
+5.  **Response:** 
+    *   **If Yes:** The server sends back a "Success" message and a digital "key" (token).
+    *   **If No:** The server sends back an "Error" message.
+6.  **Frontend:** The frontend sees the response and either takes you to your dashboard or shows an error.
+
+## The Roadmap Ahead
+
+In this module, we will follow this path to becoming a Backend pro:
+*   **Node.js Basics:** Learning to run JavaScript on your computer.
+*   **Express.js:** Creating your first web server.
+*   **Routing:** Handling different URL paths (like `/api/users` vs `/api/products`).
+*   **Databases:** Connecting to MongoDB to save real data.
+*   **Authentication:** Making sure users can log in securely.
+
+:::info for Noobs
+Don't be intimidated! Since you already know JavaScript from the Frontend track, you are already 50% of the way there. The logic is the same—only the environment has changed.
+:::

absolute-beginners/full-stack/frontend/_category_.json

@@ -0,0 +1,9 @@
+{
+  "label": "Frontend Development",
+  "position": 7,
+  "link": {
+    "type": "generated-index",
+    "title": "Frontend Development: Building the UI",
+    "description": "Welcome to the face of the web. In this track, you'll learn how to craft beautiful, responsive, and interactive user interfaces using HTML, CSS, and modern styling techniques. This is where your code becomes a visual reality."
+  }
+}

absolute-beginners/full-stack/frontend/introduction.mdx

@@ -1 +1,56 @@
-<ComingSoon />
+---
+title: "Introduction to Frontend"
+sidebar_label: "1. Introduction"
+sidebar_position: 1
+description: "Understand what frontend development is and the roles of HTML, CSS, and JavaScript."
+---
+
+Frontend development is the art and science of building everything a user sees, touches, and experiences in their web browser. It is the bridge between a raw idea and a functional interface. 
+
+At **CodeHarborHub**, we call this the "Visual Side" of the stack.
+
+## 1. What is the "Frontend"?
+
+When you visit a website, your browser (like Chrome or Safari) receives files from a server. The frontend is the combination of those files working together to create a smooth experience.
+
+It involves:
+*   **Design:** How it looks (Colors, Layout, Typography).
+*   **Interaction:** What happens when you click or scroll.
+*   **Performance:** How fast the page loads and feels.
+*   **Accessibility:** Ensuring everyone, including people with disabilities, can use the site.
+
+## 2. The Three Pillars of the Web
+
+Every single website you have ever visited is built using three core technologies. Think of it like building a **House**:
+
+### HTML (The Skeleton)
+**HyperText Markup Language** is the structure. It defines what goes on the page. Is it a heading? A paragraph? An image? Without HTML, there is no content.
+
+### CSS (The Skin & Style)
+**Cascading Style Sheets** make the house look beautiful. It handles the paint, the wallpaper, the furniture placement, and the lighting. Without CSS, the web would be plain black text on a white background.
+
+### JavaScript (The Brains)
+**JavaScript** adds logic and behavior. It’s the wiring that makes the doorbell ring, the lights turn on, and the elevator move. It makes the website interactive.
+
+## 3. The Modern Frontend Workflow
+
+Building websites today is more than just typing code. As a frontend developer at **CodeHarborHub**, you will learn to use:
+
+| Stage | What you'll do | Tools |
+| :--- | :--- | :--- |
+| **Design** | Plan the layout and colors. | Figma, Adobe XD |
+| **Development** | Write the code. | VS Code, Git |
+| **Responsive** | Make it work on mobile phones. | Chrome DevTools |
+| **Deployment** | Put it on the internet. | GitHub Pages, Vercel |
+
+## 4. What we will build
+
+In this track, we aren't just going to read about code—we are going to create. You will progress through:
+
+1.  **Static Pages:** Simple resumes and landing pages using HTML & CSS.
+2.  **Responsive Layouts:** Websites that look great on an iPhone and a 4K Monitor.
+3.  **Interactive Apps:** Projects that react to user input using JavaScript.
+
+:::info The "Inspect" Secret
+You can see the frontend code of **any** website right now. Right-click anywhere on this page and select **"Inspect"**. That window shows you the real-time HTML and CSS running this site!
+:::

absolute-beginners/full-stack/frontend/mini-projects.mdx

@@ -1 +1,79 @@
-<ComingSoon />
+---
+title: "Frontend Mini-Projects"
+sidebar_label: "Mini-Projects"
+sidebar_position: 10
+description: "Put your frontend skills to the test with these beginner-friendly projects. Build a digital business card, a to-do list, a weather dashboard, and a quiz app to practice HTML, Tailwind CSS, JavaScript, and React."
+tags: ["frontend", "projects", "html", "css", "javascript", "react"]
+keywords: ["frontend projects", "html project", "css project", "javascript project", "react project", "beginner projects"]
+---
+
+Congratulations! You've navigated through the core pillars of Frontend development. Now, it's time to build. These projects will help you practice "The Developer Mindset": breaking a large problem into small, solvable tasks.
+
+## Project 1: The Digital Business Card
+**Focus:** *HTML, Tailwind CSS*
+
+Build a responsive profile card that introduces you to the world.
+
+*   **Requirements:**
+    *   Use a profile image (rounded).
+    *   Include social media links with hover effects.
+    *   Make it responsive: it should look good on a phone and a desktop.
+*   **Tailwind Challenge:** Use a custom gradient background and a subtle drop shadow (`shadow-xl`).
+
+## Project 2: Interactive Task Master (To-Do List)
+**Focus:** *JavaScript DOM Manipulation / React State*
+
+The classic developer rite of passage. This project teaches you how to handle user input and update the UI dynamically.
+
+*   **Requirements:**
+    *   An input field to add new tasks.
+    *   A "Delete" button for each task.
+    *   A "Complete" toggle that strikes through the text.
+*   **Logic Challenge:** Use `localStorage` so your tasks don't disappear when you refresh the page!
+
+## Project 3: Real-Time Weather Dashboard
+**Focus:** *API Integration, Async/Await*
+
+Connect your frontend to the real world by fetching live weather data.
+
+*   **Requirements:**
+    *   Fetch data from the [OpenWeatherMap API](https://openweathermap.org/api).
+    *   Display the temperature, humidity, and an icon representing the weather.
+    *   Change the background color based on the temperature (e.g., Blue for cold, Orange for hot).
+*   **Safety Challenge:** Handle "City Not Found" errors gracefully with a user-friendly message.
+
+## Project 4: The "A Master" Quiz App
+**Focus:** *React, State Management*
+
+Create a multiple-choice quiz that tracks scores and gives feedback.
+
+*   **Requirements:**
+    *   Create an array of objects containing questions and answers.
+    *   Show one question at a time.
+    *   At the end, show the final score and a "Restart" button.
+*   **UI Challenge:** Add a progress bar at the top that fills up as the user moves through the questions.
+
+## How to Approach These Projects
+
+When you start a project at **CodeHarborHub**, follow this workflow:
+
+1.  **Sketch it:** Draw the UI on paper. Identify your **Components**.
+2.  **HTML/JSX First:** Build the structure without styling. Make sure the buttons and inputs work.
+3.  **Style it:** Use **Tailwind** to make it look professional. Focus on spacing and typography.
+4.  **Add the Logic:** Use **JavaScript** or **React Hooks** to make it interactive.
+5.  **Refactor:** Look at your code. Can you make a function shorter? Can you remove a redundant div?
+
+## Sharing Your Work
+
+Don't build in silence! 
+*   **GitHub:** Create a repository for each project.
+*   **Vercel/Netlify:** Deploy your projects for free so you can share the link in your portfolio.
+*   **LinkedIn:** Post a screen recording of your working project and tag the **CodeHarborHub** community!
+
+:::tip Stuck?
+If you run into a bug, remember the **CodeHarborHub** motto: "Search, Read, Build." Check the documentation, search on Stack Overflow, and try to solve it before asking for the answer. That's how great engineers are made.
+:::
+
+### What's Next?
+
+You've conquered the Frontend! You now have the power to build beautiful, interactive interfaces. It's time to go deeper into the "brain" of the web: the Server. In the next section, we'll explore how to create APIs, manage databases, and build the backend logic that powers modern web applications. Get ready to become a full-stack developer!

absolute-beginners/full-stack/frontend/react/_category_.json

@@ -0,0 +1,9 @@
+{
+  "label": "React.js",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "title": "React.js: Modern UI Development",
+    "description": "Master the world's most popular JavaScript library for building user interfaces. Learn how to break your UI into reusable components, manage state effectively, and build fast, dynamic web applications that feel like native apps."
+  }
+}