Forem: Shreelaxmi Hegde

Auth Series #5: Authorization implementation with Passport.js

Shreelaxmi Hegde — Sat, 25 Oct 2025 05:16:33 +0000

We have covered Cookies and Sessions in the previous part.
Now, it’s time to use them in our authorization flow.

As discussed earlier, authorization means allowing access to specific parts or actions that a user is permitted to perform.
Before we authorize a user, we first need to authenticate them (verify their identity).

We’ve already handled authentication.
Now, our next goal is to remember the authenticated user across sessions. And that’s where cookies and sessions come into play.

⚙️ Session Setup

After installing and importing express-session, the next step is to configure our session options:

const sessionOptions = {
    secret: "secretecode",
    resave: false,
    saveUninitialized: true,
    cookie: {
        httpOnly: true, // prevents client-side JavaScript access for better security
    }
}

app.use(session(sessionOptions)); //setup express-session middleware

📌 What does this code snippet do?
⤷ secret: Used to sign the session ID cookie to prevent tampering.

⤷ resave: false: Ensures the session isn’t saved back to the store if it hasn’t been modified.

⤷ saveUninitialized: true: Saves new sessions that haven’t been modified yet.

⤷ cookie.httpOnly: Helps protect against XSS attacks by making cookies inaccessible via client-side JavaScript.

In short, this middleware automatically attaches a session object to every request (req.session), allowing us to store and retrieve user-specific data securely on the server. These are the common parameters defined while creating session.

🔐 Passport Setup

Once the session is configured, we can connect it with Passport.js, which handles authentication seamlessly.

app.use(passport.session()); // Connect Passport with session

This line ensures that Passport can store and access user data within the existing session.

📌 Why do we connecting Passport to session?
When a user logs in successfully, Passport authenticates them only for that single HTTP request.
Since HTTP is a stateless protocol, the server doesn’t automatically remember the user between different requests.

By connecting Passport to the session, we enable it to store the user’s identity in a session (on the server) and keep them logged in across multiple pages or browser refreshes without needing to log in again each time.

We have successfully connected Passport with express-session. But there are two more crucial steps to complete the flow: serializeUser() and deserializeUser().

📌 Why do we need them?

When a user logs in, a session is created and attached to all future requests from the browser.

⤷ However, when a request reaches the server, it only contains the session ID. This means the server sees some “unknown ID” but doesn’t yet know which user it belongs to.

⤷ serializeUser() solves this problem by telling Passport what user information to store in the session (usually the user ID), effectively linking the session ID to a specific user.

⤷ On every subsequent request after login, deserializeUser() runs. It fetches the full user information from the database using the ID stored in the session.

⤷ This ensures that req.user is populated, so you can access the authenticated user’s details in any route or middleware.

Usage :

passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

📌 Passport Session Flow: Serialize & Deserialize

User logs in
     │
     ▼
Passport authenticates credentials
     │
     ▼
serializeUser() runs
     │
     │  Stores only the user ID in the session
     ▼
Session created and sessionID sent to browser as cookie
     │
     ▼
Browser makes another request
     │
     ▼
Session middleware reads sessionID from cookie
     │
     ▼
deserializeUser() runs
     │
     │  Uses stored user ID to fetch full user info from DB
     ▼
req.user is populated → available in all route handlers

These are common practices to implement an Authorization system.
Now, let’s see how we can use them in our routes to authorize actions like edit, delete, etc.

Example Scenario: Blog Application
In our blog app, users can create, edit, delete, or update their posts.

We have already completed the authentication steps.
Now, our goal is to allow users to perform actions only on their own posts. for example, the author of a post can edit or delete it, but others cannot.

Step 1: Define Middleware
We first create a middleware function to check the user’s role or ownership:

function isAuthor(req, res, next) {
  if (req.user && req.user.role === 'author') {
    return next();
  }
  res.status(403).send('Access Denied');
}

Step 2: Apply Authorization in Routes
Use the middleware in your route definitions:

app.delete('/posts/:id', isAuthor, deletePost);

How it works internally:
⤷ When a user tries to delete a post, the request hits the route handler.
⤷ The isAuthor middleware runs first.
⤷ req.user (fetched via deserializeUser()) is checked against the required role.
⤷ If authorized, the request proceeds to deletePost. Otherwise, access is denied.

You can implement similar middleware for all other routes that require authorization.

This completes our blog series on Authentication and Authorization in Express.js.

I hope you enjoyed this series and gained a deeper understanding of the under-the-hood workflow behind authentication and authorization.

Thank you for reading! 🎉

Auth Series #4: Understanding Cookies and Sessions.

