Forem: Sukanta Biswas

In the first post of this series, we kept things simple and set up authentication with Supabase in a React + TypeScript app. We covered signup, login, and logout flows styled with Tailwind CSS.

In this post, we'll go a step further and explore how to write custom APIs using Supabase Edge Functions and consume them in React. This is where Supabase starts to shine because you're not limited to just auth and database, you can extend it just like a traditional backend.

What are Edge Functions?

Supabase Edge Functions are serverless functions powered by Deno that run at the network edge, close to end users, to process API requests, personalize content, or handle dynamic logic with minimal latency.

They are fast (deployed globally to the edge).
Secure – run with role-based access and API keys.
Flexible – you can handle business logic, external APIs, webhooks, or even transform data before it reaches your frontend.

Step 1: Setting up Supabase CLI

First, install the Supabase CLI if you don’t already have it:

npm install supabase --save-dev

npx supabase login

And link your project:

npx supabase link --project-ref your-project-ref

Step 2: Create an Edge Function

Here we will write a basic api to get all users list. Let's go!
Create a function called get-all-users:

npx supabase functions new get-all-users

This will generate a functions/get-all-users/index.ts file. Open it and add:

functions/get-all-users/index.ts

import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";

// CORS header helper
function getCorsHeaders(origin: string) {
  return {
    "Access-Control-Allow-Origin": origin,
    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
    "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
  };
}

// Initialize Supabase client with environment variables
const supabase = createClient(
  Deno.env.get("SUPABASE_URL") ?? "",
  Deno.env.get("SUPABASE_ANON_KEY") ?? ""
);

serve(async (req) => {
  const origin = req.headers.get("origin") || "*";

  // Handle preflight CORS
  if (req.method === "OPTIONS") {
    return new Response(null, {
      status: 204,
      headers: getCorsHeaders(origin),
    });
  }

  try {
    // Extract userId from query params (example: /?userId=123)
    const url = new URL(req.url);
    const userId = url.searchParams.get("userId");

    if (!userId) {
      return new Response(JSON.stringify({ error: "Missing userId" }), {
        status: 400,
        headers: getCorsHeaders(origin),
      });
    }

    // Query Supabase to get all users list
    const { data, error } = await supabase
      .from("users")
      .select("*")
      .eq("auth_user_id", userId);

    if (error) throw error;

    return new Response(JSON.stringify(data), {
      headers: {
        "Content-Type": "application/json",
        ...getCorsHeaders(origin),
      },
    });
  } catch (err) {
    return new Response(JSON.stringify({ error: String(err.message) }), {
      status: 500,
      headers: getCorsHeaders(origin),
    });
  }
});

Deploy it:

npx supabase functions deploy get-all-users

Step 3: Call the Function from React

In your React app, you can call this function using Supabase client:

src/api/users.ts

import { supabase } from "./supabaseClient";

export const getAllUsers = async () => {
  const { data, error } = await supabase.functions.invoke("get-all-users");

  if (error) {
    console.error("Error calling get-all-users:", error);
    return null;
  }
  return data;
};

And use it in your component:

src/components/Users.tsx

import React, { useEffect, useState } from "react";
import { getAllUsers } from "../api/users";

interface User {
  id: string;
  full_name: string;
  email: string;
  dob?: string;
  profession?: string;
}

const Users: React.FC = () => {
  const [users, setUsers] = useState<User | undefined>("");

  useEffect(() => {
    const fetchAllUsers = async () => {
      const data = await getAllUsers();
      if (data) setUsers(JSON.parse(JSON.stringify(data)));
    };
    fetchAllUsers();
  }, []);

  return (
    <div className="overflow-x-auto rounded-lg shadow-md border border-gray-200">
      <table className="min-w-full border-collapse bg-white text-sm">
        <thead>
          <tr className="bg-gray-100 text-left">
            <th className="px-4 py-2 border-b">Name</th>
            <th className="px-4 py-2 border-b">Email</th>
            <th className="px-4 py-2 border-b">Date of Birth</th>
            <th className="px-4 py-2 border-b">Profession</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr
              key={user.id}
              className="hover:bg-gray-50 transition-colors duration-150"
            >
              <td className="px-4 py-2 border-b">{user.full_name}</td>
              <td className="px-4 py-2 border-b">{user.email}</td>
              <td className="px-4 py-2 border-b">{user.dob || "N/A"}</td>
              <td className="px-4 py-2 border-b">{user.profession || "N/A"}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>  );
};

