DEV Community: AYON

👮🏻‍♂️ JWT Logout: What “Stateless” Really Means in Production

AYON — Fri, 27 Mar 2026 18:47:14 +0000

JWT authentication is often introduced with one powerful idea:

It is stateless.

That sounds great for scalability, but it leads to a very practical question every backend engineer faces:

How do you log out a user if there is no session on the server?

Let’s break this down clearly and practically.

🔑 First, the Core Idea

A JWT (JSON Web Token) is stateless, meaning:

The server does NOT store session data
Once issued, the token is valid until it expires
The server only verifies signature and expiry

👉 So technically:

❗ You cannot directly "log out" a JWT like a session

This is the key mindset shift. Logout is no longer about deleting something on the server.

🤔 Then What Does Logout Mean?

In JWT-based systems, logout becomes:

Preventing further use of an already issued token

There is no single built-in solution. Instead, we use design patterns with different trade-offs.

🧠 Practical Strategies

1️⃣ 🔥 Client-Side Logout (Most Common Starting Point)

How it works

Remove token from client storage (localStorage, cookies, memory)

localStorage.removeItem("accessToken")

What happens

Client stops sending the token
User appears logged out

But

Token is still valid on the server until expiry

👉 This is called soft logout

✔ Simple
❌ Not secure for sensitive systems

2️⃣ ⏳ Short-Lived Access Tokens + Refresh Tokens (Industry Standard)

How it works

Access token → short expiry (for example 10 to 15 minutes)
Refresh token → long-lived and stored securely (DB or HTTP-only cookie)

Logout flow

Delete or invalidate the refresh token
Access token expires naturally

👉 This is the most widely used approach in production systems

✔ Secure
✔ Scalable
✔ Balanced design

3️⃣ 🚫 Token Blacklisting (Server-Side Control)

How it works

Store invalidated tokens or token IDs in DB or Redis

blacklist = ["jwt-id-123", "jwt-id-456"]

On every request, check if the token is blacklisted

Logout flow

Add token to blacklist

👉 This introduces state into the system

✔ Immediate logout
❌ Extra lookup on every request
❌ More operational complexity

4️⃣ 🔄 Token Versioning (Clean and Scalable Trick)

How it works

Store a tokenVersion per user in the database
Include this version inside the JWT

{
  "userId": 1,
  "tokenVersion": 2
}

Logout flow

Increment tokenVersion in DB

On request

Compare token version with DB value
If mismatch, reject the token

✔ Efficient
✔ No need to track every token
❌ Requires a DB read

🧠 Real-World Summary

Approach	Stateless	Secure	Used in production
Client delete only	✅	❌	Rare (low-risk apps)
Short-lived + refresh	⚠️ partially	✅✅	✅ MOST COMMON
Blacklist	❌	✅	Sometimes
Token versioning	❌	✅	Yes

⚖️ What Senior Engineers Actually Do

A common mistake is trying to keep systems “purely stateless”.

In reality:

Security requires control
Control introduces some form of state

So instead of chasing statelessness, experienced engineers focus on:

Minimizing state
Containing it where necessary
Keeping the system scalable

🧾 Final Takeaway

JWT does not provide logout out of the box
Logout is a system design decision
The most practical approach is:
- Short-lived access tokens
- Controlled refresh tokens
- Optional revocation mechanisms when needed

Stateless authentication is a powerful concept, but real-world systems are always a balance between stateless design and controlled state.

🧠 Interview-Ready Answer

If you want to explain this concisely:

JWTs are stateless, so logout cannot be handled directly on the server. In practice, we use short-lived access tokens with refresh tokens. On logout, we invalidate the refresh token and let the access token expire. For immediate revocation, we can use token blacklisting or versioning, which introduces some state.

This is one of those topics where understanding trade-offs matters more than memorizing definitions. That is what separates implementation-level knowledge from system design thinking.

Happy system designing !!

🗂️ Designing a Scalable Category System for an E-Commerce App

AYON — Fri, 06 Feb 2026 06:26:39 +0000

When building an e-commerce application, categories look simple at first — until your product count grows and business asks for:

sub-categories
nested menus
breadcrumbs
SEO-friendly URLs
easy reordering

This README explains a scalable, production-ready category design used in real-world systems, without overengineering.

❌ The Common Mistake

Many apps start with this:

categories
sub_categories
sub_sub_categories

This breaks immediately when:

you need more depth
hierarchy changes
queries become complex

✅ The Scalable Solution (Single Categories Table)

Use one table with a self-reference.

categories
-----------
id          UUID / BIGINT (PK)
name        VARCHAR(255)
slug        VARCHAR(255) UNIQUE
parent_id   UUID / BIGINT (FK → categories.id, NULL)
level       INT
path        VARCHAR(500)
sort_order  INT
is_active   BOOLEAN
created_at  TIMESTAMP
updated_at  TIMESTAMP

This supports unlimited nesting and clean queries.

🌳 How Hierarchy Works

Example structure

Electronics
 └── Mobiles
      ├── Smartphones
      └── Feature Phones

Stored data

id	name	parent_id	level	path	sort_order
1	Electronics	NULL	0	`1`	1
2	Mobiles	1	1	`1/2`	1
3	Smartphones	2	2	`1/2/3`	1
4	Feature Phones	2	2	`1/2/4`	2

🔑 Field Breakdown (The Important Part)

1️⃣ slug – URL-friendly identifier

A slug is a readable string used in URLs.

Example:

"Smart Phones" → "smart-phones"