Shreelaxmi Hegde — Sat, 25 Oct 2025 05:15:29 +0000

After implementing the Authentication mechanism in the part 3, we are now going to learn another interesting thing : Cookies and Sessions.

Cookies and sessions play a crucial role in the authentication and authorization process.
Most familiar scenarios with behind the scene cookies are:

❖ Keeping you logged in, even when the same website is opened in different tabs.
❖ Ensuring you don’t have to log in every time when you visit the website.
❖ Remembering what items the you added to the cart.
❖ Recommending related posts, videos, or items based on your activity.
❖ You don't have to toggle the theme(dark mode) for each pages.

Most of us have experienced it. These are just a few of the jobs cookies handle. Let’s explore them in more detail.

📌 What are cookies?

Cookies are small pieces of data that a website stores in the user's browser. They are also called HTTP cookies, web cookies, or browser cookies. Cookies help websites remember information about the user’s activity, preferences, or session.

There are different types of cookies based on their usage:

Tracking Cookies [Track user activity to provide personalized recommendations based on browsing behavior.]
Session Cookies [Temporary cookies that are deleted when the browser is closed, used to keep users logged in during a session.]
Persistent Cookies [Stored on the browser for a longer time, can remember login info or user preferences across visits.] etc.

📌 How Cookies work?

⤷ Server sends a cookie to the browser in http response header (Set-Cookie).
⤷ Browser stores the cookie.
⤷ For every subsequent request, browser sends it back to the server in request header.
⤷ Server reads the cookie and performs the logic defined.

📌 Need for Cookies in Authentication and Authorization :

There are many types of cookies, but in the authentication and authorization process, we use them primarily to remember users and keep them logged in as they navigate across different pages of a website.

Without cookies, users would have to log in every time they visit a page or refresh the website, which can be frustrating. This happens because the server does not inherently know who the user is. So, it renders the login form each time authentication is required.

To provide a smooth and personalized browsing experience, the server needs a way to “remember” the user. Cookies serve this purpose by storing user specific information and sending it back to the server with every request, allowing the server to identify and authorize the user seamlessly.

Let’s see how we can create cookies in an Express.js application.

📌 Creating Cookies in Express.js : 🍪

In Express, we can create a cookie like this:

app.get('/set-cookie', (req, res) => {
  res.cookie('username', 'shree'); //creates and sends cookie.
});

res.cookie(...) is a method in Express.js used to create and store cookies.
It can take up to three parameters: res.cookie(name, value, options).
So, while creating a cookie, we always send the cookie name and its value, and optionally some options (like expiry time, security flags, etc.).

📌 What the res.cookie(...) doing under the hood?

⤷ The server defines a cookie named "username" with the value "shree".
⤷ This cookie information is sent to the browser in the HTTP response header to be stored locally.
⤷ Each time the user navigates to a new page, the browser automatically attaches the cookie in the HTTP request header.
⤷ The server reads and validates it before responding again with a new HTTP response.

But there’s a small challenge...
When the browser sends cookies back, the server receives them as raw string data like this:

Cookie: username=shree

However, our Express server can’t directly read these Strings, it prefers data in JavaScript object format.
We need a stream which can parse the cookies header data. So, we use cookie-parser a npm package to parse the cookies header.

You can install it like this :

npm i cookie-parser

Use it like this :

app.use(cookieParser())

📌 What this cookie-parser do?
⤷ Looks for cookies wrapped in the HTTP headers
⤷ Parses them into a JavaScript object format
⤷ Makes them accessible via req.cookies in Express

📌 Signed Cookies

Cookies defined in the normal way (like we did before) are easily prone to tampering, since they are sent as plain text in the browser.
To secure them, we add another option: the signed parameter (while defining cookies), along with a secret key, like this:

app.use(cookieParser("secretKey")); // add secret key

res.cookie("username", "shree", { signed: true }); // while creating cookie

These Cookies now called Signed Cookies.

📌 How do Signed Cookies work?

⤷ When you set { signed: true }, Express uses the secret key you provided to cryptographically sign the cookie value.
⤷ If anyone tampers with the cookie, the signature won’t match, and Express immediately detects it.

In this way, signed cookies protect cookie data from tampering.

📌 Stateless and Stateful protocols

The difference between stateless and stateful protocols lies in their ability to remember browser data (like headers or sessions).

Stateful protocols: Remember data across multiple page navigations.
Example: FTP (File Transfer Protocol)
Stateless protocols: Do not store or remember any data between requests.
Example: HTTP (HyperText Transfer Protocol)

What is the reason we are discussing about it?
By default, our Express server communicates with browsers using the HTTP protocol, which is stateless.
This means every time a user navigates to a new page, the server forgets who the user is unless we add a mechanism to “remember” them.

