Forem: Abhijeet kumar

A comprehensive guide to create first FastAPI Rest API

Abhijeet kumar — Thu, 06 Mar 2025 17:49:04 +0000

In this blog post, we’ll explore how to create a simplified FastAPI project using SQLAlchemy ORM and an SQLite database to manage a basic newsletter subscription system, including subscribing, unsubscribing, and retrieving the subscriber list.

Create Virtual Enviromint and FastAPI project —

After creating our project directory we need to be create virtual environment then we will install required library by executing below command.

pip install fastapi[standard] uvicorn sqlalchemy aiomysql pydantic_settings

fastapi[standard] — Installs FastAPI along with extra dependencies for full functionality (like pydantic, httpx).
uvicorn — ASGI server for running FastAPI applications efficiently.
sqlalchemy — ORM for interacting with relational databases using Python.
aiomysql — Asynchronous MySQL driver for SQLAlchemy to enable async database operations.
pydantic_settings — Manages application settings using .env files and environment variables with Pydantic, then generate a requirements.txt file which hold all dependencies details.

pip freeze > requirements.txt

Once installation is completed then we have to create a main.py which is responsive for manage our FastAPI project, over all structure will look like this.

my_fastapi_project/
├── main.py
├── database/
│   ├── config.py
│   ├── database.py
├── newsletter/models.py
│   ├── models.py
│   ├── routes.py
│   ├── schemas.py
│   ├── utils.py
├── .env
├── requirements.txt
├── venv/ (virtual environment)
└── vercel.json
├── .gitignore
└── README.md

Now let break down each file importance in details.

main.py —

In FastAPI, main.py is the entry point of the application where the FastAPI instance is created, routes (endpoints) are defined, and the app is run using a server like Uvicorn.

It serves as the starting file for handling API requests and responses.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from database.database import get_db , engine , Base
import os
import uvicorn
from newsletter.routes import router as newsletter_route
app = FastAPI()
Base.metadata.create_all(bind=engine)
app.include_router(newsletter_route)

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


if __name__ == "__main__":
    uvicorn.run(
        "main:app",
        host="0.0.0.0",
        port=8000,
        reload=True,
        reload_dirs=[os.path.dirname(os.path.abspath(__file__))],
        reload_excludes=[
            "*/.git/*",
            "*/__pycache__/*",
            "*.pyc",
            "*/.pytest_cache/*",
            "*/.vscode/*",
            "*/.idea/*"
        ],
        reload_delay=1,
        reload_includes=["*.py", "*.html", "*.css", "*.js"]
    )

Break down —

This FastAPI application is structured to handle newsletters and is configured with middleware, database connections, and automatic reloading. Below is a breakdown of each component.

Imports —

FastAPI— The core framework for building APIs.
CORSMiddleware— Middleware to handle Cross-Origin Resource Sharing (CORS).
get_db, engine, Base— Database-related imports from a custom module.
os— Used for handling file paths.
uvicorn— ASGI server to run the FastAPI application.
router as newsletter_route— Imports newsletter-related routes.

2. Application Initialization —

app = FastAPI()— Creates an instance of the FastAPI application.

3. Database Setup:

Base.metadata.create_all(bind=engine)— Ensures all database tables are created using SQLAlchemy's ORM.

4. Including Routers —

app.include_router(newsletter_route) — Registers the newsletter routes with the FastAPI app.

5. CORS Middleware Configuration —

allow_origins=["*"]— Allows requests from any origin.
allow_credentials=True— Allows sending credentials (cookies, authorization headers).
allow_methods=["*"] — Allows all HTTP methods.
allow_headers=["*"]— Allows all headers.

6. Application Execution —

The main block ensures that the application runs when executed directly.
uvicorn.run("main:app", ...) starts the FastAPI server with
host="0.0.0.0": Listens on all network interfaces.
port=8000— Runs on port 8000.
reload=True — Enables automatic reload on code changes.
reload_dirs — Specifies which directories to watch for changes.
reload_excludes— Excludes unnecessary files and directories from reloading.
reload_includes — Specifies file types to trigger reloads.

2. config.py —

from pydantic_settings import BaseSettings

class Settings(BaseSettings):
    DATABASE_URL: str 
    class Config:
        env_file = ".env"

settings = Settings()

This code defines a Pydantic Settings class to manage environment variables. It inherits from BaseSettings, allowing automatic loading of configuration values from an .env file or system environment variables.

The Config subclass specifies the .env file as the source. When an instance of Settings is created, it fetches the environment variables, enabling secure and flexible configuration management.

3. database.py —

from sqlalchemy import create_engine
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker
from .config import settings

SQLALCHEMY_DATABASE_URL = settings.DATABASE_URL 

#ensure .env file with DATABASE_URL="database_name" or put static database name 

engine = create_engine(
    SQLALCHEMY_DATABASE_URL, 
    connect_args={"check_same_thread": False}  
)
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)

Base = declarative_base()

def get_db():
    db = SessionLocal()
    try:
        yield db
    finally:
        db.close()

This code sets up SQLAlchemy with a database connection using environment-based configuration.

Import necessary SQLAlchemy components

create_engine— Establishes a connection to the database.
declarative_base— Creates a base class for defining ORM models.
sessionmaker — Manages database sessions.

2. Load database URL dynamically

It imports settings from config to fetch DATABASE_URL from environment variables.

3. Create the database engine

create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}) initializes a connection.
The connect_args parameter ensures SQLite allows multiple threads to interact with the database.

4. Session Management

SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine) transactions variable.

5. Base Class for ORM Models

Base = declarative_base() is used to define database models.

6. Dependency for Database Session

get_db() provides a session instance for database operations using a generator.
It ensures that the session is properly closed after use.

4. models.py —

