Modern Web Development

Building Scalable Web Applications

Presented by

Shashank Kumar

PhD Scholar (Computer Science) · Founder, EduSmartUp

Senior Full Stack Developer · 10+ Years Industry Experience

Full Stack (MERN / LAMP) AI & Machine Learning Trainer & Technical Mentor

Introduction

About Me — Industry, Academia & Community

Shashank Kumar

PhD Scholar (CS – AI), Usha Martin University

10+ years — Senior Full Stack Developer (React, Node.js, Laravel, MySQL)

8+ years teaching & mentoring — EduSmartUp, GDG Ranchi, IIM Rohtak E-Cell

Google India · Facebook PyTorch · Microsoft Azure ML · AWS ML Scholar

Research interest — Artificial Intelligence & Machine Learning

Journey at a Glance

2010–14B.Sc. Mathematics (Hons.), Ranchi University → MCA, IGNOU

2015Started as freelance Full Stack Developer for global clients

2017Founded EduSmartUp — ed-tech platform for learners & job aspirants

2018Founding member, GDG Ranchi · Google & Facebook AI scholarships

2019Lead Organizer, Google I/O Extended — hosted at this university

2022–25Software Developer → IT Head → Senior Full Stack Developer

NowPhD Scholar (AI), UMU · Mentor at IIM Rohtak E&I Council

Session Objectives

Learning Outcomes — What You Will Take Away

How the Internet Works

From URL to response — the request lifecycle

Client–Server Architecture

How browsers and servers talk over HTTP

Frontend Development

HTML, CSS, JavaScript & modern frameworks

Backend Development

Business logic, security & server-side code

Databases

SQL vs NoSQL — choosing the right store

APIs & REST

How frontend and backend exchange data

Full Stack Big Picture

How all layers combine into one product

Career Pathways

Roles, skills and salary trends in industry

Foundations

What is Web Development?

Web development is the art and engineering of building software that runs in a browser — from simple informational websites to complex, data-driven web applications.

Website

Purpose: Presents information to visitors

Interaction: Mostly static — read & navigate

Data: Little or no user-specific data

Example: A college website, a news portal, a blog

Web Application

Purpose: Lets users perform tasks & transactions

Interaction: Dynamic — login, create, buy, stream

Data: Per-user data stored in databases

Example: Amazon cart, Netflix player, Instagram feed

Products you use every day are web applications:

AmazonE-commerce at planet scale

NetflixVideo streaming to 300M+ users

InstagramSocial feed & media sharing

GoogleSearch across billions of pages

A Short History

Evolution of the Web — From Pages to Intelligence

Web 1.0

1991 – 2004

The Read-Only Web

Static HTML pages
One-way publishing
Directories & portals

Web 2.0

2004 – 2020

The Read-Write Web

Social & user content
AJAX, dynamic apps
Mobile & cloud era

Web 3.0

2020 – Now

The Read-Write-Own Web

Decentralization
Semantic, data-rich
Wallets & identity

AI-Powered Web

Now → Future

The Intelligent Web

Generative AI & LLMs
AI copilots & agents
Personalized for you

Each era did not replace the previous one — it built on top of it. Today's developers work across all four.

Under the Hood

How the Internet Works — Life of a Request

What happens in ~200 milliseconds when you type www.amazon.in and press Enter:

1 · Browser

You type a URL; browser prepares an HTTP request

2 · DNS

The internet's phone book: domain name → IP address

3 · Web Server

Request reaches the server at that IP (Nginx / Apache)

6 · Response

HTML/JSON travels back; browser renders the page

5 · Database

Application reads / writes the data it needs

4 · Application

Backend code runs business logic for the request

This loop is the map for today's session — frontend lives at steps 1 & 6, backend at 3–4, database at 5.

Layer 1 · The Client Side

Frontend Development — What the User Sees

The Three Pillars

HTML5Structure — the skeleton of every page

CSS3Style — layout, colors, responsiveness

JavaScriptBehavior — interactivity & logic in the browser

Modern Frameworks & Tools

ReactComponent-based UI — most in-demand skill

AngularFull framework by Google, used in enterprises

Next.jsReact + server-side rendering & routing

BootstrapReady-made responsive design components

Modern UI = A Tree of Components