Our goal is to keep users logged in even after page refreshes or navigation.
That’s where sessions come in.

📌 What are sessions?

Sessions allow the server to store user-specific data temporarily, making HTTP stateful.

When we use sessions in Express, the server:
⤷ Creates a unique session ID for each user
⤷ Stores session data on the server-side (in memory or a database)
⤷ Sends that session ID to the client in a cookie
⤷ On future requests, the browser automatically sends that session ID cookie back
⤷ The server then looks up the stored session data using that ID

This is how users stay logged in even across multiple tabs or page refreshes.

📌 Cookies and Sessions Integration :

We can enable sessions in Express like this:

app.use(session({ secret: "secretkey" }));

Usage :

req.session; // to access the session
req.session.username = "shree"; // to attach data

📌 What does the express-session middleware do?
⤷ Creates a unique session ID
⤷ Stores session data on the server
⤷ Sends that session ID to the client in a cookie
⤷ Automatically validates the session on each request

💡 Since express-session already handles cookie parsing internally, we no longer need the cookie-parser middleware.

We have covered all the topics about cookies and sessions that are essential to understand and implement Authorization workflow.

Now let's move to the last part : Auth series #5: Authorization Implementation

Auth Series #3: Authentication implementation using Passport.js

Shreelaxmi Hegde — Sat, 25 Oct 2025 05:12:30 +0000

Previous : Auth Series #2: Authentication Implementation with Passport.js

There are two ways to implement authentication system:

Build a custom authentication system from scratch, or
Use existing, battle-tested tools that simplify the process.

Among the many options available, Passport.js stands out as one of the most popular and widely used libraries for Node.js applications. It blends easily with MongoDB (via Mongoose) and offers a modular structure that supports both local and third-party authentication (like Google, GitHub, or Facebook).

📌 Why Passport.js?

Passport.js provides a clean, flexible API and powerful features that make authentication smooth and reliable:

▹ Built-in middlewares and methods speed up development.
▹ Uses strong salting and hashing techniques to protect passwords.
▹ Works seamlessly with MongoDB + Mongoose.
▹ Supports multiple authentication strategies (local, OAuth, etc.).

3.1 Setting Up Passport.js :
First, install the necessary packages from npm:

npm install passport
npm install passport-local         # Local strategy
npm install passport-local-mongoose # Mongoose plugin

The local strategy is used for authentication systems that rely on standard login fields like username, email, and password instead of third-party logins.

3.2 Initialize Passport in your Express app:

app.use(passport.initialize()); // Sets up Passport middleware

3.3 Defining the User Schema :

We’ll use Mongoose to define our user schema. The passport-local-mongoose plugin automatically adds username and password fields, and handles the salting and hashing of passwords behind the scenes so we don’t need to code that manually.

const passportLocalMongoose = require("passport-local-mongoose");
const userSchema = new Schema({ 
   email: String
}); // user schema definitions
userSchema.plugin(passportLocalMongoose); // Connects schema with Passport’s helper methods

3.4 Registering a New User Using Passport.js through the /signup Route

We’ve already discussed that when a user submits the signup form, the browser sends a POST request to the /signup route, where the server stores their credentials in the database.

Here’s what the route looks like :

app.post("/signup", async(req, res) => {
   let { username, email, password} = req.body;
   const newUser = new User({email, username});
   const registeredUser = await User.register(newUser, password);
});

What does this code do?
⤷ It takes all the credentials submitted by the user through the signup form.
⤷ It creates a new user using the Mongoose User schema, which stores the email and username.
⤷ The User.register() method then handles password hashing, salting, and saving the final user document to the database

More clarification on User.register() method

The .register() method is provided by the passport-local-mongoose plugin, which we attached while defining our User schema.
It automates most of the registration process by handling the following steps internally :
- Generates salt
- Hashes the password using that salt.
- stores both salt and hashed password in the User document.
- Saves the user in the database.

In this way we have successfully built an Authentication system.🥳

It's time to move to another interesting and most important part : Cookies and Sessions in Express.js.

Auth Series #2: Authentication Implementation Setup

Shreelaxmi Hegde — Sat, 25 Oct 2025 05:10:44 +0000

We have covered the basic understanding of Authentication and Authorization in the Auth Series #1: Understanding Authentication and Authorization. Now, implement the basic setup to build Authentication system in Express.js.

2.1 SignUp Form
Our first step in building authentication is to register a new user into our database so that the platform can provide them with their own personalized space.

Let’s start with a basic signup form 👇