export default Users;

Step 4: Securing Edge Functions

By default, functions are secured and require a service role or authenticated user token.

You can make a function public by adding this to supabase/config.toml:

[functions.get-all-users]
verify_jwt = false

Then redeploy:

npx supabase functions deploy get-all-users

Real-world Use Cases

Edge Functions are great for:

Sending transactional emails (e.g., SendGrid, Resend).
Integrating 3rd party APIs securely.
Running cron jobs or scheduled tasks.
Custom data transformations before saving to PostgreSQL.

Wrapping up

In this post, we learned how to:

Create and deploy a Supabase Edge Function.
Call it from a React + TypeScript app.
Secure or expose it depending on your use case.

Edge Functions give your Supabase project the flexibility of a full backend, while keeping the simplicity of BaaS.

In the next post, we’ll explore Realtime Channels to build live notifications and updates.

If you found this useful, please share it with your dev friends!

Getting Started with Supabase in a React + TypeScript App: Authentication Basics

Sukanta Biswas — Tue, 16 Sep 2025 19:41:56 +0000

I recently came across Supabase, and I have to say I’m really excited about it. Supabase is a Backend-as-a-Service (BaaS) that provides authentication, a Postgres database, real-time subscriptions, and storage right out of the box. What I like the most is how simple it is to learn and how seamlessly it integrates with a React project.

This is the first post in a series on Supabase integration with React. I'll keep things as simple as possible, starting with the basics: setting up a React + TypeScript project, connecting it to Supabase, and building a clean authentication flow with signup, login, and logout, styled using TailwindCSS.

Setting up Supabase

Go to supabase.com and sign up.
Create a new project. Once it's ready, note down your Project URL and anon API key from the dashboard.
In the Authentication settings, enable Email/Password login.

Creating a React + TypeScript Project

We'll start fresh with Vite.

npx create-vite@latest supabase-auth-demo --template react-ts
cd supabase-auth-demo
npm install
npm install @supabase/supabase-js tailwindcss postcss autoprefixer
npx tailwindcss init -p

Set up Tailwind in tailwind.config.js:

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
  extend: {},
},
plugins: [],

Add Tailwind to src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Initializing Supabase

Create a new file src/supabaseClient.ts:

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Add your Supabase credentials to .env:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Building the Authentication UI

We'll build a simple form with React and TailwindCSS for signup, login, and logout.

import { useState } from "react";
import { supabase } from "./supabaseClient";