from sqlalchemy import Column, Integer, String, Boolean, DateTime
from database.database import Base
from datetime import datetime
class NewsletterSubscription(Base):
    __tablename__ = "newsletter_subscriptions"
    id = Column(Integer, primary_key=True, index=True)
    email = Column(String(255) , unique=True , nullable=True)
    is_active = Column(Boolean, default=True)
    created_at = Column(DateTime, default=datetime.utcnow)

This is Newsletter Table model with id , email , is_active , create_at columns.

5. routes.py —

from fastapi import APIRouter, Depends, HTTPException, status
from sqlalchemy.orm import Session
from database.database import get_db
from .schemas import NewsletterSubscriptionBase , NewsletterSubscriptionCreate , NewsletterSubscriptionResponse
from .utils import create_subscription , get_all_subscriptions , delete_subscription
router = APIRouter(prefix="/newsletter", tags=["newsletter"])

@router.post("/subscribe", response_model=NewsletterSubscriptionResponse)
def subscribe(
    subscription: NewsletterSubscriptionCreate,
    db: Session = Depends(get_db)
):

    return create_subscription(db, subscription)

@router.get("/subscriptions", response_model=list[NewsletterSubscriptionResponse])
def get_subscriptions(
    skip: int = 0,
    limit: int = 100,
    db: Session = Depends(get_db)
):
    return get_all_subscriptions(db, skip, limit)

@router.delete("/unsubscribe/{email}")
def unsubscribe(email: str, db: Session = Depends(get_db)):
    if delete_subscription(db, email):
        return {"message": "Successfully unsubscribed"}
    raise HTTPException(
        status_code=status.HTTP_404_NOT_FOUND,
        detail="Subscription not found"
    )

This file routes.py perfoming actions while its using utils function by passing parameter in functions.

subscribe (POST /subscribe) — Adds a new subscription to the newsletter route using utils function for subscribe.
get_subscriptions (GET /subscriptions) — Retrieves a list of all newsletter subscriptions with optional pagination (skip and limit) route using utils function for subscribe.
unsubscribe (DELETE /unsubscribe/{email}) — Removes a subscription using an email; returns an error if the email is not found route using utils function for subscribe.

6. schemas.py —

from pydantic import BaseModel, EmailStr
from datetime import datetime
from typing import Optional

class NewsletterSubscriptionBase(BaseModel):
    email: EmailStr

class NewsletterSubscriptionCreate(NewsletterSubscriptionBase):
    pass

class NewsletterSubscriptionResponse(NewsletterSubscriptionBase):
    id: int
    is_active: bool
    created_at: datetime

    class Config:
        from_attributes = True

This setup ensures data validation, serialization, and deserialization, making it useful in APIs (e.g., FastAPI) for handling newsletter subscriptions efficiently.

Let break down —

BaseModel — The base class for creating Pydantic models.
EmailStr — A built-in type from Pydantic that validates email formats.
datetime — Used for handling timestamps.
Optional — Allows fields to be optional.

Define a Base Model (NewsletterSubscriptionBase)

Contains a single field, email, which must be a valid email address (EmailStr).
This acts as a base class for other models to inherit.

2. Define a Create Model (NewsletterSubscriptionCreate)

Inherits from NewsletterSubscriptionBase.
No additional fields, meaning it has the same structure as the base model.
Used specifically for handling user input when subscribing.

3. Define a Response Model (NewsletterSubscriptionResponse)

Extends NewsletterSubscriptionBase to include additional fields:
id — A unique identifier for the subscription.
is_active — A boolean flag indicating if the subscription is active.
created_at— A timestamp showing when the subscription was created.
The Config class includes:
from_attributes = True— Allows automatic conversion from ORM models to Pydantic models.

7. utils.py —

from sqlalchemy.orm import Session
from . import models, schemas
from fastapi import HTTPException, status

def create_subscription(db: Session, subscription: schemas.NewsletterSubscriptionCreate):
    db_subscription = models.NewsletterSubscription(
        email=subscription.email
    )
    try:
        db.add(db_subscription)
        db.commit()
        db.refresh(db_subscription)
        return db_subscription
    except Exception as e:
        db.rollback()
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST,
            detail="Email already subscribed"
        )

def get_subscription(db: Session, email: str):
    return db.query(models.NewsletterSubscription).filter(
        models.NewsletterSubscription.email == email
    ).first()

def get_all_subscriptions(db: Session, skip: int = 0, limit: int = 100):
    return db.query(models.NewsletterSubscription).offset(skip).limit(limit).all()

def delete_subscription(db: Session, email: str):
    subscription = get_subscription(db, email)
    if subscription:
        db.delete(subscription)
        db.commit()
        return True
    return False

These utility functions are responsible for handling subscription creation, retrieval by email, listing, and deletion.

create_subscription — Adds a new email subscription to the database. If the email is already subscribed, it rolls back the transaction and raises an error.
get_subscription — Retrieves a subscription by email.
get_all_subscriptions — Fetches all subscriptions with optional pagination (skip and limit).
delete_subscription — Deletes a subscription by email if it exists; returns False if not found.

Conclusion: **FastAPI makes building APIs **fast, efficient, and developer-friendly with automatic validation, type hints, and asynchronous support.

By following this guide, you’ve set up your first FastAPI application, defined endpoints, and tested them using the interactive Swagger UI.

With its simplicity and performance, FastAPI is a great choice for modern web APIs.

GitHub repo : https://github.com/abhijitkumarIN/deployment

Live URL : https://deployment-vund.onrender.com/docs

Your appreciation or feedback on this insight would be greatly valued, whether it’s a small follow up or leaving a note.

And connect with me on* X handler*** for the tech insights.
Looking forward to engaging with you!**

How to Deploy FastAPI to Render

Abhijeet kumar — Thu, 06 Mar 2025 17:48:03 +0000