● ● ● app.edusmartup.com

Reusable components → faster development, consistent design, easier testing

Layer 2 · The Server Side

Backend Development — The Engine Room

Popular Language + Framework Pairs

PHP

PHP + LaravelPowers a majority of the web incl. WordPress; elegant MVC

Py

Python + DjangoRapid development; first choice for AI-driven apps

JS

Node.js + ExpressJavaScript on the server; great for real-time apps

Jv

Java + Spring BootEnterprise standard — banking, telecom, large systems

My stack in industry: Laravel & Node.js in production for 10+ years

What the Backend is Responsible For

Business LogicRules of the application — pricing, results, workflows

Authentication & SecurityWho are you? What are you allowed to do?

API EndpointsServing data to web, mobile & third parties

Data OperationsValidating, storing & retrieving data safely

Performance & ScalingCaching, queues — serving lakhs of users

Layer 3 · The Memory

Databases — Where Applications Remember

	SQL (Relational)	NoSQL (Non-Relational)
Data Model	Tables with rows & columns	Documents, key-value, graphs
Schema	Fixed — defined before inserting data	Flexible — fields can vary per record
Query Language	SQL (SELECT, JOIN, GROUP BY)	API / JSON-style queries
Scaling	Vertical (bigger server) + read replicas	Horizontal (add more servers easily)
Consistency	Strong — ACID transactions	Tunable — often eventual consistency
Best For	Banking, ERP, orders, results, payments	Feeds, chats, catalogs, IoT, analytics
Examples	MySQL · PostgreSQL · MS SQL	MongoDB · Firebase · Redis · Cassandra

Rule of thumb: money & marks → SQL; massive flexible data → NoSQL. Large systems often use both (polyglot persistence).

Connecting the Layers

REST API Architecture — How Frontend Talks to Backend

Browser

User clicks
'View Courses'

Frontend

React sends
HTTP request

REST API

GET /api/courses
endpoint

Backend

Controller runs
business logic

Database

SELECT * FROM
courses

JSON response travels back to the browser

HTTP Methods = Verbs of the Web

GETRead data

POSTCreate data

PUTUpdate data

DELETERemove data

Response · 200 OK · application/json{
  "id": 101,
  "course": "Full Stack Web Development",
  "duration": "6 months",
  "mode": "Online"
}

The Complete Picture

Full Stack Architecture — Enterprise View

CLOUD (AWS / AZURE / GCP)

Client

Browser &
mobile apps

Frontend

React / Next.js
(HTTPS)

API Gateway

Routing &
rate limiting

Auth

JWT tokens,
OAuth 2.0

Backend

Node.js /
Laravel services

Database

MySQL +
MongoDB

What Makes It Scalable?

Load Balancing

Traffic split across many servers

Caching (Redis/CDN)

Serve repeat requests instantly

Microservices

Independent services scale separately

Security Layers

HTTPS, tokens, validation everywhere

Industry Case Study

EduSmartUp — A Real Full Stack Product I Built

EduSmartUp

Ed-tech platform (est. 2017) serving government-job aspirants and technology learners — content, courses, mentorship and certification.

TECH STACK

React Laravel MySQL REST API AWS

Student Dashboard

Courses, progress & tests in one place

Admin Dashboard

Manage users, content & analytics

Authentication

Secure login, roles & sessions (JWT)

Course Management

Create, publish & update courses

Payment Gateway

UPI / card checkout via payment APIs

Certificates

Auto-generated on course completion

End-to-End User Workflow

Register

Login

Browse Courses

Pay Securely

Learn & Practice

Get Certificate

Staying Current

Latest Trends Shaping Web Development (2026)

AI-Assisted Development

GitHub Copilot & ChatGPT — developers now review & direct AI-written code

Progressive Web Apps

Web apps that install, work offline & send notifications like native apps

Docker & Containers

'Works on my machine' → works everywhere; the unit of modern deployment

Cloud Computing

Rent servers by the second — AWS, Azure, GCP power most new products

DevOps & CI/CD

Code → test → deploy automatically, many times a day

Cyber Security

Security is now every developer's job — OWASP Top 10 is essential reading

Microservices

Break monoliths into small independent services (Netflix runs 1000+)