Used for:

/category/electronics/mobiles/smart-phones

Why slugs matter:

SEO friendly
Stable URLs
No exposed IDs

2️⃣ level – Depth of the category

level tells how deep a category is.

level 0 = root category
level 1 = sub-category
level 2 = sub-sub-category

Why it exists:

Show only top-level categories on homepage
Restrict max depth
Simple filtering

Query example:

SELECT * FROM categories WHERE level = 0;

3️⃣ path – Full hierarchy (Materialized Path)

path stores the entire lineage from root → current node.

Example:

Electronics → Mobiles → Smartphones
path = "1/2/3"

Why it's powerful:

Fetch entire subtrees without recursion
Build breadcrumbs easily
Generate SEO URLs

Query example:

SELECT * FROM categories WHERE path LIKE '1/2/%';

4️⃣ sort_order – Display control (NOT hierarchy)

sort_order controls how categories appear in UI.

Without it → unpredictable order

With it → business-controlled order

Query example:

ORDER BY sort_order ASC;

Used for:

Navbar ordering
Featured categories
Seasonal rearrangements

💡 Why Use `level` + `path` Together?

Use case	level	path
Top-level filtering	✅	❌
Max depth validation	✅	❌
Subtree queries	❌	✅
Breadcrumbs	❌	✅
SEO URLs	❌	✅

They solve different problems, not duplication.

🌟 Product Association

Products usually belong to the leaf category.

products
---------
id
name
slug
price
category_id → categories.id

🎯 Business Superpower — Multi-Level Product Visibility

A product usually belongs to the deepest (leaf) category.

Example:

Electronics → Mobiles → Smartphones  
                        ↑  
                 Samsung Galaxy

But customers may browse or search from any level.

They might open:

Electronics
Mobiles
Smartphones

👉 In all cases, the product should appear.

🧠 How This Design Enables It

Because each category stores its path, we instantly know all its ancestors.

Smartphones → path = "1/2/3"

So the product automatically belongs to:

1 → Electronics
1/2 → Mobiles
1/2/3 → Smartphones

No extra mapping tables.

No complex recursion.

⚡ Example Queries

Show products under Mobiles (including all children)

SELECT p.*
FROM products p
JOIN categories c ON p.category_id = c.id
WHERE c.path LIKE '1/2/%';

This returns items from:

Smartphones
Feature Phones
any future subcategory

Show products under Electronics

WHERE c.path LIKE '1/%';

Boom 💥
Entire department.

💰 Business Advantages

✅ Better product discovery

Users don’t need perfect navigation.

✅ Faster search & filtering

No recursive joins required.

✅ Powerful marketing pages

Create pages like:

“Best Mobiles”
“Top Electronics Deals”

✅ Smarter recommendations & ads

Target an entire branch of the catalog.

✅ Future proof

Add deeper levels anytime → queries still work.

🏪 Real Outcome

If a Samsung Galaxy s23 FE is stored in:

Electronics → Mobiles → Smartphones

It will automatically appear in:

Electronics listing
Mobiles listing
Smartphones listing
search results
recommendations
breadcrumbs

✨ without extra logic.

🏆 Final Recommendation

✅ Single categories table
✅ parent_id for structure
✅ level for depth logic
✅ path for fast reads
✅ slug for clean URLs
✅ sort_order for UI control

This design scales from startup MVP → large marketplace without schema changes.

💬 Interview One-Liner

A scalable category system uses a self-referencing table with materialized paths to support unlimited depth, fast reads, clean URLs, and UI-controlled ordering.

If you liked this design, feel free to ⭐ the repo or reuse it in your project.

Happy building 🚀

☁️ Cloud Computing Service Models – AWS

AYON — Wed, 15 Oct 2025 06:05:30 +0000

In cloud computing, service models define how resources and services are delivered to users.

The three primary service models are:

1. Infrastructure as a Service (IaaS)

Definition:

Provides virtualized computing resources over the internet. Users can rent servers, storage, and networking infrastructure without owning physical hardware.

Key Features:

Complete control over infrastructure (OS, runtime, apps)
Highly scalable and flexible
Pay-as-you-go pricing
Ideal for sysadmins, DevOps, and IT teams

Examples in AWS:

🖥️ Amazon EC2 – Virtual servers (compute)
💾 Amazon S3 – Object storage
🛜 Amazon VPC – Virtual networking
📦 Amazon EBS – Block storage
🔐 AWS IAM – Access control

✅ Use Case:

Hosting web applications
Running enterprise workloads
Creating testing and development environments

2. Platform as a Service (PaaS)

Definition:

Provides a platform with pre-configured environments for building, testing, and deploying applications without managing underlying infrastructure.

Key Features:

Developers focus on application logic, not infrastructure
Auto-scaling and easy deployment
Integrated development tools and frameworks

Examples in AWS:

🧱 AWS Elastic Beanstalk – Deploy and manage apps easily
🧪 AWS Lambda (serverless) – Run code without managing servers
🗄️ Amazon RDS – Managed relational database service
🔔 Amazon API Gateway – Build and manage APIs

✅ Use Case:

Building scalable web apps quickly
Continuous deployment pipelines
Serverless application development

3. Software as a Service (SaaS)

Definition:

Delivers fully functional software over the internet on a subscription basis. The provider manages everything (infrastructure, platform, app, security).

Key Features:

Ready-to-use applications
No installation or maintenance
Accessible from any device via browser

Examples in AWS:

💻 Amazon WorkMail – Business email service
🧑‍💼 Amazon Chime – Online meetings and communication
📊 Third-party SaaS apps hosted on AWS (e.g., Salesforce, Zoom)

✅ Use Case:

Email services, CRM, collaboration tools
Productivity and business software

🧭 Comparison Table

Feature	IaaS	PaaS	SaaS
Control Level	High (infra & OS)	Medium (app only)	Low (end-user access)
Target User	IT Admin, DevOps	Developers	End Users
Example in AWS	EC2, S3, VPC	Elastic Beanstalk, Lambda, RDS	WorkMail, Chime, Salesforce
Scalability	Manual or auto scaling	Auto-scaling built-in	Provider managed
Maintenance	User-managed	Shared	Provider-managed

🏁 Additional Models (Emerging)

Function as a Service (FaaS) — e.g., AWS Lambda (a part of PaaS but more fine-grained)
Container as a Service (CaaS) — e.g., Amazon ECS and Amazon EKS

✅ Summary

IaaS → You manage everything except hardware
PaaS → You manage code and data only
SaaS → You just use the software

🌟 Modern Global Exception Handling in Spring Boot

AYON — Wed, 17 Sep 2025 08:18:50 +0000

Exception handling is essential for building robust, user-friendly APIs. With Spring Boot, you can centralize error handling using a Global Exception Handler and custom exceptions for clean, maintainable code. This guide shows you how to set up a modern global exception handler, create a custom exception, and use them in a controller—all in a way that's easy to understand and quick to implement.

1. Create a Custom Exception: `ResourceNotFoundException`

A custom exception helps you signal specific error cases (like a missing resource) in your business logic.

// filepath: src/main/java/com/example/exception/ResourceNotFoundException.java
package com.example.exception;

/**
 * Thrown when a requested resource is not found.
 */
public class ResourceNotFoundException extends RuntimeException {
    public ResourceNotFoundException(String message) {
        super(message);
    }
}

2. Implement a Global Exception Handler

Centralize your error handling for all controllers. This example uses a modern response format and logs errors for debugging.

// filepath: src/main/java/com/example/exception/GlobalExceptionHandler.java
package com.example.exception;

import com.example.utils.ApiResponse;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

import java.time.Instant;
import java.util.*;
import java.util.stream.Collectors;

@Slf4j
@RestControllerAdvice
public class GlobalExceptionHandler {

    // Handle Resource Not Found exceptions
    @ExceptionHandler(ResourceNotFoundException.class)
    public ResponseEntity<ApiResponse<Object>> handleResourceNotFound(ResourceNotFoundException ex) {
        ApiResponse<Object> response = ApiResponse.error(ex.getMessage(), "RESOURCE_NOT_FOUND");
        return new ResponseEntity<>(response, HttpStatus.NOT_FOUND);
    }

    // Handle validation errors
    @ExceptionHandler(MethodArgumentNotValidException.class)
    public ResponseEntity<ApiResponse<List<Map<String, String>>>> handleValidation(MethodArgumentNotValidException e) {
        List<Map<String, String>> details = e.getBindingResult()
            .getAllErrors()
            .stream()
            .map(error -> {
                Map<String, String> errorDetail = new HashMap<>();
                errorDetail.put("field", ((org.springframework.validation.FieldError) error).getField());
                errorDetail.put("message", error.getDefaultMessage());
                return errorDetail;
            })
            .collect(Collectors.toList());

        ApiResponse.Meta meta = new ApiResponse.Meta(
            Instant.now(),
            UUID.randomUUID().toString(),
            "1.0"
        );

        ApiResponse<List<Map<String, String>>> response = new ApiResponse<>(
            "fail",
            "Validation error!",
            details,
            meta,
            null
        );

        return new ResponseEntity<>(response, HttpStatus.UNPROCESSABLE_ENTITY);
    }