In this blog, we’ll guide you through deploying a FastAPI application to Render, a cloud platform designed for easy and scalable web hosting.

**Render —
**Render provides an easy and seamless platform for deploying web applications and services.

It’s similar to other cloud platforms, but it simplifies the deployment process and makes it more accessible to developers.

Whether you’re deploying a web service, a background worker, or a database, Render offers an intuitive user interface and automatic scaling.

Before we start, make sure you have the following —

FastAPI application — *If you don’t have an existing FastAPI project, or if you’d like, you can match the configuration of the *main.py *and **config.py* global variable configuration using ***pydantic_settings ***setting with the our existing FastAPI app provided in the blog tutorial.
GitHub repository for your FastAPI app (Render will deploy your app from your repository).

Once project configuration is okay as given , push the all code into your GitHub account.

3. Render account — If you don’t have one, create a free account on Render.

Now we ready to go —

After creation , we have to visit your render account dashboard and have to click into Deploy a web service.

Then you can select you Github repository and provide project name.

Here our project name is deployment and can provide language & its version however its detect automatically.

pip install -r requirements.txt

We would be also provide few command which install required package for FastAPI app.

uvicorn main:app --host 0.0.0.0 --port 10000

The command uvicorn main:app --host 0.0.0.0 --port 10000 does the following —

uvicorn— Starts the Uvicorn ASGI server to run your FastAPI app.
main:app — Specifies the FastAPI app to run. main is the filename (main.py), and app is the FastAPI instance inside that file.
--host 0.0.0.0— Makes the app accessible externally by binding it to all available network interfaces.
--port 10000 — Sets the port number to 10000 for the app to listen on.

If you’re just starting out, you can choose the free deployment option, which provides 1 CPU initially. However, it later scales down to 0.5 CPU, which may cause slower API responses and reduced performance.

Here, we are selecting the free version and providing all environment variables that we include in the .env file. Currently, we only have one environment variable, DATABASE_URL, which we've configured.

Now we have done almost everything just once it all configuration is done you can verified all once again and click on deploy web service.

Finally, our FastAPI app has been successfully deployed. After deployment, a live instance link will be generated at the top, allowing you to check your app’s live instance.

**Conclusion — **Deploying a FastAPI application to Render is a straightforward and efficient process. With just a few configuration steps, you can easily go from development to a live, scalable web service.

Render’s seamless deployment system ensures that your application is up and running in no time, allowing you to focus on building and improving your project.

GitHub repo : https://github.com/abhijitkumarIN/deployment

Live URL : https://deployment-vund.onrender.com/docs

Your appreciation or feedback on this insight would be greatly valued, whether it’s a small follow up or leaving a note.

And connect with me on* X handler*** for the tech insights.
Looking forward to engaging with you!**

A beginner Guide to Upload Images in a REST API with Django

Abhijeet kumar — Thu, 06 Mar 2025 17:46:28 +0000

In modern development, handling image uploads via REST APIs is a common requirement.

Whether you’re building a social media platform, an e-commerce site, or a blogging platform, enabling users to upload images is crucial for any type of applications.

In this tutorial, we’ll go through the process of implementing image uploading functionality in a Django REST API.

We’ll cover everything from setting up Django, creating models, serializers, views, to handling image uploads.

Our mainly concern about to explore the how to setup the Django project to upload images via rest API.

If you need to explore basic Django project setup you can follow this article django project setup in which we have covered basic setup for Django project.

Now let ‘s see each step with example.

We have created our Django project named image_upload and have set up a virtual environment, along with a*** requirements.txt file*** additionally, we have activated our virtual environment named myenv.
Now we have created out app module with image name and which we have added into our INSTALLED_APP in our project’s setting.py file.

py manage.py startapp image

Next, we installed Pillow and Django Rest Framework we need to add rest_framework to the INSTALLED_APPS list in the settings.py file

pip install pillow djangorestframework

And it summarized final terminal commands in which we have performed its all ( djangorestframework installation missing).

In this step we have to work on our already create image app module for respectively on models.py, serializers.py , urls.py , admin.py and views.py

Let ‘s break down of each of these files.

In image app module ‘s models.py we have added two field with caption of image as CharField and another with ImageField having directory name as mentioned.

Likewise in image app module ‘s serializers.py we have include all field like id , image with caption however we can added it with (“all”) as commented snippet.

We can also add the out UploadImageModel in out image app module ‘s admin.py so that it will reflect in Django admin user interface for test.

It is our image app module ‘s views.py in which have done two method for post and get respectively using APIView.

Here we have created urls.py for in image app module for and import the view and gave the api name media_upload that have post and get both methods.

In our last step we have to configure directory to store the image and make it accessible for get its images.

In Django, MEDIA_URL and MEDIA_ROOT are settings used to handle media files, such as images, videos, or documents uploaded by users.

MEDIA_URL: MEDIA_URL is a setting that defines the base URL for media files. When a user uploads a file, Django serves it through this URL. In your example, MEDIA_URL = ‘/media/’ sets the base URL for media files to be accessed at **/media/ **on your website.

MEDIA_ROOT: MEDIA_ROOT is the filesystem path where uploaded media files are stored. It’s the location on your server’s disk where Django will save uploaded files.
In your example MEDIA_ROOT = os.path.join(BASE_DIR, ‘media/’)

BASE_DIR refers to the directory where your Django project is located, and ‘media/’ indicates that media files will be stored in a directory named ‘media’ within your project directory.

So, when a user uploads a file, Django will save it to the MEDIA_ROOT directory, and it will be accessible via the URL specified in MEDIA_URL.

For example, if a user uploads an image named example.jpg, it will be saved to *‘media/example.jpg’ **on your server, and it will be accessible via the URL *‘/media/example.jpg’ **on your website.

If the project is running in debug mode (DEBUG is set to True in settings.py), this line dynamically adds URL patterns for serving media files.