export default function Auth() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState<any>(null);
  const [error, setError] = useState("");

  const handleSignup = async () => {
    const { data, error } = await supabase.auth.signUp({ email, password });
    if (error) setError(error.message);
    else setUser(data.user);
  };

  const handleLogin = async () => {
    const { data, error } = await supabase.auth.signInWithPassword({ email, password });
    if (error) setError(error.message);
    else setUser(data.user);
  };

  const handleLogout = async () => {
    await supabase.auth.signOut();
    setUser(null);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <div className="bg-white shadow-md rounded-lg p-6 w-80">
        <h2 className="text-2xl font-bold text-center mb-4">Supabase Auth</h2>
        {error && <p className="text-red-500 text-sm mb-2">{error}</p>}

        {!user ? (
          <>
            <input
              type="email"
              placeholder="Email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full mb-3 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <input
              type="password"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full mb-3 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <div className="flex gap-2">
              <button
                onClick={handleSignup}
                className="w-1/2 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700"
              >
                Sign Up
              </button>
              <button
                onClick={handleLogin}
                className="w-1/2 bg-green-600 text-white py-2 rounded-lg hover:bg-green-700"
              >
                Login
              </button>
            </div>
          </>
        ) : (
          <div className="text-center">
            <p className="mb-4">Logged in as {user.email}</p>
            <button
              onClick={handleLogout}
              className="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700"
            >
              Logout
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

Persisting the User Session

You can fetch the current session when the app loads:

import { useEffect } from "react";

useEffect(() => {
  supabase.auth.getSession().then(({ data }) => {
    console.log("Session:", data.session);
  });
}, []);

Wrapping Up

We just set up a Supabase-powered authentication system in React with TypeScript, complete with signup, login, and logout, all styled using TailwindCSS. This is a solid starting point for any app that needs user authentication.

In the next part of this series, we'll explore Supabase Edge Functions and how to build custom APIs for your application.
If you found this post valuable, consider sharing it with others who might benefit from it as well!

Cropping & Uploading Profile Pictures in React with TypeScript and react-easy-crop

Sukanta Biswas — Mon, 24 Mar 2025 08:20:06 +0000

Profile picture uploads are an essential feature in modern web applications, enabling users to personalize their accounts on social media platforms, professional networks, and corporate dashboards. To enhance user experience, it's crucial to provide intuitive image cropping, zooming, and rotation before uploading.

In this tutorial, we’ll create a React + TypeScript component that allows users to effortlessly select, crop, adjust, and upload their profile pictures using react-easy-crop. 🚀

Looking for React + JavaScript version of this? Check my other repository for a detailed article: GitHub - image-crop-uploader-js

🛠 Tech Stack

React
TypeScript
Material-UI
react-easy-crop
FileReader API
Canvas API

🎯 Features

✅ Upload an image (drag & drop or file selection)
✅ Crop, zoom, and rotate before uploading
✅ Convert cropped image to Blob or Base64
✅ Preview & save the cropped image

Here’s the actual UI output of our application:

Our cropper module also supports drag and drop:

📌 GitHub Repositories

💻 React + TypeScript: GitHub - image-crop-uploader-ts
💻 React + JavaScript: GitHub - image-crop-uploader-js

1️⃣ Install Dependencies

To get started, install react-easy-crop and Material-UI for the slider:

npm install react-easy-crop @mui/material @mui/icons-material
or
yarn add react-easy-crop @mui/material @mui/icons-material
or
pnpm add react-easy-crop @mui/material @mui/icons-material

2️⃣ Creating the Image Cropper Component
We’ll create an ImageCropper.tsx component that allows users to upload, crop, zoom, and rotate images.

🔹 ImageCropper.tsx

import { IconButton, Slider, Tooltip } from "@mui/material";
import { useCallback, useEffect, useRef, useState } from "react";
import Cropper, { Area, Point } from "react-easy-crop";
import ZoomInRoundedIcon from "@mui/icons-material/ZoomInRounded";
import ZoomOutRoundedIcon from "@mui/icons-material/ZoomOutRounded";
import RotateLeftRoundedIcon from "@mui/icons-material/Rotate90DegreesCcwRounded";
import RotateRightRoundedIcon from "@mui/icons-material/Rotate90DegreesCwRounded";
import OpenWithIcon from "@mui/icons-material/OpenWith";

import "./ImageCropper.scss";
import { ImageProperties } from "../ImageUploadModal/ImageUploadModal";

interface ImageCropperProps {
  uploadedImage: string;
  setImageProperties: (props: any) => void;
}

const ImageCropper = ({
  uploadedImage,
  setImageProperties,
}: ImageCropperProps) => {
  const [crop, setCrop] = useState<Point>({ x: 0, y: 0 });
  const [zoom, setZoom] = useState<number>(1);
  const [rotation, setRotation] = useState<number>(0);
  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area>({
    height: 0,
    width: 0,
    x: 0,
    y: 0,
  });

  useEffect(() => {
    setImageProperties((prevVal: ImageProperties) => {
      if (
        prevVal.zoom !== zoom ||
        prevVal.rotation !== rotation ||
        prevVal.croppedAreaPixels !== croppedAreaPixels
      ) {
        return { zoom, rotation, croppedAreaPixels };
      }
      return prevVal;
    });
  }, [croppedAreaPixels, rotation, zoom]);

  const onCropComplete = useCallback(
    (croppedArea: Area, croppedAreaPixels: Area): void => {
      setCroppedAreaPixels(croppedAreaPixels);
    },
    []
  );

  const handleZoomChange = (value: number) => {
    setZoom(value);
  };

  const handleZoomClick = (mode: string) => {
    if (mode === "zoomin") {
      setZoom((prev) => {
        if (prev >= 3) return prev;
        return prev + 0.1;
      });
    } else {
      setZoom((prev) => {
        if (prev <= 1) return prev;
        return prev - 0.1;
      });
    }
  };

  const handleRotationChange = (direction: string) => {
    if (rotation >= 360 || rotation <= -360) setRotation(0);
    if (direction === "left") setRotation((prev) => prev - 90);
    else setRotation((prev) => prev + 90);
  };

  return (
    <>
      <div className="crop-container">
        <Cropper
          image={uploadedImage}
          crop={crop}
          zoom={zoom}
          rotation={rotation}
          aspect={1}
          cropShape="round"
          showGrid={false}
          onCropChange={setCrop}
          onCropComplete={onCropComplete}
          onZoomChange={setZoom}
          onRotationChange={setRotation}
        />
        <div className="move-btn">
          <OpenWithIcon /> <label htmlFor="none">Move</label>
        </div>
      </div>
      <div className="flex gap-4 control-container">
        <div className="flex gap-2 items-center">
          <Tooltip title="Zoom Out">
            <IconButton
              onClick={(e) => handleZoomClick("zoomout")}
              sx={{ outline: "none" }}
            >
              <ZoomOutRoundedIcon className="control-icon" />
            </IconButton>
          </Tooltip>
          <label htmlFor="none" className="label-text">
            <p>Zoom</p>
          </label>
          <Tooltip title="Zoom In">
            <IconButton onClick={() => handleZoomClick("zoomin")}>
              <ZoomInRoundedIcon className="control-icon" />
            </IconButton>
          </Tooltip>
        </div>
        <div className="zoom-slider">
          <Slider
            value={zoom}
            min={1}
            max={3}
            step={0.1}
            aria-labelledby="Zoom"
            onChange={(e, value) => handleZoomChange(value as number)}
            title="Slide to zoom in or out"
          />
        </div>

        <div className="flex gap-2 items-center">
          <Tooltip title="Rotate Left">
            <IconButton onClick={() => handleRotationChange("left")}>
              <RotateLeftRoundedIcon className="control-icon" />
            </IconButton>
          </Tooltip>
          <label className="label-text">
            <p>Rotate</p>
          </label>
          <Tooltip title="Rotate Right">
            <IconButton onClick={() => handleRotationChange("right")}>
              <RotateRightRoundedIcon className="control-icon" />
            </IconButton>
          </Tooltip>
        </div>
      </div>
    </>
  );
};

export default ImageCropper;

3️⃣ Crop the Image Using Canvas
We’ll use the Canvas API to extract the cropped area and return the final image.

🔹 helper.ts

import { Area } from "react-easy-crop";

export const getCroppedImg = async (imageSrc:string, croppedPixels:Area, rotation:number = 0):Promise<Blob | null> => {
  try {
    const image:HTMLImageElement = await createImage(imageSrc);
    const canvas = document.createElement("canvas");
    const ctx:CanvasRenderingContext2D | null = canvas.getContext("2d");

    const radians = (rotation * Math.PI) / 180;

    // Calculate the bounding box after rotation
    const rotatedWidth =
      Math.abs(Math.cos(radians) * image.width) +
      Math.abs(Math.sin(radians) * image.height);
    const rotatedHeight =
      Math.abs(Math.sin(radians) * image.width) +
      Math.abs(Math.cos(radians) * image.height);

    // Set canvas size to accommodate rotated image
    canvas.width = rotatedWidth;
    canvas.height = rotatedHeight;

    // Move the origin to the center of the canvas for rotation specific transformations
    ctx?.translate(rotatedWidth / 2, rotatedHeight / 2);
    ctx?.rotate(radians);

    // Draw the image so it is centered in the canvas
    ctx?.drawImage(image, -image.width / 2, -image.height / 2);

    // Reset the transformation before final cropping
    ctx?.setTransform(1, 0, 0, 1, 0, 0);

    // Create another canvas for the final cropped image
    const croppedCanvas = document.createElement("canvas");
    const croppedCtx:CanvasRenderingContext2D | null = croppedCanvas.getContext("2d");

    croppedCanvas.width = croppedPixels.width;
    croppedCanvas.height = croppedPixels.height;

    // Draw the final cropped area from the rotated image
    croppedCtx?.drawImage(
      canvas,
      croppedPixels.x,
      croppedPixels.y,
      croppedPixels.width,
      croppedPixels.height,
      0,
      0,
      croppedPixels.width,
      croppedPixels.height
    );

    return new Promise((resolve, reject) => {
      croppedCanvas.toBlob((blob) => {
        if (!blob) {
          console.error("Blob creation failed");
          reject(null);
          return;
        }
        resolve(blob);
      }, "image/jpeg");
    });
  } catch (error) {
    console.error("Error cropping image:", error);
    return null;
  }
};

const createImage = (url:string):Promise<HTMLImageElement> =>
  new Promise((resolve, reject) => {
    const image = new Image();
    image.crossOrigin = "anonymous";
    image.src = url;
    image.onload = ()=> resolve(image);
    image.onerror = (error) => reject(error);
  });

4️⃣ Profile Picture Upload Component
This component selects, crops, and uploads the profile picture.

🔹 ImageUploadModal.tsx

import { useRef, useState } from "react";
import "./ImageUploadModal.scss";
import PropTypes from "prop-types";
import {
  Box,
  Button,
  IconButton,
  Modal,
  Tooltip,
  Typography,
} from "@mui/material";
import CancelRoundedIcon from "@mui/icons-material/CancelRounded";

import ImageCropper from "@src/ImageCropper/ImageCropper";
import { getCroppedImg, blobToBase64 } from "@src/helpers/helper.ts";

interface ImageUploadProps {
  handleClose: () => void;
  openModal:boolean;
}
const ImageUploadModal = ({ handleClose, openModal }: ImageUploadProps) => {
  const [dragEnter, setDragEnter] = useState(false);
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const [error, setError] = useState("");
  const uploadProfilePicInputRef = useRef<HTMLInputElement>(null);
  const [imageProperties, setImageProperties] = useState({
    zoom: 1,
    rotation: 0,
    croppedAreaPixels: {
      height: 0,
      width: 0,
      x: 0,
      y: 0,
    },
  });

  /* on dragging over the valid dropzone area */
  const handleDragOver = (event: React.MouseEvent) => {
    setDragEnter(true);
    event.preventDefault();
    event.stopPropagation();
  };

  /* on dragging out the valid dropzone area */
  const handleDragLeave = (event: React.DragEvent) => {
    setDragEnter(false);
    event.preventDefault();
    event.stopPropagation();
  };

  /* on drop of image onto the valid dropzone */
  const handleDrop = (event: React.DragEvent) => {
    event.preventDefault();
    event.stopPropagation();
    const file = event.dataTransfer.files[0];
    setDragEnter(false);
    validateAndUploadFile(file);
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (!event.target.files) return;
    const file = event?.target?.files[0];
    validateAndUploadFile(file);
  };
  const attachButtonHandler = () => {
    if (uploadProfilePicInputRef.current)
      uploadProfilePicInputRef.current.click();
    else console.error("uploadProfilePicInputRef is null");
  };

  const cancelUpload = () => {
    setError("");
    setSelectedImage(null);
  };
  /* check validations before uploading the file */
  const validateAndUploadFile = (file: File) => {
    if (file) {
      const validTypes = ["image/jpeg", "image/jpg", "image/png"];
      const maxSize = 5 * 1024 * 1024;

      if (!validTypes.includes(file.type)) {
        setError("Please upload a .jpeg/.jpg or .png file type");
        return;
      }
      if (file.size > maxSize) {
        setError("Image file size should be less than 5MB");
        return;
      }
      setError("");
      const reader: FileReader = new FileReader();
      reader.onload = () => setSelectedImage(reader.result as string);
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = async () => {
    const { rotation, croppedAreaPixels } = imageProperties;
    if (!selectedImage) {
      setError("No image selected. Please upload an image.");
      return;
    }
    const croppedImage: Blob | null = await getCroppedImg(
      selectedImage,
      croppedAreaPixels,
      rotation
    );
    if (!croppedImage) {
      setError("Failed to crop the image. Please try again.");
      return;
    }
    const base64Image: string = await blobToBase64(croppedImage);
    localStorage.setItem("userProfilePic", base64Image);
    handleClose();
  };

  const handleChangeImage = () => {
    cancelUpload();
    if (uploadProfilePicInputRef.current)
      uploadProfilePicInputRef.current.click();
  };

  return (
    <Modal
      open={openModal}
      onClose={handleClose}
      aria-labelledby="image-upload-modal"
    >
      <Box className="upload-pic-container modal-box">
        <div className="header-container">
          <div className="title-section">
            <h3 className="title-section-head">Upload Photo</h3>
            <p className="title-section-para">
              Upload a photo of yourself to personalize your account
            </p>
          </div>
          <Tooltip title="Close">
            <IconButton className="close-btn" onClick={handleClose}>
              <CancelRoundedIcon />
            </IconButton>
          </Tooltip>
        </div>

        <div className="upload-section">
          {selectedImage ? (
            <ImageCropper
              uploadedImage={selectedImage}
              setImageProperties={setImageProperties}
            />
          ) : (
            <>
              <label
                htmlFor="fileInput"
                className={`upload-box ${dragEnter ? "drag-enter" : ""}`}
                onDragEnter={handleDragOver}
                onDragOver={(event) => event.preventDefault()}
                onDrop={handleDrop}
                onDragLeave={handleDragLeave}
              >
                <input
                  type="file"
                  id="fileInput"
                  accept="image/*"
                  onChange={handleFileChange}
                  hidden
                  ref={uploadProfilePicInputRef}
                />
                {dragEnter
                  ? `Drop the file here`
                  : `Attach or Drag & Drop your photo here`}
              </label>
              <Typography variant="body2" className="upload-info">
                200 x 200 min / 5MB max
              </Typography>
            </>
          )}
          {error && <Typography className="error">{error}</Typography>}
        </div>

        <div className="upload-footer">
          {selectedImage === null ? (
            <>
              <Button onClick={handleClose} variant="outlined" className="btn-s">
                Cancel
              </Button>

              <Button  variant="contained" className="btn-p" onClick={() => attachButtonHandler()}>
                Attach Photo
              </Button>
            </>
          ) : (
            <>
              <Button onClick={handleChangeImage} variant="outlined" className="btn-s">
                Change Photo
              </Button>
              <Button onClick={handleSubmit} variant="contained" className="btn-p">
                Upload Photo
              </Button>
            </>
          )}
        </div>
      </Box>
    </Modal>
  );
};

ImageUploadModal.propTypes = {
  handleClose: PropTypes.func,
};

export default ImageUploadModal;

🎨 5️⃣ Styling
Basic SCSS styles for a clean UI.

$theme_color_primary: #8f1ca3;
$theme_bgcolor_primary: #8f1ca3;
$theme_color_primary_light: #8f1ca38b;
$theme_color_primary_border: #8f1ca35f;

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;

  &:hover {
    color: #535bf2;
  }
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

.MuiIconButton-root {
  outline: none;
  height: fit-content;
  padding: 3px;

  svg:hover {
    color: $theme_color_primary;
  }
}

.upload-pic-container.modal-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 34rem;
  height: 382px;
  position: absolute;
  top: 50%;
  left: 50%;
  outline: none;
  transform: translate(-50%, -50%);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);

  .edit-image-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #cbd0dc;
    border-radius: 20px;
    width: 30px;
    height: 30px;

    svg {
      margin-top: 2.5px;
      margin-left: 0.5px;
    }
  }

  .title-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-left: 15px;
    padding-bottom: 10px;

    .title-section-head {
      font-weight: 600;
      font-size: 20px;
      line-height: 24px;
      padding-left: 20px;
    }

    .title-section-para {
      font-weight: 500;
      font-size: 15px;
      line-height: 18px;
      opacity: 0.4;
      padding-left: 20px;
    }
  }

  .header-container {
    display: flex;
    align-items: center;
    border-bottom: 2px solid $theme_color_primary_border;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 30px;
    background-color: #e2f8ed;
  }

  .btn-p {
    background-color: $theme_color_primary;
    color: white;
    border: none;
    font-weight: 700;
    font-family: inherit;
  }

  .btn-s {
    border: 1px solid $theme_color_primary;
    background-color: white;
    color: $theme_color_primary;
    font-weight: 700;
    font-family: inherit;
  }

  .modal-title {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
  }

  .upload-box {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px dashed #cbd0dc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    padding: 20px;
    transition: 0.4s ease-in-out;

    &:hover,
    &.drag-enter {
      border-color: $theme_color_primary;
      box-shadow: 0px 0px 8px 3px #ebecea;
    }
  }

  .preview-image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid $theme_color_primary;
  }

  .upload-info {
    font-size: 12px;
    color: gray;
    margin-top: 10px;
    font-family: inherit;
  }

  .error {
    color: red;
    font-size: 12px;
  }

  .upload-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}

