UNIT-1 FULL STACK AMT

Full-Stack Development

Definition:
Full-Stack Development refers to the process of developing both the front-end
(client-side) and back-end (server-side) of a web application.
A Full-Stack Developer is proficient in working on the entire technology stack
used in web development, enabling them to build complete, fully functional
web applications independently.

Main Components of Full-Stack Development:

1. Front-End Development (Client-Side)
• It focuses on what users see and interact with in a browser.
• Key Technologies:
o HTML (HyperText Markup Language) – Provides the structure
of web pages.
o CSS (Cascading Style Sheets) – Styles the layout and design of
web pages.
o JavaScript – Adds interactivity and dynamic content.
• Popular Frameworks/Libraries:
o React.js, Angular, Vue.js, Bootstrap
2. Back-End Development (Server-Side)
• Handles the logic, database operations, and server configuration.
• Key Technologies:
o Programming Languages: Node.js, Python, Java, PHP, Ruby
o Frameworks: Express (Node.js), Django (Python), Spring (Java),
Laravel (PHP)
3. Database Management
• Stores and retrieves data used by the application.
• Types of Databases:
o Relational Databases: MySQL, PostgreSQL, SQLite
o NoSQL Databases: MongoDB, Firebase
4. Version Control Systems
• Used for tracking changes in code and collaboration among developers.
• Common Tools: Git, GitHub, GitLab, Bitbucket
5. Deployment & Hosting
• Makes the application accessible over the internet.
• Tools and Platforms:
o Hosting: Heroku, Netlify, Vercel
o DevOps Tools: Docker, Jenkins
o Cloud Services: AWS, Azure, Google Cloud Platform

Skills Required for Full-Stack Developer:

• Proficiency in front-end technologies (HTML, CSS, JavaScript)
• Knowledge of back-end programming languages and frameworks
• Experience with database management systems
• Familiarity with APIs (REST, GraphQL)
• Understanding of version control and basic DevOps
• Problem-solving and debugging skills

Advantages of Full-Stack Development:

• Full control and understanding of the entire development process
• Cost-effective for startups (fewer developers required)
 • Flexibility to work on both client and server sides
• High demand in the job market

Example: Full-Stack Blog Application

Client-Server Architecture

Definition:
Client-Server Architecture is a model in which clients request services and
servers provide them. It separates the system into service consumers (clients)
and service providers (servers), enabling centralized control and management.

Purpose:
• To separate concerns (UI, logic, and data)
• Improve scalability and security
• Allow better system management

Types of Client-Server Architecture:

A. 2-Tier Architecture
Structure:
 • Consists of two layers:
1. Client Tier
2. Server Tier
Explanation:
• The client communicates directly with the database server.
• The business logic can reside on the client or shared with the server.
• Common in small applications.
Example:
• A desktop application directly interacting with a MySQL database.
Diagram:

Advantages:
• Simple to design and implement
• Faster communication (fewer layers)
Disadvantages:
• Poor scalability
• Security risks (direct access to database)
• Difficult to maintain or update logic across many clients

B. 3-Tier Architecture
Structure:
• Consists of three layers:
1. Presentation Tier (Client)
2. Application Tier (Server)
 3. Data Tier (Database Server)
Explanation:
• The client sends requests to the application server, which processes the
request and interacts with the database server.
• The business logic resides in the application layer.
• Most modern web apps use this model.
Example:
• A web browser (client) sends a request to a Node.js server, which
retrieves data from a MongoDB database.
Diagram:

Advantages:
• Better scalability and maintainability
• Improved security (clients don’t access database directly)
• Clear separation of concerns
Disadvantages:
• More complex setup
• Slightly higher latency (due to additional layer)
3. Overview of Technologies in Full-Stack Development

Full-stack development involves working with a variety of technologies across

both front-end and back-end, along with database, version control, and
deployment tools.

A. Front-End Technologies (Client-Side)