Django will serve media files directly from MEDIA_ROOT when the server is running in debug mode.

This means that during development, you can access uploaded media files directly through their URLs without having to configure a separate web server to serve them.

However, this line should not be used in production. In production, you typically serve media files using a dedicated web server (like Nginx or Apache) *or a cloud storage service *(like Amazon S3 or Google Cloud Storage) for better performance and security.

Instead, in production, you would configure your web server to serve media files directly from the specified location (MEDIA_ROOT).

And finally, we have hit these two commands respectively for our database table field creation.

python manage.py makemigrations #  to create migration files

python manage.py migrate   #   to apply those migrations to your database

It is our respectively post and get sample response via postman .

POST —

GET —

Conclusion — Creating a Django REST API for image uploads has been a learning experience. We’ve covered setup, making things efficient, keeping it safe, and testing, giving developers a clear path.

Whether you’re starting out or seasoned, this guide helps you make reliable image upload APIs with Django projects.

Your appreciation or feedback on this insight would be greatly valued, whether it’s a small follow up or leaving a note.

And connect with me on* X handler*** for the tech insights.
Looking forward to engaging with you!**

How to Deploy FastAPI to Vercel

Abhijeet kumar — Thu, 06 Mar 2025 17:44:49 +0000

In this blog, we’ll guide you through deploying a FastAPI application to Vercel, a cloud platform designed for fast and serverless web hosting.

Vercel —

Vercel provides an easy and seamless platform for deploying web applications and APIs with minimal configuration.

It’s optimized for serverless functions, making it an excellent choice for hosting FastAPI without worrying about infrastructure.

Whether you’re deploying a simple API or a complex backend service, Vercel offers automatic scaling, global CDN, and quick deployments.

Before we start, make sure you have the following —

FastAPI application — *If you don’t have an existing FastAPI project, or if you’d like, you can match the configuration of the *main.py *and **config.py* global variable configuration meanly ***pydantic_settings with the our existing ***FastAPI in the blog tutorial.
GitHub repository for your FastAPI app (Vercel will deploy your app from your repository).

Once project configuration is okay as given, now we need to add a file **vercel.json **in root file.

{
    "builds": [
      {
        "src": "main.py",
        "use": "@vercel/python"
      }
    ],
    "routes": [
      {
        "src": "/(.*)",
        "dest": "main.py"
      }
    ]

  }

Push the all code into your GitHub account.

3. Vercel account — If you don’t have one, create a free account on Vercel.

Now we ready to go —

Configured .env variable & Repository selection for deployment —

Once got is pushed into GitHub now we have to visit at vercel account and updated the .env variable as we have a env variables DATABASE_URL.

Now we have to select the our repository for deployment as given below.

2. Deployment —

Our chosen repository is vercel-deployment. Now, click the Deploy button to initiate the deployment process.

3. Access the deployment dashboard.

Finally we have deployed the FastAPI into vercel after click on below continue to dashboard another dashboard deployment open.

As we can access the deployed instance into deployed dashboard as attached below.

***GitHub — https://github.com/abhijitkumarIN/vercel-deployment***

Vercel deployed link : https://vercel-deployment-blond.vercel.app/docs

Conclusion— Deploying FastAPI on Vercel is a quick and efficient way to make your application live.

With just a few steps — selecting a repository, configuring settings, and clicking Deploy — your FastAPI app can be up and running with ease.

Vercel’s seamless deployment process, automatic scaling, and built-in CI/CD make it a great choice for hosting lightweight APIs.

Now, your FastAPI project is ready to serve users globally with minimal effort.

Your appreciation or feedback on this insight would be greatly valued, whether it’s a small follow up or leaving a note.

And connect with me on* X handler*** for the tech insights.
Looking forward to engaging with you!**

Level Up your python skills with ultimate trick tips

Abhijeet kumar — Sun, 17 Mar 2024 06:29:03 +0000

Python, known for its versatility and readability, offers a plethora of tips and tricks to enhance your coding experience.

In this blog post, we’ll explore 25+ invaluable tips and tricks that can significantly boost your coding efficiency and empower you to write more concise and powerful code.

Each tip is accompanied by illustrative examples, and some include external or internal links to enhance comprehension and facilitate application.

Lets explore its all spectrum —

Harness *args and **kwargs for Flexible Function Arguments —

Use zip( ) for Parallel Iteration —

3. Unpacking Sequences for Cleaner Assignments —

4. List Comprehensions for Concise Iteration —

5. Swap Values with One Line —

6. Multiple Assignment with a Single Value —

7. Use enumerate() for Index-Value Pairs —

8. Use any() and all() for Logical Checks —

9. collections.Counter for Counting Items —

10. Simultaneous Filtering and Transforming with Generator Expressions —

Traditional Method —

First, a list squares is generated using a list comprehension, where each element is the square of the corresponding number in the range from 0 to 9.
Then, another list comprehension is used to filter out the even squares from the **squares *list, and the result is stored in the list *even_squares** .
The even_squares list will contain [0, 4, 16, 36, 64] .

Using Generator Expressions —

This code snippet uses a generator expression to achieve the same task.
Inside the generator expression, another generator expression*** (i ** 2 for i in range(10))*** generates the squares of numbers from 0 to 9.
Then, each square is filtered for evenness, and only even squares are yielded.
The **even_squares *generator will produce the even squares *[0, 4, 16, 36, 64]** when iterated over.

11. collections.defaultdict for Default Values in Dictionaries —

12. collections.namedtuple for Readable Data Structures —

13. Use with Statement for Automatic Resource Management —

The with statement in Python is used to ensure proper handling of resources. In this case, it ensures that the file is properly opened and closed, even if an error occurs during the process. It automatically takes care of closing the file once the block of code inside it is executed.

14. Chained Comparison for Multiple Conditions —

