Full Stack Web Development with Hands-On Lab

(IT3501–Full Stack Web Development & IT3511–Full Stack Web Development Lab)

As per the Latest Syllabus of Anna University, Chennai

(Regulation 2021)

B.Tech. Information Technology

Dr. S. Nithyanantham,
Associate Professor
School of Engineering
Department of Computer Science and Engineering
Kalasalingam Academy of Research and Education
Anand Nagar, Krishnankoil.

Mr. K. Sriram Kumar, B.E., M.E., (Ph.D.),

Assistant Professor,
Department of Information Technology,
Karpagam Institute of Technology,
Coimbatore

Mr. S. Arunprasath B.E., M.E., (Ph.D.),

Research scholar,
SRM University,
Chennai

Mr. P. Krishna Sankar, B.E., M.E.,

Freelance Entrepreneur / Consultant

Kavindapadi

A.R.S. Publications
No. 11, Veerabathra Nagar, Part II,
8th Street, Medavakkam,
Chennai – 600 100, Tamil Nadu, India.
Phone: 044 – 48587467, Mobile: 9840025186
eMail: arspublications@gmail.com
web: www.arspublications.com
 PREFACE
This book “Full Stack Web Development with Hands-On Lab” is about basic idea towards web
development framework with MEAN and MERN stack. It provides hands on experience on Node.js,
MongoDB, Express, Angular and React. It affords procedural footsteps for developing a full stack
application using MEAN and MERN stack.

Unit I: Provides an introductory idea towards Full stack, Web development framework, Web,
Web Browser and Web Server. Contributes knowledge on MVC Architecture and
components of MEAN & MERN stack.
Unit II: Outline on NodeJS Installation, handling Node packages, usage of Events, Listeners,
Timers, Callbacks and I/O handling. Illustrative idea on developing a simple NodeJs
application and implementing HTTP services using NodeJS.
Unit III: Provides an descriptive idea on NoSQL, MongoDB, User management, Database
management and installing MongoDB. Hands-on experience over the creating the user,
database and collections. Simple Node.js application has been developed to connect
with MongoDB to provide a practical idea.
Unit IV: Brief knowledge over Express in Node.js, TypeScript and Angular. It provides detailed
understanding and procedures to configuring routes, expression, data binding and usage
of Built-in directives.
Unit V: Provides a study over MERN stack and React application development. Understanding
towards React components, state, modularization, webpack and routing. Illustrative idea
on developing EXPRESS REST API, simple MERN stack application and optimizing the
Server-side rendering.

Unit VI: It provides an idea on full-stack application development using MERN and MEAN stack.
 ACKNOWLEDGEMENT

Primarily, we would like to thank God. In the process of putting this book together, we realized

how true this gift of writing is for us to share our knowledge. You give us the power to believe in our

passion and pursue our dreams. We could never have done this without the faith we have in you, the

Almighty.

We wholeheartedly thank next God, thy Parents, for showing faith with us and giving us

liberty to choose what we desire. We salute you all for the selfless love, care, pain and sacrifice you did to

shape our life.

We sincerely thank our Colleagues, Friends and Well-wishers for their understanding, patience in

addition, constant encouragement.

Finally, we offer our special thanks to Thiru. A. Ramesh, A. R. S. Publishers and his Colleagues for

their tireless effort in overseeing the production of the book.

The authors would be happy to collect opinion for supplementary improvement of the book.

Dr. S. Nithyanantham

Mr. K. Sriram Kumar

Mr. S. Arun Prasath

Mr. P. Krishna Sankar

IT3501 FULL STACK WEB DEVELOPMENT

UNIT I BASICS OF FULL STACK 9

Understanding the Basic Web Development Framework - User - Browser – Webserver - Backend
Services – MVC Architecture - Understanding the different stacks –The role of Express – Angular
– Node – Mongo DB – React.

UNIT II NODE JS 9

Basics of Node JS – Installation – Working with Node packages – Using Node package manager –
Creating a simple Node.js application – Using Events – Listeners –Timers - Callbacks – Handling
Data I/O – Implementing HTTP services in Node.js

UNIT III MONGODB 9

Understanding NoSQL and MongoDB – Building MongoDB Environment – User accounts –