.reactEasyCrop_CropArea {
  width: 100% !important;
  height: 100% !important;
}

.image-cropper-modal {
  background: white;
  border-radius: 10px;
  padding: 20px;
  width: 400px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.crop-container {
  position: relative;
  top: -26px;
  width: 242px;
  height: 242px;
  background: #f5f5f5;
  clip-path: circle(37%);
  overflow: hidden;

  .move-btn {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #bcbcbc;
    position: absolute;
    height: 24px;
    width: 62px;
    top: 168px;
    left: 92px;
    border-radius: 34px;
    color: $theme_color_primary;
    font-size: 10px;
    padding: 5px;
    opacity: 0.8;
    transition: 0.2s ease-in-out;

    svg {
      height: 10px;
      width: 10px;
    }
  }

  &:hover .move-btn {
    display: none;
  }
}

.control-container {
  position: absolute;
  bottom: 66px;
  width: 75%;

  .control-icon {
    cursor: pointer;
    color: $theme_color_primary;
    opacity: 0.58;

    &:hover {
      opacity: 1;
    }
  }

  .MuiIconButton-root {
    outline: none;
    height: fit-content;
    padding: 3px;
  }

  .MuiSlider-root {
    color: $theme_color_primary;
  }

  .zoom-slider {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .label-text {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;

    svg {
      height: 16px;
      width: 16px;
    }

    p {
      font-size: 10px;
      color: $theme_color_primary;
    }
  }

  .rotate-right {
    transform: scaleX(-1);
  }
}

🎯 Conclusion
✅ Users can select, crop, and adjust profile pictures.
✅ react-easy-crop handles zoom & rotation effortlessly.
✅ The Canvas API extracts the cropped image.
✅ Supports drag & drop, file selection, and real-time previews.

This approach provides a scalable, user-friendly solution for profile picture uploads. If you found this helpful, feel free to like & share! 🚀🔥