Serverless Computing

Just write functions — the cloud runs & scales them (AWS Lambda)

Your Future

Career Opportunities in Web Development

Roles You Can Grow Into

Frontend Developer

Backend Developer

Full Stack Developer

Software Engineer

Cloud Engineer

DevOps Engineer

AI / ML Engineer

Data Engineer

Average Salary in India (₹ LPA, indicative)

AI / ML

15

Data Eng.

13

DevOps

12

Cloud

11

Full Stack

9

Backend

7

Frontend

6

Mid-career averages; entry level ≈ 3–6 LPA, top product companies pay 2–4×. Source: industry salary surveys, 2025–26.

Skills Recruiters Ask For: JavaScript / TypeScriptReactNode.js / Laravel SQL + NoSQLGit & GitHubDocker & Cloud DSA + Problem Solving

Learning by Doing

Class Activity — Design an Online Library System

Design Challenge: Our university library wants to go digital. In teams of four, design an Online Library Management System — in 10 minutes.

Actors

Student / Member
Librarian
Administrator

Modules

Search & catalog
Issue / return
Reservations
Fines & notices

Database

books, members
transactions
reservations
Which keys? Why SQL?

API Endpoints

GET /api/books
POST /api/issue
POST /api/return
GET /api/fines/{id}

Tech Stack

React frontend
Node.js / Laravel
MySQL database
Deploy on cloud

Teams present in 60 seconds each → we compare designs and discuss trade-offs together.

Wrapping Up

Summary — Six Ideas to Remember

1

The web is a request–response loop

Browser → DNS → Server → App → Database → back. Master this map and every technology finds its place.

2

Full stack = three layers + glue

Frontend (what users see), Backend (the logic), Database (the memory), connected by APIs.

3

APIs are contracts

REST + JSON lets any frontend talk to any backend — web, mobile, even AI agents.

4

Scalability is designed, not added

Load balancing, caching, microservices and cloud make apps survive success.

5

AI is your co-developer

Use Copilot & ChatGPT — but fundamentals decide who directs whom.

6

Build to learn

Two or three real projects on GitHub will teach — and prove — more than any certificate.

THANK YOU

Questions & Discussion

"Tell me and I forget. Teach me and I remember. Involve me and I learn." — often attributed to Benjamin Franklin

shashank.kumar903@gmail.com

shashankkumar.in

in

in/mcashashankkumar

GH

mcashashankkumar

Shashank Kumar · PhD Scholar (Computer Science), Usha Martin University · Founder, EduSmartUp

Modern Web Development

About Me — Industry, Academia & Community

Shashank Kumar

Learning Outcomes — What You Will Take Away

How the Internet Works

Client–Server Architecture

Frontend Development

Backend Development

Databases

APIs & REST

Full Stack Big Picture

Career Pathways

What is Web Development?

Website

Web Application

Evolution of the Web — From Pages to Intelligence

Web 1.0

Web 2.0

Web 3.0

AI-Powered Web

How the Internet Works — Life of a Request

1 · Browser

2 · DNS

3 · Web Server

6 · Response

5 · Database

4 · Application

Frontend Development — What the User Sees

Backend Development — The Engine Room

Databases — Where Applications Remember

REST API Architecture — How Frontend Talks to Backend

Browser

Frontend

REST API

Backend

Database

Full Stack Architecture — Enterprise View

Client

Frontend

API Gateway

Auth

Backend

Database

Load Balancing

Caching (Redis/CDN)

Microservices

Security Layers

EduSmartUp — A Real Full Stack Product I Built

EduSmartUp

Student Dashboard

Admin Dashboard

Authentication

Course Management

Payment Gateway

Certificates

Latest Trends Shaping Web Development (2026)

AI-Assisted Development

Progressive Web Apps

Docker & Containers

Cloud Computing

DevOps & CI/CD

Cyber Security

Microservices

Serverless Computing

Career Opportunities in Web Development

Class Activity — Design an Online Library System

Actors

Modules

Database

API Endpoints

Tech Stack

Summary — Six Ideas to Remember

The web is a request–response loop

Full stack = three layers + glue

APIs are contracts

Scalability is designed, not added

AI is your co-developer

Build to learn

THANK YOU

Speaker notes