These technologies are used to design and control what the user sees in the
browser. The goal is to create responsive, interactive, and user-friendly
interfaces.
1. HTML (HyperText Markup Language)
• It is the skeleton of web pages.
• Defines the structure of content using tags like <div>, <h1>, <p>,
<img>, etc.
• Example:
• <h1>Welcome to My Website</h1>
• <p>This is a paragraph.</p>
2. CSS (Cascading Style Sheets)
• It controls the layout and visual presentation of HTML elements.
• CSS can be written inline, internally in <style> tags, or externally using
.css files.
• CSS frameworks like Bootstrap make it easier to design with pre-built
styles.
• Example:
3. JavaScript
• A scripting language used to make web pages interactive.
• Can modify HTML and CSS dynamically (DOM manipulation).
• Used for form validation, interactive elements like dropdowns, sliders,
animations.
• Example:

4. Front-End Frameworks/Libraries
• Help to build complex UIs efficiently.
• Examples:
o React.js – Component-based, used in single-page applications.
o Angular – Full-featured framework, includes everything like
routing and services.
o Vue.js – Lightweight, flexible, beginner-friendly.

B. Back-End Technologies (Server-Side)

These technologies run on the server and handle business logic, data
processing, and communication with the database.
1. Programming Languages
• Used to write server-side logic.
• Common back-end languages:
o JavaScript (Node.js) – Allows using JavaScript on the server.
o Python – Popular for simplicity and used in AI, ML, and backend
with frameworks like Django.
o Java – Used for enterprise-level applications, strong type system.
o PHP – Widely used for websites, especially with WordPress.
 o Ruby – Known for the Ruby on Rails framework.
2. Back-End Frameworks
• Help build server-side applications quickly by providing reusable code
and structure.
• Examples:
o Express.js (Node.js): Lightweight and flexible.
o Django (Python): Comes with many built-in features, suitable for
rapid development.
o Spring Boot (Java): Ideal for microservices and scalable
applications.
o Laravel (PHP): Clean syntax, good for modern PHP applications.

C. Database Technologies
Databases are used to store, retrieve, update, and delete data.
1. Relational Databases (SQL)
• Structured using tables, rows, and columns.
• Use SQL (Structured Query Language) for operations.
• Examples:
o MySQL, PostgreSQL, SQLite
• Best suited for data with clear relationships (e.g., user orders in an e-
commerce site).
2. NoSQL Databases
• Store data in flexible formats like key-value pairs, documents, or graphs.
• Good for handling unstructured or semi-structured data.
• Examples:
o MongoDB (document-based, JSON format)
o Firebase (real-time, cloud-hosted database)
D. Version Control System
Version control allows developers to track and manage code changes and
collaborate effectively.
• Git: Most widely used version control tool.
• GitHub / GitLab / Bitbucket:
o Cloud-based platforms for storing Git repositories.
o Help in code sharing, issue tracking, collaboration.

E. Deployment and Hosting Platforms

Used to launch applications on the web so that users can access them via
browsers.
• Heroku: Easy-to-use platform for deploying full-stack apps.
• Netlify: Popular for deploying static front-end sites (e.g., React, Vue).
• Vercel: Optimized for React and Next.js.
• AWS / Azure / GCP: Offer scalable cloud infrastructure with advanced
services (database, storage, computing).

F. API Technologies
APIs (Application Programming Interfaces) allow communication between
different software systems.
• REST (Representational State Transfer):
o Uses HTTP methods (GET, POST, PUT, DELETE)
o Example: GET /users → fetch user data
• GraphQL:
o Developed by Facebook
o Allows clients to request only specific data they need
o More efficient than REST in some cases
G. Tools and Utilities
These are helpful tools used during development, testing, and debugging.
• Postman: For testing APIs by sending requests and viewing responses.
• Docker: Helps in containerizing applications – run the same code on
any system.
• NPM (Node Package Manager): Used to install JavaScript libraries and
tools.
• Webpack / Vite: Module bundlers – they combine and optimize code for
production.