Access control – Administering databases – Managing collections – Connecting to MongoDB
from Node.js – simple applications

UNIT IV EXPRESS AND ANGULAR 9

Implementing Express in Node.js - Configuring routes - Using Request and Response objects -
Angular - Typescript - Angular Components - Expressions - Data binding - Built-in directives

UNIT V REACT 9

MERN STACK – Basic React applications – React Components – React State – Express REST APIs -
Modularization and Webpack - Routing with React Router – Server-side rendering
IT3511 FULL STACK WEB DEVELOPMENT LAB

LIST OF EXPERIMENTS:

The Instructor can choose the technology stack to develop the following full stack experiments
– based on the Full Stack Web Development Theory Course.

1. Develop a portfolio website for yourself which gives details about yourself for a potential
recruiter.
2. Create a web application to manage the TO-DO list of users, where users can login and
manage their to-do items
3. Create a simple micro blogging application (like twitter) that allows people to post their
content which can be viewed by people who follow them.
4. Create a food delivery website where users can order food from a particular restaurant listed
in the website.
5. Develop a classifieds web application to buy and sell used products.
6. Develop a leave management system for an organization where users can apply different
types of leaves such as casual leave and medical leave. They also can view the available
number of days.
7. Develop a simple dashboard for project management where the statuses of various tasks are
available. New tasks can be added and the status of existing tasks can be changed among
Pending, InProgress or Completed.
8. Develop an online survey application where a collection of questions is available and users
are asked to answer any random 5 questions.
 CONTENTS
UNIT I
BASICS OF FULL STACK
1.1 Understanding the Basic Web Development Framework 2
1.1.1 User 2
1.1.2 Browser 3
1.1.3 Webserver 5
1.1.4 Backend Services 6
1.2 MVC Architecture 6
1.2.1 Model 7
1.2.2 View 8
1.2.3 Controller 8
1.2.4 Flow of interaction in the MVC architecture 8
1.2.5 Advantages of MVC architecture 8
1.2.6 Disadvantages of MVC Architecture 9
1.3 Understanding the different stacks 9
1.3.1 Full Stack Frameworks 10
1.3.2 Role of Express 12
1.3.3 Angular 13
1.3.4 Node 14
1.3.5 Mongo DB 15
1.3.6 React 17

UNIT II
NODE JS
2.1 Basics of Node JS 3
2.1.1 Who uses Node.js? 3
2.1.2 What is Node.js Used For? 4
2.2 Installing Node.js 4
2.2.1 Looking at the Node.js Install Location 4
2.2.2 Verify Node.js Executables 4
2.2.3 Selecting a Node.js IDE 5
2.3 Working with Node packages 5
2.3.1 What is Node Packaged Modules? 6
2.3.2 Understanding the Node Package Registry 6
2.3.3 Using Node package manager 7
2.3.4 Searching for Node Package Modules 7
2.3.5 Installing Node Packaged Modules 8
2.3.6 Using package.json 9
2.4 Creating a simple Node.js application 11
2.4.1 Creating a Node.js Packaged Module 11
2.4.2 Publishing a Node.js Packaged Module to the NPM Registry 13
2.4.3 Using a Node.js Packaged Module in a Node.js Application 14
2.5 Writing Data to the Console 15
2.6 Using Events 16
2.6.1 Comparing Event Callbacks and Threaded Models 17
2.6.2 Blocking I/O in Node.js 18
2.6.3 Conversation Example 19
2.7 Adding Work to the Event Queue 21
2.7.1 Implementing Timers 21
2.7.2 Using nextTick to Schedule Work 25
2.7.3 Implementing Event Emitters and Listeners 25
2.8 Implementing Callbacks 28
2.8.1 Passing Additional Parameters to Callbacks 29
2.8.2 Implementing Closure in Callbacks 30
2.8.3 Chaining Callbacks 31
2.9 Handling Data I/O 32
2.9.1 Working with JSON 32
2.9.2 Using the Buffer Module to Buffer Data 34
2.9.3 Using the Stream Module to Stream Data 40
2.9.4 Compressing and Decompressing Data with Zlib 49
2.10 Implementing HTTP services in Node.js 52
2.10.1 Processing URLs 52
2.10.2 Processing Query Strings and Form Parameters 54
2.10.3 Understanding Request, Response, and Server Objects 55
2.10.4 Implementing HTTP Clients and Servers in Node.js 62
2.10.5 ImplementingHTTPS Servers and Clients 71