15. The += Operator for In-Place Addition —

16. Using doc for Accessing Docstrings —

17. * Unpacking in Function Calls —

18. Use sorted() with Custom Key Functions —

19. The Walrus Operator := for Assignment Expressions (Python 3.8+) —

20. F-strings for Elegant String Formatting (Python 3.6+) —

21. String format( ) —

22. functools.partial for Partial Function Application —

23. Using try-except-else Blocks for Clean Error Handling —

24. Use is and is not for Identity Comparison —

25. List Slicing for Elegant Sub-setting —

26. reversed() for Reversing Iterables —

27. Use set to Remove Duplicates —

Conclusion : By incorporating these tips and tricks into your python development workflow, you can enhance your productivity and write cleaner, more maintainable code.

However, it’s important to note that these are just a few examples, and python offers a vast of features and techniques to explore.

Keep learning and experimenting to become a more proficient python developer .

Child ‘s function calling from parent component | ReactJS | NextJS

Abhijeet kumar — Sat, 09 Mar 2024 21:49:12 +0000

Hello dev 👋 ,

In this blog, we’ll explore to call the child component function from the parent component.

but before moving further, make sure that you’re using React version 17 or above.

So let’s get started.

We are assuming that we have a Parent component ApplyFilter.jsx and another child component Home.jsx.

//ApplyFilter.jsx (Child component)

import React, { forwardRef, useImperativeHandle } from "react";

const ApplyFilter = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    qtyIncrement: () => qtyIncrement(),
    qtyDecrement: () => qtyDecrement(),
    deleteHandler: () =>deleteHandler(),
  }));

  const qtyIncrement = () => {
    console.log("qtyIncrement");
    // ...
  };
  const qtyDecrement = () => {
    console.log("qtyDecrement");
    // ...
  };
  const deleteHandler = () => {
    console.log("deleteHandler");
    // ...
  };
  return 
(<div>
<h2>{props?.title}</h2>
<p>Other DOM</p>
</div>);
});

ApplyFilter.displayName = "ApplyFilter";
export default ApplyFilter;

Let ‘s break down .

Imports:
import React, { forwardRef, useImperativeHandle } from "react";
This imports React and necessary hooks (forwardRef and useImperativeHandle) from the "react" library.
Function Component Definition:
const ApplyFilter = forwardRef((props, ref) => {...});
Defines a functional component named ApplyFilter.
forwardRef() is used to forward the ref object from the parent component to this child component.
useImperativeHandle Hook:
useImperativeHandle(ref, () => ({...}));
This hook allows the child component to expose certain functions to the parent component through the forwarded ref.
Inside the callback, an object is returned containing functions (qtyIncrement, qtyDecrement, deleteHandler) which will be accessible from the parent component when using the ref.
Function Declarations:
const qtyIncrement = () => {...};, const qtyDecrement = () => {...};, const deleteHandler = () => {...};
These are the functions declared within the component. which we have to call from parent which we have bind in a object.
Return Statement:
return (
...); This returns JSX elements representing the component’s UI. In this case, it returns a element containing an element with the title prop passed from the parent component, and a
element with some placeholder text.
ApplyFilter.displayName:
ApplyFilter.displayName = "ApplyFilter";This sets the displayName property of the component, which can be useful for debugging or displaying in React DevTools.
Export Statement:
export default ApplyFilter;
This exports the ApplyFilter component as the default export from this module, making it accessible for import in other files.

Now have to import this child component ApplyFilter.jsx into Parent component and our parent component is Home.jsx where we ‘ll be access to call the ApplyFilter component ‘s functions.

// home.jsx (Parent component)

import React ,{useRef} from "react"
import ApplyFilter from './ApplyFilter'

export default function Home() {
  const childRef = useRef()
  return (
    <main>
      <ApplyFilter title={'Filter'} ref={childRef} />
      <button onClick={() => {
        childRef.current.qtyIncrement()
      }}>+</button>
      <button onClick={() => {
        childRef.current.qtyDecrement()
      }}>-</button>
      <button onClick={() => {
        childRef.current.deleteHandler()
      }}>
        RESET
      </button>
    </main>
  )
}

As we can see, there are three functions: qtyIncrement, qtyDecrement, and deleteHandler, which we are accessing using the useRef hook passed as props to the ApplyFilter component.

Conclusion — we’ve explored the process of calling a child component function from a parent component in a React application. By leveraging the useImperativeHandle hook along with the forwardRef function, we've established a way for the child component to expose specific functions to the parent component through a forwarded ref.

Harnessing the Power of For Loop Comprehension in Python

Abhijeet kumar — Sat, 09 Mar 2024 19:52:17 +0000

Python is a versatile and powerful programming language, known for its simplicity and readability. One of the language’s key features is the ability to leverage for loop comprehension, a concise syntax that allows you to create new lists, sets, or dictionaries based on existing ones. In this blog, we will explore the wonders of for loop comprehension in Python and illustrate its usefulness with practical examples.

What is For Loop Comprehension?

For loop comprehension, also known as list comprehension, is a compact and elegant way to generate new lists by applying filtering or transformation to an existing iterable. It combines the for loop and conditional statements into a single line of code, resulting in code that is both concise and expressive.

Syntax of For Loop Comprehension: The syntax for for loop comprehension in Python is as follows:

new_list = [expression for item in iterable if condition]

Let’s break down the components of the syntax:

expression represents the value you want to include in the new list.
item refers to the individual elements in the iterable.
iterable is the collection of items over which the loop iterates.
condition (optional) allows you to filter the items based on a specified condition.

Benefits of For Loop Comprehension:

Readability: For loop comprehension simplifies code by condensing multiple lines into a single line. It enhances code readability by eliminating the need for explicit looping constructs.
Conciseness: With for loop comprehension, you can achieve in one line what would otherwise require several lines of code. It reduces verbosity and makes your code more compact and expressive.
Efficiency: List comprehension performs better in terms of speed and memory usage compared to traditional for loops. It takes advantage of Python’s internal optimizations, resulting in improved performance.

Practical Examples: Let’s explore some practical examples to illustrate the power of for loop comprehension.

Example 1: Generating a Squared List Suppose we have a list of numbers and want to create a new list containing the squares of those numbers.

numbers = [1, 2, 3, 4, 5]
squared_numbers = [num ** 2 for num in numbers]
print(squared_numbers)

[1, 4, 9, 16, 25] #out put

Example 2: Filtering Even Numbers Let’s say we have a list of numbers and want to filter out the even numbers, creating a new list with only the odd numbers.

numbers = [1, 2, 3, 4, 5]
odd_numbers = [num for num in numbers if num % 2 != 0]
print(odd_numbers)

[1, 3, 5]

Example 3: Creating a Dictionary We can also use for loop comprehension to create dictionaries. In this example, let’s convert a list of names into a dictionary, with names as keys and their lengths as values.

names = ["abhi", "kumar", "delhi", "area52"]
name_lengths = {name: len(name) for name in names}
print(name_lengths)

{'abhi': 5, 'kumar': 3, 'delhi': 7, 'area52': 5} # output

Conclusion: For loop comprehension is a powerful technique in Python that allows you to write concise and expressive code. It simplifies your code, improves readability, and enhances performance. By leveraging the benefits of for loop comprehension, you can write elegant and efficient code, making your Python programming experience even more delightful.

A Guide to : Set and Map

Abhijeet kumar — Sat, 09 Mar 2024 19:49:44 +0000

Hello dev 👋,

In this blog, we’ll thoroughly discuss JavaScript Set and Map, explaining their advantages and practical uses.

Then, we’ll cover detailed explanations of Set, Map and finally, we’ll look into its in-build function with example.

Let’s get start —

Set —The Set data structure is essential in JavaScript for maintaining collections of unique data, regardless of their type whether strings numbers, objects, or any other and provide various kind of inbuild function to perform various type operation with data using set.

Now let see its inbuild function —

add( )

The add method is used with the Set data structure to add new elements to the set. This method ensures that only unique elements are added, preventing duplicates within the set. Here's how it works:

const team = new Set()
team.add('Airospace')
team.add('R&D')   // will not added
console.log(team) // { 'Airospace'}

3. has( )

The has method is used to check provided values is exited in current set if the value is already existing at those time its return true otherwise its return false.

const team = new Set()
team.add('Airospace')
team.add('R&D')  

console.log(team.has("Airospace")); //true 
console.log(team.delete("Scientist")); // false

4. difference( )

The difference() method of Set instances takes another set as an argument and returns a new set containing elements that are present in this set but not in the given set. ( new, supported in few browser )

const a = new Set([1, 3, 5, 7, 9]);
const b= new Set([1, 4, 9]);
console.log(a.difference(b)); // Set(3) { 3, 5, 7 }

5. Intersection( )

its return new Set object containing elements in both this set and the other set. ( new, supported in few browser )

const a= new Set([1, 3, 5, 7, 9]);
const b= new Set([1, 4, 9]);
console.log(a.intersection(b)); // Set(2) { 1, 9 }

6. isDisjointFrom( )

The isDisjointFrom() method of Set instances takes another set as an argument and returns a boolean value indicating whether this set has no elements in common with the given set. ( new, supported in few browser )

const a= new Set([2, 3, 5, 7, 11, 13, 17, 19]);
const b= new Set([1, 4, 9, 16]);
console.log(a.isDisjointFrom(b)); // true

7. isSubsetOf( )

The isSubsetOf() method of Set instances takes another set as an argument and returns a boolean value indicating whether all elements of this set are also present in the given set. ( new, supported in few browser )

const a= new Set([4, 8, 12, 16]);
const b = new Set([2, 4, 6, 8, 10, 12, 14, 16, 18]);
console.log(a.isSubsetOf(b)); // true

8. isSupersetOf( )

The isSupersetOf() method of Set instances takes another set as an argument and returns a boolean value indicating whether all elements of the given set are also present in this set. ( new, supported in few browser )

const a= new Set([2, 4, 6, 8, 10, 12, 14, 16, 18]);
const b= new Set([4, 8, 12, 16]);
console.log(evens.isSupersetOf(b)); // true

8. symmetricDifference( )

The symmetricDifference() method of Set instances takes another set as an argument and returns a new set containing elements that are present in either this set or the given set, but not in both. ( new, supported in few browser )

const a= new Set([2, 4, 6, 8]);
const b= new Set([1, 4, 9]);
console.log(a.symmetricDifference(b)); // Set(5) { 1, 2, 6, 8, 9 }

9.union( )

The union() method of Set instances takes another set as an argument and returns a new set containing elements that are present in either this set or the given set, or both. ( new, supported in few browser )

const a = new Set([2, 4, 6, 8]);
const b= new Set([1, 4, 9]);
console.log(a.union(b)); // Set(6) { 2, 4, 6, 8, 1, 9 }

10. delete( )

The remove method is used to delete the existing value from the set if the value is not existing then its return false otherwise its return true after deletion of provided value.

const team = new Set()
team.add('Airospace')
team.add('R&D')
team.delete('R&D')
console.log(team) // {'Airospace'}

11. clear( )

The clear() method removes all elements from the set, effectively making it empty.

const team = new Set()
team.add('Airospace')
team.add('R&D')
console.log(team.clear()) // { }

12. size

The size property of a Set object returns the number of elements in the set. It provides a convenient way to determine the size of the set without needing to iterate over its elements manually.

const team = new Set()
team.add('Airospace')
team.add('R&D')
console.log(team.size) // 2

Iteration of Set

