Community presentation

Full-Stack Development with MERN & AI Integration - Day 1

Split this context into how many parts you can for generating a PPT Presentation. Generate prompts also for this context -- FULL-STACK DEVELOPMENT WITH MERN & AI INTEGRATION DAY…

Shared by Arjumaan MAug 31, 20268 views0 likes20 slides

Create your own version

Use this visual direction as inspiration for a new Presenton deck.

Use this design

Slide 01

The idea behind this presentation

Split this context into how many parts you can for generating a PPT Presentation. Generate prompts also for this context -- FULL-STACK DEVELOPMENT WITH MERN & AI INTEGRATION DAY 1 — WEB DEVELOPMENT, JAVASCRIPT & REACT.JS Lecturer’s Master Teaching Document 1. DAY 1 OVERVIEW Theme From a Web Page to a Modern React Application Central Question “How does a modern web application actually work, and how do we build its frontend?” Day 1 Outcome By the end of the session, students should be able to: Explain how a web application works. Explain client-server architecture. Understand HTTP request/response communication. Build a semantic HTML5 webpage. Style it using CSS3. Build responsive layouts. Write modern JavaScript. Work with functions, arrays and objects. Manipulate the DOM. Handle browser events. Understand JSON and APIs. Understand Promises and asynchronous JavaScript. Use async/await. Make API requests with fetch(). Understand why React is used. Create React components. Use JSX. Pass data through props. Manage state with useState. Handle events in React. Render lists and conditional UI. Build forms. Understand useEffect. Use React Router conceptually. Understand Context API conceptually. Integrate a React frontend with an API. Build a small React application. 2. DAY 1 TEACHING PHILOSOPHY Do NOT teach the day as: HTML ↓ CSS ↓ JavaScript ↓ React That makes the lecture feel like four unrelated subjects. Instead teach: PROBLEM ↓ How does the Web work? ↓ CLIENT + SERVER ↓ How do we build the interface? ↓ HTML + CSS ↓ How do we make it interactive? ↓ JavaScript ↓ How does JavaScript communicate with other systems? ↓ JSON + APIs ↓ What happens when the response takes time? ↓ Promises + async/await ↓ How do we build large interactive UIs efficiently? ↓ REACT ↓ How does React communicate with the backend? ↓ API Integration This is the story students should follow throughout the day. 3. CONTINUOUS PROJECT Throughout the three days, use one project: CAMPUSCONNECT An AI-powered college event and student platform. On Day 1: CampusConnect ↓ Frontend ↓ HTML CSS JavaScript React On Day 2: CampusConnect ↓ React ↓ Node + Express ↓ MongoDB ↓ Authentication On Day 3: CampusConnect ↓ React ↓ Node + Express ↓ MongoDB + AI API ↓ AI Assistant This continuity is extremely important. 4. RECOMMENDED DAY 1 TIMELINE For a full-day technical workshop, approximately: SectionRecommended TimeIntroduction & Web Fundamentals30 minClient-Server & HTTP30 minHTML540 minCSS3 & Responsive Design45 minJavaScript Fundamentals75 minDOM & Events35 minJSON & APIs25 minPromises & Async/Await35 minFetch API30 minReact Introduction30 minJSX & Components40 minProps & State45 minEvents & Conditional Rendering30 minForms25 minHooks40 minRouter & Context30 minReact API Integration40 minMini Project60–90 minQ&A / Revision20 minIf your lecture has less time, prioritize the red-marked concepts below. PART I — WEB DEVELOPMENT FUNDAMENTALS 5. OPENING THE LECTURE Start with this question: “When you type amazon.in, instagram.com or chatgpt.com into your browser, what exactly happens?” Do not answer immediately. Ask students: Where does the website come from? Where is the data stored? How does the browser communicate with the website? How does login work? How does a product appear? How does a website know your username? How does a website retrieve data? Write on the board: Browser ↓ ? ↓ ? ↓ Database Then reveal: USER ↓ CLIENT / BROWSER ↓ HTTP REQUEST ↓ SERVER ↓ DATABASE ↓ HTTP RESPONSE ↓ CLIENT ↓ USER This becomes the foundation of Day 1. 6. WHAT IS WEB DEVELOPMENT? Web development is the process of designing, building, testing, deploying and maintaining applications that operate over the Web. Break it into: Frontend What the user interacts with. Examples: Buttons Forms Navigation Cards Tables Dashboards Animations Search boxes Technologies: HTML CSS JavaScript React Backend Responsible for: Business logic Authentication Authorization Data processing APIs Database communication External services For this course: Node.js Express.js Database Responsible for persistent data. For this course: MongoDB 7. REAL-WORLD ANALOGY — RESTAURANT Use this analogy throughout the course. RestaurantWeb ApplicationCustomerUserMenuFrontendWaiterAPIKitchenBackendStorage roomDatabaseOrderRequestFoodResponseExample: Customer ↓ "Give me Pizza" ↓ Waiter ↓ Kitchen ↓ Storage / Ingredients ↓ Pizza ↓ Waiter ↓ Customer Translate it: Browser ↓ API Request ↓ Backend ↓ Database ↓ Backend ↓ JSON Response ↓ Browser Tell students: “Tomorrow, you are going to become the waiter and kitchen.” PART II — CLIENT-SERVER ARCHITECTURE 8. WHAT IS A CLIENT? A client is software that initiates communication with a server. Examples: Chrome Edge Firefox Mobile applications React applications Postman 9. WHAT IS A SERVER? A server is software that listens for requests and processes them. Example: GET /events The server might respond: { "events": [ { "id": 1, "title": "AI Workshop" } ] } 10. CLIENT-SERVER FLOW Draw: ┌───────────────┐ │ CLIENT │ │ Browser │ └───────┬───────┘ │ │ HTTP REQUEST ▼ ┌───────────────┐ │ SERVER │ │ Node/Express │ └───────┬───────┘ │ │ DATABASE QUERY ▼ ┌───────────────┐ │ DATABASE │ │ MongoDB │ └───────┬───────┘ │ │ DATA ▼ ┌───────────────┐ │ SERVER │ └───────┬───────┘ │ │ JSON RESPONSE ▼ ┌───────────────┐ │ CLIENT │ │ React │ └───────────────┘ MDN describes the basic browser-server interaction as a client sending an HTTP request and receiving an HTTP response from the server. 11. WHAT HAPPENS WHEN YOU ENTER A URL? Example: <https://example.com> Explain at a high level: 1. Browser receives URL ↓ 2. Domain is resolved ↓ 3. Browser establishes connection ↓ 4. Browser sends HTTP request ↓ 5. Server receives request ↓ 6. Server processes request ↓ 7. Server sends response ↓ 8. Browser receives resources ↓ 9. Browser renders page ↓ 10. JavaScript executes ↓ 11. Additional API requests may occur Do not spend excessive time on TCP/IP or DNS internals here. The goal is the mental model. PART III — HTTP FUNDAMENTALS 12. HTTP HTTP = HyperText Transfer Protocol. It is the communication protocol used between clients and servers on the Web. Basic request: GET /events HTTP/1.1 Host: campusconnect.com Accept: application/json Basic response: HTTP/1.1 200 OK Content-Type: application/json 13. HTTP METHODS Introduce: GET POST PUT PATCH DELETE Use a student-management example. GET Retrieve data. GET /students POST Create data. POST /students PUT Replace/update a resource. PUT /students/101 PATCH Partially update. PATCH /students/101 DELETE Remove. DELETE /students/101 14. HTTP STATUS CODES Teach these: CodeMeaningExample200OKData retrieved201CreatedUser created400Bad RequestInvalid input401UnauthorizedNot authenticated403ForbiddenInsufficient permission404Not FoundEvent doesn’t exist500Server ErrorBackend failureReal-world scenario: GET /events/9999 If event doesn’t exist: 404 Not Found PART IV — HTML5 15. HTML Explain: HTML provides the structure and semantic meaning of web content. It is a markup language, not a general-purpose programming language. 16. BASIC HTML DOCUMENT Live-code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>CampusConnect</title> </head> <body> <h1>CampusConnect</h1> </body> </html> Explain every line. 17. HTML ELEMENTS Teach: <h1>Heading</h1> <p>Paragraph</p> <a href="#">Link</a> <img src="image.jpg" alt="Campus event" /> <button>Register</button> 18. SEMANTIC HTML Instead of: <div> <div> <div> </div> </div> </div> Prefer: <header> <nav> </nav> </header> <main> <section> <article> </article> </section> </main> <footer> </footer> Explain why: Accessibility SEO Maintainability Meaningful structure Easier collaboration 19. CAMPUSCONNECT HTML Live coding: <header> <h1>CampusConnect</h1> <nav> <a href="#">Home</a> <a href="#">Events</a> <a href="#">About</a> </nav> </header> <main> <section class="hero"> <h2> Discover What's Happening on Campus </h2> <p> Find workshops, hackathons, seminars and technical events. </p> <button> Explore Events </button> </section> <section> <h2>Upcoming Events</h2> <article> <h3>AI Workshop</h3> <p> Introduction to Generative AI </p> <button> Register </button> </article> </section> </main> <footer> <p> CampusConnect © 2026 </p> </footer> 20. HTML FORMS Introduce: <form> <label for="name"> Name </label> <input type="text" id="name" required > <label for="email"> Email </label> <input type="email" id="email" required > <button type="submit"> Register </button> </form> Explain: form label input select textarea button Real-world examples: Login Registration Search Payment Feedback Contact form PART V — CSS3 21. CSS Explain: HTML ↓ Structure CSS ↓ Appearance / Layout JavaScript ↓ Behaviour 22. BASIC CSS body { margin: 0; font-family: Arial, sans-serif; } h1 { font-size: 32px; } button { padding: 12px 20px; border: none; border-radius: 8px; } 23. CSS SELECTORS Teach: p { } .card { } #header { } button:hover { } Explain the difference between: element selector class selector ID selector pseudo-class 24. BOX MODEL Draw: ┌────────────────────────────┐ │ MARGIN │ │ ┌──────────────────────┐ │ │ │ BORDER │ │ │ │ ┌──────────────────┐ │ │ │ │ │ PADDING │ │ │ │ │ │ ┌──────────────┐ │ │ │ │ │ │ │ CONTENT │ │ │ │ │ │ │ └──────────────┘ │ │ │ │ │ └──────────────────┘ │ │ │ └──────────────────────┘ │ └────────────────────────────┘ Explain: .card { margin: 20px; padding: 20px; border: 1px solid #ddd; } 25. FLEXBOX Example: .navbar { display: flex; justify-content: space-between; align-items: center; } Explain: display flex-direction justify-content align-items gap flex-wrap Real-world examples: Navbar Toolbar Profile header Button groups Cards in a row 26. CSS GRID .events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } Result: ┌─────────┐ ┌─────────┐ ┌─────────┐ │ Event 1 │ │ Event 2 │ │ Event 3 │ └─────────┘ └─────────┘ └─────────┘ 27. RESPONSIVE DESIGN Desktop: Card | Card | Card Mobile: Card ──── Card ──── Card Code: @media (max-width: 768px) { .events { grid-template-columns: 1fr; } } Explain: A responsive application adapts its layout to different screen sizes and devices. PART VI — JAVASCRIPT 28. INTRODUCE JAVASCRIPT Tell students: “Our page looks good. But what happens when the user clicks Register?” HTML cannot handle the entire application behaviour. CSS cannot. We need: JavaScript 29. VARIABLES let score = 10; score = 20; const college = "ABC College"; Explain: let Can be reassigned. const Binding cannot be reassigned. Briefly mention var as legacy syntax they may encounter. 30. DATA TYPES Examples: const name = "Arjun"; const age = 21; const isStudent = true; const result = null; let marks; const student = { name: "Arjun", age: 21 }; Important categories: String Number Boolean Undefined Null Object 31. CONDITIONS const age = 20; if (age >= 18) { console.log("Eligible"); } else { console.log("Not eligible"); } Real-world: If logged in → dashboard If not logged in → login If cart empty → empty cart Otherwise → cart items 32. LOOPS Basic: for ( let i = 0; i < 5; i++ ) { console.log(i); } Array: const students = [ "Arjun", "Priya", "Rahul" ]; students.forEach(student => { console.log(student); }); 33. FUNCTIONS function add(a, b) { return a + b; } Arrow function: const add = (a, b) => a + b; Explain: Functions allow us to package reusable behaviour. 34. ARRAYS const events = [ "AI Workshop", "Hackathon", "Cloud Workshop" ]; Access: events[0]; Length: events.length; 35. ARRAY METHODS These are critical for React. map() const numbers = [1, 2, 3]; const doubled = numbers.map( number => number * 2 ); Result: [2, 4, 6] filter() const numbers = [10, 20, 30, 40]; const result = numbers.filter( number => number > 20 ); Result: [30, 40] find() const event = events.find( event => event.id === 2 ); reduce() const prices = [100, 200, 300]; const total = prices.reduce( (sum, price) => sum + price, 0 ); Explain: map → transform filter → select find → locate one reduce → combine into one result 36. OBJECTS const student = { id: 101, name: "Arjun", department: "CSE", skills: [ "JavaScript", "React" ] }; Access: student.name; 37. DESTRUCTURING const student = { name: "Arjun", age: 21 }; const { name, age } = student; This becomes very important in React: function StudentCard({ name, age }) { // ... } 38. SPREAD OPERATOR const user = { name: "Arjun", age: 21 }; const updatedUser = { ...user, age: 22 }; Explain: Spread is heavily used when creating updated arrays/objects without mutating the original value. This becomes particularly important when working with React state. 39. TEMPLATE LITERALS const name = "Arjun"; const message = `Hello${name}`; PART VII — DOM 40. WHAT IS THE DOM? Explain: The DOM is the browser’s object representation of the document that JavaScript can interact with. HTML: <h1 id="title"> CampusConnect </h1> JavaScript: const title = document.getElementById("title"); title.textContent = "Welcome to CampusConnect"; 41. SELECTING ELEMENTS Teach: document.getElementById() document.querySelector() document.querySelectorAll() Example: const button = document.querySelector( ".register-btn" ); 42. EVENT HANDLING button.addEventListener( "click", () => { alert("Registered!"); } ); Important events: click submit input change keydown keyup mouseover 43. LIVE PROGRAM — COUNTER HTML: <h2 id="count">0</h2> <button id="increment"> + </button> <button id="decrement"> - </button> JavaScript: let count = 0; const countElement = document.getElementById( "count" ); document .getElementById("increment") .addEventListener( "click", () => { count++; countElement.textContent = count; } ); document .getElementById("decrement") .addEventListener( "click", () => { count--; countElement.textContent = count; } ); Then ask: “What happens if we had 50 components like this?” This leads directly to: Why React? PART VIII — JSON & API 44. JSON JSON = JavaScript Object Notation. Example: { "id": 101, "name": "Arjun", "department": "CSE", "skills": [ "JavaScript", "React" ] } Explain: JSON is a text-based data format commonly used to exchange structured data between applications. 45. JAVASCRIPT OBJECT VS JSON JavaScript: const user = { name: "Arjun", age: 21 }; JSON: { "name": "Arjun", "age": 21 } 46. JSON.stringify() Object → JSON string. const user = { name: "Arjun", age: 21 }; const json = JSON.stringify(user); 47. JSON.parse() JSON string → JavaScript object. const json = '{"name":"Arjun","age":21}'; const user = JSON.parse(json); console.log(user.name); 48. WHAT IS AN API? Explain simply: An API is a defined interface through which one software system communicates with another. Real-world examples: Weather API Payment API Google Maps API Email API Authentication API AI API Example: Weather App ↓ Weather API ↓ Weather Server ↓ Temperature Humidity Wind ↓ Weather App 49. API IN CAMPUSCONNECT React ↓ GET /api/events ↓ Backend ↓ MongoDB ↓ Events ↓ JSON ↓ React Tell students: “Tomorrow, we will build the /api/events endpoint ourselves.” PART IX — ASYNCHRONOUS JAVASCRIPT 50. WHY ASYNC? Suppose: fetch("/api/events"); The server might take: 100 ms 500 ms 2 seconds The browser should not freeze while waiting. Conceptually: Start Request ↓ Continue Other Work ↓ Response Arrives ↓ Process Response 51. PROMISES A Promise represents the eventual outcome of an asynchronous operation. Conceptually: PENDING │ ├──────────────► FULFILLED │ └──────────────► REJECTED Example: const promise = fetch("/api/events"); promise .then(response => { console.log(response); }) .catch(error => { console.error(error); }); MDN describes promises in terms of pending, fulfilled and rejected outcomes and shows fetch() as a common Promise-based API. 52. PROMISE CHAIN fetch("/api/events") .then(response => response.json() ) .then(data => { console.log(data); }) .catch(error => { console.error(error); }); Explain: fetch ↓ Promise ↓ response ↓ response.json() ↓ Promise ↓ data 53. ASYNC/AWAIT Modern version: async function getEvents() { try { const response = await fetch( "/api/events" ); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } } Explain: async → function works with Promises await → wait for Promise settlement An async function returns a Promise, and await provides a more readable way to work with Promise results inside async functions. PART X — FETCH API 54. GET REQUEST async function getEvents() { const response = await fetch( "/api/events" ); const data = await response.json(); console.log(data); } The Fetch API provides the browser interface for network requests and returns a Promise resolving to a Response. 55. IMPORTANT FETCH ERROR CONCEPT This is a good lecturer-level point. Many beginners think: 404 ↓ fetch() automatically rejects That is not generally how Fetch works. A response with HTTP status 404 or 500 can still resolve the Fetch Promise. Therefore: if (!response.ok) { throw new Error( `HTTP Error: ${response.status}` ); } MDN explicitly notes that fetch() resolves when the server responds with headers even when the response has an HTTP error status. 56. POST REQUEST async function registerStudent() { const response = await fetch( "/api/students", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "Arjun", email: "arjun@example.com" }) } ); const data = await response.json(); console.log(data); } Explain: JavaScript Object ↓ JSON.stringify() ↓ HTTP Request Body ↓ Server PART XI — INTRODUCING REACT 57. THE PROBLEM WITH MANUAL DOM Return to the counter. Ask: “Imagine a real application with 100 buttons, 20 forms, notifications, search, filters, carts, dashboards and dynamic data. Do we want to manually manipulate the DOM everywhere?” This introduces React. 58. WHAT IS REACT? React is a JavaScript library for building user interfaces from reusable components. The official React documentation describes React applications as being built from components—pieces of UI with their own logic and appearance. 59. COMPONENT MENTAL MODEL Instead of one giant page: App Build: App │ ├── Navbar ├── Hero ├── SearchBar ├── EventList │ ├── EventCard │ ├── EventCard │ └── EventCard └── Footer Each component has a responsibility. 60. FIRST REACT COMPONENT function Welcome() { return ( <h1> Welcome to CampusConnect </h1> ); } export default Welcome; React components are JavaScript functions that return markup. Important: Component names must start with CAPITAL LETTERS Correct: function EventCard() {} Incorrect: function eventCard() {} 61. JSX JSX allows HTML-like markup inside JavaScript. function App() { const name = "Arjun"; return ( <h1> Hello {name} </h1> ); } React’s documentation describes JSX as a syntax extension for JavaScript that lets developers write HTML-like markup within JavaScript files. 62. JSX RULES Teach: Close tags <img /> not: <img> Use className <div className="card"> not: <div class="card"> JavaScript inside {} <h1> {name} </h1> One returned root/wrapper return ( <> <h1>Hello</h1> <p>Welcome</p> </> ); PART XII — PROPS 63. WHAT ARE PROPS? Props are data passed from parent to child components. Component: function EventCard({ title, category }) { return ( <article> <h2>{title}</h2> <p>{category}</p> </article> ); } Usage: <EventCard title="AI Workshop" category="Artificial Intelligence" /> Mental model: Parent │ │ props ▼ Child 64. REAL-WORLD PROP EXAMPLE Amazon-like product card: <ProductCard name="MacBook" price={120000} image="/laptop.jpg" /> Netflix-like movie card: <MovieCard title="Inception" rating={8.8} genre="Sci-Fi" /> PART XIII — LIST RENDERING 65. ARRAY → COMPONENTS Data: const events = [ { id: 1, title: "AI Workshop", category: "AI" }, { id: 2, title: "Hackathon", category: "Development" }, { id: 3, title: "Cloud Workshop", category: "Cloud" } ]; Render: function EventList() { return ( <div> {events.map(event => ( <EventCard key={event.id} title={event.title} category={event.category} /> ))} </div> ); } React’s documentation explicitly uses JavaScript’s map() to render lists and recommends stable keys that uniquely identify items among their siblings. 66. WHY key? key={event.id} Tell students: “React needs a stable identity for each list item so it can correctly track changes when items are inserted, deleted or reordered.” Avoid: key={Math.random()} Prefer: key={event.id} PART XIV — CONDITIONAL RENDERING 67. IF/ELSE function Dashboard({ isLoggedIn }) { if (!isLoggedIn) { return<Login />; } return<DashboardHome />; } React uses normal JavaScript conditional logic for conditional rendering. 68. TERNARY return ( <div> {isLoggedIn ?<Dashboard /> :<Login /> } </div> ); 69. LOADING STATE Real-world example: if (loading) { return<p> Loading events... </p>; } Then: if (error) { return<p> Something went wrong. </p>; } Then: return<EventList />; This establishes the common UI states: Loading Success Empty Error PART XV — STATE 70. WHY STATE? Return to the counter. In React: import { useState } from "react"; function Counter() { const [ count, setCount ] = useState(0); return ( <div> <h2>{count}</h2> <button onClick={() => setCount(count + 1) } > + </button> </div> ); } React describes state as component-specific memory and useState as the Hook used to declare a state variable and its setter. 71. STATE MENTAL MODEL User Interaction ↓ Event Handler ↓ setState() ↓ State Changes ↓ React Re-renders ↓ Updated UI This is one of the most important diagrams of Day 1. 72. STATE VS VARIABLE Bad mental model: let count = 0; count++; In React: const [ count, setCount ] = useState(0); Explain: “React needs state because changing ordinary variables does not tell React that the UI needs to be updated.” PART XVI — REACT EVENTS 73. EVENT HANDLING function Button() { function handleClick() { alert( "Event registered!" ); } return ( <button onClick={handleClick} > Register </button> ); } Important distinction: Correct: onClick={handleClick} Not: onClick={handleClick()} The latter calls the function during rendering rather than passing the event handler. React’s documentation specifically demonstrates passing the handler function to onClick. PART XVII — REACT FORMS 74. CONTROLLED INPUT import { useState } from "react"; function LoginForm() { const [ email, setEmail ] = useState(""); return ( <form> <input type="email" value={email} onChange={e => setEmail( e.target.value ) } /> <button> Login </button> </form> ); } Flow: User types ↓ onChange ↓ setEmail() ↓ State ↓ React ↓ Input value 75. FORM SUBMISSION function LoginForm() { const handleSubmit = ( event ) => { event.preventDefault(); console.log( "Form submitted" ); }; return ( <form onSubmit={handleSubmit} > <input /> <button type="submit"> Login </button> </form> ); } Explain why: event.preventDefault(); prevents the browser’s default form submission/navigation behavior so the React application can handle the submission itself. PART XVIII — HOOKS 76. WHAT ARE HOOKS? Hooks are functions that allow React components to use React features. Important Day 1 Hooks: useState useEffect useContext React’s current Hook reference categorizes built-in Hooks into state, context, ref, effect and other categories. 77. HOOK RULE Do not teach Hooks as ordinary functions. Important rule: Hooks should be called at the top level of a component or another Hook. Avoid: if (loggedIn) { useState(); } Prefer: function App() { const [ loggedIn, setLoggedIn ] = useState(false); // ... } PART XIX — useEffect 78. WHY useEffect? Explain: “Sometimes a component needs to synchronize with something outside React.” Examples: API request Browser API Timer Subscription External widget React’s documentation describes Effects as a way for a component to connect to and synchronize with external systems, including network and browser APIs. 79. BASIC useEffect import { useEffect } from "react"; function App() { useEffect(() => { console.log( "Component loaded" ); }, []); return ( <h1> CampusConnect </h1> ); } 80. useEffect + API import { useEffect, useState } from "react"; function Events() { const [ events, setEvents ] = useState([]); useEffect(() => { fetch("/api/events") .then(response => response.json() ) .then(data => setEvents(data) ); }, []); return ( <div> {events.map(event => ( <div key={event.id}> {event.title} </div> ))} </div> ); } This is the critical bridge: React ↓ useEffect ↓ fetch() ↓ API ↓ JSON ↓ setEvents() ↓ React UI PART XX — REACT ROUTER 81. WHY ROUTING? A real application has multiple views: / /events /events/101 /login /dashboard /profile A router maps URLs to components. Conceptually: URL ↓ Router ↓ Component Example: <Route path="/events" element={<Events />} /> <Route path="/login" element={<Login />} /> Explain: “Routing is how a React application organizes navigation between different views.” Do not spend the entire day on advanced routing. Students mainly need the mental model and a basic implementation. PART XXI — CONTEXT API 82. PROP DRILLING PROBLEM Suppose: App ↓ Dashboard ↓ Sidebar ↓ Profile ↓ User If the user information has to travel through every component: App ↓ props Dashboard ↓ props Sidebar ↓ props Profile This becomes cumbersome. 83. CONTEXT Conceptually: UserContext / | \ / | \ Navbar Dashboard Profile Use cases: Authentication Theme Language Global settings React’s useContext lets a component read context from a distant parent without passing the value through every intermediate component as props. PART XXII — API INTEGRATION 84. FULL FRONTEND → API FLOW This is one of the most important demonstrations. React Component ↓ User clicks "Load Events" ↓ Event Handler / Effect ↓ fetch() ↓ HTTP Request ↓ REST API ↓ JSON Response ↓ setEvents() ↓ React Re-render ↓ Event Cards 85. COMPLETE API COMPONENT import { useEffect, useState } from "react"; function EventList() { const [ events, setEvents ] = useState([]); const [ loading, setLoading ] = useState(true); const [ error, setError ] = useState(""); useEffect(() => { async function loadEvents() { try { setLoading(true); const response = await fetch( "/api/events" ); if (!response.ok) { throw new Error( `HTTP${response.status}` ); } const data = await response.json(); setEvents(data); } catch (err) { setError( err.message ); } finally { setLoading(false); } } loadEvents(); }, []); if (loading) { return ( <p> Loading events... </p> ); } if (error) { return ( <p> Error: {error} </p> ); } if (events.length === 0) { return ( <p> No events available. </p> ); } return ( <div> {events.map(event => ( <article key={event.id} > <h2> {event.title} </h2> <p> {event.category} </p> </article> ))} </div> ); } This single example teaches: useState useEffect async/await fetch HTTP status JSON error handling loading state empty state map key conditional rendering That is an excellent lecturer demonstration. PART XXIII — REACT PROJECT STRUCTURE 86. RECOMMENDED PROJECT STRUCTURE For the workshop: campusconnect/ │ ├── src/ │ │ │ ├── components/ │ │ ├── Navbar.jsx │ │ ├── EventCard.jsx │ │ ├── SearchBar.jsx │ │ └── Footer.jsx │ │ │ ├── pages/ │ │ ├── Home.jsx │ │ ├── Events.jsx │ │ ├── Login.jsx │ │ └── Dashboard.jsx │ │ │ ├── context/ │ │ └── AuthContext.jsx │ │ │ ├── services/ │ │ └── api.js │ │ │ ├── App.jsx │ └── main.jsx │ ├── public/ │ ├── package.json └── README.md Explain that this is an organizational convention, not a mandatory React rule. PART XXIV — DAY 1 LIVE-CODING PROJECT 87. CAMPUSCONNECT MINI APPLICATION Students build: CampusConnect │ ├── Home ├── Events ├── Login └── Dashboard 88. COMPONENT TREE App │ ├── Navbar │ ├── Routes │ │ │ ├── Home │ │ │ ├── Events │ │ └── EventCard │ │ │ ├── Login │ │ └── LoginForm │ │ │ └── Dashboard │ └── Footer 89. EVENT DATA const events = [ { id: 1, title: "AI Workshop", category: "AI", date: "September 10" }, { id: 2, title: "MERN Hackathon", category: "Development", date: "September 15" }, { id: 3, title: "Cloud Workshop", category: "Cloud", date: "September 20" } ]; 90. EVENT CARD function EventCard({ title, category, date }) { return ( <article className="event-card"> <h2>{title}</h2> <p> Category: {category} </p> <p> Date: {date} </p> <button> Register </button> </article> ); } 91. EVENT LIST function EventList({ events }) { return ( <section> {events.map(event => ( <EventCard key={event.id} title={event.title} category={ event.category } date={event.date} /> ))} </section> ); } 92. SEARCH FEATURE const [ search, setSearch ] = useState(""); const filteredEvents = events.filter(event => event.title .toLowerCase() .includes( search.toLowerCase() ) ); Input: <input type="text" placeholder="Search events..." value={search} onChange={e => setSearch( e.target.value ) } /> Flow: User types ↓ search state ↓ filter() ↓ filteredEvents ↓ EventList 93. LOGIN FORM function Login() { const [ email, setEmail ] = useState(""); const [ password, setPassword ] = useState(""); function handleSubmit(e) { e.preventDefault(); console.log({ email, password }); } return ( <form onSubmit={handleSubmit} > <input type="email" placeholder="Email" value={email} onChange={e => setEmail( e.target.value ) } /> <input type="password" placeholder="Password" value={password} onChange={e => setPassword( e.target.value ) } /> <button> Login </button> </form> ); } Tell students: “This login currently doesn’t authenticate anyone. Tomorrow we will connect it to the real backend.” PART XXV — PRACTICAL EXERCISES 94. EXERCISE 1 — PROFILE CARD Create: StudentProfile Properties: name department year skills Render it using props. 95. EXERCISE 2 — PRODUCT FILTER Data: const products = [ { id: 1, name: "Laptop", price: 70000 }, { id: 2, name: "Phone", price: 30000 }, { id: 3, name: "Tablet", price: 25000 } ]; Task: Show products above ₹30,000. Expected concept: filter() 96. EXERCISE 3 — COUNTER Requirements: + - Reset Concepts: useState events 97. EXERCISE 4 — SEARCH Create a search box. Requirements: Input ↓ State ↓ filter() ↓ Cards 98. EXERCISE 5 — API Fetch data from a public test API. Example: const response = await fetch( "<https://jsonplaceholder.typicode.com/users>" ); const users = await response.json(); console.log(users); Then render: Name Email Company The objective is not the specific API. The objective is: fetch ↓ Promise ↓ async/await ↓ JSON ↓ React state ↓ UI PART XXVI — COMMON STUDENT DOUBTS 99. “Why do we need React if JavaScript can manipulate the DOM?” Answer: JavaScript absolutely can manipulate the DOM. React provides a component-oriented model for organizing UI, managing state and describing how the UI should correspond to application data. It becomes especially useful as the interface grows. 100. “Is React a programming language?” No. JavaScript → Programming language React → JavaScript library 101. “Is JSX HTML?” Not exactly. JSX is JavaScript syntax that lets you write HTML-like markup within JavaScript. 102. “Are props and state the same?” No. Props ↓ Passed into component State ↓ Component-managed changing data 103. “Why can’t we just use variables instead of state?” Because React does not treat arbitrary variable changes as a signal to update the UI. State provides React with the information needed to update the component’s rendered output. 104. “Why useEffect for API calls?” Because fetching data is interaction with an external system. Effects are designed for synchronizing a component with external systems such as network resources. 105. “Why can’t we call the AI API directly from React?” Because sensitive credentials such as API keys should not be exposed in browser-delivered frontend code. Preferred architecture: React ↓ Your Backend ↓ AI Provider This becomes especially important on Day 3. PART XXVII — REAL-WORLD MAPPING 106. CONCEPT → REAL APPLICATION ConceptReal-world exampleHTMLPage structureCSSVisual designJavaScriptInteractionsDOMDynamic browser updatesEventClicking “Buy Now”ArrayList of productsObjectUser/productmap()Product cardsfilter()Search/filterJSONAPI dataAPIWeather servicePromiseNetwork operationasync/awaitAPI requestfetchHTTP requestReact componentProductCardPropsProduct dataStateCart countEvent handlerAdd to cartConditional renderingLogin vs dashboarduseEffectLoad API dataRouter/productsContextAuthenticated userPART XXVIII — INTERVIEW/VIVA QUESTIONS 107. WEB FUNDAMENTALS What is frontend development? What is backend development? What is a database? What is client-server architecture? What is an HTTP request? What is an HTTP response? What is REST? What is JSON? What is an API? What happens when you enter a URL? 108. HTML/CSS What is semantic HTML? Difference between <div> and semantic elements? What is the CSS box model? Difference between Flexbox and Grid? What is responsive design? What is a media query? 109. JAVASCRIPT Difference between let, const, and var? What is an object? What is an array? What is an arrow function? What is destructuring? What is spread syntax? Difference between map() and filter()? What is reduce()? What is the DOM? What is event handling? 110. ASYNCHRONOUS JAVASCRIPT What is synchronous execution? What is asynchronous execution? What is a Promise? What are Promise states? What is async? What is await? What does fetch() return? Does HTTP 404 automatically cause Fetch to reject? Why should response.ok be checked? 111. REACT What is React? What is a component? What is JSX? What are props? What is state? Difference between props and state? What is useState()? What is useEffect()? Why do React lists need keys? What is conditional rendering? What is React Router? What is Context API? What is prop drilling? PART XXIX — LIVE DEMONSTRATION SEQUENCE If you want the lecture to feel polished and professional, use this exact progression during live coding: Demo 1 Create: HTML page Demo 2 Add: CSS Demo 3 Add: JavaScript button Demo 4 Build: DOM Counter Demo 5 Add: Event Array Demo 6 Use: map() to create event cards. Demo 7 Use: filter() for search. Demo 8 Call: fetch() and display API data. Demo 9 Rebuild the same interface using React. Demo 10 Convert: Event into: EventCard component Demo 11 Add: props Demo 12 Add: useState Demo 13 Add: search Demo 14 Add: useEffect + API Demo 15 Show: React ↓ API ↓ ???? Then stop. Tell them: “Tomorrow, we’re building the ???.” PART XXX — DAY 1 FINAL ARCHITECTURE At the end of Day 1, show: USER │ ▼ ┌─────────┐ │ Browser │ └────┬────┘ │ ▼ ┌─────────────┐ │ React │ │ Frontend │ └──────┬──────┘ │ HTTP/API │ ▼ ┌─────────────┐ │ BACKEND │ │ ? │ └──────┬──────┘ │ ▼ DATABASE ? Then say: “You now know how to build the frontend. Tomorrow we will build the backend, database and authentication system behind it.” PART XXXI — DAY 1 FINAL CHEAT SHEET Web Client Server HTTP Request Response API JSON HTML Semantic HTML Forms Inputs Buttons CSS Selectors Box Model Flexbox Grid Responsive Design Media Queries JavaScript Variables Data Types Functions Arrays Objects map() filter() find() reduce() Destructuring Spread Template Literals Browser DOM Events Event Listeners Async JavaScript Promise .then() .catch() async await fetch() React Components JSX Props State Events Conditional Rendering Lists Keys Forms useState useEffect React Router Context API Integration PART XXXII — THE MOST IMPORTANT 15 CONCEPTS If time becomes short, DO NOT sacrifice these: Client-server architecture HTTP request/response HTML structure CSS responsive layout JavaScript functions Arrays and objects map() / filter() DOM and events JSON APIs Promises async/await fetch() React components + props + state React API integration PART XXXIII — DAY 1 CLOSING End the day with this: DAY 1 "I can build a frontend." ↓ HTML + CSS ↓ JavaScript ↓ DOM ↓ JSON/API ↓ async/await ↓ React ↓ Components + State ↓ API Integration ↓ ┌──────────────────┐ │ CAMPUSCONNECT UI │ └────────┬─────────┘ │ │ ▼ "WHERE DOES THIS DATA COME FROM?" │ ▼ DAY 2 Final message to students “Today we built what the user sees. Tomorrow we build what the user doesn’t see—the server, APIs, database and authentication. On Day 3, we’ll connect AI to the same application and turn it into an intelligent full-stack system.” That gives the three-day lecture a clear narrative rather than three disconnected technology classes. And each part must have atleast 15 - 20 slides with real world examples for the content To effectively teach this massive full-day masterclass without overwhelming the students, the document should be split into **6 distinct presentation decks**. This follows the natural progression of the curriculum: from high-level web concepts, to static UI, to interactivity, to data fetching, and finally to modern React. Here is the breakdown of the 6 parts, followed by the specific prompts you can use to generate each slide deck. ### The 6-Part Presentation Split * **Part 1: Web Fundamentals & Client-Server Architecture** (Sections 1–14) * *Focus:* The "Restaurant" analogy, how URLs work, HTTP basics, and the overall Client/Server/Database mental model. * **Part 2: Building the UI with HTML5 & CSS3** (Sections 15–27) * *Focus:* Semantic HTML structure, the Box Model, Flexbox, Grid, and responsive design basics. * **Part 3: JavaScript Core & The DOM** (Sections 28–43) * *Focus:* Variables, loops, array methods (`map`, `filter`), object destructuring, and manually manipulating the DOM (the Counter example). * **Part 4: APIs, Asynchronous JS & Fetch** (Sections 44–56) * *Focus:* JSON vs. JS Objects, the definition of an API, Promises, `async/await`, and making Fetch requests. * **Part 5: React.js Fundamentals** (Sections 57–75) * *Focus:* Why React? JSX rules, Components, Props, List/Conditional rendering, and State (`useState`). * **Part 6: Advanced React & API Integration** (Sections 76–86 + Closing) * *Focus:* Hooks (`useEffect`), Router/Context concepts, the full API frontend integration flow, and setting up the cliffhanger for Day 2. --- ### Prompts for Generating the Decks You can feed these prompts to an AI (like me) to generate each specific slide deck. *(Note: When using these, you would paste the corresponding text from your master document where it says `[Insert...]`)*. **Prompt for Part 1:** > "Generate a highly visual, professional slide deck for **Part 1: Web Fundamentals & Client-Server Architecture**. The target audience is students learning full-stack development. Focus heavily on the 'Restaurant' analogy and the mental model of how a browser communicates with a server and database. Use ultra-concise text (bullet fragments, no paragraphs) and rely on big flow diagrams, split layouts, and bold section dividers. Do not use dense text. Here is the source material to build the slides from: *[Insert Sections 1–14 here]*" **Prompt for Part 2:** > "Create an aesthetic, modern slide deck for **Part 2: HTML5 & CSS3**. Explain the transition from structure (HTML) to appearance (CSS). Emphasize Semantic HTML, the CSS Box Model, and layout systems like Flexbox and Grid. Use code snippets formatted cleanly, paired with brief explanations. Keep all body text under 8 words per bullet. Use card grids and comparison layouts to show 'Bad vs. Good' code. Here is the source material: *[Insert Sections 15–27 here]*" **Prompt for Part 3:** > "Generate a presentation deck for **Part 3: JavaScript Core & The DOM**. Focus on modern ES6 concepts critical for React: `let/const`, array methods (`map`, `filter`, `reduce`), and object destructuring. End the deck with the concept of the DOM and the manual counter exercise to show why manual DOM manipulation is painful. Use dark-mode slides for code blocks and light-mode slides for concept explanations. Keep the copy punchy and minimal. Here is the source material: *[Insert Sections 28–43 here]*" **Prompt for Part 4:** > "Design a presentation deck for **Part 4: APIs & Asynchronous JavaScript**. The core narrative is what happens when data takes time to load. Visually break down JSON, the concept of an API, Promises, `async/await`, and the Fetch API. Use visual timelines or step-by-step layouts to explain the asynchronous flow. Avoid dense paragraphs; use bold metrics and short fragments. Here is the source material: *[Insert Sections 44–56 here]*" **Prompt for Part 5:** > "Create a stunning slide deck for **Part 5: React.js Fundamentals**. This is the climax of the day. Start by answering 'Why React?' (solving the manual DOM problem). Cover Components, JSX rules, Props, and State (`useState`). Use the 'User Interaction -> Event Handler -> State Changes -> React Re-renders' cycle as a hero diagram. Use minimal, clean layouts with code on one side and a brief explanation on the other. Here is the source material: *[Insert Sections 57–75 here]*" **Prompt for Part 6:** > "Generate a closing presentation deck for **Part 6: Advanced React & API Integration**. Focus on connecting the React UI to the outside world using `useEffect` and `fetch()`. Briefly introduce Routing and Context as mental models. End with the 'Day 1 Final Architecture' showing the completed frontend, leaving a cliffhanger for Day 2 (building the backend). Make the design dramatic and satisfying, celebrating the students' progress. Keep text strictly to headlines and short fragments. Here is the source material: *[Insert Sections 76–86, 106, and Part XXXIII here]*" --- Follow Design: {"palette":["Obsidian Deep #0D1117 — main presentation canvas","React Cyan #61DAFB — primary focus and active states","JavaScript Gold #F7DF1E — key code accents and warnings","Terminal Mint #3FB950 — success badges and live endpoints","Slate Boundary #30363D — card borders and structural dividers","Code Muted Gray #8B949E — secondary labels and annotations"],"fonts":{"Space Grotesk":"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap","Inter":"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap","JetBrains Mono":"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"},"type":"Space Grotesk in bold 700 weight for punchy module headers; Inter in regular 400 with relaxed line-height for concept explanations; JetBrains Mono in medium 500 for inline code tags, HTTP routes, and syntax snippets.","layout":"Asymmetric 60/40 split-screen layout with concept diagrams on the left and live syntax panels on the right, punctuated by wide horizontal pipeline ribbons for client-server data flows.","framework_treatment":"Dark terminal container cards with macOS-style window controls, luminous cyan glow highlights on active architecture nodes, and crisp status chips indicating HTTP response codes.","feels_like":"A cutting-edge developer documentation site and high-end technical keynote"}

Full-Stack Development with MERN & AI Integration - Day 1

The idea behind this presentation

About this Full-Stack Development with MERN & AI Integration - Day 1 presentation example

Three things to review before creating your version

Story structure

Visual hierarchy

Design consistency

Turn inspiration into an original presentation