Web Tech Prep

Web Development
Building Websites and Applications
Consists of;
- Frontend
- Backend
- Database

Frontend;
Client-Side Part. Handles what the user sees such as buttons pages etc. Sends
requests to backend.
Examples;
- Login Page
- Buttons
- Forms
Responsibilities;
- Display Data
- Take User Input
- Send Requests to Backend
- Show Responses
Technologies;
- HTML, CSS, JavaScript
- TypeScript
Frameworks;
- Angular
- React
- Vue
Backend;
Server-Side Part. Handles logic, calculations and security.
Responsibilities;
- Business Logic
- Authentication
- Authorization
- API Creation
- Database Communication
Technologies / Languages;
- C#
- Java
- Python
- JavaScript ([Link])
- PHP
Frameworks;
- [Link] Core
- Django
- [Link]
- Django
Database;
Stores application’s data permanently in servers. Data is stored in either
tables, keys, or pairs and CRUD (CREATE, READ, UPDATE, DELETE) operations
are done by the user.
It mainly has 2 types;
- Relational Database (SQL)
- Non-Relational Database (NoSQL)

Relational Database (SQL);

Uses SQL (Structured Query Language).
Stores Data in tables with fixed rows and columns like excel sheets.
Provides Relationships between Tables instead of repeating tables by
assigning Foreign Keys from one table to another
It has Strict Schemas to avoid errors such as Datatype Mismatch assignment
(can’t assign a Number to a column of Datatype TEXT).

ACID Properties;
- Atomicity (“All or Nothing”);
Atomicity guarantees that a transaction is treated as a single, indivisible
unit. Either all SQL statements execute successfully, or none of them take
effect. If a single operation fails midway through a transaction, the SQL
engine executes a ROLLBACK to discard any partial modifications,
restoring the database to its pre-transaction state.
- Consistency (Preserving Rules);
Consistency ensures that a transaction can only bring the database from
one valid state to another, adhering to all predefined rules. These rules
include schema constraints (such as NOT NULL, UNIQUE keys, or
FOREIGN KEY references) and specific database triggers. If a transaction
attempts to write invalid data that breaches a rule, SQL terminates the
query and rejects the changes.
 - Isolation (Independent Execution);
Isolation ensures that concurrently running transactions do not interfere
with each other. The database forces transactions to execute in a manner
that behaves as if they were running sequentially, one after another. This
keeps uncommitted data modifications hidden from outside sessions
until a formal COMMIT is executed. Without proper isolation levels,
database might face multi-user data anomalies.
- Durability (Permanent Storage);
Durability guarantees that once a transaction successfully commits, its
changes are permanently saved in non-volatile storage (such as a hard
drive or solid-state disk). The modifications will not be lost, even if the
database server experiences an immediate power loss, operating system
crash, or system reboot right after the commit.
Property Core Focus SQL Keyword / Mech
Atomicity All or Nothing Execution BEGIN TRANSACTION,
COMMIT, ROLLBACK
Consistency Keeping Data Valid PRIMARY KEY, FOREIGN
KEY, CHECK constraints
Isolation Concealing SET TRANSACTION
Uncommitted Changes ISOLATION LEVEL Locks
Durability Making Data Permanent Transaction Logs, Write
Ahead Logging (WAL)

Advantages;
- Structured
- ACID Properties
- Strong Consistency
Disadvantages;
- Less Flexible
Non-Relational Database (NoSQL);
Includes Rigid Table Structure entirely. They do not use Rows and Columns.
Instead they store data in flexible formats. Most common are Documents
(Which look like JSON files or Folders of Text).

If a new student registers and wants to add a list of their past tech projects,
you can just add a "projects" field only to their document. The database
doesn't care that other students don't have that field.
NoSQL Databases have Dynamic Schemas which are extremely flexible, we
can add different fields on the go without disturbing the other fields or rewriting
the whole database structure.
NoSQL Databases are better in Scalability as they can store massive scales of
data because it is stored in documents which are independent of each other.
Examples;
- MongoDB
- Cassandra
- Redis
Advantages;
- Flexible Schema
- Easy Scaling
Disadvantages;
- Weaker Consistency (Sometimes)
 HTTP / HTTPs
HTTP;
Stands for Hyper Text Transfer Protocol
used for communication between
Browser → Server
If a user sends a requests of “GET /products” then the server responds with
200 OK
HTTP is;
- Fast
- Stateless
- Not Encrypted