Using forEach() method: The forEach() method allows you to execute a provided function once for each element in the Set in insertion order.

const mySet = new Set(["apple 🍏", "banana 🍌", "orange 🍊"]);

mySet.forEach(element => {
console.log(element);
});

2. Using a for...of loop: The for...of loop iterates over the values of an iterable object (like Set) in insertion order.

const mySet = new Set(["apple 🍏", "banana 🍌", "orange 🍊"]);

mySet.forEach(element => {
    console.log(element);
});

3. Converting to an array: You can convert the Set to an array using the Array.from() method or the spread operator (...) and then iterate over the array using any array iteration method (forEach(), map(), for...of, etc.).

const mySet = new Set(["apple 🍏", "banana 🍌", "orange 🍊"]);
const myArray = Array.from(mySet);

myArray.forEach(element => {
    console.log(element);
});

4. Using the entries, keys, or values iterator: Although Sets don’t have direct methods like keys() or entries(), you can use the iterator methods inherited from Map, but keep in mind that they would behave similarly to values() because sets don't have keys.

const mySet = new Set(["apple 🍏", "banana 🍌", "orange 🍊"]);
const setIterator = mySet.values();

for (const value of setIterator) {
    console.log(value);
}

Real life use case of Set in JS —

Shopping Cart Items: In an e-commerce application, a Set can be used to store unique items in a user's shopping cart. This prevents duplicate entries and ensures efficient management of the cart.
Social Media Followers/Friends List: When developing a social media platform, you might use a Set to manage a user's list of followers or friends. This ensures that each user is only added once, preventing duplicates.
User Preferences/Settings: Sets can be utilized to store unique user preferences or settings in web applications. For instance, you can use a set to manage a user’s selected language options or notification preferences.
**Event Registrations: **When managing event registrations or RSVPs, a Set can be employed to store unique attendee IDs or email addresses. This helps in ensuring that each participant is registered only once.
**Browser Cookies: **In web development, sets can aid in managing browser cookies efficiently. You can use a set to store unique cookie names, ensuring that each cookie is set only once per session.
**Search History: **Sets can be useful for managing a user’s search history in a web application. By using a set, you can ensure that each search query is stored only once, preventing duplicate entries.
Favorite Items/Bookmarks: When implementing a feature for users to bookmark favorite items or content, a Set can be employed to store unique identifiers or URLs. This ensures that each item is bookmarked only once.
User Permissions/Roles: Sets can be used to manage user permissions or roles in an application. You can use a set to store unique permission levels assigned to each user, ensuring that each permission is granted only once.
Quiz/Questionnaire Responses: When collecting responses to quizzes or questionnaires, sets can help in storing unique user answers. This prevents duplicate submissions and ensures accurate analysis of responses.
Email Subscription Lists: Sets can be utilized to manage email subscription lists for newsletters or updates. By using a set, you can ensure that each email address is subscribed only once, avoiding duplicate subscriptions.

Absolutely, the use cases for sets are diverse and depend on specific requirements.

**Map — **JavaScript, a Map is an object that stores key-value pairs while maintaining the original insertion order of the keys. Notably, Maps allow us to use both primitive and non-primitive data as keys.

Let ‘s see its inbuild functions —

set( )

Adds or updates a key-value pair in the Map .

const mapDs = new Map()
mapDs.set(1 , "apple 🍎🍏")

console.log(mapDs) //

2. get( )

Retrieves the value associated with the specified key.

const mapDs = new Map()
mapDs.set(1 , "apple 🍎🍏")

console.log(mapDs.get(1)) // "apple 🍎🍏"

3. delete( )

Removes the key-value pair associated with the specified key and return true otherwise if those item is not exits then return false.

const mapDs = new Map()
mapDs.set(1 , "apple 🍎🍏")

console.log(mapDs.delete(1)) // true

4. has( )

Checks if a key exists in the Map and if exite then return true otherwise false.

const mapDs = new Map()
mapDs.set(1 , "apple 🍎🍏")

console.log(mapDs.has(1)) // true

5. clear( )

Removes all key-value pairs from the Map and return true after deletion of all item from Map.

const mapDs = new Map()
mapDs.set(1 , "apple 🍎🍏")

console.log(mapDs.clear()) // true

Iterating Over a Map:

Maps in JavaScript preserve the insertion order of key-value pairs, making them ideal for scenarios where order matters. You can iterate over the keys, values, or entries (key-value pairs) of a Map using various methods like forEach, for...of loop, or entries, keys, and values methods.

// Iterating over keys
for (let key of myMap.keys()) {
    console.log(key);
}

// Iterating over values
for (let value of myMap.values()) {
    console.log(value);
}

// Iterating over entries
for (let [key, value] of myMap.entries()) {
    console.log(key, value);
}

Real life use case of Map in JS —

**User Authentication and Authorization: **Store user information with usernames or user IDs as keys and user objects (containing details like username, password hash, access level) as values.
**Routing and Navigation: **Use Maps to store routes with locations as keys and corresponding route information (distance, waypoints, etc.) as values.
Caching and Memoization: Cache frequently accessed data or function results, improving performance by storing computed results with input parameters as keys.
Language Localization: Store translations for different languages, with language keys and corresponding translated strings as values.
Error Handling and Logging: Track error occurrences with error codes or descriptions as keys and additional error details as values, facilitating error reporting and debugging.
Event Handling: Manage event listeners by storing event types as keys and associated event handler functions as values.
**Data Processing Pipelines: **Use Maps to store intermediate results in data processing pipelines, with keys representing stages or steps and values containing processed data.
Form Data Handling: Store form field names as keys and corresponding input values as values, simplifying form data manipulation and validation.

These are just a few real-life use cases of Maps in JavaScript; however, the full extent of their application is not limited and wholly depends on the requirements at hand.