UNIT III
MONGODB
3.1 Understanding NoSQL and MongoDB 3
3.1.1 No SQL 3
3.1.2 MongoDB 4
3.1.3 Understanding MongoDB 5
3.1.4 MongoDB Data Types 6
3.1.5 Planning Your Data Model 8
3.1.6 MongoDB Basics 15
3.2 Building MongoDB Environment 18
3.2.1 Installing MongoDB 18
3.2.2 Starting Mongo DB 18
3.2.3 Stopping Mongo DB 20
3.2.4 Accessing MongoDB from the Shell Client 20
3.3 User accounts 23
3.3.1 Listing Users 23
3.3.2 Creating User 24
3.3.3 Removing Users 25
3.4 Access control 25
3.4.1 Creating a User Administrator Account: 26
3.4.2 Turning on Authentication 26
3.4.3 Creating a Database Administrator Account 27
3.5 Administering Databases 27
3.6 Managing collections 28
3.6.1 Displaying a List of Collections in a Database 28
3.6.2 Creating Collections 28
3.6.3 Deleting Collections 29
3.6.4 Finding Documents in a Collection 29
3.6.5 Adding Documents to a Collection 29
3.6.6 Deleting Documents in a Collection 30
3.6.7 Updating Documents in a Collection 30
3.7 Connecting to MongoDB from Node.js 30
3.7.1 Adding the MongoDB Driver to Node.js 30
3.7.2 Connecting to MongoDB from Node.js 31
3.7.3 Write Concern 31
3.7.4 Connecting to MongoDB from Node.js using MongoClient Object 31
3.8 Simple Applications using Node.js and MongoDB CRUD Operation 34
3.8.1 Set up project dependencies 34
3.8.2 Create a file called app.js and add the following code 34
3.8.3 Save file and start the application by running following command in your terminal or
command prompt: 37
3.8.4 Output 37

UNIT IV
EXPRESS AND ANGULAR
4.1 Implementing Express in Node.js 3
4.1.1 Configuring Express Settings 3
4.1.2 Starting the Express Server 4
4.2 Configuring routes 6
4.2.1 Implementing Routes 6
4.2.2 Applying Parameters in Routes 7
4.3 Using Request objects 13
4.4 Using Response objects 15
4.4.1 Setting Headers 15
4.4.2 Setting the Status 16
4.4.3 Sending Response 17
4.4.4 Sending JSON Responses 18
4.4.5 Sending Files 21
4.4.6 Sending a Download Response 23
4.4.7 Redirecting the Response 24
4.5 Implementing a Template Engine 25
4.5.1 Defining the Engine 26
4.5.2 Adding Locals 27
4.5.3 Creating Templates 27
4.5.4 Rendering Templates in a Response 29
4.5.5 Understanding Middleware 32
4.5.6 Using the query Middleware 34
4.5.7 Serving Static Files 34
4.5.8 Handling POST Body Data 37
4.5.9 Sending and Receiving Cookies 39
4.5.10 Implementing Sessions 41
4.5.11 Applying Basic HTTP Authentication 43
4.5.12 Implementing Session Authentication 44
4.5.13 Creating Custom Middleware 47
4.6 Angular 49
4.6.1 Understanding Angular 49
4.6.2 Separation of Responsibilities51
4.6.3 Adding Angular to Your Environment 52
4.6.4 Using the Angular CLI 52
4.6.5 Creating a Basic Angular Application 53
4.7 Typescript 61
4.7.1 Learning the Different Types 61
4.7.2 Understanding Interfaces 64
4.7.3 Implementing Classes 65
4.7.4 Implementing Modules 67
4.7.5 Understanding Functions 68
4.8 Angular Components 69
4.8.1 Component Configuration 69
4.8.2 Building a Template 70
4.8.3 Using Constructors 73
4.8.4 Using External Templates 74
4.8.5 Injecting Directives 77
4.9 Expressions 82
4.9.1 Using Expressions 82
4.9.2 Using Pipes 90
4.9.3 Building a Custom Pipe 95
4.10 Data binding 98
4.10.1 Interpolation 98
4.10.2 Property Binding 100
4.10.3 Attribute Binding 102
4.10.4 Class Binding 102
4.10.5 Style Binding 104
4.10.6 Event Binding 105
4.10.7 Two-Way Binding 109
4.11 Built-in directives 110
4.11.1 Components Directives 111
4.11.2 Structural Directives 111
4.11.3 Attribute Directives 115