HTTPs;
HTTPs = HTTP + Secure (SSL / TLS Encryption)
What is SSL / TSL?
SSL (Secure Sockets Layer) and TLS (Transport Layer Security) are
cryptographic protocols that encrypt data sent over the internet. These are
required in production / deployment.
TLS is a modern and more secure version of SSL
They Provide;
- Encryption: Scrambles data to prevent hackers from reading your
passwords or personal information
- Authentication: Uses digital certificates to prove the website is
authentic, ensuring you are not connected to a fake lookalike site.
- Data Integrity: Verifies that data is not altered, tampered with, or
corrupted while traveling across the network.
HTTP Methods;
- GET: Retrieve Data GET /users
- POST: Create Data POST /users
- PUT: Update Complete Record PUT /users/1
- DELETE: Delete Record DELETE /users/1
- PATCH: Update Partial Record PATCH /users/1

API
API = Application Programming Interface
A bridge between Software systems.
if frontend requests for data using a GET method then the backend responds
with a JSON format data.

Advantages;
- Communication
- Reusability
- Separation of concerns
- Integration with other systems
Types;
- RESTful APIs (JSON / Text)
- GraphQL (JSON)
- SOAP (XML)
- WebSockets (Text / Binary)
 REST API
REST = Representational State Transfer
Most Commonly Used. It uses http methods like GET, POST, PUT, DELETE.
REST APIs are Stateless meaning that the server requires all the necessary
information in each requests as it does not remember the previous requests.
This reduces Server Load
Increases Scalability across different servers without them having to Sync.
Caching Support because APIs will be self-contained so network routers and
browsers can easily cache popular responses and hence reducing server
traffic.
Advantages;
- Simple, Scalable, Easier to Understand

FastAPI
Python Backend Framework
Features;
- Fast
- Automatic Documentation
- Type Hints
- Async Support
Used for;
- AI APIs
- Machine Learning Services
- Modern Backend Systems
 Other Types
SOAP;
Older protocol
Uses XML
Highly Secured and used by Enterprise Systems.
Complex

GraphQL;
Client Requests Exact required data.
Such as
{
user {
name
}
}
Returns only name.
Advantages;
- Uses Less bandwidth
- Flexible
Authentication (AuthN);
Process of verifying your identity.
“Who Are You?”
System Checks before giving you access to anything private, it needs proof.
Such methods are Passwords, OTP, Biometrics, etc.
Authorization;
Happens after authentication is successful, once the system knows who
you are then it determines your level and permissions.
"What are you allowed to do?"
Provides permissions to certain things and prevents from some depending
on the permissions you have.
Methods;
- Role-Based Access Control (RBAC): Assigning permissions to
specific roles such as Admin, Moderator, Guests, etc.
- Access Control Lists (ACL): Specifying exactly which individual
users can read, or execute a specific file or resource.
Feature Authentication Authorization
Core Question “Who Are You?” “What Can You Do?”
Sequence Happens First Happens Second
(After AuthN)
Data Handled Login Credentials, User Roles, policies,
Biometric, tokens, etc permissions
Visibility Visible to the User Mostly Invisible
(Ex: Login Page) (Backend Logic)
Common Authentication Methods;
- Session-Based;
Server stores session, Browser stores the session ID.
- JWT (JSON Web Token);
Server issues token, client sends token with each request, Popular in
APIs
- OAuth (Open Authorization);
Handles limited access to your data by third party applications. This is
used by Google, Github, Facebook, etc.