<form action="/signup" method="POST">
    <div>    <!-- username -->
        <label for="username">Username : </label>
        <input type="text" name="username" id="username" required>
    </div>

    <div>    <!-- email -->
        <label for="email">Email : </label>
        <input type="email" name="email" id="email" required>
    </div>

     <div>   <!-- password -->
        <label for="password">Password : </label>
        <input type="password" name="password" id="password" required>
    </div>

    <button>SignUp</button>
</form>

*Its a simple HTML form. You can always add your own styling later.

Behind the scenes of the Form :
⤷ User enters their credentials(username, email, password).
⤷ Clicks the "signUp" button.
⤷ The browser sends a POST request to the /signup route.

2.2 Securing User Data Before Storing 🔐
Once we receive the user’s information from the signup form, the next step is to store it securely in the database (MongoDB).
But since passwords are sensitive data, we should never store them in plain text.

In real-world applications, developers add 2 extra layers of protection before saving user credentials:
▹ Salting
▹ Hashing

The workflow looks like this 👇

Sensitive data → Salting → Hashing → Store in database

📌 What is Salting?
Salting adds the first layer of security to your user’s password.
It involves adding a unique, secret String called a salt to the password before hashing it.
This salt is stored securely by the server and ensures that even two users with the same password will have different hashed outputs.

Example:
Password: abc123
Salt: x9@#p!
Combined: abc123x9@#p!

📌 What is Hashing?
Hashing is a one-way encryption process that converts readable data into a scrambled form using a mathematical algorithm.

Example:
data = 'abc'
hashed = 'lajhfld#k2432blk34w3&alsjd'

It’s impossible to reverse a hash and retrieve the original password which is what makes it secure.

📌 Why Both Salting and Hashing?
Some users choose weak passwords like 1234 or password.
If a hacker guesses or obtains the hashing algorithm, those weak passwords become easy targets.

By adding a salt before hashing, you make the final encrypted output unique and unpredictable.

So the final process looks like this:

Server receives password
→ Adds salt  
→ Hashes the combined string  
→ Stores the hashed result in the database

Now some questions arise

How do we implement this system in Express.js?
How to write the Hashing algorithm?
How long our salt should be?
etc. etc.

Lets discuss about them in the Next Part : Auth Series #3: Authentication implementation using Passport.js

Auth Series #1: Understanding Authentication and Authorization

Shreelaxmi Hegde — Sat, 25 Oct 2025 05:09:44 +0000

Authentication and Authorization are two of the most essential features in modern web applications.
Signup and login systems have become common in most real-world apps from small personal projects to production-ready enterprise solutions. These mechanisms ensure that users enjoy a secure and personalized experience on the platform.

From the USER'S Perspective :

❖ You get your own secure space within the application.
❖ You have control over your own data and actions. No one else can access or modify them.

From the Developer / PLATFORM'S Perspective :

❖ You offer users a smooth, personalized experience that builds trust.
❖ You protect your platform's data from unauthorized access or malicious activity.

These are the reasons that makes the Authentication and Authorization a powerful feature that a web application can have.

1. Understanding Authentication and Authorization

📌 What is Authentication?

Authentication is the process of verifying the identity of a user. It usually involves collecting user credentials such as email, username or passwords and validating them against stored records in database.

In simple terms, it's the process that answers:

"Who are you?"

This step is often implemented through actions like Sign Up(Register) and Sign In(Login).

📌 What is Authorization?

Authorization, on the other hand, determines WHAT a user is allowed to do after the have been authenticated.

It answers:

"What are you allowed to access?"

For example an author of a blog post can modify or delete the post, while a regular user can only view the post.

How they work together in a real-world flow :
⤷ The user enters credentials (Sign Up/Sign in)
⤷ The system authenticates them (verifies identity)
⤷ The system authorizes their actions (decides what they can access or modify)

Now we have the basic theoretical understanding of these two terms.
Let's discuss about how it can be implemented in Express.js.

Previous : Auth Series Index: Building Authentication and Authorization in Express.js
Next : Auth Series #2: Authentication Implementation with Passport.js

Auth Series Index: Building Authentication and Authorization in Express.js

Shreelaxmi Hegde — Sat, 25 Oct 2025 05:09:26 +0000

Welcome to my Auth Series!

In this series, we explore the core concepts and practical implementation of Authentication and Authorization in Express.js, covering everything from user login to session management and access control.

We focus especially on the behind-the-scenes workflows and the reasoning behind every step, giving you a deep understanding beyond just the code.

What we'll explore:
✧ How Authentication and Authorization work in MERN based applications
✧ Related topics that are essential to understand before implementing them (cookies, sessions, salting, hashing etc)
✧ The tools and libraries that simplify the process
✧ The WHY and HOW behind each step and concept.