UNIT V
REACT
5.1 MERN STACK 3
5.1.1 React 3
5.1.2 Node.js 6
5.1.3 Express 8
5.1.4 MongoDB 8
5.2 Basic React applications – Server-Less Hello World 13
5.2.1 JSX 16
5.2.2 Project Setup 18
5.2.3 Express 21
5.2.4 Separate Script File 24
5.2.5 JSX Transform 25
5.3 React Components 27
5.3.1 Issue Tracker 27
5.3.2 React Classes 28
5.3.3 Composing Components 30
5.3.4 Passing Data Using Properties 32
5.3.5 Passing Data Using Children 37
5.3.6 Dynamic Composition 39
5.4 React State 42
5.4.1 Intial State 42
5.4.2 Aync State Initialization 44
5.4.3 Updating State 47
5.4.4 Lifting State Up 51
5.4.5 Event Handling 55
5.4.6 Stateless Components 60
5.4.7 Designing Components 62
5.5 Express REST APIs 64
5.5.1 API client 64
5.5.2 API request 65
5.5.3 API server 66
5.5.4 API response 66
5.5.5 Sample RESTful API 67
5.6 Modularization and Webpack73
5.6.1 Back-End Modules 74
5.6.2 Front-End Modules and Webpack 75
5.6.3 Transform and Bundle 76
5.6.4 Libraries Bundle 79
5.6.5 Hot Module Replacement 82
5.6.6 Debugging 87
5.6.7 DefinePlugin: Build Configuration 89
5.6.8 Production Optimization 90
5.7 Routing with React Router 91
5.7.1 Simple Routing 92
5.7.2 Route Parameters 98
5.7.3 Query Parameters 100
5.7.4 Links 105
5.7.5 Programmatic Navigation 106
5.7.6 Nested Routes 110
5.7.7 Browser History Router 111
5.8 Server-side rendering 112
5.8.1 New Directory Structure 113
5.8.2 Basic Server Rendering 114
5.8.3 Webpack for Server 117
5.8.4 HMR for Server 118
5.8.5 Server Router 119
5.8.6 Hydrate 120
5.8.7 Data from API 122
5.8.8 Syncing Initial Data 123
5.8.9 Common Data Fetcher 125
5.8.10 Generated Routes 127
5.8.11 Data Fetcher with Parameters 132
5.8.12 Data Fetcher with Search 136
5.8.13 Nested Components 140
5.8.14 Redirects 146

UNIT VI
Lab Program
6.1 Create a web application to manage the TO-DO list of users, where users can login and
manage their to-do items. (MEAN Stack) 2
6.1.1 Outline Architecture 2
6.1.2 Procedure 2
6.2 Create a simple micro blogging application (like twitter) that allows people to post their
content which can be viewed by people who follow them. (MERN Stack) 12
6.2.1 Outline Architecture 12
6.2.2 Procedure 12
References:
1. Brad Dayley, Brendan Dayley, Caleb Dayley, ‘Node.js, MongoDB and Angular
WebDevelopment’, Addison-Wesley, Second Edition, 2018.
2. Vasan Subramanian, ‘Pro MERN Stack, Full Stack Web App Development with Mongo,Express,
React, and Node’, Second Edition, Apress, 2019.
3. Chris Northwood, ‘The Full Stack Developer: Your Essential Guide to the Everyday
SkillsExpected of a Modern Full Stack Web Developer’, Apress; 1st edition, 2018
4. Kirupa Chinnathambi, ‘Learning React: A Hands-On Guide to Building Web Applications
5. Using React and Redux’, Addison-Wesley Professional, 2nd edition, 2018
6. https://www.tutorialspoint.com/the_full_stack_web_development/index.asp
7. https://www.coursera.org/specializations/full-stack-react
8. https://www.udemy.com/course/the-full-stack-web-development/