Full-Stack Web Development with React & Node.
js
Instructor Name: Minjurul Haque
Course Duration: 24 Classes
Course Description
This course offers an immersive, hands-on journey into the world of modern web
development. Students will start from foundational web technologies and progress to
advanced front-end development using React, back-end development with Node.js and
Express, and full-stack integration. Through practical projects, learners will gain real-world
experience building responsive, data-driven web applications with user authentication and
deployment.
By the end of the course, students will be able to build and deploy fully functional full-stack
web applications independently.
Pre-requisites
Basic computer literacy
Familiarity with HTML/CSS is helpful but not mandatory
Module 01 → Foundations of Web Development (Classes 1–6)
Lesson 1.1: Introduction to Web Development & Tools
What is web development? Front-end vs. Back-end vs. Full-stack.
How the internet works (HTTP, DNS, Servers, Clients).
Setting up your development environment (VS Code, Node.js, npm, Git).
Introduction to command line basics.
Lesson 1.2: HTML Fundamentals
Structure of an HTML document.
Common HTML tags (headings, paragraphs, lists, links, images).
Semantic HTML.
Basic forms.
Lesson 1.3: CSS Fundamentals
Styling with CSS (inline, internal, external).
Selectors (tag, class, ID, universal).
Box Model (margin, padding, border, content).
Basic typography and colors.
Lesson 1.4: CSS Layout & Responsiveness
Flexbox for layout.
CSS Grid for advanced layouts.
Introduction to responsive design (media queries).
Using a CSS framework (e.g., introduction to Bootstrap or Tailwind CSS).
Lesson 1.5: JavaScript Basics – Part 1
Introduction to JavaScript (what it is, where it runs).
Variables, data types (numbers, strings, booleans, null, undefined).
Operators (arithmetic, comparison, logical).
Conditional statements (if/else, switch).
Lesson 1.6: JavaScript Basics – Part 2
Loops (for, while, do-while, for...of, for...in).
Functions (declaration, expression, arrow functions).
Arrays and array methods.
Objects and object methods.
Module 02 → Front-End Development with React (Classes 7–15)
Lesson 2.1: Introduction to React & JSX
What is React? Why use a library/framework?
Setting up a React project (Create React App).
Understanding JSX syntax.
Components (functional components).
Lesson 2.2: React Components & Props
Creating and rendering multiple components.
Passing data with props.
Prop drilling and basic component composition.
Lesson 2.3: State Management in React (useState Hook)
Understanding component state.
Using the useState hook.
Handling user input and updating state.
Lesson 2.4: React Lifecycle & useEffect Hook
Component lifecycle (simplified concept).
Using the useEffect hook for side effects (data fetching, DOM manipulation).
Cleanup functions in useEffect.
Lesson 2.5: Event Handling & Forms in React
Handling various DOM events in React.
Controlled components for forms.
Form validation basics.
Lesson 2.6: React Router for Navigation
Introduction to Single Page Applications (SPAs).
Setting up React Router DOM.
Creating routes, links, and nested routes.
useParams hook.
Lesson 2.7: Advanced React Concepts (Context API)
Introduction to Context API for global state management.
createContext, Provider, useContext hooks.
When to use Context vs. props.
Lesson 2.8: Asynchronous JavaScript & API Integration
Promises and async/await.
Fetching data from APIs (using fetch or Axios).
Displaying fetched data in React components.
Error handling for API calls.
Lesson 2.9: React Front-End Project
Consolidate front-end skills by building a simple application (e.g., a basic to-do list, a simple
recipe app with mock data).
Focus on component structure, state management, and basic UI/UX.
Module 03 → Back-End Development with Node.js & Express (Classes 16–21)
Lesson 3.1: Introduction to Node.js & npm
What is Node.js? Server-side JavaScript.
Node.js runtime and event loop (basic understanding).
NPM (Node Package Manager) for managing dependencies.
Setting up a basic Node.js project.
Lesson 3.2: Building RESTful APIs with Express – Part 1
Introduction to Express.js framework.
Setting up an Express server.
Routing and handling HTTP methods (GET, POST).
Middleware.
Lesson 3.3: Building RESTful APIs with Express – Part 2
Handling PUT and DELETE requests.
Route parameters and query strings.
Sending JSON responses.
Error handling in Express
Lesson 3.4: Introduction to Databases (MongoDB & Mongoose)
What are databases? Relational vs. Non-relational (NoSQL).
Introduction to MongoDB (NoSQL database).
Setting up MongoDB Atlas (cloud database).
Introduction to Mongoose (ODM for MongoDB).
Lesson 3.5: Connecting Express to MongoDB with Mongoose
Defining Mongoose schemas and models.
Performing CRUD operations (Create, Read, Update, Delete) with Mongoose.
Integrating Mongoose into Express routes.
Lesson 3.6: User Authentication & Authorization
Hashing passwords (e.g., bcryptjs).
Introduction to JSON Web Tokens (JWT) for authentication.
Implementing basic user registration and login.
Protecting API routes with JWT middleware.
Module 04 → Full-Stack Integration & Deployment (Classes 22–24)
Lesson 4.1: Connecting Front-end (React) to Back-end (Node.js)
Making API calls from React to the Node.js backend.
Handling CORS issues.
Integrating user authentication on the front-end.
Displaying data from the database in the React app.
Lesson 4.2: Full-Stack Project Development
Work on a more complex full-stack project (e.g., a simple blog, an e-commerce catalog, a task
management app).
Focus on integrating front-end and back-end functionalities.
Implement features like adding, editing, deleting data, and displaying it dynamically.
Lesson 4.3: Deployment & Next Steps
Deployment strategies for React applications (e.g., Netlify, Vercel).
Deployment strategies for Node.js applications (e.g., Render, Heroku, or basic VPS setup).
Brief introduction to environmental variables for deployment.
Version control with Git & GitHub (review and best practices).
Tips for continuing learning and career development.
Important Considerations for the Course:
Hands-on Practice: Each class should involve significant hands-on coding exercises and small
projects to reinforce concepts.
Real-world Projects: Encourage students to build small, tangible projects throughout the course
to create a portfolio.
Debugging: Emphasize debugging techniques for both front-end and back-end.
Version Control: Strongly encourage and actively use Git and GitHub from the beginning.
Community & Resources: Point students to online resources, documentation, and developer
communities.
Flexibility: This is a template; adjust the depth and focus based on the students' pace and
interests. Some topics might require more than one session if a deep dive is desired.
Pre-requisites: While designed for beginners, a basic understanding of computer literacy and
problem-solving skills would be beneficial.