Conclusion — Overall, Sets and Maps are versatile data structures that can greatly simplify your code and improve the efficiency of your applications. Whether you’re managing collections of unique elements or associating data with keys, Sets and Maps provide essential tools for working with data in JavaScript.

Guide to : toReversed, toSorted and toSpliced

Abhijeet kumar — Sat, 24 Feb 2024 18:34:30 +0000

In JavaScript, there are numerous built-in functions available, some of which are commonly used in everyday problem-solving scenarios, while others are less frequently utilized. Let’s explore some of these less commonly used built-in functions.

We will thoroughly explore every aspect of those lesser-utilized built-in functions .

Let’s exploration.

toReversed — this is similar to the reverse in JavaScript but different in between in that reverse perform of change the original array while toReversed make his own instance of array and transpose element and don’t effect of original array.

Example —

// toReversed  's example 

let arr = [ '🤖', '👽','🤷‍♂️' 'whatever...']

console.log(arr.toRevered()) // it don't take any argument 

// Output - [ 'whatever...' ,'🤷‍♂️' , '👽' , '🤖']

console.log(arr)

// original array - [ '🤖', '👽','🤷‍♂️' 'whatever...']

Use case with sparsely array : toReversed element should be sparse if that will at those time its return undefined .

Example —

// toReversed 's example with sparsely array 

let array = [ '🤖', '👽','🤷‍♂️' 'whatever...' , , ]
console.log(array.toRevered()) // it don't take any argument 
// Output - [ undefined , 'whatever...' ,'🤷‍♂️' , '👽' , '🤖']

If you attempt to perform the transpose with toReversed operation on a non-array object, it iterates through each property of the object. For properties with integer keys, it reverses their values, while for non-integer keys, it returns undefined. This behaviour ensures consistency even when operating on non-array objects.

Example —

const arrayLike = {
  color: 'Carbon black',
  brand: 'Dassault Falcon 7X',
  2: 4,
  4:4,
};
console.log(Array.prototype.toReversed.call(arrayLike));
// [4, 4, undefined, undefined]
// here 0 , 1 index become undefined

2. toSorted —The toSorted function works just like sort, but it's more careful. While sort messes with your original array, toSorted takes a copy of it, sorts the copy, and leaves your original array untouched. It's like having a tidy clone do the sorting while your original stays safe and sound.

by default it is return a ascending sorted new array copy of given array but by providing compare argument we can change it as well.

It is take argument as the compare function. which is optional by default it sort the array element in ascending order.

Example —

let arr = [ 'India' , 'USA' , 'Germany' ,'Russia']

let sorted = arr.toSorted() 

// Output - ['Germany', 'India', 'Russia', 'USA']

console.log(arr)

// Original array - [ 'India' , 'USA' , 'Germany' ,'Russia']

Use case with sparsely array : As we already discussed that if there ‘ll be any spares array element at that will become as undefined .

let see with example —

// toSroted with sparse array 

console.log([, undefined, "a", "b" ,"c" ].toSorted()); 

// Output -  ["a", "b","c" , undefined, undefined]

When using toSorted with non-array objects, it behaves similarly to the function discussed earlier. In this case, keys that are integers will be sorted, while their corresponding values will also be sorted accordingly. However, non-integer keys will be treated as undefined.

const arrayLike = {
  length: 3,
  color: "mettalic black",
  0: 5,
  2: 4,
};

console.log(Array.prototype.toSorted.call(arrayLike));
// Output - [4, 5, undefined]

**toSpliced — **we ‘re already familiar with splice ( inserting , replace , deletion ) in build function just like with toSpliced function we can also insert , replace and delete the elements from array but it don't modified the original array.

And here we also about cover all operation which we can perform with toSpliced function.

Syntax :

toSpliced(start, deleteCount, item1, item2, item3 , ....itemN)

Let’s break it down further to understand its intricacies.

start-

The index at which changes in the array will begin is specified as a zero-based integer.

If a negative index is provided, it counts backward from the end of the array.
If the starting index is less than the negative length of the array or if it’s omitted, the operation will start from the beginning (index 0).
If the starting index is equal to or greater than the length of the array, no elements will be deleted. Instead, elements will be added based on the provided values.

deleteCount (optional parameter )-

This parameter indicates the number of elements to remove from the array, starting from the specified index.

If deleteCount is not provided or is greater than or equal to the number of elements after the specified start index, all elements from the start index to the end of the array will be removed.
If you want to remove all elements after the start index and also pass additional items, you must use Infinity as the deleteCount.
If deleteCount is 0 or negative, no elements are removed. In such cases, you should add at least one new element.

item1 …itemN **(optional parameter )-**

These are the elements that will be added to the array, starting from the specified index.

in case we don’t specify any elements, toSpliced() will only remove elements from the array.

Example —

// insertion , deletion and replace using toSpliced

const countries = ["India", "USA", "UK", "Russia"];

// insertion an element at index 1

const newCountries = countries.toSpliced(1, 0, "China");

console.log(newCountries); // ["India","China", "USA", "UK", "Russia"]

// deletion of two elements starting from index 2

const countryDeleted = newCountries.toSpliced(2, 2);
console.log(countryDeleted); // ["India","China", "USA"]

// replace a element at index 1 with three new array element
const countryNameReplaced = countryDeleted.toSpliced(1, 1, "Japana", "South Korea");

console.log(countryNameReplaced); // ["India","Japana" , "South Korea", "USA"]

// there 're no changes in original array 

console.log(countries); // ["India", "USA", "UK", "Russia"]

In toSpliced , sparsely and non array object behaviour are similar as we have discussed respectively in toReversed() and toSorted().

Conclusion — Each of these functions serves a specific role in helping developers to effectively arrange and change arrays in JavaScript. By grasping how to use them, we can improve their code’s capabilities and speed.

Happy coding !!