We'll be breaking down the process in 5 parts.

Tip: Follow the links in order to go through the series smoothly, or jump directly to the topic you want to learn.

Next : Auth Series #1: Understanding Authentication and Authorization

☁️⋆ ˚｡⋆ --- Happy Coding 😇 --- ⋆｡˚⋆☁️
🌿⋆✧˚ --- Keep Learning 🌈 --- ˚✧⋆🌿

Cascade Deletion: What Happens to Comments When You Delete Your Post MongoDB

Shreelaxmi Hegde — Sat, 11 Oct 2025 05:42:46 +0000

When you delete your account or post, everything linked to it(comments, likes, followers) disappears too.

But have you ever wondered what really happens behind the scenes when this deletion occurs?

What Is Cascade Deletion?

Cascade deletion is a common database pattern used to maintain data integrity and avoid storing unnecessary data.

It ensures that when a record (like a user or post) is deleted, all associated entities (comments, likes, etc.) are also removed automatically.

Typical Workflow :

The user clicks Delete Account or Delete Post.
The app shows a confirmation message: once deleted, data cannot be recovered.
On confirmation, the main record (user/post) is deleted.
Then, all related data connected through references are also deleted.

This is the Cascade deletion at work.

Behind the Scenes (in MongoDB)

In databases like MongoDB, data is often spread across multiple collections that are linked together through references rather than direct relationships. Where deleting interconnected data in one go is not possible.

To handle such cases, developers use a concept known as Cascade Deletion (a logic that ensures all dependent records are removed when the parent record is deleted).
Let’s understand this through an example:

Example setup:
Let’s say we’re building a platform where users can create posts.
We can have 2 collections:

users → stores user info like name, followers, etc.
posts → stores post info like content, comments, etc.

Now, to associate users with their posts, we connect the two collections using reference IDs via Mongoose schemas:

const userSchema = new Schema({
  username: String,
  // ...
  posts: [{
      type: Schema.Types.ObjectId,
      ref: "Post", // referencing the "Post" model
    }],
});

In MongoDB, collections are linked by reference IDs, not by embedding actual data.
So, when a user is deleted, their posts don’t automatically get removed from the page or the database. They still exist, pointing to a user who no longer exists.

To handle this properly, we define a post middleware in Mongoose that runs after a user is deleted.
This middleware deletes all the posts associated with that user.

userSchema.post("findOneAndDelete", async (user) => {
  if (user) {
    await Post.deleteMany({ _id: { $in: user.posts } });
  }
});

This middleware ensures that when a user is deleted, all of their posts are also removed from the database.

This process is known as Cascade Deletion removing all dependent records once the parent record is deleted, keeping the database clean and consistent.

Why It Matters?

Keeps the database clean and efficient.
Prevents orphaned records (data with no valid reference).
Ensures a consistent and reliable user experience.

In short, Cascade deletion is the silent cleaner that ensures the database doesn’t hold on to what no longer exists.

Thanks for reading!

I’m currently building Accommate, a full-stack web app for student accommodation. It is a part of learning while I was building Rating and Comment feature to a specific housing.

I'll be sharing everything I learn as I build it.

If you are building something like this, I'd love to connect and share ideas.

The Magic of Client & Server Validation : How Your App Knows You Typed Your Email Wrong

Shreelaxmi Hegde — Thu, 09 Oct 2025 07:39:04 +0000

Have you ever tried filling out a form? maybe logging in, signing up, or entering an OTP, and suddenly got a reminder saying, “Please fill out this field” or "Please enter valid ..."?

It’s a small moment we experience almost every day.
But have you ever wondered what makes your app instantly catch that missing or incorrect input?

Let’s uncover what’s happening behind the scenes step by step 👇

What Really Happens When You Submit a Form?

The Workflow :

User Form → Client Validation → Server Validation → Database

1. Client-Side Validation

This is the first line of defense. The validation that happens right inside your browser while you’re typing or before you hit Submit.
Think of it like a friendly supervisor ensuring you’re entering valid details before the data leaves your screen.

For example:

You can’t type random characters into an email or URL field as they follow strict patterns.
You can’t enter negative numbers in a price or age field.
You can’t skip required fields and the browser instantly reminds you.

All of this happens instantly, without reloading the page.
It ensures smoother user experience and directs users to fix errors immediately before data is even sent to the server.

2. Server-Side Validation 🛡️

Once you click submit, the data reaches your backend and here’s where server-side validation steps in.