Web Security
SQL Injection (SQLi);
Severe security vulnerability where an attacker manipulates a website’s
input forms or URLs to sneak malicious SQL commands directly into a
backend database query.
The query becomes an executable code instead of plain text which then
hackers use to bypass login screens, steal or view personal data.
How to Avoid;
- Parameterized Queries;
it prepares a SQL query statement first then treats the user input value
as a safe literal value, never as an executable code.
- ORMs (Object Relational Mapping);
Tools like Entity Framework (C#), Hibernate (Java), SQLAlchemy
(Python) or Prisma (JavaScript/TypeScript). These libraries provide
automatic parameterized queries making it difficult for hackers to
write executable commands.
- Input Validation and Sanitization;
Validation on user input, check for datatypes.
Cross-Site Scripting (XSS);
XSS is a vulnerability where an attacker manages to inject malicious client-
side code (usually JavaScript) into a trusted website. The website then
unwittingly delivers this malicious script straight to an unsuspecting user's
browser. Because the browser believes the script came from a trusted
source, it executes it without question.
Once executed, that script can steal session cookies, hijack accounts, log
keystrokes, or redirect the user to a fraudulent page.
How to Avoid;
- Context Aware Output Encoding (Escaping);
Before putting user data into HTML, you must encode it so the
browser treats it as plain text, not executable code.
Modern frontend frameworks like Angular, React or Vue do this
automatically when you bind data to the UI.
- Content Security Policy (CSP);
A CSP is an HTTP header you tell the browser to enforce. It restricts
where scripts can be loaded from and prevents unauthorized scripts
from executing.
- “HttpOnly” Flag for Cookies;
If your website uses cookies to store session tokens, always set the
HttpOnly flag on them from the backend. This flag tells the browser
that JavaScript is forbidden from accessing the cookie. Even if an
attacker successfully pulls off an XSS attack, [Link] will
return empty, shielding your session tokens from theft.
Brute Force;
Hackers attempt to put passwords repeated until the match is found.
How to Avoid;
- Rate Limiting;
Apply a limit to the passwords being entered, after a limit, it’ll enable a
lock for a few mints to prevent more attempts.
- Account Lockout;
After a lot of attempts, Lock the account temporarily from being
accessed, only the owner can verify and get access.
- MFA (Multiple Factor Authentication);
A security framework that requires users to provide two or more
distinct verification factors to gain access to an application, online
account, or VPN. Adds layers of defenses to ensure in a case if the
hacker steals your password, they need to give more authentication.
Password Security;
Never Store passwords in plain words.
Use Hashing;
- BCrypt
- PBKDF2
- Argon2
 Website Optimization
Minification;
Process of removing all unnecessary characters from source code without
changing how the code functions. Used on HTML, CSS and JavaScript to
reduce file size hence making them download and load faster.
Minification removes whitespaces, newlines, comments and shortens
variable names.
Helps with;
- Faster Load Times
- Lower Bandwidth Consumption
- Improved SEO
Tools Used;
- JavaScript: Terser, UglifyJS, or Google Closure Compiler.
- CSS: CSSNano or Clean-CSS.
- Build Bundlers: Modern bundlers like Webpack, Vite, or Esbuild
automatically minify all code when building a website for production.
Compression;
Process of encoding information using fewer bits than the original
representation to save storage space or reduce transmission time.
While minification physically edits source code text, compression uses
mathematical algorithms to find patterns and shrink files without
permanently altering the underlying code structure.
Steps;
- The Request: Your browser sends an HTTP header stating what
compression algorithms it understands:
Accept - Encoding: gzip, deflate, br (where br stands for Brotli).
- The Server Action: The web server (like Nginx, Apache, or Cloudflare)
compresses the requested text files on the fly.
 - The Response: The server sends the tiny compressed file back with a
header telling the browser how to open it:
Content - Encoding: br.
- The Render: Your browser unpacks the file in milliseconds and
displays the website.
Tools;
- Gzip
- Brotli
Minification vs Compression
Process How It Works Target File Extension
Minification Edits the Actual Source s cript. min.j s /
Code text permanently [Link]
Compression Shrinks files Sent as compressed
temporarily using zip-like data stream
server algorithms

Caching;
Process of storing copies of files or data in a temporary storage location. So
the future requests for that same data can be served much faster.
In website optimization, caching acts like a shortcut. Instead of forcing the
web server or database to rebuild a web page from scratch every single
time a user clicks a link, the system pulls a pre-saved copy of the page and
delivers it instantly.
Results;
- Fast Load Times: Pages load in milliseconds because the data is
fetched from nearby memory instead of a distant server.
- Reduced Server Load: Your Database and CPU don’t have to work as
hard, preventing your site from crashing during high traffic spikes.
 - Lower Bandwidth Costs: Less data travels back and forth across the
internet, saving money on hosting bills.
Where Does Caching Happen? (3 Layers);
- Client Side Caching (Browser Cache): browser stores static assets
like logos or CSS styles, JS files on your local hard drive. So next time
the website is visited, it loads from there instead of the server.
- Network Side Caching (Content Delivery Networks – CDNs);
global network of servers (Cloudflare, Akamai, or AWS CloudFront)
which are all around the world, CDN stores copies of your website’s
pages on its global servers and sends the response from the nearest
server to you.
- Server Side Caching: happens on the backend infrastructure to
speed up application logic. Stores frequent data that is fetched from
users and presents them instead of loading it all everytime.
Other Optimization Methods;
- Lazy Loading
- CDNs
- Image Optimization
 Angular
Angular is a frontend framework by Google.
It Has;
- TypeScript (Strictly): superset of JavaScript but with extra features
such as Static Typing (errors are detected while typing) or Type
Checking.
- Components: Similar to Building Blocks of the application’s interface,
Reusable chunks of code that can be used anywhere among different
components.
- Dependency Injections: Design Pattern used to increase efficiency
and Modularity in coding. Suppose if Class A needs Class B to
function then Class B is a dependency.
instead of forcing a component to manually create its own
dependencies using the new keyword, Angular automatically
instantiates and hands over the required dependencies when the
component is born. Primarily used to Inject services which holds logic
or APIs into components.
- Routing: Since Angular is a Single Page Application (SPA)
framework, so when a user navigates around the site, the browser
never refreshes completely or request a new HTML file, instead
Routing is used to change components on the screen. Routing
watches the URL of the site, if changed it’ll replace with its respective
component and destroy the old one.
- Two Way Data Binding: Meaning the TypeScript logic and HTML are
automatically synchronized, if any data is changed in TS then the
HTML UI is automatically updated and vice versa.
o Property Binding [] : Data Moving from Component (TS) to HTML
o Event Binding(): Data / Events moving from HTML to component
Advantages:
• Large-scale apps

• Strong architecture

• Type Safety

Limitations:
• Large learning curve

• Larger bundle size

• More complex

[Link] Core
Developed by Microsoft, Backend Framework
Uses C# and it is Cross Platform (Works on Windows, Linux, and Mac)
- High Performance
- Dependency Injection is Built-In
- Middleware Pipeline: Set up in [Link] using a sequence of
extension methods on the WebApplication instance
[Link] Core uses the HttpContext object as the raw material
moving down the assembly line. This object encapsulates the entire
HTTP request and the outgoing HTTP response. Request Processing
Chain.
- Entity Framework Core: ORM Support (Prevents SQLi)
Advantages:
• Secure

• Enterprise-ready

• Excellent performance

Limitations:
• Steeper learning curve

• Larger ecosystem complexity

 Repository Pattern
Design Pattern that separates database code from business logic.
Handles Database Operations such as;
- GetAllVehicles()
- AddVehicle()
- DeleteVehicle()
Without Repository;
Controller → Database
With Repository;
Controller → Service → Repository → Database
Benefits;
- Cleaner code
- Easier testing
- Maintainability
How it Works?
Buffer Layer between Application’s Core business Logic
(Controller/Services) and Data Access Layer (EF Core / Database).
It encapsulates all the tedious data querying logic inside a dedicated class,
presenting a clean, simple collection-like interface to the rest of your app.
Controller now talks to a separate class of Repository instead of directly
with the Data Access Layer (such as DbContext). This reduces the concern
for errors as now its easy to navigate where they are.
repository class is then injected in [Link] and in the controller file.
 Clean Architecture Layers (Onion Architecture)
Flow of Layers;
Starts from Outer Layer (API) to Core Layer (Domain)
API → Application → Domain Infrastructure
Dependency Rule: Layers on the outside can point inward, but inner layers
can never know anything about the outside world.
(1) Domain Layer;
Holds core business entities and rules such as;
- Vehicles
- Customer
- Order
Model files are stored in this layer
Uses no Dependencies
(2) Application Layer;
Defines what the application does, handles user requests, coordinates
with domain entities and directs the flow of data, Interfaces such as;
- IVehiclesRepository
Are defined in this layer and are used by the upper outer layers to use or
implement them.
DTOs are also in this layer which return specific data to the frontend
without exposing raw database entities.
Validators are in this layer which checks the incoming data if it matches
the constraints such as any number cant be negative etc using
FluentValidation.
(3) Infrastructure Layer;
Handles external tech dependencies. App communicates with things
outside its own memory space like databases, filesystems, network
protocols, or third-party cloud APIs.
This layer implements interfaces that are defined in Application layer while
infrastructure layer implements them.
Data Access (EF Core) is in this layer such as DbContext, Database
Migrations, and concrete implementations of Repository Classes.
Token Generation (JET) or any other hashing logic, authentication systems
are in this layer.
(4) API Layer;
Also known as the Presentation layer or UI layer is the entry point of the
application. It receives HTTP requests then it hands them down to
application layer to process. Formats the returned data into a HTTP
response (JSON or 200 OK Status) and sends to frontend.
What is in this Layer;
- Controllers: API Routing endpoints containing all methods.
- Middleware: HTTP requests / response pipeline handling logic such
as Exception Handling or CORS policies
- Configuration Files: [Link] n where environment
variables and connection strings are defined.
- [Link]: startup bootstrapper where Dependency Injection
registrations connect the infrastructure implementations to the
application interfaces.
Advantages of Clean Architecture;
- Maintainability
- Testability
- Scalability
- Separation of Concerns
Disadvantages of Clean Architecture;
- More Files
- More Setup