    @ExceptionHandler(Exception.class)
    public ResponseEntity<ApiResponse<Object>> handleGenericException(Exception exception) {
        log.error("Internal Server Error: {}", exception.getMessage(), exception);
        ApiResponse<Object> response = ApiResponse.error(exception.getMessage(), "INTERNAL_SERVER_ERROR");
        return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

3. Example Controller Using the Exception

Here’s a simple controller method that demonstrates how the custom exception and global handler work together.

Note: Service logic is placed in the controller for demonstration.

Best Practice: Move business logic to a service class for maintainability.

// filepath: src/main/java/com/example/controller/CategoryController.java
package com.example.controller;

import com.example.entity.Category;
import com.example.exception.ResourceNotFoundException;
import com.example.utils.ApiResponse;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.Arrays;
import java.util.List;

@RestController
@RequestMapping("/api/v1/categories")
public class CategoryController {

    // Example GET endpoint with inline logic for demonstration.
    // Best Practice: Move this logic to a service class!
    @GetMapping("/{id}")
    public ResponseEntity<ApiResponse<Category>> getCategoryById(@PathVariable Long id) {
        List<Category> categories = Arrays.asList(
            new Category(1L, "Fruits", "Fresh fruits", true, "/images/fruits.png"),
            new Category(2L, "Vegetables", "Green veggies", false, "/images/veggies.png")
        );
        Category found = categories.stream()
            .filter(cat -> cat.getId().equals(id))
            .findFirst()
            .orElseThrow(() -> new ResourceNotFoundException("Category not found with id: " + id));

        return ResponseEntity.ok(ApiResponse.success(found, "Category retrieved successfully"));
    }
}

4. Sample Error Response

When a category is not found, the API returns:

{
  "status": "fail",
  "message": "Validation error!",
  "data": [
    { "field": "name", "message": "Category name is required" }
  ],
  "meta": {
    "timestamp": "2025-09-17T12:34:56Z",
    "requestId": "b1a2c3d4-e5f6-7890-abcd-ef1234567890",
    "version": "1.0"
  }
}

5. Best Practices

Centralize exception handling with @RestControllerAdvice.
Use custom exceptions for clear, domain-specific errors.
Keep business logic in service classes for clean controllers.
Return structured error responses for easy client integration.
Log errors for debugging and monitoring.

Conclusion

With a global exception handler and custom exceptions, your Spring Boot API will be easier to maintain, debug, and consume.

Start with the patterns above and adapt them to your project for a modern, professional backend!

If you found this guide helpful, share it with your team or star your repository!

Steps to Migrate to Google Play App Signing

AYON — Thu, 24 Jul 2025 09:04:37 +0000

Follow these steps to migrate an existing published app from manual signing to Google Play App Signing.

✅ 1. Back Up Your Current Key

Securely store your existing signing credentials:

Keystore file: key.jks
Keystore password
Key alias
Key password

⚠️ Important: Keep a safe backup of these credentials. You’ll need them during the migration.

✅ 2. Export Your App Signing Key (PEPK)

Google requires an encrypted export of your current signing key.

In Play Console, go to: Setup → App integrity → App signing.
Under “Export and upload your app signing key”, download:
- pepk.jar
- The encryption key (displayed in the instructions).
Run the following command in your terminal (replace placeholders):

java -jar pepk.jar --keystore=key.jks --alias=<your-alias> \
--output=output.zip --encryption-key=<Google-encryption-key>

This generates output.zip containing your encrypted signing key.

✅ 3. Upload the Key to Google Play

Open Play Console and navigate to: Setup → App integrity → App signing
Click Opt in to Play App Signing.
Upload the output.zip file generated in the previous step.

✅ 4. Wait for Google to Process

Google will verify the uploaded key.
Once approved, Google Play App Signing becomes active.
From now on, Google securely manages your app signing key.

✅ Note: Your existing keystore (key.jks) will now act as your Upload Key.

You can continue using it or optionally register a new upload key.

✨ (Optional) Generate a New Upload Key

For additional security, you can generate a new upload key:

keytool -genkey -v -keystore upload-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Export the public certificate (.pem) from this new keystore.
Upload the certificate in Play Console as your new upload key.

📌 Summary

✔️ Backup your keystore (key.jks, alias, and passwords).

✔️ Export your signing key using pepk.jar from the Play Console.

✔️ Upload the encrypted key (output.zip) in Play Console → App Signing.

✔️ (Optional) Generate and register a new upload key for added security.

✅ Your app is now successfully migrated and managed by Google Play App Signing 🚀

📱From APK to .aab: Master the Modern Way to Build & Ship Android Apps

AYON — Thu, 26 Jun 2025 12:45:38 +0000

📦 What is an Android App Bundle (`.aab`)?

An App Bundle (.aab) is the official publishing format for Android apps on the Google Play Store, replacing the older APK format for new apps.

🔹 What is an App Bundle?

An App Bundle is a publishing format that includes all your app’s compiled code, resources, and assets — but it defers APK generation and signing to Google Play.

Rather than shipping a single monolithic APK, the .aab allows Google Play to create and serve optimized APKs tailored for each user’s device configuration.

🔹 Why Use an App Bundle?

Google Play uses Dynamic Delivery to generate and deliver only the necessary code and resources to a user’s device.

✅ Benefits:

Smaller download sizes
Smaller installed app sizes
Faster installation times
Less storage usage

🔹 Example

Let’s say your app supports:

ARM and x86 architectures
Multiple screen densities
Multiple languages

Instead of including everything in one APK, Play Store builds a custom APK for each user — e.g., only ARM64 architecture + English language + xxhdpi screen resources — reducing the total size significantly.

🔹 App Bundle vs APK

Feature	`.apk` (Android Package)	`.aab` (App Bundle)
Format	Final, installable package	Upload format for Play Store
Contains	All resources and architectures	Modular resources and code
Upload to Play Store	✅ Yes	✅ Yes (mandatory for new apps)
Install Locally	✅ Yes (via ADB)	❌ No (use generated APKs instead)
Size Optimization	❌ Manual	✅ Automatic (via Play Store)

🔹 When Should You Use `.aab`?

Mandatory for new apps on Google Play.
Highly recommended for all apps to improve performance and reduce APK size.

🔹 How to Build an App Bundle in Android Studio?

Open your project in Android Studio.
Navigate to: Build > Build Bundle(s) / APK(s) > Build Bundle(s)
The generated .aab file will be located at: app/build/outputs/bundle/

🔹 Notes

You cannot install a .aab file directly on a device.
To test locally, you can use bundletool to convert .aab to APKs:

  bundletool build-apks --bundle=my_app.aab --output=my_app.apks --ks=mykey.jks ...

📌 Conclusion

App Bundles offer a modern, efficient, and scalable way to distribute Android apps by optimizing them per device using Dynamic Delivery. While APKs are still useful for testing, .aab is now the standard for production builds on Google Play.

🚀 Optimizing Your React App: Best Practices for Developers

AYON — Mon, 31 Mar 2025 05:06:15 +0000

As a developer, ensuring that your React app is optimized for performance, scalability, and user experience is crucial. Whether you're working on a small project or a large-scale application, the following best practices will help you create a more efficient and responsive React application.

1️⃣ Enhancing Rendering & Component Performance

Rendering inefficiencies can significantly impact your app's performance. Here’s how you can optimize it:

Use React.memo() to prevent unnecessary re-renders of functional components.
Utilize useCallback() & useMemo() to optimize function and value references in child components.
Implement Lazy Loading using React.lazy() & Suspense to reduce the initial bundle size and improve loading speeds.
Avoid Inline Functions & Objects in JSX as they create new references on every render, leading to performance overhead.
Leverage Automatic Batching in React 18+ to update multiple states in a single render pass, reducing re-renders.

2️⃣ Efficient State Management

Managing state properly is essential for app scalability and performance.

Use Context API Wisely – Avoid unnecessary re-renders by wrapping only relevant components in a context provider.
Choose the Right State Management Solution – Consider Redux Toolkit, Zustand, or Recoil instead of excessive prop drilling.
Minimize Unnecessary State Updates – Keep transient UI states (like modals, dropdowns) within local component state rather than global state.

3️⃣ Reducing Bundle Size & Optimizing Asset Loading

Large bundle sizes can slow down page loads. Optimize your assets with these techniques:

Enable Tree Shaking to remove unused code by properly structuring ES6 module imports.
Use Code Splitting to load components dynamically using React.lazy() and import().
Optimize Images by using modern formats like WebP, lazy loading (loading="lazy"), and CDNs for faster delivery.
Use SVG Instead of PNGs where applicable for scalable and lightweight graphics.
Compress and Minify Files using tools like Terser, UglifyJS, and Brotli compression to reduce payload size.

4️⃣ Optimizing API Calls & Data Fetching

Efficient data handling reduces unnecessary network requests and improves app responsiveness.

Leverage SWR or React Query for API caching, pagination, and automatic background re-fetching.
Debounce API Requests using lodash debounce() to minimize redundant network calls in search bars and fast user interactions.
Use GraphQL to fetch only required data instead of over-fetching REST responses.
Implement WebSockets for real-time updates instead of inefficient polling techniques.

5️⃣ Improving Page Load Speed & User Experience

User experience is critical for retention and engagement. Here’s how to improve it:

Preload Essential Resources using <link rel="preload"> for critical assets like fonts and scripts.
Remove Unused CSS & JavaScript with tools like PurgeCSS to avoid unnecessary bloat.
Optimize Web Vitals by improving metrics such as Time to Interactive (TTI) and First Contentful Paint (FCP) with Lighthouse audits.
Enable HTTP/2 & GZIP/Brotli Compression to accelerate network performance and reduce load times.

6️⃣ Debugging & Performance Monitoring

Continuous monitoring and debugging help identify issues before they affect users.

Use React Developer Tools to analyze component re-renders and identify bottlenecks.
Monitor Performance with Lighthouse, WebPageTest, and React Profiler.
Implement Error Boundaries to prevent app crashes and provide fallback UI when errors occur.
Use Sentry or LogRocket to capture real-time errors and enhance debugging workflows.

🔥 Final Thoughts

By applying these optimization techniques, your React app will be faster, more efficient, and more scalable. Keep iterating and monitoring performance to deliver a seamless user experience. Happy coding! 🚀

React Context – Quick Revision Notes

AYON — Thu, 27 Mar 2025 13:52:02 +0000

🔹 Definition: Context API manages global state and avoids prop drilling.

1️⃣ Create Context

const MyContext = createContext(defaultValue);

2️⃣ Provide Context

<MyContext.Provider value={sharedData}>
  <App />
</MyContext.Provider>

3️⃣ Consume Context

✅ With useContext (Functional Components)

const value = useContext(MyContext);

✅ With Context.Consumer (For Class Components)

<MyContext.Consumer>
  {value => <div>{value}</div>}
</MyContext.Consumer>

🚀 Example (Sidebar Context)

"use client";

import { useIsMobile } from "@/hooks/use-mobile";
import { createContext, useContext, useEffect, useState } from "react";

type SidebarState = "expanded" | "collapsed";

type SidebarContextType = {
  state: SidebarState;
  isOpen: boolean;
  setIsOpen: (open: boolean) => void;
  isMobile: boolean;
  toggleSidebar: () => void;
};

const SidebarContext = createContext<SidebarContextType | null>(null);

export function useSidebarContext() {
  const context = useContext(SidebarContext);
  if (!context) {
    throw new Error("useSidebarContext must be used within a SidebarProvider");
  }
  return context;
}

export function SidebarProvider({
  children,
  defaultOpen = true,
}: {
  children: React.ReactNode;
  defaultOpen?: boolean;
}) {
  const [isOpen, setIsOpen] = useState(defaultOpen);
  const isMobile = useIsMobile();

  useEffect(() => {
    if (isMobile) {
      setIsOpen(false);
    } else {
      setIsOpen(true);
    }
  }, [isMobile]);

  function toggleSidebar() {
    setIsOpen((prev) => !prev);
  }

  return (
    <SidebarContext.Provider
      value={{
        state: isOpen ? "expanded" : "collapsed",
        isOpen,
        setIsOpen,
        isMobile,
        toggleSidebar,
      }}
    >
      {children}
    </SidebarContext.Provider>
  );
}

⚡ Best Practices

✅ Use multiple contexts for modularity.
✅ Combine with useReducer for complex state.
✅ Wrap context logic in a custom hook for cleaner code.

const useMyContext = () => useContext(MyContext);

🚀 Use Context for: Theme, Auth, Language, Global State.

The Future is Serverless

AYON — Thu, 27 Mar 2025 06:14:29 +0000

In today’s fast-paced development landscape, Serverless Architecture has emerged as a game-changer. It enables businesses to build and deploy applications without worrying about infrastructure management. As a senior developer or CTO, adopting serverless can lead to better scalability, cost efficiency, and faster time-to-market.

What is Serverless Architecture?

Serverless architecture is a cloud-native model where applications rely on backend services fully managed by cloud providers. Developers only focus on writing code, while the provider takes care of server provisioning, scaling, and maintenance.

Key Benefits:

No Server Management – No need to maintain or provision servers.
Event-Driven Execution – Functions run in response to events (e.g., HTTP requests, database changes).
Auto-Scaling – Instantly scales based on demand, eliminating capacity concerns.
Pay-as-You-Go Pricing – Costs are based on actual usage, reducing unnecessary expenses.
Stateless Functions – Each function runs independently, making deployments easier.

Core Components of Serverless Architecture

1. Function as a Service (FaaS)

FaaS enables running small, independent functions triggered by events. Leading providers include:

AWS Lambda (Amazon Web Services)
Google Cloud Functions
Azure Functions
IBM Cloud Functions
Oracle Functions

2. Backend as a Service (BaaS)

BaaS offloads backend management by using cloud-hosted services for databases, authentication, and storage. Popular options:

Firebase (Google’s real-time database, authentication, and hosting)
AWS Amplify (Full-stack serverless framework)
Supabase (Open-source Firebase alternative)
Auth0 (Authentication & Authorization)

3. Event Triggers

Serverless applications react to specific events like HTTP requests, file uploads, and database updates. Key event-driven services include:

AWS API Gateway – Manages HTTP requests to AWS Lambda
Google Pub/Sub – Event messaging for distributed systems
Azure Event Grid – Handles event-driven workflows

4. Managed Databases & Storage

Serverless applications require scalable, managed storage solutions. Examples:

Amazon DynamoDB – NoSQL, fully managed
Firebase Firestore – Real-time NoSQL database
Google Cloud Firestore – Cloud-native NoSQL
AWS S3 – Serverless file storage

Real-World Use Cases

Serverless is not just a trend—it’s a practical solution for various applications:

REST APIs & Microservices (e.g., API Gateway + AWS Lambda)
Real-time Data Processing (e.g., Log streaming, Analytics)
Chatbots & Notifications (Automated message handling)
IoT Applications (Processing sensor data in real-time)
Automated Backups & CRON Jobs (Scheduled tasks with minimal overhead)

The Verdict: Is Serverless Right for You?

Serverless architecture is an excellent choice for startups, enterprises, and any business looking to optimize cloud spending while improving agility. However, it’s essential to consider factors like cold start times, vendor lock-in, and debugging challenges before diving in.

As a CTO or tech lead, embracing serverless can help your team move faster and innovate without operational burdens. The future is serverless—are you ready to adopt it?

Accessing MySQL Server from a Remote Machine in the Same Network

AYON — Mon, 24 Mar 2025 09:04:35 +0000

Overview

This guide explains how to connect to a MySQL server running on a local network from a different machine. If you receive the error Host 'your_host' is not allowed to connect to this MySQL server, follow these steps to resolve it.

Step 1: Verify Network Connectivity

Before configuring MySQL, check if the server is reachable from the client machine.

1.1 Ping the MySQL Server

Run this command from the client machine:

ping 192.168.2.51

If you receive replies, the server is reachable.

1.2 Test MySQL Port Connectivity

Use PowerShell or Command Prompt:

Test-NetConnection 192.168.2.51 -Port 3306

If TcpTestSucceeded : True, MySQL is listening on port 3306.

Step 2: Grant Remote Access in MySQL

2.1 Log into MySQL on the Server

On the MySQL server (192.168.2.51), open a terminal or command prompt and log in:

mysql -u root -p

Enter the password when prompted.

2.2 Check Existing User Privileges

Run the following command:

SELECT host, user FROM mysql.user;

If the root user only has localhost access, update its privileges.

2.3 Grant Remote Access to a Specific IP

To allow connections from 192.168.2.57, run:

GRANT ALL PRIVILEGES ON *.* TO 'root'@'192.168.2.57' IDENTIFIED BY 'root' WITH GRANT OPTION;
FLUSH PRIVILEGES;

2.4 (Optional) Allow Access from Any IP

If you want to allow connections from any machine in the network:

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'root' WITH GRANT OPTION;
FLUSH PRIVILEGES;

Step 3: Modify MySQL Configuration to Accept Remote Connections

By default, MySQL only listens on 127.0.0.1. Update this setting to allow external connections.

3.1 Edit MySQL Configuration File

Windows:

Edit C:\ProgramData\MySQL\MySQL Server X.X\my.ini

Linux:

Edit /etc/mysql/my.cnf or /etc/mysql/mysql.conf.d/mysqld.cnf

Find this line:

bind-address = 127.0.0.1

Change it to:

bind-address = 0.0.0.0

3.2 Restart MySQL Service

Windows:

net stop mysql
net start mysql

Linux:

sudo systemctl restart mysql

Step 4: Connect to MySQL from the Remote Machine

Now, on 192.168.2.57, try connecting:

mysql -h 192.168.2.51 -P 3306 -u root -p

Conclusion

Following these steps, you should be able to connect to MySQL from another machine on the same network. If issues persist, check firewall rules and MySQL user privileges.

Flutter Windows Installer 🚀

AYON — Sun, 23 Mar 2025 18:26:16 +0000

This README provides instructions for creating a Windows installer for your Flutter application using Inno Setup.

Prerequisites 🛠️

Build Flutter App for Windows: Run the following command in your Flutter project directory to generate the Windows build:

   flutter build windows

This will generate the build files in the build/windows/runner/Release directory.

Install Inno Setup: Download and install Inno Setup from jrsoftware.org or Direct Download Link innosetup-6.4.0.exe.

Steps to Create the Installer 📝

Prepare the Build Files
Copy all files from build/windows/runner/Release to a new directory, e.g., C:\MyFlutterApp\ReleaseFiles.
Create the Inno Setup Script
Open Inno Setup and create a new script with the following content:

   [Setup]
   AppName=MyFlutterApp
   AppVersion=1.0.0
   DefaultDirName={pf}\MyFlutterApp
   DefaultGroupName=MyFlutterApp
   OutputDir=C:\MyFlutterApp\Installer
   OutputBaseFilename=MyFlutterAppSetup
   Compression=lzma
   SolidCompression=yes

   [Files]
   Source: "C:\MyFlutterApp\ReleaseFiles\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs

   [Icons]
   Name: "{group}\MyFlutterApp"; Filename: "{app}\MyFlutterApp.exe"
   Name: "{group}\Uninstall MyFlutterApp"; Filename: "{uninstallexe}"

   [Run]
   Filename: "{app}\MyFlutterApp.exe"; Description: "Launch MyFlutterApp"; Flags: nowait postinstall skipifsilent

Compile the Script
- Save the script with a .iss extension, for example, MyFlutterAppInstaller.iss.
- Open Inno Setup and click Compile to generate the installer in the OutputDir (C:\MyFlutterApp\Installer).
Test the Installer
Run the generated MyFlutterAppSetup.exe to ensure the installer works as expected.

Customization Options 🎨

Update Paths: Change file paths in the script to match your project’s structure.
Add Additional Files: Include licenses or documentation by adding entries to the [Files] section.
Uninstaller: Inno Setup automatically includes an uninstaller for your application.

Example Project Structure 🗂️

C:\MyFlutterApp
├── ReleaseFiles  # Contains built application files
│   ├── MyFlutterApp.exe
│   ├── data
│   └── ...
├── Installer      # Generated installer output
│   └── MyFlutterAppSetup.exe
└── MyFlutterAppInstaller.iss  # Inno Setup script

Conclusion 🎉

By following these steps, you can create a professional installer for your Flutter Windows application. This will make it easier for users to install and use your app. If you have any questions or feedback, feel free to leave a comment below. Happy coding! 💻

Supercharge Your Flutter Apps: Seamlessly Integrate C++ with Dart using DLLs

AYON — Sat, 22 Mar 2025 02:19:26 +0000

Unlock the full potential of your Flutter applications by integrating powerful C++ functionalities. This guide will walk you through the process of using Dynamic Link Libraries (DLLs) to enhance your Dart code. Let's dive in! 🌊

Prerequisites 🛠️

Flutter Setup: Ensure Flutter is installed and configured on your system.
C++ Compiler: Install MinGW or Visual Studio for compiling the DLL.
Dart FFI: Familiarity with the dart:ffi package is helpful but not required.

Step 1: Create the C++ DLL

Here is a simple C++ example with two functions: one to add two integers and another to concatenate two strings.
example_code.h:

#ifndef DATAPROCESSOR_H
#define DATAPROCESSOR_H

#include <string>

extern "C" __declspec(dllexport) int add(int a, int b);
extern "C" __declspec(dllexport) const char* concatenateStrings(const char* str1, const char* str2);
extern "C" __declspec(dllexport) void freeString(void* str);

#endif

Step 2: Write Your C++ Code 💻

Create a C++ file (example_code.cpp) with the following content:

#include "example_code.h"
#include <string>
#include <cstring>

extern "C" __declspec(dllexport) int add(int a, int b) {
    return a + b;
}

extern "C" __declspec(dllexport) const char* concatenateStrings(const char* str1, const char* str2) {
    std::string result = std::string(str1) + std::string(str2);
    char* concatenated = new char[result.size() + 1];
    strcpy(concatenated, result.c_str());
    return concatenated;
}

extern "C" __declspec(dllexport) void freeString(void* str) {
    delete[] static_cast<char*>(str);
}

Compile the DLL

Run the following command in your terminal to compile the DLL:

cl /I . /LD example_code.cpp /Fe:example_code.dll /EHsc /std:c++17

This will generate example_code.dll in your current directory.

Step 3: Integrate C++ with Dart 🧩

Create a Dart File: In your Dart project, create a file named example.dart.
Add FFI Dependency: Open pubspec.yaml and add the ffi package:
```
dependencies:
  ffi: ^1.1.2
```
Write Dart Code: Use the following Dart code to call the C++ functions:
example.dart:

import 'dart:ffi';
import 'package:ffi/ffi.dart';

// Define function signatures
typedef AddC = Int32 Function(Int32 a, Int32 b);
typedef AddDart = int Function(int a, int b);

typedef ConcatC = Pointer<Utf8> Function(Pointer<Utf8> str1, Pointer<Utf8> str2);
typedef ConcatDart = Pointer<Utf8> Function(Pointer<Utf8> str1, Pointer<Utf8> str2);

typedef FreeC = Void Function(Pointer<Utf8> str);
typedef FreeDart = void Function(Pointer<Utf8> str);

class MyLibrary {
  final DynamicLibrary _dll;

  MyLibrary(this._dll);

  int add(int a, int b) {
    final AddDart add = _dll.lookupFunction<AddC, AddDart>('add');
    return add(a, b);
  }

  String concatenateStrings(String str1, String str2) {
    final ConcatDart concat = _dll.lookupFunction<ConcatC, ConcatDart>('concatenateStrings');
    final FreeDart free = _dll.lookupFunction<FreeC, FreeDart>('freeString');

    final Pointer<Utf8> str1Pointer = str1.toNativeUtf8();
    final Pointer<Utf8> str2Pointer = str2.toNativeUtf8();

    final Pointer<Utf8> resultPointer = concat(str1Pointer, str2Pointer);

    calloc.free(str1Pointer);
    calloc.free(str2Pointer);

    if (resultPointer != nullptr) {
      final String result = resultPointer.toDartString();
      free(resultPointer);
      return result;
    } else {
      return '';
    }
  }
}

void main() {
  final dylib = DynamicLibrary.open('example_code.dll');
  final myLibrary = MyLibrary(dylib);

  print('Addition Result: ${myLibrary.add(10, 20)}');

  final result = myLibrary.concatenateStrings('Hello, ', 'World!');
  print('Concatenation Result: $result');
}

Step 4: Test Your Application 🧪

Place the generated example_code.dll in the same directory as your Dart file.
Run the Dart application:

   dart example.dart

You should see the following output:

   Addition Result: 30
   Concatenation Result: Hello, World!

Key Takeaways 📚

1.Use dart:ffi to call C++ functions from Dart.
2.Always free dynamically allocated memory in C++ to prevent memory leaks.
3.Make sure the DLL file is accessible by your Flutter or Dart application.

By following these steps, you can easily extend your Flutter application with native functionality using DLL files. Happy coding! 🧑‍💻

DEV Community: AYON

👮🏻‍♂️ JWT Logout: What “Stateless” Really Means in Production

🔑 First, the Core Idea

🤔 Then What Does Logout Mean?

🧠 Practical Strategies

1️⃣ 🔥 Client-Side Logout (Most Common Starting Point)

2️⃣ ⏳ Short-Lived Access Tokens + Refresh Tokens (Industry Standard)

3️⃣ 🚫 Token Blacklisting (Server-Side Control)

4️⃣ 🔄 Token Versioning (Clean and Scalable Trick)

🧠 Real-World Summary

⚖️ What Senior Engineers Actually Do

🧾 Final Takeaway

🧠 Interview-Ready Answer

🗂️ Designing a Scalable Category System for an E-Commerce App

❌ The Common Mistake

✅ The Scalable Solution (Single Categories Table)

🌳 How Hierarchy Works

🔑 Field Breakdown (The Important Part)

1️⃣ slug – URL-friendly identifier

2️⃣ level – Depth of the category

3️⃣ path – Full hierarchy (Materialized Path)

4️⃣ sort_order – Display control (NOT hierarchy)

💡 Why Use level + path Together?

🌟 Product Association

🎯 Business Superpower — Multi-Level Product Visibility

🧠 How This Design Enables It

⚡ Example Queries

Show products under Mobiles (including all children)

💰 Business Advantages

✅ Better product discovery

✅ Faster search & filtering

✅ Powerful marketing pages

✅ Smarter recommendations & ads

✅ Future proof

🏪 Real Outcome

🏆 Final Recommendation

💬 Interview One-Liner

☁️ Cloud Computing Service Models – AWS

1. Infrastructure as a Service (IaaS)

2. Platform as a Service (PaaS)

3. Software as a Service (SaaS)

🧭 Comparison Table

🏁 Additional Models (Emerging)

✅ Summary

🌟 Modern Global Exception Handling in Spring Boot

1. Create a Custom Exception: ResourceNotFoundException

2. Implement a Global Exception Handler

3. Example Controller Using the Exception

4. Sample Error Response

5. Best Practices

Conclusion

Steps to Migrate to Google Play App Signing

✅ 1. Back Up Your Current Key

✅ 2. Export Your App Signing Key (PEPK)

✅ 3. Upload the Key to Google Play

✅ 4. Wait for Google to Process

✨ (Optional) Generate a New Upload Key

📌 Summary

📱From APK to .aab: Master the Modern Way to Build & Ship Android Apps

📦 What is an Android App Bundle (.aab)?

🔹 What is an App Bundle?

🔹 Why Use an App Bundle?

✅ Benefits:

🔹 Example

🔹 App Bundle vs APK

🔹 When Should You Use .aab?

🔹 How to Build an App Bundle in Android Studio?

🔹 Notes

📌 Conclusion

🚀 Optimizing Your React App: Best Practices for Developers

1️⃣ Enhancing Rendering & Component Performance

2️⃣ Efficient State Management

3️⃣ Reducing Bundle Size & Optimizing Asset Loading

4️⃣ Optimizing API Calls & Data Fetching

5️⃣ Improving Page Load Speed & User Experience

6️⃣ Debugging & Performance Monitoring

🔥 Final Thoughts

React Context – Quick Revision Notes

1️⃣ Create Context

2️⃣ Provide Context

💡 Why Use `level` + `path` Together?

1. Create a Custom Exception: `ResourceNotFoundException`

📦 What is an Android App Bundle (`.aab`)?

🔹 When Should You Use `.aab`?