Even though the browser already validated your input, the server can never blindly trust incoming data.
Why?
Because anyone can manipulate HTML or disable JavaScript using DevTools or tools like Postman.

Attackers can:

Inject malicious SQL code
Send malformed or unexpected data
Try to upload harmful files

To protect the system, the server revalidates and sanitizes the incoming data before storing it in the database.

Libraries like Joi(for Node.js) help define strict validation rules (the practice known as Schema Validation in technical terms).

In short, the server acts as a gatekeeper, ensuring only clean, trusted data enters your system.

In Summary :

Client-side validation improves user experience.

Server-side validation ensures security and data integrity
Together, they create a robust and reliable application that something every real-world system relies on, whether it’s web or mobile, regardless of the tech stack.

✨ Final Thoughts

This workflow may look simple, but it’s one of the core pillars that keep our apps safe and user-friendly.
It’s fascinating how these small mechanisms silently guard every modern digital product.

Thanks for reading.
I hope this post helps you understand something new today!
If you’ve worked with validation in your own projects or have different approaches, I’d love to hear your thoughts 👇

I Recreated Pinterest UI with Bootstrap.

Shreelaxmi Hegde — Tue, 12 Aug 2025 14:58:32 +0000

As soon as I learned Bootstrap, I was drawn to its built-in classes for responsiveness, grid layout, flex utilities, cards, and navbar components. And these all features mapped naturally to the Pinterest dashboard. I chose Pinterest as my target to deepen my understanding of CSS, responsiveness, and layout designs.

Project overview
Stack:

HTML
CSS
Bootstrap 5

I built a responsive Pinterest-like UI with a grid of images, cards, hover effects, sidebar and a simple search bar.

Screenshot preview:

Planning the layout:
I started by sketching the main sections:

Sidebar + Search bar
A fixed Sidebar
Main image grid with card components

My plan was to use Bootstrap for the overall structure (grid and breakpoints) and custom CSS for fine details (hover effects, spacing, overflow, etc).

1. Sidebar & Search bar
First I started with the smaller section, the Sidebar.
Used navigation icons and aligned them with built in classes.
Used list-unstyled class for to remove text decorations etc.

<div class="nav-items m-3 p-3">
      <ul class="list-unstyled">
           <li class="nav-item p-2">
               <a href="#"><i class=""></i></a>
            </li>
            <!-- list of navigation tabs-->
       </ul> 
</div>

In the same way I built the horizontal Search bar with user profile which occupies whole width except the vertical Sidebar.

2. Scrolling & overflow issues:
Even though I gave sticky-top property to the Search bar, the page was stretching when scrolled. To fix this annoying issue I used overflow: hidden style to the body tag and applied overflow: auto only for the image container section.

body { 
  overflow-x: hidden; /* prevent horizontal stretch */
}     

.image-grid-container { 
  overflow: auto;    /* scroll only the grid */
}

3. Grid & image layout

Pinterest uses a masonry layout which arranges different sized images and uses Javascript for accurate calculation.
I experimented building it with CSS grid for more simpler arrangement and chose same-sized image cards to keep layout simple and responsive. The consistent column wise image alignment made the page look more friendly.

Example Bootstrap column pattern:

<div class="row g-3">
  <div class="col-6 col-sm-4 col-md-3">
    <!-- card with image -->
  </div>
  <!-- repeat -->
</div>

To make the Image layout responsive across all screen sizes, I used the breakpoints defined in bootstrap and adjusted columns accordingly.

Example:
row-cols-xl-5 5 image columns for extra large screens
row-cols-lg-4 4 image columns for large screens
row-cols-sm-2 2 image columns for small screens
etc.

4. Cards & hover effects

I used Bootstrap cards for structure and then added CSS for hover effect:

.card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover {
  cursor: pointer;
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

This makes images look like they’re popping out of the page.

Key Learnings

Practical ways to combine Bootstrap utilities and custom CSS.
How to deal with responsive breakpoints with Bootstrap.
Debugging real UI issues (overflow, alignment, spacing) is invaluable.
Don’t memorize classes instead understand layout logic.
Bootstrap vs. custom CSS styling:
Before starting the project I thought

If Bootstrap have ready-made classes and utilities along with responsiveness, then why do we need raw CSS? Things made easier and faster.

But after the project realized the importance of vanilla CSS. Why we still need it.

I learned how to blend Bootstrap with CSS.
While using these classes no surprise we feel lost.

How much to use Bootstrap?
When to use CSS?

After going through this project I can suggest,
apply only necessary Bootstrap classes first, then add custom CSS for unhandled cases. Doing the reverse will lead to conflicts.

Documentation reading Learning to find the right utility classes quickly was a challenging part. As Bootstrap comes with a ton of built in classes, sometimes it feels overwhelming and time consuming. Deciding what fits the best for our layout is challenging. I read examples and inspect Bootstrap source components. And tried to match the best one.

Links
Code: GitHub repo

Thanks for reading.
If you enjoyed this, feel free to reach out and give valuable feedback.
Happy to connect with fellow devs.

Cloning a website taught me more than tutorials did.

Shreelaxmi Hegde — Sat, 09 Aug 2025 04:02:39 +0000

I recently completed a CSS tutorial. As a part of the tutorial i built this project with the guidance of a wonderful teacher.
I applied what I learned by building a clone of a well-known music app Spotify. I focused on recreating its dashboard page using HTML and pure CSS.

Even though the project doesn't have advanced functionality or interactive features yet, the journey taught me more than I expected. It was a valuable experience that made me realize something important:

I should stop only watching tutorials and blindly copying code. Instead, I need to apply what I learn to real-world problems.

Yes,
It hit me hard.

Whenever you learn something from a tutorial, take a moment to ask yourself:

Where have I seen this concept used before?
How can I apply it to something I'm building or interested in?

In web development, there are no hidden secrets. You can see everything on a website if you inspect it carefully. Most great websites start with the basics: HTML and CSS. So, the next time you see a well-designed website, pause and think:

How was this layout built?
Is this using Flexbox? Maybe this square element has a 270-degree rotation with a transition.

This type of thinking builds creativity. Great designs are often a combination of many small and thoughtful details.

Don’t blindly code. Break down the entire layout into smaller parts. Complete each task. One step at a time.

Use browser DevTools effectively. They're very helpful for testing, debugging, and previewing changes. Avoid switching tabs multiple times for simple things. Use devtools instead.

For example, in this clone, I found that a CSS property wasn’t applying as expected. Using DevTools, I discovered another rule was overriding it and quickly fixed the issue.
Testing flex box logics, sizing elements, animations, effects etc. become smooth with this.

Building real projects always unlocks new insights, tips, and tricks. You get to know what it feels like to be a real developer. When you run into bugs don’t run away. Face them. When you want to add a feature you haven’t learned yet, go learn it and build it. Never be lazy to explore new things. That’s how strong foundation built.

Final Thought:
Learning through real-world practice creates a deep understanding that no tutorial alone can provide. Keep building. Keep exploring. That’s the path to becoming a great developer.
You are building a new thing. Give it a life. Put your curiosity, passion, whatever it takes.
Stressed out? take a small break, continue.
Embrace all the obstacles you face.
Learn from every mistake. Enjoy the process.
Don't forget why you started the journey.
Happy Coding.

Let me know what you think.
Happy to hear a valuable feedback from you.
If you have a nice feature to add on or want to collaborate feel free to reach out. You are always welcomed.
Or you want me to contribute to your one of the works I'm open 🙌.

Checkout the project on github.

The confusing Pointers and Arrays in C++

Shreelaxmi Hegde — Sat, 02 Aug 2025 10:07:08 +0000

Introduction
When I started learning C++, pointers felt like black magic especially when working with arrays. Array and pointer concepts and their flow felt confusing.

While solving an array-based question, I ran into this bug:

❗ 'sizeof' on array function parameter 'arr' will return size of 'int*'

So I paused and went back to revise pointers and boom, things started clicking magically! Suddenly, the flow of logic made much more sense.

Here’s everything I learned, explained in the simplest possible way.

What Is a Pointer?
A pointer is a variable that stores the memory address of another variable.

Example:

int a = 10;
int* ptr = &a;  // pointer variable storing address of a

&a → gets the address of variable a
ptr → stores that address
*ptr → gives the value stored at that address (dereferencing)

Two Uses of the Asterisk *

The symbol * is used in two ways:

Declaring a pointer: int* ptr;
Dereferencing a pointer: cout << *ptr;

NULL Pointer

A null pointer is a pointer that doesn’t point to any memory location.

int* ptr = NULL; // or int* ptr = 0;

NULL points to address 0x0
You can’t dereference a null pointer. Doing cout << *ptr; will result in a runtime crash.
Note: Just declaring int* ptr; without initialization gives a garbage address.

Array as a Pointer

int arr[] = {1, 2, 3};

arr is actually a constant pointer to the first element (&arr[0])
*(arr + 1) is the same as arr[1]
But remember: You cannot do arr = &x; because array names are non-modifiable lvalues (fixed memory pointers).

Passing Arrays to Functions

When you pass an array to a function, it acts as a pointer. That means only the address of the first element is passed, not the whole array.

void print(int arr[]) {
    // arr is actually int* inside the function
}
So sizeof(arr) will give size of int*, not the full array.

How to Handle It?

Always pass the array size separately to functions:

void print(int arr[], int size) {
    for (int i = 0; i < size; i++)
        cout << arr[i] << " ";
}

Key Insights Where Most Beginners Get Confused:

int a = 10;
int* ptr = &a;
cout << &a << " = " << ptr; → Both print the memory address of a

cout << a << " = " << *ptr; → Both print the value stored at that address → 10

*ptr = 20; → Modifies the value of a to 20

Reference Variables

A reference is just another name for an existing variable.

int a = 10;
int& b = a;

cout << a << " = " << b;  // Both print 10
a and b refer to the same memory location.
//Any change to one affects the other.

Pass by Reference

You can pass variables by reference to a function so that any changes affect the original value:

void func(int& a) {
    a = 50;  // changes the actual argument
}

This avoids copying the variable

Summary
int* ptr = &a; → pointer stores address
*ptr → gets value at that address
arr is a constant pointer to the first element
Arrays decay into pointers in function calls
Always pass size with arrays
Use NULL to safely initialize unused pointers
Reference variables (int &ref = var;) refer to the same memory
Pass by reference reflects changes in the original argument

Final Thoughts

Pointers and arrays are scary at first, but once you understand what’s really happening under the hood (just memory addresses and values), it becomes easier to work with them.

If you're just starting out in C++, I hope this helped you get one step closer to mastering them.

Have questions or got stuck somewhere similar? Drop a comment — let’s grow together!

CSS Basics : Box Model, Display Property, Inline vs Block!

Shreelaxmi Hegde — Sun, 27 Jul 2025 14:29:01 +0000

CSS can feel tricky when you're starting out, especially when things just “don’t align right” or “spacing feels off.” But once you master the Box Model, understand display properties, and learn how to work with inline vs block elements, everything starts making sense.

Let me walk you through the most important foundational concepts — written in beginner-friendly language and backed with practical code examples.

What is the CSS Box Model?

Before applying styles to a container (an element), you need to understand how it’s structured behind the scenes.

Think of every HTML element as a box. This box has:

Content (like text or an image)
Padding (space around the content)
Border (the box edge)
Margin (space between this box and others)

Let’s Understand With an Example:

Take this simple heading:


<h1>Hello, world!</h1>
<p>This is a paragraph.</p>

Even without styling, you’ll see space between <h1> and <p>, thanks to the default margin.

This is because the browser treats elements like boxes with spacing already included.

Height & Width

The content area has width and height.

div {
  height: 200px;
  width: 300px;
}

In browser dev tools, this area is usually highlighted in blue.

🔲Border

The border wraps the content and padding — defining the container’s edge.

div {
  border: 2px solid black;
}

It’s a shorthand for:

border-width: 2px;
border-style: solid;
border-color: black;

Padding

Padding is the space between the content and the border.

padding: 10px;                /* all sides */
padding: 10px 20px;           /* top-bottom | left-right */
padding: 10px 20px 30px;      /* top | left-right | bottom */
padding: 10px 20px 30px 40px; /* top | right | bottom | left */

Margin

Margin is the space between elements (outer spacing).

margin: 10px;                /* all sides */
margin: 10px 20px;           /* top-bottom | left-right */
margin: 10px 20px 30px;      /* top | left-right | bottom */
margin: 10px 20px 30px 40px; /* top | right | bottom | left */

Block vs Inline Elements in CSS

Understanding how elements behave by default is key.

Inline Elements

Occupy only the space their content needs
Can’t be given height or width
Margins work horizontally only
Padding may cause overlap

Examples: span, img, button, a, input

Block Elements

Always start from a new line
Take full horizontal width
Accept all styling properties like width, height, padding, margin

Examples: div, p, h1 to h6

The Display Property in CSS

This property changes how an element behaves visually.

display: block;

Makes an inline element act like a block element (starts on a new line).

2.display: inline;

Makes a block element behave like inline — but you lose ability to apply height, width, etc.

3.display: inline-block;
Best of both worlds.
You retain block-like properties (height, width, margin), but it behaves inline.

Final Takeaways

Understanding the box model unlocks real control over layout.

Inline vs block behavior affects everything from alignment to spacing.

display: inline-block is your best friend when you want styling flexibility.

Making shapes like circles in CSS is simpler than you think.

If you're just starting with web development, mastering these fundamentals will set you apart when working on real-world projects, internships, or job interviews.

Let me know what you think — and if this helped you, consider sharing it with someone who’s also learning CSS!

🔗 Follow me for more beginner-friendly dev tips and real project breakdowns.