DEV Community: Debajyati Dey

A Case Study in Solving the Riddle of FrancisTRDEV

Debajyati Dey — Sat, 04 Apr 2026 01:30:00 +0000

Recently, a riddle was posted by @francistrdev on 1st April on dev.to that presented a unique challenge: a multi-line poem obscured by Caesar shifts.

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Apr 1

Riddle me this DEV and MLH Community [April Fools]

#discuss #watercooler #writing #community

Comments 11

1 min read

However, as many soon discovered, this wasn't a standard single-key cipher. It was a "Mixed-Shift" puzzle, where different lines utilized different rotation values.

In this article, I am documenting the iterative journey of building an automated LLM-based Caesar cipher solver, the failures we (pair planning with AI (Gemini), hence we) encountered, and the final "Contextual Consensus" architecture that achieved 100% accuracy.

I name this approach/project - DecipherLM.

The Core Problem

The Riddle -

Not all rewards glitter the same, Vrxvi tcztbj fwkve jgfzc kyv tcrzd. Exfb jan vjmn R anodbn cx kanjt, Every promise real—no fake. Remaining patient tells you when, Pjvnb xo cadbc knprw jpjrw. Fetv pfl tyffjv kf wfccfn kyiflxy, Nothing’s lost—except maybe you. Numbers, years, a felt‑known tune, R dvdfip yldj r jzcmvi jgffe. Pnwcun fxamb, ojvrurja ouxf, If it’s wrong… why does it glow? Very few walk away untouched, Vmve wvnvi jljgvtk rj dlty. Pzvcu kf rejnvij, ufe’k xzmv lg-- Fcu ivgczvj wzcc kyv tlg. Leuvijkreu nyrk cvu pfl yviv, Lecvjj... pfl rcivrup yvri zk. Gcrp zk. Nyrk rd Z yvrizex?

Traditional frequency analysis (looking for 'E' and 'T') works well for long texts but fails on short, poetic lines. We turned to LLM Perplexity Scoring.

The Logic

An LLM is trained on trillions of tokens of natural language. If we shift a line 25 times, the version that "looks" most like English will have the lowest Perplexity (PPL)—a mathematical measurement of how "surprised" a model is by a sequence of text.

Phase 1: The "Global Master Key" Failure

Our first approach assumed the entire poem used one shift. We calculated the average perplexity for the whole block across all 25 shifts.

Result: Failure

Observation

Because lines 2, 3, and 6 used Shift +17 while the rest used Shift +9, the "correct" shift for the majority was being "poisoned" by the high perplexity of the minority lines. The model couldn't find a single key that made the whole text coherent.

Phase 2: The "Line-by-Line" Noise Trap

We pivoted to scoring every line individually. If a line looks best at +17, decrypt it at +17.

Result: Partial Success

The Model Crisis

SmolLM2-135M: Performed surprisingly well but made "hallucinated" guesses on short lines (e.g., choosing Shift +14 for a 4-word line).
GPT-2: Failed significantly due to an outdated tokenizer that couldn't handle the "character-level" noise of a cipher.
Large Models (360M+): Often performed worse. They were "too sensitive"—a single unusual word choice in the poem would cause a perplexity spike, leading the model to prefer a gibberish shift that happened to have a "smoother" token distribution.

Phase 3: The "Consensus & Mode" Breakthrough

I thought that for a(this) riddle, the shifts aren't random. They are scatteredly forming a group and each member of a group is following a pattern (the Mode value or সংখ্যাগুরুমান of the series of individual shifts).

This was my prompt -

Trusted Pool Strategy

Identify the Global Master Key (best shift for the whole block)
Identify the Local Mode (most frequent best-shift across individual lines)

\isin (Global Minimum \bigcup Mode(Line Shifts))}

The Constraint

Force every line to choose only from this Trusted Pool (e.g., [9, 17]).

But the 135M huggingface model was not showing any improvement. Then I thought maybe it is the model problem. I intended to use any SLM (Small Language Model) but stay away from LLMs because I can't run them locally. I decided to explore the power of Small Language Models. So, I had to choose between the narrower domain of models. I decided to go with Qwen2.5-0.5B.

By using Qwen2.5-0.5B—a model with superior character-level awareness, the approach finally clicked.

I was able to eliminate the "random noise" shifts (+14, +4, etc.), as the model was no longer allowed to pick them.

The Output -

✅ Trusted Candidate Shifts: [9, 17]

==============================
🏆 FINAL DECIPHERED TEXT
==============================

Eager clicks often spoil the claim.
Vows are made I refuse to break,
Games of trust begin again.
Once you choose to follow through,
I umuwzg pcua i aqtdmz axwwv.
Gentle words, familiar flow,
Even fewer suspect as much.
Yield to answers, don’t give up--
Old replies fill the cup.
Understand what led you here,
Unless... you already hear it.
Play it.
What am I hearing?

Phase 4: Final Polish — "Contextual History"

Even with a Trusted Pool, one line:

"A memory hums a silver spoon"

was still being misidentified by the Qwen2.5-0.5B model.

Contextual Scoring

Instead of scoring a line in isolation, we appended it to the previous two decrypted lines:

# The Secret Sauce
scoring_text = (history + "\n" + candidate_line).strip()
ppl = score_with_llm(scoring_text)

Feeding the model the "history" of the poem, it finally "understood" the narrative flow.

It recognized that:

"A memory hums..."

followed the previous lines perfectly at Shift +9, even if the mathematical perplexity was close.

Comparison of Models

Model	Size	Verdict
GPT-2	124M	Poor. Tokenizer is too old; struggles with cipher fragments.
SmolLM2-135M	135M	Good. Great "Goldilocks" model for simple tasks, but prone to noise.
Qwen2.5-0.5B	500M	Excellent. The winner. High precision and modern tokenization.
SmolLM2-360M	360M	Mediocre. Surprisingly overthinks the noise in short sentences.

Bigger isn't always better. We compared 4 different architectures to determine which model handled character level cryptographic noise most efficiently. The chart below plots the parameter size against qualitative verdict.

Why Qwen2.5 0.5B Won

Character Awareness:

Superior handling of ciphered text fragments compared to BPE-heavy models.
Modern Tokenization:

Avoids the "hallucination" traps seen in smaller SmoILM or older GPT-2 variants.
Efficiency:

Sub-5s decryption on consumer GPUs with 16-bit precision.

Remarks

Solving FrancisTRDEV's riddle was never about "having a GPU". It was about understanding that Context is King.

By moving from raw statistical scoring to a "Consensus + Context" architecture, we transformed a noisy LLM into a precise cryptanalytic tool.

Final Version of DecipherLM Architecture: A Triple-Stage Pipeline

Global Analysis Module (The Macro Lens): The first stage performs a broad sweep of the entire ciphertext. By calculating the Perplexity (PPL) of the full block across all 25 shifts, it identifies the Global Master Key—the most dominant shift that makes the most sense at scale.
Consensus Engine (The Statistical Filter): Instead of trusting a single key, this engine performs a "Line-by-Line" vote. It identifies the Mode (সংখ্যাগুরুমান) of shifts across individual lines to create a "Trusted Pool" (e.g., shifts +9 and +17). This critically filters out "linguistic noise"—those random, hallucinated shifts that might look like English in isolation but are statistically irrelevant to the whole poem.
Context-Aware Precision Stage (The Micro Lens): The final and most advanced layer uses the Qwen2.5-0.5B model with a Rolling Context Buffer. Each line is scored not in a vacuum, but alongside the context of the previous two decrypted lines. This ensures narrative and semantic continuity, allowing the model to perfectly resolve short, ambiguous lines that simple frequency analysis would miss.

This architecture moves away from "guessing" and toward a robust, multi-layered validation system that treats cryptography as a linguistic probability problem.

The Full & Final Code

First install dependencies -

uv add torch python-dotenv transformers accelerate

Now write code -

import torch
import os
from collections import Counter
from transformers import AutoTokenizer, AutoModelForCausalLM
from dotenv import load_dotenv
from huggingface_hub import login

load_dotenv()
hf_token = os.getenv("HF_TOKEN")

if hf_token:
    login(token=hf_token) 

# 1. Setup
DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
DTYPE = torch.float16 if DEVICE.type == "cuda" else torch.float32
MODEL_NAME = "Qwen/Qwen2.5-0.5B"

tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME, trust_remote_code=True)
model = AutoModelForCausalLM.from_pretrained(
    MODEL_NAME, dtype=DTYPE, trust_remote_code=True, device_map=DEVICE.type
)
model.eval()


def caesar_shift(text: str, shift: int) -> str:
    res = []
    for ch in text:
        if ch.isalpha():
            base = ord("A") if ch.isupper() else ord("a")
            res.append(chr((ord(ch) - base + shift) % 26 + base))
        else:
            res.append(ch)
    return "".join(res)


def score_with_llm(text: str) -> float:
    tokens = tokenizer(text, return_tensors="pt", truncation=True, max_length=512)
    tokens = {k: v.to(DEVICE) for k, v in tokens.items()}
    with torch.no_grad():
        loss = model(**tokens, labels=tokens["input_ids"]).loss
    return torch.exp(loss).item()


def solve_with_consensus(ciphertext: str):
    lines = [line.strip() for line in ciphertext.split("\n") if line.strip()]

    # STEP 1: Global Master Key (Remains the same)
    print("🌍 Step 1: Calculating Global Master Key...")
    global_scores = []
    for s in range(1, 26):
        global_scores.append((s, score_with_llm(caesar_shift(ciphertext, s))))
    master_key = min(global_scores, key=lambda x: x[1])[0]

    # STEP 2: Potential Secondary Shift (Remains the same)
    print("🔍 Step 2: Identifying Potential Secondary Shift...")
    line_best_shifts = []
    for line in lines:
        best_s = min([(s, score_with_llm(caesar_shift(line, s))) for s in range(1, 26)], key=lambda x: x[1])[0]
        line_best_shifts.append(best_s)

    counts = Counter(line_best_shifts).most_common(2)
    primary_candidate = counts[0][0]
    secondary_candidate = counts[1][0] if len(counts) > 1 else master_key
    trusted_shifts = list(set([master_key, primary_candidate, secondary_candidate]))
    print(f"✅ Trusted Candidate Shifts: {trusted_shifts}")

    # STEP 3: Final Decryption with CONTEXT
    print("✍️  Step 3: Decrypting with contextual history...")
    final_lines = []
    history = "" # We will store previous decrypted lines here

    for line in lines:
        scores = []
        for s in trusted_shifts:
            candidate = caesar_shift(line, s)
            # We score the candidate line WITH the previous 2 lines of context
            # This prevents the model from choosing gibberish for short lines.
            scoring_text = (history + "\n" + candidate).strip()
            scores.append((s, score_with_llm(scoring_text), candidate))

        winner_shift, _, winner_text = min(scores, key=lambda x: x[1])
        final_lines.append(winner_text)

        # Update history (keep only the last 2 lines to save memory/tokens)
        history_lines = (history + "\n" + winner_text).strip().split('\n')
        history = "\n".join(history_lines[-2:])

    return final_lines, master_key


# Deciphering in Action
CIPHERTEXT = """Vrxvi tcztbj fwkve jgfzc kyv tcrzd.
Exfb jan vjmn R anodbn cx kanjt,
Pjvnb xo cadbc knprw jpjrw.
Fetv pfl tyffjv kf wfccfn kyiflxy,
R dvdfip yldj r jzcmvi jgffe.
Pnwcun fxamb, ojvrurja ouxf,
Vmve wvnvi jljgvtk rj dlty.
Pzvcu kf rejnvij, ufe’k xzmv lg--
Fcu ivgczvj wzcc kyv tlg.
Leuvijkreu nyrk cvu pfl yviv,
Lecvjj... pfl rcivrup yvri zk.
Gcrp zk.
Nyrk rd Z yvrizex?"""

decoded_output, m_key = solve_with_consensus(CIPHERTEXT)

print("\n" + "=" * 30)
print("🏆 FINAL DECIPHERED TEXT")
print("=" * 30 + "\n")
print("\n".join(decoded_output))

The console output -

Note: Environment variable`HF_TOKEN` is set and is the current active token independently from the token you've just configured.
Loading weights: 100%|████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████| 290/290 [00:00<00:00, 502.36it/s]
🌍 Step 1: Calculating Global Master Key...
🔍 Step 2: Identifying Potential Secondary Shift...
✅ Trusted Candidate Shifts: [9, 17]
✍  Step 3: Decrypting with contextual history...

==============================
🏆 FINAL DECIPHERED TEXT
==============================

Eager clicks often spoil the claim.
Vows are made I refuse to break,
Games of trust begin again.
Once you choose to follow through,
A memory hums a silver spoon.
Gentle words, familiar flow,
Even fewer suspect as much.
Yield to answers, don’t give up--
Old replies fill the cup.
Understand what led you here,
Unless... you already hear it.
Play it.
What am I hearing?

Final Decryption Key

Most lines: Shift +9
Outlier lines: Shift +17

Final Verdict

The riddle is solved. The DecipherLM wins.

So, the entire poem will be -

Not all rewards glitter the same, Eager clicks often spoil the claim. Vows are made I refuse to break, Every promise real—no fake. Remaining patient tells you when, Games of trust begin again. Once you choose to follow through, Nothing’s lost—except maybe you. Numbers, years, a felt‑known tune, A memory hums a silver spoon. Gentle words, familiar flow, If it’s wrong… why does it glow? Very few walk away untouched, Even fewer suspect as much. Yield to answers, don’t give up-- Old replies fill the cup. Understand what led you here, Unless... you already hear it. Play it. What am I hearing?

Concluding

So, yes, ... that's a wrap!

Feel free to connect with me. :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Follow me on Dev...

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Happy coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀

No It Wasn't A Waste Entirely

Debajyati Dey — Fri, 03 Apr 2026 11:21:08 +0000

So, hello everyone! It is a follow-up article to my last article about mirroring two datasets to Kaggle.

Debajyati Dey

Mar 15

So, you know what? I just wasted 3 months of my life

#discuss #kaggle #googlecloud #deeplearning

Comments 6

8 min read

In that article I expressed my frustrations, ambitions and how I failed even after trying many ways particularly for the Wild Deepfake Dataset.

In this article I am going to present you how I managed to successfully upload the 24GB polyglotfake multimodal deepfake dataset on kaggle for accessibility enhancement and easy non-interactive experiments for everyone.

The original GitHub repo of the PolyGlotFake Deepfake Dataset is at -

tobuta / PolyGlotFake

PolyGlotFake Dataset

Overview

PolyGlotFake is a multilingual and multimodal deepfake dataset meticulously designed to address the challenges and demands of deepfake detection technologies. It consists of videos with manipulated audio and visual components across seven languages, employing advanced Text-to-Speech, voice cloning, and lip-sync technologies.

Download DataSet

Please download from this link: https://drive.google.com/file/d/1aBWLii-TbrpKNLSTwpmjqu98eKovWLxF/view?usp=drive_link

Quantitative Comparison

DataSet	Release Data	Manipulated Modality	Multilingual	Real video	Fake video	Total video	Manipulation Methods	Techniques Labeling	Attribute Labeling
UADFV	2018	V	No	49	49	98	1	No	No
TIMI	2018	V	No	320	640	960	2	No	No
FF++	2019	V	No	1,000	4,000	5,000	4	No	No
DFD	2019	V	No	360	3,068	3,431	5	No	No
DFDC	2020	A/V	No	23,654	104,500	128,154	8	No	No
DeeperForensics	2020	V	No	50,000	10,000	60,000	1	No	No
Celeb-DF	2020	V	No	590	5,639	6,229	1	No	No
FFIW	2020	V	No	10,000	10,000	20,000	1

…

View on GitHub

And the README contains the drive link to download the dataset.

PolyGlotFake.rar - Google Drive

drive.google.com

Based on my experience with uploading the wild deepfake dataset on Kaggle, my key mistake was extracting the tar files into nested folders of images and then uploading them after to drive ⇒ GCloud Storage bucket ⇒ Kaggle (failed).

Although it wasn't entirely a mistake considering I didn't have much storage space in my local machine to archive the 4 tar files (train real, train fake, test real, test fake) in the wild deepfake dataset.

So I would just fail anyway.

Clicking on the polyglotfake download drive link you can see that the dataset is presented as a single RAR archive file. This format is highly beneficial for uploading as dataset in Kaggle. Because if I can create a public link of a no matter how large file (single file, not a folder) in GCS bucket, it will be very quickly transferred.

How I Managed to Be Successful

So I began by copying the RAR file through the drive link into my Google Drive.

Then opened a colab notebook. Began writing code -

# authenticating google cloud
from google.colab import auth
auth.authenticate_user()
project_id = 'polyglotfake'
!gcloud config set project {project_id}
!gsutil ls

Next step is downloading the 24GB dataset from drive to colab disk storage using gdown -

!gdown --id 1cUlwVi8Wu6MmDu8Mh2lXTIPJFz63KOtd

I intended to directly copy the gdown downloaded RAR file to the GCS bucket. So I need gcsfuse for that -

echo "deb http://packages.cloud.google.com/apt gcsfuse-bionic main" > /etc/apt/sources.list.d/gcsfuse.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key add -
apt -qq update
apt -qq install gcsfuse

mkdir my_gcs_mount

now next step forward is to copy the file from drive to GCS bucket -

%cp /content/goblin/PolyGlotFake.rar /content/my_gcs_mount/polyglotfake/

In my case, this operation took more than 3 hours.

But now is the time for most crucial operation. That is making the storage bucket public.

I did it using the command line because the web interface was somewhat confusing.

gcloud storage buckets add-iam-policy-binding gs://pgfake --member=allUsers --role=roles/storage.objectViewer

So that's it! Now I have a public link of the GCS bucket! I copied that from the web interface of Google cloud console.

Finally the only thing left to do is uploading to kaggle. So, navigate to - https://www.kaggle.com/datasets/?new=true and click on the link tab -

It will then look like this -

I entered the path to the file in the bucket.

And it took nearly 2 hours to upload the whole dataset.

Tears of joy.

I was finally able to mirror a large dataset of the two I intended to.

I made it public so that anyone in need can access it, without going through the hassle I had.

You can find it on https://www.kaggle.com/datasets/debajyatidey/polyglotfake.

A Glimpse of The Data as CSV

Gist of Real Videos Info as a CSV -

Hehe, fake videos' info CSV file is too large, so Can't render it here.

Visualizing The Data Distributions

Below there are some charts to visualize how the Real Videos (not deepfake) is distributed and organized -

Distribution of Age By Language The subject speaks in :-

Distribution of Age of Subject By Sex (Gender):-

Sex Ratio in All Real Videos -

Now there are some charts to visualize how Deepfake Videos are organized and distributed -

📝 All these visualizations were created using Google Looker Studio.

Conclusion

So yeah… this time, it worked.

After all the failed attempts, broken pipelines, storage limitations, and that slow realization that "simple" problems are rarely simple — this one finally went through. Not because I discovered some magical trick, but because I stopped fighting the system and started working with it.

The difference?
I didn’t try to be clever. I tried to be practical.

Instead of exploding datasets into thousands of files and then dragging them through layers of infrastructure (and pain), I kept it as a single archive and let the systems that are actually designed for large transfers do their job. Turns out, boring solutions scale better than “smart” ones.

Looking back, this whole journey reinforced something I underestimated earlier:
data engineering is not a side quest in ML — it is the game.

Datasets like PolyGlotFake aren’t just large for the sake of it. They’re complex, multilingual, multimodal — and intentionally difficult to work with because they reflect real-world deepfake challenges. Making them accessible is not just convenience — it directly impacts how fast someone can experiment, iterate, and actually do research.

And that’s really the point.

If one person can now spin up a Kaggle notebook, plug in the dataset, and start experimenting in minutes instead of wasting days setting things up — then this entire ordeal was worth it.

Would I do it again?
Maybe, if it is indeed feasible.

But at least now I know this much —
sometimes the problem isn’t that something is impossible.

It’s just that you were doing it the hard way.

So, yes, ... that's a wrap!

Feel free to connect with me. :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Follow me on Dev...

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Happy coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀

So, you know what? I just wasted 3 months of my life

Debajyati Dey — Sun, 15 Mar 2026 20:01:52 +0000

Hey bros and sisters and other fellow developers. I am a human man. And I am sharing my personal experience and frustrations regarding uploading datasets.

I am dumb and may don't know a lot of stuff and that is why I just happen to try a lot of things, differently maybe and fail severly. Haha, what a tragedy...

So, it happens as I needed to my tune some CNNs or ViTs or both which are pretrained on 'imagenet' or 'LVD-1689M', so that I can use them for feature extraction in my preferred dataset domain (detection of deepfakes - It is my final year project that I am working on).

The dataset I preferred for fine-tuning the set of deep learning models is Wild Deepfake -

Because it is a diverse and real world deepfake dataset that has data sourced from in the wild deepfakes available on the internet. Fine tuning on it will be extremely beneficial because it will help the models generalize better across real world modern deepfakes and other available datasets. It is proven and tested before by other researchers and they found the fact to be true.

Now you might ask me and yes it is a valid question to ask that is if the dataset is available in huggingface then what I am trying to achieve by uploading? You mean like what am I uploading even?

It is just there in HF. What am I upto? Well, that is a sensible concern.

Look, the thing is - I use kaggle notebooks for all my test, research and prototyping stuff for developing and ideating different possible architectures.

Why because kaggle not only provides weekly 30 hours of GPUs and 23 hours of TPUs for FREE but also, but it lets you run notebooks non-interactively. Non-interactive means you can code and save your work by clicking on the 'save and run all (commit)' button which saves your work in the cloud by runnign the whole notebook or script file for once in the cloud without you needing to keep the browser tab open. You can run save and forget the world and everything for good, shut down your PC, and take a deep sleep, have dreams and whatever. Meanwhile, your notebook will keep running and if it faces any error and stops or executes every cell sucessfully, saves output and ends execution - it will email you with link to the failed or successful notebook.

I find this to be a pleasant feature. I can spend whole day and night experimenting, thinking, architecting and developing the system and just put it to execution before I go to bed. It can take just 1 hour or even 3-5-9-12 hours to execute the notebook. And when I will wake up I will brush my teeth, have a nice breakfast and would just check my email for results.

Now to answer your question - "Why I would not just load from huggingface?". The answer is - speed. Based on personal experience, and whatever I heard from other devs, when downloading a dataset hosted on kaggle for the first time, it is hell slow. 2nd time, 3rd time, also slow. Next time it will be cached. And so, subsequent downloads will be faster, like a lot faster. Faster than faster. And I run notebooks non interactively most times. In non-interactive mode, loading a dataset is even faster like immediate compared to interactive modes. But that is not the case for hf datasets.

Interactive and Non-interactive modes - in both cases loading dataset from hf is found to take the same amount of time. At least I found it like that.

Also, I didn't find that after downloading a dataset from hf in kaggle notebooks couple of times, it gets any faster. It doesn't. The speed doesn't improve at all. It remains the same.

The dataset is huge - in parquet conversion - it is total 9gb. And in raw PNG image nested folders - it is 67 gigabytes. Huge...

But being in raw image format helps me loading some individual random or selective files which won't be very easy honestly, with the parquet version.

Still loading it a couple of times will make it faster and enough for me to run in non-interactive commit mode of notebooks (if the data is loaded from kaggle datasets). So, yeah! I thought it might be worth the shot!

Meanwhile for just continuing my work as it already going on -

I was/(am still) using this subset of original wild deepfake dataset - made available in kaggle by a fellow veteran developer (I am grateful to his kindness in making his upload publicly available) -

Wild Deepfake
Dataset on Kaggle (dataset author (Martins, who uploaded) confirmed it to be a subset)

Without this I wouldn't have been able to use wilddeepfake for training and testing, you know.
But still, there is no guarantee that it is the actual wild deepfake dataset. It might be a subset of a whole different dataset and he just named it WildDeepfake. How would I know? There is no way. I can either blindly accept and use it or, perhaps, lose it?

My Next Decision

So, my dumb brain just thought, heyyyy, why not just download the data from huggingface and upload it on kaggle? Prawnblem solved!

And my dumb brain just followed the decision with utmost heart and soul.

I cloned the wilddeepfake repo from huggingface.
enabled git lfs. and downloaded the gzip compressed tar archives.
extracted them all.
took 1.5 months to upload them all in my Google Drive folder by folder. (yes I have 2TB Google Drive storage because I have 1 year google AI pro subscription for students, so I can easily upload large datasets in my drive, but that doesn't solve any problem).
Started the ($300) google cloud free trial and created a Google cloud storage bucket.
Opened a colab notebook. Wrote code to authenticate Google Drive and google cloud.
Used gsutil to directly copy files from drive directory to cloud storage bucket directory.
It took me 30 days to complete the copying process.

So yeah now I just can't upload the dataset from my gcs bucket to kaggle. I tried multiple times. I tried multiple times. I put the path to directory containing the dataset in the bucket to kaggle dataset upload from link option which accepts gcs bucket.

It takes forever to get done. No, not even forever. It goes 12 hours long while showing "bundling" & then it vanishes uploading. No traces that some process was occuring.

Man I feel like I must give up. It won't work maybe. I was fool to try.

That's not just it.

I have found a 24GB multimodal deepfake dataset named - "Polyglotfake". I saved it in my Google Drive. Now I can't upload it in kaggle. Based on my experience, whenever I tried uploading a single 24 GB huge rar file via kaggle cli or via web using the downloaded rar in my local filesystem - both are slow as hell and takes forever.

Next thing I tried was finding gdown as a useful tool to download large files "shared with access to anyone in the link" from Google Drive.

The most pathetic thing about gdown is that it temporarily blocks you after you tried to download a file (especially, a large file). Then within 24 hours, not only you but everyone in the planet will not be able to download it.

Another thing, I saw that when you use gdown on kaggle notebook or your local filesystem, it works really damn fast and actually downloads the whole file without disruption. But with Google cloud shell, it just accidentally stops with whatever error and or sometimes even no error, when it has just barely downloaded 67 megabytes of data.

One thing I am sure that I will try to upload the polyglotfake dataset again after the next 24 hours are over. I will mount my seperate gcs bucket for polyglotfake in my colab notebook, authenticate my Google Drive account; and either try to copy from mounted google drive to mounted cloud storage bucket. Or, run gdown again on the mounted storage bucket directory.

My goggle cloud free trial ends on the last week of this march. Before that I have to everything I can, and if I can't do anything, or I fail, I will push towards deleting the buckets and finally, giving up.

So, yaa, that's a wrap.

Concluding

TL;DR: I tried to move a dataset. The internet said "no". I'm still trying.

If you've been here — slow downloads, vanished uploads, gdown bans — you know the pain. If you haven't… welcome, it gets worse (just kidding… mostly).

Looking back, maybe I overcomplicated it. Maybe I should've just used the subset, or stuck with HuggingFace loading times, or accepted that some friction is part of the process.

But here's the thing: research isn't just about models and metrics. It's also about workflow, accessibility, and removing tiny barriers that add up. If I can make WildDeepfake or Polyglotfake one click easier to use for someone else down the line — even if it takes me a few more failed uploads to get there — I think that's a win.

So yeah, that's where I'm at.

What I learned: Sometimes the simplest idea — "just upload the dataset" — can turn into a 2-month odyssey through Google Drive, Cloud Storage, Kaggle limits, and existential doubt. 😅

What I still need: If you've successfully mirrored a large HuggingFace dataset to Kaggle, or if you know a reliable way to move 67GB of images without losing your mind — please drop a comment or DM. I'm all ears.

Why I'm still trying: Because better deepfake detection matters. And if making datasets more accessible in the places where researchers actually work (like Kaggle) helps even one person prototype faster, test smarter, or sleep while their notebook runs — then maybe this whole mess was worth it. 🙃

I'll update this post if I ever get WildDeepfake or Polyglotfake fully mirrored on Kaggle. Until then: keep experimenting, keep sharing.

Feel free to connect with me. :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Follow me on Dev...

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Happy coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀

Building a Robust Classifier with Stacked Generalization

Debajyati Dey — Tue, 10 Feb 2026 17:44:43 +0000

I am thinking to start writing an ML series. The series would contain various ML approaches walkthrough and deep learning concepts. I will also add any extra article not planned to do if anyone requests such.

In this article, I am going to explain and demonstrate a specific kind of ensemble learning called Stacking or Stacked Generalization.

Firstly, if you don't know what ensemble learning stands for, I am giving you a short, simple definition to understand.

Look, generally in basic machine learning tasks we use 1 model to be trained on training and validation datasets and then use the model on the testing dataset to measure its accuracy.

But, in a real world scenario, we all know that a model's accuracy can vary, and it won't/can't give correct predictions on each and every data.

In machine learning, we are always up to improving the accuracy of our final result. Right?

That is why over the years, ML Engineers and researchers have proposed innovative solutions/techniques which may not always directly improve the accuracy of the model itself but improve the accuracy of the final result. Such one kind of method is called Ensemble Learning.

What Did I Mean? What Does Ensemble Learning Do to Improve Accuracy of the Final Result?

Ensemble Learning is a machine learning approach where we don't use a single model but use multiple individual models to create a stronger and more accurate model.

If we use only one model, the output could be biased and could be less accurate and precise. So?
So we can use multiple models and combine their predictions to form a more reliable prediction.

This is the core idea.

Now let's discuss the 3 different ensemble methods that exist. This will give you a clearer & better idea of what we are doing/going to do in this article.

The 3 Kinds

There are 3 different kinds of ensembles. One of them is already known to you from the title of the article which is a stacking ensemble. We will go through that at the end. Let's first check out the other 2 first.

Bagging

A bagging ensemble is kind of an ensemble approach where multiple homogeneous (same type) models (often referred to as estimators. Also called base models) are arranged parallelly and they receive the same data as input. Now, all of them can get the same set of the data as input or may get different subsets of the same data depending on the implementation.

In case of a classification task, the final prediction is calculated by taking the majority vote of the all output predictions, and in case of regression tasks we simply just take the average of all the predicted values.

The diagram above shows a schematic illustration of a bagging ensemble.

Example: Random forest is a bagging ensemble of decision trees.

Boosting

Below I have shown an illustration of the Boosting ensemble architecture.

In a boosting ensemble, multiple homogeneous models are arranged sequentially and here each subsequent model (estimator) improves the predictions (output) of the previous by learning from the output and errors. The first model gets the original dataset as input and the next ones get the weighted version (data along with output of the previous one).

The final prediction is calculated by aggregating the individual models’ outputs and so basically the weighted sum or mean of the individual models’ predictions.

Example: Gradient Boosted Decision Trees, CatBoost, etc.

Stacking

A Stacking ensemble is a completely different kind of ensemble.
In a stacking ensemble, we combine multiple heterogeneous (different kind) models (weak learners also called base models) parallelly, and from their learnings a strong learner (also called meta learner, because it learns from the learnings of other learners) chosen as the final classifier, makes and learns to make the final prediction.

It creates a completely new model.

I hope the diagram of a stacking ensemble, shown above (a very basic and simple representation), was helpful in making the overall idea clear and lucid.

This layered approach allows the meta-model to learn the best way to weigh and combine the individual strengths and weaknesses of the base models. This leads to a final model that outperforms any single base model.

Great! As now, you have the basic idea of ensembles, and most importantly the stacking ensemble, let's go to the part of the article where we create the stacking classifier.

Start Programming

We will use the scikit-learn python library to build the stacking ensemble.

Okay, time to set up virtual environment (you can use a Colab Notebook if you prefer, to skip the venv part) & install dependencies -

I am using uv to setup the environment and manage dependencies.

uv init stacking-ensemble
cd stacking-ensemble
uv add scikit-learn catboost xgboost lightgbm matplotlib seaborn
source ./.venv/bin/activate

Now we are ready to code.

First things first. The initial necessary imports.

import numpy as np
from sklearn.datasets import load_breast_cancer
from sklearn.model_selection import train_test_split
from sklearn.neural_network import MLPClassifier
from sklearn.ensemble import StackingClassifier
from sklearn.metrics import accuracy_score, log_loss, confusion_matrix, classification_report

from xgboost import XGBClassifier
from catboost import CatBoostClassifier
from lightgbm import LGBMClassifier

Preparee the base models and the meta model -

# Level 0 (Base Layers/Models)
# These models are trained on the original feature set
base_models = [
    ('xgb', XGBClassifier(n_estimators=100, eval_metric='logloss', random_state=42, n_jobs=-1)),
    ('cat', CatBoostClassifier(iterations=100, verbose=0, random_state=42)),
    ('lgbm', LGBMClassifier(n_estimators=100, random_state=42, n_jobs=-1, verbose=-1))
]

# Level 1 (Meta-Layer/Final Classifier)
# This model takes the predictions/probabilities of the base models as its new input features.
meta_model = MLPClassifier(hidden_layer_sizes=512,activation="logistic",learning_rate="adaptive")

The Level 0 models are the foundation of the stacked ensemble.

We will use the StackingClassifier API from scikit-learn to build the stacking ensemble classifier. The StackingClassifier constructor expects base models to be provided as a list of tuples. Where each tuple is contains the name of the model as string followed the instantiated sklearn compatible classifier model.

The most crucial step in a Machine Learning task is preparing the data. We are using the load_breast_cancer function from sklearn.datasets to load a standard binary classification dataset. This dataset contains features derived from digitized images of breast mass samples, with the target variable indicating whether the mass is malignant (cancerous) or benign (non-cancerous).

data = load_breast_cancer()
X, y = data.data, data.target

X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.3, random_state=42)

print(f"--- Loaded Real-World Dataset: {data.DESCR.splitlines()[0]} ---")
print(f"Dataset Size: {len(X)} samples, {X.shape[1]} features.")
print(f"Training on {len(X_train)} samples, testing on {len(X_test)} samples.")

Now write a function to encapsulate the stacked classifier building logic.

def build_stacked_mlp(base_estimators, final_estimator):
    """
    Builds the Stacked Generalization Model.
    The StackingClassifier handles the training process for this layered structure.
    """
    print("--- Defining Stacked Model (MLP of ML Models) ---")
    stacked_model = StackingClassifier(
        estimators=base_estimators,
        final_estimator=final_estimator,
        cv=5, # 5-fold cross-validation to generate level 1 training data (predictions)
        passthrough=True, # Pass original features to the meta-model as well
        n_jobs=-1
    )
    return stacked_model

The param n_jobs allows the model to use all available CPU cores.

Now you might be thinking, out of so many models existing in the world why did I choose these 3 models to be using as base models and why the MLPClassifier as final classifier. Why???

The base models used here are -

XGBoost (xgb): Known for its optimized performance, flexibility, and regularization techniques (L1 and L2) which help prevent overfitting. It builds trees sequentially, with each new tree correcting errors made by previous ones. Uses Hessian curvature and Taylor Expansion (2nd order derivative) loss function to minimize loss. Also referred to as the "King of Machine Learning Algorithms".
CatBoost (cat): Specialized in handling categorical features directly without extensive preprocessing (though not explicitly used for this in this numerical dataset, its internal mechanisms differ). It uses symmetric trees and ordered boosting, which helps reduce prediction shift and yields robust models.
LightGBM (lgbm): Designed for efficiency and speed, especially on large datasets. It uses a leaf-wise (rather than level-wise) tree growth algorithm, which can lead to faster training and higher accuracy, but also a higher risk of overfitting if not properly tuned.

These three models are all powerful gradient boosting algorithms, which are known for their high accuracy and robust performance across a wide range of tabular datasets.

Because of their differing internal mechanics, these models are likely to make different types of errors and capture different patterns in the data. This diversity is crucial for a stacked ensemble, as the meta-learner can then learn from these varied perspectives to make a more informed final decision.

Finally I want to add that the reason I chose MLPClassifier as the meta learner is also thoughtful.

The predictions (or probabilities) from the base models form the new feature set for the meta-model. An MLPClassifier can learn non-linear ways to combine these outputs. Simpler meta-learners like Logistic Regression can only learn linear relationships. But an MLP (Multi layer perceptron) can identify more complex interactions and dependencies between the base model predictions.

The activation="logistic" and learning_rate="adaptive" parameters further enhance its ability to adapt and find suitable weights for combining the base models' insights. The logistic activation function is used for binary classification outputs.

Now create the stacking classifier by calling the function we defined.

stacked_mlp = build_stacked_mlp(base_models, meta_model)

You could do this by directly writing the implementation without creating a function, but I honestly prefer grouping consecutive instructions into reusable functions because that resonates with me more.

Define a function for calculating metrics -

def calculate_metrics(y_true, y_pred, y_proba):
    """Calculates both accuracy and log loss."""
    acc = accuracy_score(y_true, y_pred)
    # log_loss expects probabilities for each class (i.e., shape (n_samples, n_classes))
    # We clip probabilities to prevent log_loss from failing due to p=0 or p=1
    y_proba = np.clip(y_proba, 1e-15, 1 - 1e-15)
    loss = log_loss(y_true, y_proba)
    return acc, loss

First lets evaluate the individual base models to get a detailed overview so that we can make comparisons with the final model later.

for name, model in base_models:
    model.fit(X_train, y_train)

    y_train_pred = model.predict(X_train)
    y_train_proba = model.predict_proba(X_train)
    train_acc, train_loss = calculate_metrics(y_train, y_train_pred, y_train_proba)

    y_test_pred = model.predict(X_test)
    y_test_proba = model.predict_proba(X_test)
    test_acc, test_loss = calculate_metrics(y_test, y_test_pred, y_test_proba)

    print(f"\n[LAYER 0 MODEL: {name.upper()}]")
    print(f"  - Training: Accuracy={train_acc:.4f}, Log Loss={train_loss:.4f}")
    print(f"  - Test:     Accuracy={test_acc:.4f}, Log Loss={test_loss:.4f}")

On my end it appeared like this -

--- Training Individual Base Layers (Level 0) and Evaluating Metrics ---

[LAYER 0 MODEL: XGB]
  - Training: Accuracy=1.0000, Log Loss=0.0060
  - Test:     Accuracy=0.9649, Log Loss=0.0806

[LAYER 0 MODEL: CAT]
  - Training: Accuracy=1.0000, Log Loss=0.0140
  - Test:     Accuracy=0.9708, Log Loss=0.0701

[LAYER 0 MODEL: LGBM]
  - Training: Accuracy=1.0000, Log Loss=0.0005
  - Test:     Accuracy=0.9474, Log Loss=0.1195

Now train the stacked_mlp with the fit method.

stacked_mlp.fit(X_train, y_train)

Training done. So the only thing left is testing our stacking ensemble to see if it performs better overall than the individual models or not.

y_pred_stacked = stacked_mlp.predict(X_test)
y_proba_stacked = stacked_mlp.predict_proba(X_test)

final_acc, final_loss = calculate_metrics(y_test, y_pred_stacked, y_proba_stacked)

print("\n--- Final Stacked Model (Level 1 MLP Classifier) Test Metrics ---")
print(f"  - Accuracy: {final_acc:.4f}")
print(f"  - Log Loss: {final_loss:.4f}")

And see, here is the result. Our approach worked!

--- Final Stacked Model (Level 1 MLP Classifier) Test Metrics ---
  - Accuracy: 0.9766
  - Log Loss: 0.0529

The stacked model actually achieves higher accuracy than the individual models. And the logarithmic loss value of stacked_mlp is also much lower than the ones of the individual models.

But we are not done yet, let's analyse more deeply by visualizing the results in a more detailed way.

Visualizing the Results

Let's plot a confusion matrix -

import matplotlib.pyplot as plt
import seaborn as sns

cm = confusion_matrix(y_test, y_pred_stacked)
plt.figure(figsize=(8, 6))
sns.heatmap(cm, annot=True, fmt='d', cmap='viridis')
plt.title(f'Confusion Matrix')
plt.ylabel('True Label')
plt.xlabel('Predicted Label')
plt.show()

Good. Now lets plot the classification report -

classifi_report = classification_report(y_test, y_pred_stacked, target_names=target_names, output_dict=True)

import pandas as pd

cf = pd.DataFrame(classifi_report).transpose()
cf.to_csv('classification_report.csv')

cf = cf.drop(labels=['accuracy'],errors='ignore')
cf_plot = cf[['precision', 'recall', 'f1-score']]

plt.figure(figsize=(8, 6))
sns.heatmap(cf_plot, annot=True, fmt='.2f', cmap='viridis',linewidths=.5)
plt.xlabel('Metrics')
plt.title('Classification Report')
plt.show()

Conclusion

I hope you learnt something new from this article or at least got a hands on overview on how to build ML stacking ensembles and use them utilizing the straight-forward and easy StackingClassifier API of the scikit-learn module.

In a future article we will go through how to build deep learning stacking ensembles using keras functional API.

Now, if you found this article helpful, if this blog added some value to your time and energy, please show some love by giving the article some likes and share it with your dev friends.

Feel free to connect with me. :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Follow me on Dev to motivate me so that I can bring more such tutorials like this on here!

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Happy coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀

Authenticate Your React Site With Appwrite

Debajyati Dey — Wed, 28 Jan 2026 13:30:00 +0000

It can feel overwhelming to add authentication to your React app, especially if you are a beginner.

Because, you know, in most cases you would absolutely need a backend and server that will have a database, to implement secure authentication for a website. Without these components, any authentication system you create is fundamentally insecure and easily bypassed.

Now, if you are new to building websites and have mostly built client side apps with React.js, it is natural for you to think why it is like that. So let me clarify these things for you.

WHY AUTHENTICATION NEEDS A BACKEND & DATABASE

If you need to verify a user's identity, you would need to go through a process that is called Authentication.

This involves two key steps:

Storing user credentials: You need a secure place to store information like usernames and hashed passwords.
Verifying credentials: When a user tries to log in, you need to check the provided credentials against the stored ones.

Now you would be like, "Okay, okay I know all these but still why would I need a separate server/backend for this stuff? Huh?"

WHY WOULD A BACKEND & DATABASE BE VITAL FOR SECURE AUTHENTICATION

Client-side (front-end) code, which runs in the user's browser, is completely exposed. Anyone with basic browser developer tools can see, modify, or disable the code. If you were to store passwords or authentication logic in the front end, it would be trivial for a malicious user to:

Access all user credentials: Storing passwords (even if hashed) in the front end means they're all publicly available, making your site a massive security risk.
Bypass the login process: An attacker could simply modify the front-end code to skip the authentication check and access protected pages.

A server-side backend is a trusted environment where your code and data are hidden from the user. It's the only place you can securely store sensitive information and perform logic that can't be tampered with.

Not only that, to remember a user's account information, you need to store it somewhere. A database is a dedicated system for storing, managing, and retrieving data. Without it, you'd have no way to create new user accounts or remember existing ones after the user closes their browser or navigates away.

Lastly, after a user logs in, the server needs to remember that they are authenticated for subsequent requests. This is called session management. The server creates a unique session token or a JSON Web Token (JWT) after a successful login and sends it to the client. The client then includes this token with every request for a protected resource. The backend server verifies the token to ensure the request is coming from a logged-in user.

A simple front-end-only approach can't maintain this secure, continuous state. Even if you stored a token in the browser's local storage, there would be no way to verify its authenticity without a server-side component.

I hope that makes enough sense now.

Now you are going to question me, "What is Appwrite? What is its relation with the article? Is it a database? Are you going to give a tutorial on setting up a separate backend server with database for adding & managing secure user Authentication in my client side React App?" (Based on the article title you've read, likely ...)

So yeah, at the end of the article, if you read thoroughly, all of your questions will be answered!

WHAT IS APPWRITE?

Appwrite is a powerful, open-source backend-as-a-service (BaaS) platform, designed to simplify and accelerate the development of web, mobile, and native applications. It provides a suite of pre-built, ready-to-use APIs and tools that handle common backend tasks, allowing developers to focus on the frontend and core logic of their applications.

That's a lot to take in. Now what does it mean? Why is Appwrite useful to you?

In other fullstack apps, like the ones you generally build with Django or Spring Boot, you would manage most of the auth system on the backend side.

Appwrite's main goal is to replace your backend logic with entirely client-side requests managed by Appwrite’s fully managed server system.

That means we can build entirely client side yet secure websites without needing to build our own web servers and database. Appwrite services manage all user data and authentication for us.

How, cool, is that!

Now let's see how to use Appwrite to set up user authentication, in our CSR React App.

GUIDING WITH CODE

Assuming you have an existing typescript react project -

First, Install necessary dependencies -

npm install appwrite --save
npm install --save-dev @types/node

Now you need to set up your Appwrite project:-

First, you need to create a project in the Appwrite Console.

Create a New Project: On the Appwrite Console dashboard, select "Create project," provide a name, and a unique project ID will be automatically generated.
Add a Web Platform: In your project's dashboard, click "Add a platform" and choose "Web App." Enter a name and set the hostname to localhost to allow requests from your local development server.

Create a lib/constants.ts file, to import from env vars -

export const appwriteEndpoint = import.meta.env.VITE_APPWRITE_ENDPOINT;
export const appwriteProjectID = import.meta.env.VITE_APPWRITE_PROJECT_ID;

Create a configuration file for appwrite. Name it - appwrite.ts -

import { Client, Account, TablesDB, ID } from "appwrite";
import { appwriteEndpoint, appwriteProjectID } from "@/lib/constants";

const client = new Client()
    .setEndpoint(appwriteEndpoint)
    .setProject(appwriteProjectID);

const account = new Account(client);
const database = new TablesDB(client);

export { client, account, database, ID };

Find your project IDs in settings page of Appwrite console and create an .env.local file to store them with the exact names (VITE_APPWRITE_ENDPOINT, VITE_APPWRITE_PROJECT_ID) we specified them in the lib/constants.ts file.

Now, backup your existing App.tsx file, by renaming it into MainApp.tsx and rename the component defined inside into MainApp.

Now create a new App.tsx file, and paste the following code into the file -

import React, { useState, useEffect } from 'react';
import { account } from './lib/appwrite';
import { Models, ID } from 'appwrite';
import MainApp from './MainApp';

const App: React.FC = () => {
  const [loggedInUser, setLoggedInUser] = useState<Models.User<Models.Preferences> | null>(null);
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [name, setName] = useState<string>('');

  useEffect(() => {
    const checkUserSession = async () => {
      try {
        const user = await account.get();
        setLoggedInUser(user);
      } catch {
        setLoggedInUser(null);
      }
    };

    checkUserSession();
  }, []);

  const login = async () => {
    try {
      await account.createEmailPasswordSession(email, password);
      const user = await account.get();
      setLoggedInUser(user);
      alert('Logged in successfully!');
    } catch (error: any) {
      alert(`Login failed: ${error.message}`);
    }
  };

  const register = async () => {
    try {
      await account.create(ID.unique(), email, password, name);
      await login();
      alert('Registered and logged in successfully!');
    } catch (error: any) {
      alert(`Registration failed: ${error.message}`);
    }
  };

  const logout = async () => {
    try {
      await account.deleteSession('current');
      setLoggedInUser(null);
      alert('Logged out successfully!');
    } catch (error: any) {
      alert(`Logout failed: ${error.message}`);
    }
  };
  if (loggedInUser) {
    console.log(loggedInUser.name, loggedInUser.email);
  }

  return (
    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
      <h2>Appwrite React Authentication</h2>
      {loggedInUser ? (
        <>
          <MainApp />
        </>
      ) : (
        <p>Not logged in</p>
      )}

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "10px",
          maxWidth: "300px",
        }}
      >
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          style={{ padding: "8px" }}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          style={{ padding: "8px" }}
        />
        <input
          type="text"
          placeholder="Name (optional)"
          value={name}
          onChange={(e) => setName(e.target.value)}
          style={{ padding: "8px" }}
        />
      </div>

      <div style={{ marginTop: "20px", display: "flex", gap: "10px" }}>
        <button onClick={login} style={{ padding: "10px", cursor: "pointer" }}>
          Login
        </button>
        <button
          onClick={register}
          style={{ padding: "10px", cursor: "pointer" }}
        >
          Register
        </button>
        <button onClick={logout} style={{ padding: "10px", cursor: "pointer" }}>
          Logout
        </button>
      </div>
    </div>
  );
};

export default App;

The useEffect hook ensures that the user's session is checked when the app loads. It calls account.get() from the Appwrite SDK. If the call is successful, it means a user is already logged in, and their data is stored in the loggedInUser state. If it fails (due to no active session), the state is set to null. This prevents the user from having to log in every time they refresh the page.

The component contains three main asynchronous functions that interact with the Appwrite backend:

login(): This function is called when the login button is clicked. It uses account.createEmailPasswordSession() to authenticate the user with their email and password. If successful, it then calls account.get() to retrieve the user's details and updates the loggedInUser state.
register(): Called when the register button is clicked. It first uses account.create() to create a new user account in Appwrite. After a successful registration, it automatically calls the login() function to create a new session for the newly created user, providing a seamless experience.
logout(): This function uses account.deleteSession('current') to terminate the current user's session. It then sets the loggedInUser state to null to update the UI and reflect that the user has been logged out.

Finally, run your app in development mode to see the site with authentication in action.

npm run dev -- --open

This command starts your local development server and automatically opens the app in your browser at http://localhost:5173. You can now register a new user, log in, and log out using the buttons on the page.

Now for more security -

You can always enable features like -

Password dictionary: Blocks common or weak passwords.
Password Recovery: Submitting a request to the confirmation endpoint. The verification link sent to the user's email address is valid for 1 hour.
Password history: Prevents reuse of old passwords.
Disallow personal data: Restricts use of personal information in passwords.

Purpose

Protects user data.
Encourages stronger password habits.
Contributes to a safer internet.

SECURITY BEST PRACTICES WITH APPWRITE

Environment Variables Always use environment variables (like .env.local) to store sensitive information, just like your Appwrite endpoint and project ID. This prevents hard-coding secrets into your source code, which could accidentally be exposed in version control.
Password Policies Appwrite allows you to enforce strong password policies. Enable these in your Appwrite console under Auth > Settings:
Minimum password length (e.g., 8+ characters)
Require a mix of uppercase, lowercase, numbers, and symbols
Block common passwords and personal data.
Email Verification Enable email verification to ensure users provide valid email addresses. This adds an extra layer of security and reduces fake accounts. How to enable:
In the Appwrite console, go to Auth > Settings > Email Verification.
Toggle the switch to require email verification for new users.

Troubleshooting Common Issues

Even with Appwrite’s almost perfect setup, a few hiccups can occur during development. Here’s how to tackle the most common ones:
CORS Errors

Symptom: You see errors like CORS policy: No 'Access-Control-Allow-Origin' header.
Fix:
- Go to your Appwrite Console → Project → Platform Settings.
- Ensure your development URL (e.g., http://localhost:5173) is correctly listed under allowed origins.
- For production, add your live domain (e.g., https://yourdomain.com) as a platform.

Invalid Project ID or Endpoint

Symptom: SDK calls fail silently or throw “Invalid project” errors.
Fix:
- Double-check your .env.local file for correct values.
- Ensure VITE_APPWRITE_ENDPOINT and VITE_APPWRITE_PROJECT_ID match the values in your Appwrite Console.

Session Not Persisting

Symptom: User gets logged out on page refresh.
Fix:
- Make sure account.get() is called inside a useEffect on app load.
- Avoid clearing cookies or local storage unless explicitly intended.

SDK Version Conflicts

Symptom: Type errors or missing methods in Appwrite SDK.
Fix:
- Run npm ls appwrite to check the installed version.
- Update using npm install appwrite@latest to ensure compatibility with TablesDB and other new features.

DEPLOYING YOUR APP

When deploying your React app:

Ensure your Appwrite project is configured for your production domain.
Update environment variables for the production endpoint and project ID.
Use HTTPS to encrypt all traffic.
If suitable, add row level security to your Database, to get more security on user data also.

WHY APPWRITE IS A GAME-CHANGER

Appwrite eliminates the need to build and maintain a custom backend for authentication. It’s:

Open-source: Transparent and community-driven.
Scalable: Handles millions of users out of the box.
Secure: Built-in protections against common vulnerabilities.

FINAL THOUGHTS

Adding authentication to your React app doesn’t have to be daunting. With Appwrite, you can focus on building a great user experience while leaving the heavy lifting of security and infrastructure to a trusted platform.

It was just a brief overview.

You must explore Appwrite’s documentation for more advanced features like roles and teams; and maybe the Appwrite Tables DB and Appwrite sites hosting if you are interested.

Thank you for reading this article so far. Hope this article was helpful for you. Have a nice day ahead, and most importantly, happy coding!

Stop Deleting Virtual Environments

Debajyati Dey — Sat, 24 Jan 2026 06:00:00 +0000

If you are a python dev, you sure have been in quite a hassle in deleting virtual environments when your system python version got an upgrade. Like your project was using python 3.13 and now the system has got upgraded so, the current python version is 3.14.

But when you go to your venv and activate it, you see you can't access those 3rd party libraries anymore you installed as dependencies. Because your system python version got upgraded you can't use the virtual environment that was using the older python version. Now if you had a requirements.txt file prepared, you can delete the venv folder and create a new fresh venv directory for the current python version. But still installing numerous packages or a relatively small number of dependencies but very heavy (like tensorflow[and-cuda],pytorch,etc.), can take a huge amount of time (also depending on the internet speeds).

And if you forgot to keep a requirements.txt file, oh boy, now even if you type the command(pip freeze) it is not gonna work because the python version the old pip depends on is not there anymore.

So what should you do now?
You can either check out the open source python tool called pyEnv. This lets you manage multiple versions of python binary in your system. This is the go-to choice of many python software developers. So I think you should at least know about it even if you don't find it your best option considering your workflow.

More resources online for learning pyEnv:

pyenv · GitHub

pyenv. pyenv has 15 repositories available. Follow their code on GitHub.

github.com

But honestly, although pyEnv is good (like really good), but I think pip itself needs a boost or glow up. That package manager is slow and when you install a large enough package, you feel its toll. It takes one eternity to install them.

Soooo? I guess you got me. I am selling you uv. UV has a ton of different commands, and it is a complete project manager, not just a package manager. Hell, even the speeds are amazing!

astral-sh / uv

An extremely fast Python package and project manager, written in Rust.

uv

An extremely fast Python package and project manager, written in Rust.

Installing Trio's dependencies with a warm cache.

Highlights

A single tool to replace pip, pip-tools, pipx, poetry, pyenv, twine, virtualenv, and more.
10-100x faster than pip.
Provides comprehensive project management, with a universal lockfile.
Runs scripts, with support for inline dependency metadata.
Installs and manages Python versions.
Runs and installs tools published as Python packages.
Includes a pip-compatible interface for a performance boost with a familiar CLI.
Supports Cargo-style workspaces for scalable projects.
Disk-space efficient, with a global cache for dependency deduplication.
Installable without Rust or Python via curl or pip.
Supports macOS, Linux, and Windows.

uv is backed by Astral, the creators of Ruff and ty.

Installation

Install uv with our standalone installers:

# On macOS and Linux.
curl -LsSf https://astral.sh/uv/install.sh

…

View on GitHub

Check it out! Once you try uv, you never look back again.

HOW TO INSTALL UV IN YOUR SYSTEM

If you use void linux (like me!!!), installing uv is a breeze. Install it easily with xbps -

sudo xbps-install -S uv

If you use any other linux OS(or maybe macOS), I recommend you follow the instructions on the website. That is, using curl to install it -

curl -LsSf https://astral.sh/uv/install.sh | sh

or if you are using windows -

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

💡 NOTE

You can also install it using homebrew, wget or winget, if you prefer.

HOW TO USE UV TO MANAGE MULTIPLE PYTHON VERSIONS

You can install a different python version than the one currently installed on your system with uv. To do so - run

uv python install <version>

For example, you can install python 3.10 by running -

uv python install 3.10

This command will install that particluar python version in your ~/.local/share directory.
How cool & easy is that!
You can pin a different python version for default cases by running the uv python pin command. For example I prefer uv to pick python 3.12 by default, so I would run -

uv python pin 3.12

See? Easy!

One more thing, if you are starting a new python project, and want to use the uv managed python binaries in there rather than the system's deafult python version, initialize your project with -

uv --managed python init

Whenever you need to search something, instead of going to google search or chatgpt, first you should search in your system with -

uv --help

It prints like this -

An extremely fast Python package manager.

Usage: uv [OPTIONS] <COMMAND>

Commands:
  auth     Manage authentication
  run      Run a command or script
  init     Create a new project
  add      Add dependencies to the project
  remove   Remove dependencies from the project
  version  Read or update the project's version
  sync     Update the project's environment
  lock     Update the project's lockfile
  export   Export the project's lockfile to an alternate format
  tree     Display the project's dependency tree
  format   Format Python code in the project
  tool     Run and install commands provided by Python packages
  python   Manage Python versions and installations
  pip      Manage Python packages with a pip-compatible interface
  venv     Create a virtual environment
  build    Build Python packages into source distributions and wheels
  publish  Upload distributions to an index
  cache    Manage uv's cache
  self     Manage the uv executable
  help     Display documentation for a command

Cache options:
  -n, --no-cache               Avoid reading from or writing to the cache, instead using a temporary directory for the duration of the operation [env: UV_NO_CACHE=]
      --cache-dir <CACHE_DIR>  Path to the cache directory [env: UV_CACHE_DIR=]

Python options:
      --managed-python       Require use of uv-managed Python versions [env: UV_MANAGED_PYTHON=]
      --no-managed-python    Disable use of uv-managed Python versions [env: UV_NO_MANAGED_PYTHON=]
      --no-python-downloads  Disable automatic downloads of Python. [env: "UV_PYTHON_DOWNLOADS=never"]

Global options:
  -q, --quiet...                                   Use quiet output
  -v, --verbose...                                 Use verbose output
      --color <COLOR_CHOICE>                       Control the use of color in output [possible values: auto, always, never]
      --native-tls                                 Whether to load TLS certificates from the platform's native certificate store [env: UV_NATIVE_TLS=]
      --offline                                    Disable network access [env: UV_OFFLINE=]
      --allow-insecure-host <ALLOW_INSECURE_HOST>  Allow insecure connections to a host [env: UV_INSECURE_HOST=]
      --no-progress                                Hide all progress outputs [env: UV_NO_PROGRESS=]
      --directory <DIRECTORY>                      Change to the given directory prior to running the command [env: UV_WORKING_DIR=]
      --project <PROJECT>                          Discover a project in the given directory [env: UV_PROJECT=]
      --config-file <CONFIG_FILE>                  The path to a `uv.toml` file to use for configuration [env: UV_CONFIG_FILE=]
      --no-config                                  Avoid discovering configuration files (`pyproject.toml`, `uv.toml`) [env: UV_NO_CONFIG=]
  -h, --help                                       Display the concise help for this command
  -V, --version                                    Display the uv version

Use `uv help` for more details.

When you need to search about a particular command. Search with -

uv help <subcommand>

For example if you want to know about how to install managed python versions - you can run - uv help python uninstall, to get to know about it.

This article ends here. I hope you found the information helpful.
I document my learnings and ideas in my blog to save and store them and write with little humor (if possible) to share them with you.

Concluding

I hope you learnt something new and liked reading this piece of text.

Now, if you found this article helpful, if this blog added some value to your time and energy, please show some love by giving the article some likes and share it with your dev friends.

Feel free to connect with me. :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Follow me on Dev to motivate me so that I can bring more such tutorials like this on here!

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Happy coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀

Get Started With Image Classification in Kaggle using Python

Debajyati Dey — Tue, 20 Jan 2026 04:30:00 +0000

WHAT KAGGLE IS

Kaggle is a fantastic and great platform for enthusiastic Data Science Engineers to cultivate machine learning with a variety of quality datasets.

If you are not already familiar with Kaggle, Kaggle is a Google-owned platform and online community for data scientists and machine learning engineers to compete in data science challenges, find and share datasets, and learn from others in the field. It provides tools like code notebooks, access to datasets, tutorials, and a community to help users develop their skills and build their portfolios by working on real-world problems.

Kaggle hosts many ML competitions that are organized by prestigious organizations with crazy huge prize pools.

So, you can visit kaggle.com anytime, check the platform out and use their notebooks with powerful GPU and easy access to huge datasets.

GETTING STARTED

To get started with image classification on Kaggle, let's walk through a practical example using the Xception model, which is a deep convolutional neural network architecture pretrained on the ImageNet dataset. The Xception model replaces traditional Inception modules with depth-wise separable convolutions, making it highly efficient and effective for image recognition tasks.

This model has been pretrained on over a million images from the ImageNet dataset, enabling it to recognize a vast variety of spatial visual objects.

GET YOUR HANDS DIRTY

Let's begin coding. Because that is the way (practical) you truly understand the process.

Look below to see how you can implement image classification using the powerful 'Xception' model within a Kaggle notebook:

Set Up Your Environment: Open a new Kaggle notebook or load an existing one. Ensure your notebook is configured to use a GPU accelerator for faster training.

Import required libraries:

import tensorflow as tf
from tf.keras.applications import Xception
from tf.keras.preprocessing import image
from tf.keras.applications.xception import preprocess_input, decode_predictions
import numpy as np

Load the Pretrained Xception Model: Call the Keras Xception constructor to download the Xception model with its ImageNet weights.
```
model = Xception(weights='imagenet')
```

Prepare your image: Choose an image file (like any sample_image.jpg) and prepare it for input to the model. You need to resize the image to the required input size (299x299 pixels for Xception) and apply some preprocessing steps.

img_path = r'/kaggle/input/crab-image.jpg' # Replace with your image path
I uploaded an image of a Dungeness crab in my kaggle notebook through the input section on the sidebar, U can use any image you want
img = image.load_img(img_path, target_size=(299, 299))
x = image.img_to_array(img)
x = np.expand_dims(x, axis=0)
x = preprocess_input(x)

Make Predictions: Pass the preprocessed image through the model to get predictions.
```
predictions = model.predict(x)
```
Decode Predictions: Use the decode_predictions function to convert the model's output probabilities into human-readable labels and confidence scores.
```
decoded_predictions = decode_predictions(predictions, top=3)[0]  # Top 3 predictions
print('Predicted:', decoded_predictions)
```

This is the image that I used for prediction using Xception -
Blog image.

And woo-hoo, look at that,- the correct answer is found in the top 3 predictions -

This simple workflow demonstrates how powerful transfer learning can be.

By leveraging the knowledge the Xception model gained from classifying millions of images on ImageNet, you can quickly classify new images with high accuracy, even without fine-tuning the entire model.

This approach is particularly useful when you have limited labeled data for your specific task.

You can always fine-tune the model on your dataset after anytime. You can find examples of this process using the Xception model on Kaggle, such as in the Cassava Leaf Disease Classification competition.

Concluding

The fusion of Kaggle’s robust platform and the power of transfer learning with models like Xception opens up endless possibilities for both aspiring and experienced data scientists. Kaggle not only provides the tools, datasets, and computational resources you need, but also fosters a collaborative community where learning and innovation thrive.

By leveraging pretrained models like Xception, you can achieve remarkable results in image classification—even with minimal labeled data. This approach democratizes access to advanced machine learning, allowing you to focus on solving real-world problems rather than building models from scratch.

So, dive into Kaggle, experiment with its notebooks, and explore the vast array of competitions and datasets. Whether you’re fine-tuning a model for a specific task or simply exploring the capabilities of transfer learning, Kaggle is your gateway to turning ideas into impactful solutions. Start your journey today, and let your curiosity drive you toward mastering the art and science of machine learning and computer vision!

Send Transactional Emails in Node.js with Convex and AutoSend API

Debajyati Dey — Tue, 13 Jan 2026 04:09:35 +0000

Every business needs to send transactional emails at some point.
Transactional emails are the very foundation of an online communication framework that works towards users from a business.

What are transactional emails?
Well, in simple terms, Transactional emails are just some automated system generated emails which are sent in response to user actions, such as account verification, password resets, order confirmations, and other critical online communications.

If compared to marketing emails, transactional emails have higher discoverability requirements and often contain urgently needed information.

AutoSend is a great email platform I have recently discovered which is so easy to setup for sending transactional emails and I found it really amazing for a relatively new email platform to have so nice of a developer experience including polished docs, helpful guides, and an friendly community of encouraging developers.

AutoSend: Email for Developers and Marketers

AutoSend is a lightweight SendGrid alternative for transactional and marketing emails. Simple, modern, and built to scale.

autosend.com

I know you say it compares to resend and mailgun and you have complaints why it does not have a free tier. But you need to understand that it automates and abstracts away lot of tedius email domain configurations and provides you a easy headstart with a very intuitive web api. And, most importantly the hobby tier (lowest paid tier) starts from just $1/month, which is affordable for almost everybody with you being able to send 3000 emails/month (no max limit for daily emails).

In this guide, we will go through how to implement transactional email functionality in a Node.js application using Convex as the backend database and AutoSend API for email delivery. We'll use a complete email OTP (One-Time Password) authentication system as our practical example.

Key Tools and Technologies We'll Be Using

Node.js

Node.js will be the runtime environment for our server-side application. It will handle all HTTP requests and coordinate between different services.

Convex

Convex | The backend platform that keeps your app in sync

Convex is the backend platform that keeps your app in sync. Everything you need to build your full-stack project.

convex.dev

Convex is a really good BaaS(Backend-as-a-Service) platform. It provides:

Real-time database with auto-sync,
Serverless functions (queries, mutations, actions),
Built-in authentication,
Type-safe API generation, etc.

AutoSend API

What is AutoSend? - AutoSend Documentation

AutoSend is an email platform for developers and marketers to send transactional and marketing emails, and integrate with AI agents.

docs.autosend.com

AutoSend is an emerging dev freindly REST API based email service that offers:

High deliverability rates,
Dedicated IPs,
Both transactional and marketing email services,
Template support with dynamic data (handlebars syntax),
Delivery tracking and analytics,
Compliance with email regulations, etc.

Demo Project Setup

Prerequisites

Before we begin, ensure you have:

Node.js (v20 or higher, v22 LTS recommended),
A Convex account and project,
An active AutoSend billing account and an API key

Project Structure

otp-demo/
├── convex/
│   ├── _generated/
│   ├── otp.js
│   ├── schema.js
│   ├── sessions.js
│   └── users.js
├── public/
│   └── index.html
├── server.js
├── package.json
└── .env

Dependencies

Install the required packages:

npm install express cors body-parser dotenv convex node-fetch

Brief Overview

Before jumping to code you can refer to this full sequence diagram for a quick look on what the complete workflow will be like -

Database Schema Design

First, we need to define our database schema in convex/schema.js:

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  users: defineTable({
    email: v.string(),
    verified: v.boolean(),
    createdAt: v.number(),
  }).index("by_email", ["email"]),

  otpTokens: defineTable({
    email: v.string(),
    otp: v.string(),
    expiresAt: v.number(),
    attempts: v.number(),
    createdAt: v.number(),
  }).index("by_email", ["email"]),

  sessions: defineTable({
    userId: v.id("users"),
    token: v.string(),
    expiresAt: v.number(),
    createdAt: v.number(),
  }).index("by_token", ["token"]),
});

This schema supports:

users: Store user information and verification status.
otpTokens: Temporary OTP storage with expiration and attempt tracking.
sessions: Session management for authenticated users.

After writing the file, you must run npx convex dev for uploading the database schema into your convex development server.

Managing OTP Tokens Using Convex Functions

Convex functions are 3 types - queries, mutations and actions.
Queries and Mutations are both transactional while actions are not.
Queries are used to read data from convex database while mutations are used to write data to convex database. Queries are subscribable.

Actions are used for making third party requests like making a fetch API call. Such as http-actions can be used to make an openai api call in your web app, etc.

Create a convex/otp.js for all OTP-related operations:
ANything you perform in a convex backend is done by creating and using convex functions.

import { v } from "convex/values";
import { mutation, query } from "./_generated/server";

// Store OTP token
export const createOTP = mutation({
  args: {
    email: v.string(),
    otp: v.string(),
    expiresAt: v.number(),
  },
  handler: async (ctx, args) => {
    // Delete any existing OTP for this email
    const existing = await ctx.db
      .query("otpTokens")
      .withIndex("by_email", (q) => q.eq("email", args.email))
      .collect();

    for (const token of existing) {
      await ctx.db.delete(token._id);
    }

    // Create new OTP
    const otpId = await ctx.db.insert("otpTokens", {
      email: args.email,
      otp: args.otp,
      expiresAt: args.expiresAt,
      attempts: 0,
      createdAt: Date.now(),
    });

    // Return the stored OTP data including the actual expiresAt
    const storedOtp = await ctx.db.get(otpId);
    return {
      id: otpId,
      expiresAt: storedOtp.expiresAt,
    };
  },
});

// Verify OTP
export const verifyOTP = mutation({
  args: {
    email: v.string(),
    otp: v.string(),
  },
  handler: async (ctx, args) => {
    const token = await ctx.db
      .query("otpTokens")
      .withIndex("by_email", (q) => q.eq("email", args.email))
      .first();

    if (!token) {
      return { success: false, error: "No OTP found" };
    }

    // Check if expired (with 30 second buffer for timing issues)
    const currentTime = Date.now();
    if (currentTime > token.expiresAt + 30000) { // 30 second grace period
      await ctx.db.delete(token._id);
      return { success: false, error: "OTP expired" };
    }

    // Check attempts
    if (token.attempts >= 5) {
      await ctx.db.delete(token._id);
      return { success: false, error: "Too many attempts" };
    }

    // Verify OTP
    if (token.otp !== args.otp) {
      await ctx.db.patch(token._id, { attempts: token.attempts + 1 });
      return { success: false, error: "Invalid OTP" };
    }

    // Success - delete token
    await ctx.db.delete(token._id);
    return { success: true };
  },
});

Create a convex/users.js file for user operations:

import { v } from "convex/values";
import { mutation, query } from "./_generated/server";

// Create or get user
export const createUser = mutation({
  args: { email: v.string() },
  handler: async (ctx, args) => {
    const existing = await ctx.db
      .query("users")
      .withIndex("by_email", (q) => q.eq("email", args.email))
      .first();

    if (existing) {
      return existing._id;
    }

    return await ctx.db.insert("users", {
      email: args.email,
      verified: false,
      createdAt: Date.now(),
    });
  },
});

// Mark user as verified
export const verifyUser = mutation({
  args: { email: v.string() },
  handler: async (ctx, args) => {
    const user = await ctx.db
      .query("users")
      .withIndex("by_email", (q) => q.eq("email", args.email))
      .first();

    if (!user) {
      throw new Error("User not found");
    }

    await ctx.db.patch(user._id, { verified: true });
    return user;
  },
});

// Get user by email
export const getUserByEmail = query({
  args: { email: v.string() },
  handler: async (ctx, args) => {
    return await ctx.db
      .query("users")
      .withIndex("by_email", (q) => q.eq("email", args.email))
      .first();
  },
});

Session Management

Create convex/sessions.js for managing user sessions:

import { v } from "convex/values";
import { mutation, query } from "./_generated/server";

function generateSessionToken() {
  return crypto.randomUUID();
}

export const createSession = mutation({
  args: { userId: v.id("users") },
  handler: async (ctx, args) => {
    // Delete any existing sessions for this user
    const existing = await ctx.db
      .query("sessions")
      .filter((q) => q.eq(q.field("userId"), args.userId))
      .collect();

    for (const session of existing) {
      await ctx.db.delete(session._id);
    }

    // Create new session (24 hours)
    const token = generateSessionToken();
    const expiresAt = Date.now() + 24 * 60 * 60 * 1000;

    const sessionId = await ctx.db.insert("sessions", {
      userId: args.userId,
      token,
      expiresAt,
      createdAt: Date.now(),
    });

    return { token, expiresAt };
  },
});

export const validateSession = query({
  args: { token: v.string() },
  handler: async (ctx, args) => {
    const session = await ctx.db
      .query("sessions")
      .withIndex("by_token", (q) => q.eq("token", args.token))
      .first();

    if (!session) {
      return null;
    }

    // Check if expired
    if (Date.now() > session.expiresAt) {
      // Clean up expired session
      await ctx.db.delete(session._id);
      return null;
    }

    const user = await ctx.db.get(session.userId);
    if (!user || !user.verified) {
      return null;
    }

    return {
      userId: user._id,
      email: user.email,
      verified: user.verified,
      createdAt: user.createdAt,
    };
  },
});

// Delete a session (logout)
export const deleteSession = mutation({
  args: { token: v.string() },
  handler: async (ctx, args) => {
    const session = await ctx.db
      .query("sessions")
      .withIndex("by_token", (q) => q.eq("token", args.token))
      .first();

    if (session) {
      await ctx.db.delete(session._id);
    }
  },
});

Now run npx convex dev again to upload the convex functions to your convex project cloud.

Email Service Implementation

AutoSend API Integration

Create the email sending functionality in server.js:
We are strictly enforcing IPv4 DNS order because the convex server does not work well with IPv6 because it faces synchronization issues due to IPv6 timeouts.

import { setDefaultResultOrder } from 'dns';
// Force IPv4 first to avoid IPv6 timeout issues
setDefaultResultOrder('ipv4first');

import express from "express";
import cors from "cors";
import bodyParser from "body-parser";
import dotenv from "dotenv";
import https from 'https';
import http from 'http';
import fetch from 'node-fetch';

// Load environment variables FIRST
dotenv.config();

// Send email via AutoSend API
async function sendOTPEmail(email, otp) {
  try {
    const response = await nodefetch("https://api.autosend.com/v1/mails/send", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.AUTOSEND_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        from: {
          email: process.env.AUTOSEND_FROM_EMAIL,
          name: process.env.AUTOSEND_FROM_NAME,
        },
        to: {
          email: email,
        },
        subject: "Your Verification Code",
        html: `
          <div style="font-family: Arial, sans-serif; padding: 20px;">
            <h2>Email Verification</h2>
            <p>Your verification code is:</p>
            <h1 style="color: #4F46E5; font-size: 32px; letter-spacing: 5px;">${otp}</h1>
            <p>This code will expire in 10 minutes.</p>
            <p style="color: #666; font-size: 12px;">If you didn't request this code, please ignore this email.</p>
          </div>
        `,
        text: `Your verification code is: ${otp}. This code will expire in 10 minutes.`,
      }),
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.message || "Failed to send email");
    }

    return await response.json();
  } catch (error) {
    console.error("Error sending email:", error);
    throw error;
  }
}

API Endpoints

Okay, time to Implement the OTP request endpoint. Paste the following code in the same server.js file:

// Generate 6-digit OTP
function generateOTP() {
  return Math.floor(100000 + Math.random() * 900000).toString();
}

// Request OTP
app.post("/api/request-otp", async (req, res) => {
  try {
    const { email } = req.body;

    if (!email || !email.includes("@")) {
      return res.status(400).json({ error: "Valid email is required" });
    }

    console.log("Requesting OTP for:", email);

    // Generate OTP
    const otp = generateOTP();
    const expiresAt = Date.now() + 10 * 60 * 1000; // 10 minutes

    console.log("Generated OTP:", otp);

    // Create or get user
    console.log("Creating user in Convex...");
    await convex.mutation(api.users.createUser, { email });
    console.log("User created/found");

    // Store OTP in Convex
    console.log("Storing OTP in Convex...");
    const otpResult = await convex.mutation(api.otp.createOTP, {
      email,
      otp,
      expiresAt,
    });
    console.log("OTP stored successfully");

    // Send email
    console.log("Sending email...");
    await sendOTPEmail(email, otp);
    console.log("Email sent successfully");

    res.json({
      success: true,
      message: "OTP sent successfully",
      expiresAt: otpResult.expiresAt, // Use the expiresAt from Convex for consistency
    });
  } catch (error) {
    console.error("Error requesting OTP:", error);
    res.status(500).json({
      error: "Failed to send OTP",
      details: error.message,
    });
  }
});

// Verify OTP
app.post("/api/verify-otp", async (req, res) => {
  try {
    const { email, otp } = req.body;

    if (!email || !otp) {
      return res.status(400).json({ error: "Email and OTP are required" });
    }

    console.log("Verifying OTP for:", email);

    // Verify OTP using Convex
    const result = await convex.mutation(api.otp.verifyOTP, {
      email,
      otp,
    });

    if (!result.success) {
      return res.status(400).json({
        success: false,
        error: result.error,
      });
    }

    // Mark user as verified
    const user = await convex.mutation(api.users.verifyUser, { email });

    // Create session
    const session = await convex.mutation(api.sessions.createSession, { userId: user._id });

    res.json({
      success: true,
      message: "Email verified successfully",
      sessionToken: session.token,
    });
  } catch (error) {
    console.error("Error verifying OTP:", error);
    res.status(500).json({
      error: "Failed to verify OTP",
      details: error.message,
    });
  }
});

Building the Frontend

The core logical part is in the backend. So I didn't bother building the frontend all by myself. Hehe. :)

I just prompted to claude and vibe coded a working frontend for the demo.

You can create something like that too, just prompt your cursor or any AI coding tool you use. Here is the responsive UI in my public/index.html (in case you would like to copy paste):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email OTP Authentication</title>
  <style>
    /* CSS styles for the authentication forms */
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      margin: 0;
      padding: 20px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container {
      background: white;
      border-radius: 12px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      padding: 40px;
      width: 100%;
      max-width: 400px;
    }

    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 30px;
      font-size: 24px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 5px;
      color: #555;
      font-weight: 500;
    }

    input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e1e5e9;
      border-radius: 8px;
      font-size: 16px;
      transition: border-color 0.3s ease;
      box-sizing: border-box;
    }

    input:focus {
      outline: none;
      border-color: #667eea;
    }

    button {
      width: 100%;
      padding: 12px 16px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    button:hover {
      transform: translateY(-2px);
    }

    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .message {
      padding: 12px 16px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-weight: 500;
    }

    .success {
      background: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    .error {
      background: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }

    .hidden {
      display: none;
    }

    .otp-input {
      text-align: center;
      font-size: 18px;
      letter-spacing: 8px;
    }

    .timer {
      text-align: center;
      margin: 20px 0;
      font-size: 14px;
      color: #666;
    }

    .resend-link {
      text-align: center;
      margin-top: 20px;
    }

    .resend-link a {
      color: #667eea;
      text-decoration: none;
      font-weight: 500;
    }

    .resend-link a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Email Form -->
    <div id="emailForm">
      <h1>🔐 Email Verification</h1>
      <p>Enter your email to receive a verification code</p>

      <div id="emailMessage" class="message hidden"></div>

      <form id="requestOtpForm">
        <div class="form-group">
          <label for="email">Email Address</label>
          <input
            type="email"
            id="email"
            placeholder="your@email.com"
            required
          >
        </div>
        <button type="submit" id="sendOtpBtn">Send Code</button>
      </form>
    </div>

    <!-- OTP Form -->
    <div id="otpForm" class="hidden">
      <h1>✉️ Verify Code</h1>
      <p>Enter the 6-digit code sent to <strong id="userEmail"></strong></p>

      <div id="otpMessage" class="message hidden"></div>

      <form id="verifyOtpForm">
        <div class="form-group">
          <label for="otp">Verification Code</label>
          <input
            type="text"
            id="otp"
            class="otp-input"
            placeholder="000000"
            maxlength="6"
            pattern="[0-9]{6}"
            required
          >
        </div>
        <button type="submit" id="verifyOtpBtn">Verify Code</button>
      </form>

      <div class="timer">
        Code expires in <span id="countdown">10:00</span>
      </div>

      <div class="resend-link hidden" id="resendLink">
        <a href="#" id="resendBtn">Resend Code</a>
      </div>
    </div>
  </div>

  <script>
    // JavaScript implementation for OTP authentication
    let countdownInterval;
    let userEmail = '';

    // Request OTP
    document.getElementById('requestOtpForm').addEventListener('submit', async (e) => {
      e.preventDefault();

      const email = document.getElementById('email').value;
      const btn = document.getElementById('sendOtpBtn');
      const message = document.getElementById('emailMessage');

      btn.disabled = true;
      btn.textContent = 'Sending...';

      try {
        const response = await fetch('/api/request-otp', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email }),
        });

        const data = await response.json();

        if (response.ok) {
          userEmail = email;
          showMessage(message, data.message, 'success');
          setTimeout(() => {
            showOtpForm();
            startCountdown(data.expiresAt);
          }, 1000);
        } else {
          showMessage(message, data.error || 'Failed to send code', 'error');
          btn.disabled = false;
          btn.textContent = 'Send Code';
        }
      } catch (error) {
        showMessage(message, 'Network error. Please try again.', 'error');
        btn.disabled = false;
        btn.textContent = 'Send Code';
      }
    });

    // Verify OTP
    document.getElementById('verifyOtpForm').addEventListener('submit', async (e) => {
      e.preventDefault();

      const otp = document.getElementById('otp').value;
      const btn = document.getElementById('verifyOtpBtn');
      const message = document.getElementById('otpMessage');

      btn.disabled = true;
      btn.textContent = 'Verifying...';

      try {
        const response = await fetch('/api/verify-otp', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email: userEmail, otp }),
        });

        const data = await response.json();

        if (response.ok && data.success) {
          clearInterval(countdownInterval);
          showMessage(message, 'Code verified successfully!', 'success');
          // Handle successful verification
        } else {
          showMessage(message, data.error || 'Invalid code', 'error');
          btn.disabled = false;
          btn.textContent = 'Verify Code';
        }
      } catch (error) {
        showMessage(message, 'Network error. Please try again.', 'error');
        btn.disabled = false;
        btn.textContent = 'Verify Code';
      }
    });

    // Resend OTP
    document.getElementById('resendLink').addEventListener('click', (e) => {
      e.preventDefault();
      // Resend logic here
    });

    // Helper functions
    function showMessage(element, text, type) {
      element.textContent = text;
      element.className = `message ${type}`;
      element.classList.remove('hidden');
    }

    function showOtpForm() {
      document.getElementById('emailForm').classList.add('hidden');
      document.getElementById('otpForm').classList.remove('hidden');
      document.getElementById('userEmail').textContent = userEmail;
    }

    function startCountdown(expiresAt) {
      const now = Date.now();
      let timeLeft = Math.floor((expiresAt - now) / 1000);

      if (timeLeft <= 0) {
        timeLeft = 0;
      }

      const countdownEl = document.getElementById('countdown');
      const resendLink = document.getElementById('resendLink');

      resendLink.classList.add('hidden');

      countdownInterval = setInterval(() => {
        timeLeft--;

        if (timeLeft <= 0) {
          clearInterval(countdownInterval);
          resendLink.classList.remove('hidden');
          countdownEl.textContent = 'expired';
          return;
        }

        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;
        countdownEl.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
      }, 1000);
    }
  </script>
</body>
</html>

express js will statically serve the html file.

Environment Configuration

.env File Setup

Create a .env file in your project root:

# Convex Configuration
# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=dev:convex-deployment # team: debajyati-dey, project: otp-demo
CONVEX_URL=https://your-deployment.convex.cloud

# AutoSend API Configuration
AUTOSEND_API_KEY=your_autosend_api_key_here
AUTOSEND_FROM_EMAIL=noreply@yourdomain.com
AUTOSEND_FROM_NAME=DEYOTP

# Server Configuration
PORT=3000

The Complete Workflow in Action

Our methodology works smooth and is very robust in implementation.
Our demo website looks like this before authentication -

After the email is sent successfully, the modal dialog will change and wait for user to enter the otp code sent to his email address to verify the user email and let him/her log in.

Now, user must enter the otp code (6-digit token) within 10 minutes, because after that the token will expire.

If everything works properly, the user will recieve the email in his/her email client (gmail or proton or thunderbird or outlook whatever he/she uses).

After successful verification the system will let the user authenticate into his account in the website and TADAA!!

Here is the profile page -

I know you might get the ick after seeing the emojis and the purple gradient in the webpage but yeah I told you before it is just a demo and didn't care about the the frontend will look like so I generated it with AI.

Best Practices

Email Content Best Practices

Clear Subject Lines: Use descriptive, action-oriented subject lines
Personalization: Include recipient's name when possible
Mobile Optimization: Ensure emails render well on mobile devices
Plain Text Fallback: Always include a plain text version.
Unsubscribe Links: Must include unsubscribe options for marketing emails.

Troubleshooting

Common Issues

Email Not Being Delivered

Symptoms: Emails are not reaching recipients.

Solutions:

Check AutoSend API key and credentials.
Verify sender email is authorized in AutoSend.
Check spam/junk folders.
Review AutoSend delivery logs.

OTP Verification Failing

Symptoms: Valid OTP codes are rejected.

Solutions:

Check server time synchronization between Express server and Convex.
Verify OTP storage and retrieval logic - ensure expiresAt is returned from Convex.
Check for race conditions in OTP creation/deletion.
Review attempt counting logic.
Timing Issues: This system includes a 30-second grace period for expiration checks to account for clock differences and network latency.
Countdown Accuracy: Client countdown uses the exact expiresAt timestamp stored in Convex for synchronization.

Debugging Tips

Enable Detailed Logging: Add comprehensive logging for email operations.
Monitor API Usage: Track API call volumes and error rates.
Database Inspection: Use Convex dashboard to inspect data and uptime.

Conclusion

I hope you learnt something new or at least found a new way to build your own secure auth system by leveraging different services that together do very well.

Now, if you found this article helpful, if this blog added some value to your time and energy, please show some love by giving the article some likes and share it with your dev friends.

Feel free to connect with me. :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Follow me on Dev to motivate me so that I can bring more such tutorials like this on here!

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Happy coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀

Further Read For Reference

Node.JS Security Best Practices
convex docs:

Convex Developer Hub

docs.convex.dev
AutoSend API Documentation:

API Reference - AutoSend Documentation

Send transactional emails programmatically using the AutoSend REST API. This guide covers details of all APIs, request/response formats, and best practices.

docs.autosend.com
Email Deliverability Guide:

How to Warm Up a New Email Domain: Step-by-Step Guide for High Deliverability

Step-by-step domain warming guide with week-by-week schedules for all volume levels. Build sender reputation, achieve high email deliverability, and avoid spam folder.

autosend.com
AutoSend Blogs:

The Email Blog | AutoSend

Featuring product updates, email best practices, and resources for developers and marketers.

autosend.com
Node.JS Best Practices in Design, Architecture:

Tao of Node - Design, Architecture & Best Practices | Alex Kondov

One of the main benefits of JavaScript is that it runs both in the browser and the server. As an engineer you need to master a single language and your skills w

alexkondov.com

A Simple Contact Form Setup With Django & AutoSend

Debajyati Dey — Mon, 01 Dec 2025 11:50:26 +0000

If you are a fellow web developer looking for a developer friendly SendGrid alternative, then you are at the right place.

In this article, we will go through how to set up a simple contact form with Django (our main fullstack framework), Celery (for asynchronous task scheduling), and the AutoSend email API (for sending emails).

💡	This tutorial is written in the purpose of making you familiar with how to use autosend in your django application. That is why the contact form setup will be very simple and no complex email validation logic or complicated rate limiting functionality will be incorporated.

Prerequisites: You must be well familiar with Django and python. Existing knowledge of celery and redis will be helpful but not required.

SendGrid is one of the oldest email delivery platforms as I know (if I am not wrong), offering powerful transactional and marketing email services since 2009.

But the tool has not evolved much over the years to provide a better developer experience.

In today's world, many modern tooling exist that make managing emails easier, faster and much more scalable.

Such one fantastic email delivery tool is AutoSend.

AutoSend: Email for Developers and Marketers

AutoSend is a lightweight SendGrid alternative for transactional and marketing emails. Simple, modern, and built to scale.

autosend.com

If you want to know more and understand why you would love to consider AutoSend over SendGrid, these are some articles worth reading -

Extra Bits: Why Choose Autosend over Resend
Well now you might question, "Well I haven't heard about sendgrid but I am using resend from the very beginning, and I like it a lot. Why would use this shiny new autosend?"
The answer is simple, the pricing!
From all the developers I know who use resend, I took feedback from them and they all said they didn't find resend's pricing plan very appealing.

Yes,
Resend has separate pricing for transactional and marketing emails and that price is quite high.
Resend has a popular 5k contacts per month plan for marketing emails which costs - 40$/month

For 5k (more than 3k) transactional emails per month, you need at least - 20$/month subscription plan.

And you saw the screenshots - all of these without dedicated IPs. For Dedicated IPs support, you need an addon in resend.

Meanwhile on autosend, in just $12/month, you get both transactional and marketing emails for 10k emails/month (with dedicated IPs).

Don't get me wrong, Resend has a generous free tier and both Resend and AutoSend are great Email platforms. But things are quite different when your needs are beyond simple, hobby level usage.

If you prefer a starter plan that is significantly more budget friendly for your startup, AutoSend is clearly the winner here.

Well, enough talk about comparisons.
I hope you are getting excited, so without waiting more, let's get started!

Set Up Autosend Account

Long story short,- get a domain if you don't have already one.
Once you have a domain, create an autosend account and head over to settings. click on the tab domains.

Click on the + add domain button.

It is recommended to give a subdomain of your domain, that should not already exist. Like if you have a domain of johndoe.com, give a subdomain like notify.johndoe.com or emails.johndoe.com or maybe even mail.johndoe.com.

Rest of the work is easy, autosend will provide you 4 TXT records and 1 MX record to set in your DNS manager. I use cloudflare for the nameservers and full DNS setup so I added those records in my cloudflare domain dashboard -> DNS -> Records.

After 5–10 minutes, verify that your domain has been successfully confirmed. Once verified, you can start sending emails using your new email domain through the autosend API.

For full info and complete documentation refer to:- Domain Configuration - Autosend Docs

Now that you have your email subdomain configured, let's start building.

Step By Step Code

Let's quickly create a virtual environment for our Django project.
I use uv for managing my python projects, in case you are not familiar with uv, I will show you pip commands too.

Bootstrap A Django Project & Install Dependencies

uv init django-autosend
cd django-autosend
source .venv/bin/activate # activating virtual environment
# on windows command prompt the command would be .\.venv\Scripts\activate
# on windows powershell the command would be .\.venv\Scripts\activate.ps1

With pip, it would be like this -

mkdir django-autosend
cd django-autosend
python -m venv .venv
source .venv/bin/activate # activating virtual environment
# on windows command prompt the command would be .\.venv\Scripts\activate
# on windows powershell the command would be .\.venv\Scripts\activate.ps1

Let's install the required dependencies -

uv add django 'django-tailwind[cookiecutter,honcho,reload]'  'celery[redis]' requests python-decouple

With pip, it would be -

pip install django 'django-tailwind[cookiecutter,honcho,reload]' 'celery[redis]' requests python-decouple

Great, as now we have installed the necessary dependencies, let's jump to writing code.

run - django-admin startproject django_autosend ./ to bootstrap a new django project in the same directory you're currently in (django-autosend directory).
again run python manage.py startapp contact to create the app for our contact form.

Initial Configuration

First things first, we need to add some variables in our project settings, to fully set it up.

But before that, create a .env file in your project root:
and paste the following code in there -

# .env
SECRET_KEY='your django secret key'
DEBUG=True
# Autosend Configuration
AUTOSEND_API_KEY='your autosend api key'
# Contact Form Email Configuration
FROM_EMAIL=hello@mail.yourdomain.com
FROM_NAME='Website Contact Form'
CONTACT_RECIPIENT_EMAIL=youremail@whateverdomain.com
CONTACT_RECIPIENT_NAME='Site Admin'

# Celer Configuration
CELERY_BROKER_URL=redis://localhost:6379/0
CELERY_RESULT_BACKEND=redis://localhost:6379/0

Copy your Django secret key from your project root's settings.py file.

And, put it in your .env file.

Generate your AutoSend API key if you have not already created one.
I hope you have already set up your domain with AutoSend for sending emails.

Put that email domain in place of hello@mail.yourdomain.com for FROM_EMAIL. And, put your API key in AUTOSEND_API_KEY.

The CONTACT_RECIPIENT_EMAIL and CONTACT_RECIPIENT_NAME fields should contain the email ID and name of the recipient where you want the contact messages to be sent.

now in your settings.py add these lines -

from decouple import config
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config("SECRET_KEY")

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = config("DEBUG", default=True, cast=bool)

# CELERY SETTINGS
CELERY_BROKER_URL = config('CELERY_BROKER_URL', default='redis://localhost:6379/0')
CELERY_RESULT_BACKEND = config('CELERY_RESULT_BACKEND', default='redis://localhost:6379/0')
CELERY_ACCEPT_CONTENT = ['json']
CELERY_TASK_SERIALIZER = 'json'

# Autosend Configuration
AUTOSEND_API_KEY = config('AUTOSEND_API_KEY')
AUTOSEND_API_URL = 'https://api.autosend.com/v1/mails/send'
FROM_EMAIL = config('FROM_EMAIL')
FROM_NAME = config('FROM_NAME', default='Website Contact Form')
CONTACT_RECIPIENT_EMAIL = config('CONTACT_RECIPIENT_EMAIL')
CONTACT_RECIPIENT_NAME = config('CONTACT_RECIPIENT_NAME', default='Site Admin')

In this project, I am using django-tailwind for styling my templates. So, we need to create a tailwindcss compatible Django app in our project for the tailwindcss classes to work properly. Run -

python manage.py tailwind init and provide the name your app as "theme". Then you would need to choose the installation method: standalone binary or npm-based.

I would use the standalone binary to skip the extra nodejs configurations in my django settings, and also I don't plan to use more tailwind plugins so in my opinion, npm based installation won't be needed.

Next,

I would add these lines in my settings.py file -

TAILWIND_APP_NAME = "theme" # Register the generated 'theme' app
if DEBUG:
    # Add django_browser_reload only in DEBUG mode
    INSTALLED_APPS += ["django_browser_reload"]
    # Add django_browser_reload middleware only in DEBUG mode
    MIDDLEWARE += [
        "django_browser_reload.middleware.BrowserReloadMiddleware",
    ]

And add these apps (contact, tailwind, theme) in the INSTALLED_APPS list. It would look like this -

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "contact",
    # third party apps
    "tailwind",
    "theme",
]

make sure your templates DIRS is nicely configured. -

        "DIRS": [ 'templates' ],

You've to run python manage.py tailwind install now to install Tailwind CSS dependencies.

add -

if settings.DEBUG:
    # Include django_browser_reload URLs only in DEBUG mode
    urlpatterns += [
        path("__reload__/", include("django_browser_reload.urls")),
    ]

in the urls.py file in your django-autosend app folder.

If you run into unusual problems, refer to django-tailwind docs for more intel on tailwind configuration within django, or ask me directly in the comment section if I can help.

Finally, you should be able to use tailwind CSS classes in your Django templates.

Start the development server with -

python manage.py tailwind dev

Great, the tedious part is over. So, time to write some real code.

The templates

create a base layout to built upon in other templates -

<!DOCTYPE html>
<html lang="en">
{% load static tailwind_tags %}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {% tailwind_css %}
  <title>{% block title %} {% endblock title %}</title>
</head>

<body class="bg-black">
  {% block content %}
  {% endblock content %}

  {% block javascript %}
  {% endblock javascript %}
</body>

</html>

name it layout.html.

now time for our dummy landing page -

{% extends "layout.html" %}

{% block title %}
homepage
{% endblock title %}

{% block content %}
<div class="max-w-sm mx-auto p-6 bg-white rounded-xl shadow-lg mt-12">
  <h2 class="text-xl font-bold text-blue-600">Nothing Useful in This Page</h2>
  <p class="text-gray-700 mt-2">Click on this <a class="underline text-indigo-700" href="{% url "contact" %}">link</a>
    to get to the Contact Form</p>
</div>
{% endblock content %}

It would look like this -

Finally our contact page -

{% extends "layout.html" %}

{% block title %}Contact Us{% endblock title %}

{% block content %}

<div class="w-full flex-1 px-4 mx-auto max-w-2xl py-8">
  <!-- Page Header -->
  <div class="text-center mb-8">
    <h1 class="text-4xl font-bold text-blue-600 mb-2">Contact Us</h1>
    <p class="text-gray-400">We'd love to hear from you. Send us a message!</p>
  </div>

  <!-- Messages/Alerts -->
  {% if messages %}
    <div class="mb-6 space-y-3">
      {% for message in messages %}
        <div class="p-4 rounded-lg text-sm {% if message.tags == 'success' %}bg-green-500/10 text-green-400 border border-green-500/20{% elif message.tags == 'error' %}bg-red-500/10 text-red-400 border border-red-500/20{% elif message.tags == 'warning' %}bg-yellow-500/10 text-yellow-400 border border-yellow-500/20{% else %}bg-blue-500/10 text-blue-400 border border-blue-500/20{% endif %}" role="alert">
          {{ message }}
        </div>
      {% endfor %}
    </div>
  {% endif %}

  <!-- Contact Form -->
  <form method="post" class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 md:p-8 shadow-xl border border-gray-700" id="contact-form">
    {% csrf_token %}

    <!-- Name Field -->
    <div class="mb-6">
      <label for="{{ form.name.id_for_label }}" class="block text-sm font-semibold text-gray-200 mb-2">
        {{ form.name.label }}
      </label>
      <input 
        type="text" 
        name="{{ form.name.name }}" 
        id="{{ form.name.id_for_label }}"
        class="w-full px-4 py-3 bg-gray-900/50 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
        placeholder="Your full name"
        {% if form.name.value %}value="{{ form.name.value }}"{% endif %}
        required
      >
      {% if form.name.errors %}
        <div class="mt-2 text-sm text-red-400">
          {{ form.name.errors }}
        </div>
      {% endif %}
    </div>

    <!-- Email Field -->
    <div class="mb-6">
      <label for="{{ form.email.id_for_label }}" class="block text-sm font-semibold text-gray-200 mb-2">
        {{ form.email.label }}
      </label>
      <input 
        type="email" 
        name="{{ form.email.name }}" 
        id="{{ form.email.id_for_label }}"
        class="w-full px-4 py-3 bg-gray-900/50 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
        placeholder="your.email@example.com"
        {% if form.email.value %}value="{{ form.email.value }}"{% endif %}
        required
      >
      {% if form.email.errors %}
        <div class="mt-2 text-sm text-red-400">
          {{ form.email.errors }}
        </div>
      {% endif %}
    </div>

    <!-- Message Field -->
    <div class="mb-6">
      <label for="{{ form.message.id_for_label }}" class="block text-sm font-semibold text-gray-200 mb-2">
        {{ form.message.label }}
      </label>
      <textarea 
        name="{{ form.message.name }}" 
        id="{{ form.message.id_for_label }}"
        rows="6"
        class="w-full px-4 py-3 bg-gray-900/50 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
        placeholder="Tell us what's on your mind..."
        required
      >{% if form.message.value %}{{ form.message.value }}{% endif %}</textarea>
      {% if form.message.errors %}
        <div class="mt-2 text-sm text-red-400">
          {{ form.message.errors }}
        </div>
      {% endif %}
    </div>

    <!-- Submit Button -->
    <div class="flex justify-center">
      <button 
        type="submit" 
        class="w-full md:w-auto px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800"
      >
        Send Message
      </button>
    </div>
  </form>
</div>

{% endblock %}

The Contact page will look like this -

Now we need to create a view functon & form object for the contact form to make it render & work properly.

Create A Form For The contact Page

from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100, label='Your Name', widget=forms.TextInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(label='Your Email', widget=forms.EmailInput(attrs={'class': 'form-control'}))
    message = forms.CharField(widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 5}), label='Message')

Our django form is ready. Now time to create our views.

Create Views For The Site

necessary imports -

import requests
from django.shortcuts import render, redirect
from django.contrib import messages
from django.conf import settings
from .forms import ContactForm

As you can already see from imports, you will use the python requests module to send authenticated http requests to the AutoSend Web API.
First we need the dummy landing page to be shown so that website visitor can navigate to the contact page.

# that dummy homepage ;)
def home(request):
    return render(request, "index.html")

next view function is for the contact page -

def contact_view(request):
    if request.method == "POST":
        form = ContactForm(request.POST)
        if form.is_valid():
            # Extract cleaned data
            name = form.cleaned_data["name"]
            email = form.cleaned_data["email"]
            message = form.cleaned_data["message"]

            # Prepare Autosend API payload
            payload = {
                "to": {
                    "email": settings.CONTACT_RECIPIENT_EMAIL,  # e.g., your personal email
                    "name": settings.CONTACT_RECIPIENT_NAME,
                },
                "from": {
                    "email": settings.FROM_EMAIL, # autosend registered email 
                    "name": settings.FROM_NAME,
                },
                "subject": f"New Contact Form Submission from {name}",
                "html": f"""
                <h2>New Message from {name}</h2>
                <p><strong>Email:</strong> {email}</p>
                <p><strong>Message:</strong></p>
                <p>{message}</p>
                """,
                "text": f"New Message from {name}\n\nEmail: {email}\n\nMessage:\n{message}",
                "replyTo": {"email": email, "name": name},
            }

            # Send via Autosend API
            headers = {
                "Authorization": f"Bearer {settings.AUTOSEND_API_KEY}",
                "Content-Type": "application/json",
            }

            response = requests.post(
                settings.AUTOSEND_API_URL, json=payload, headers=headers
            )

            if response.status_code == 200:  # Accepted for delivery
                messages.success(request, "Your message has been sent successfully!")

                form = ContactForm()  # Reset the form
                return redirect("contact")
            else:
                messages.error(
                    request,
                    "Sorry, there was an issue sending your message. Please try again.",
                )
                # console log error for debugging
                print(f"Error sending email: {response.status_code} - {response.text}")
                print("Autosend API Error:", response.json())
        else:
            messages.error(request, "Please correct the errors below.")
    else:
        form = ContactForm()

    return render(request, "contactform.html", {"form": form})

Some crucial things to understand -

We are sending a plain text version of the email along with the html version to make sure the email does not look spammy.
We are not mixing promotional language with the content because it is an transactional email, so that the email does not confuse the spam filters. This is another vital step to ensure your email doesn't end up being in the spam folder of the reciever's email client.
Lastly, I have added a replyto header in the json payload. You may think, why? But this is really the critical part. It allows the admin to immediately reach out to the user by hitting "Reply" in gmail or outlook whatever and have the response go to the user's email, not the FROM_EMAIL.

💡	If you are facing problems like emails ending up in the spam folder of the user, check this out for your remedy.

Setting The URLs For The Views

import the include function from django.urls, views from contact module(app) and add the views in urlpatterns.
The updated urls.py file in the django-autosend app will look like this -

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from contact import views

urlpatterns = [
    path("admin/", admin.site.urls),
    path("contact/", include("contact.urls")),
    path("", views.home, name="homepage"),
]

if settings.DEBUG:
    # Include django_browser_reload URLs only in DEBUG mode
    urlpatterns += [
        path("__reload__/", include("django_browser_reload.urls")),
    ]

Next, create a urls.py file in your contact app.
And paste the following code in there -

from django.urls import path
from . import views

urlpatterns = [
    path('', views.contact_view, name='contact'),
]

now if you try to send an email using the contact form, it must work great with email being sent successfully.

Now if you try to reply on the email you just received, it will go in the inbox the email of the user he/she put in email input in the form. like this -

So, is that all?

No, absolutely not! Building the contact page is not done yet!
We should add the functionality of sending a confirmation email to the user once the admin receives the message from user.

💡 ⚠️	But remember this part is optional, you are still good to go with it. But sending user a confirmation response via email is a good practice, because this way, if the user's requirement is urgent, he/she will be able to contact the admin via email by replying the message received.

So, here the site admin's email & name will be given in the replyto header.

Confirmation Email Sending task With Celery and Redis

First set up celery by adding these lines in the django_autosend app by creating a new celery.py file.

from __future__ import annotations
import os
from celery import Celery

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "django_autosend.settings")

app = Celery("django_autosend")

# Use Django settings with "CELERY_" prefix or custom config below
app.config_from_object("django.conf:settings", namespace="CELERY")

# Auto-discover tasks.py in installed apps
app.autodiscover_tasks()

celery is now configured to auto discover tasks defined in the tasks.py file of any django app within the project.

So what remains is creating a tasks.py file in the contact app, defining the task in there and, import and use it in the contact_view function.

necessary imports -

from celery import shared_task
import logging
import requests
from typing import Dict, Optional, Tuple, TypedDict, Union
from django.conf import settings
logger = logging.getLogger(__name__)

helper functions for generating html and text versions of email -

def _generate_confirmation_email_html(name: str, message: str) -> str:
    return f"""
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">
            <div style="background: linear-gradient(135deg, #667eea 0%, #a0a00a 50%, #0a0a0a 100%); padding: 30px; border-radius: 10px 10px 0 0;">
                <h1 style="color: white; margin: 0; font-size: 24px;">Message Received!</h1>
            </div>

            <div style="background: #f9f9f9; padding: 30px; border-radius: 0 0 10px 10px; border: 1px solid #ddd; border-top: none;">
                <p style="font-size: 16px; margin-bottom: 20px;">
                    Hi <strong>{name}</strong>,
                </p>

                <p style="font-size: 16px; margin-bottom: 20px;">
                    Thank you for reaching out! We've received your message and will get back to you as soon as possible.
                </p>

                <div style="background: #a0a00add; padding: 15px; border-radius: 5px; margin: 20px 0;">
                    <p style="margin: 0; color: #ffffff;">
                        <b>✓ Your message has been successfully delivered to our site administrator.</b>
                    </p>
                </div>

                <h3 style="color: black; margin-top: 30px; margin-bottom: 15px;">Your Message:</h3>
                <div style="background: white; padding: 20px; border-left: 4px solid black; margin: 20px 0; border-radius: 4px;">
                    <p style="margin: 0; white-space: pre-wrap; word-wrap: break-word; color: #555;">{message}</p>
                </div>

                <p style="font-size: 14px; color: black; margin-top: 30px;">
                    We typically respond within 24-48 hours. In the meantime, feel free to explore our website for more information.
                    If you have any urgent inquiries, please don't hesitate to reach out again.
                </p>
            </div>

            <div style="text-align: center; margin-top: 20px; color: #666; font-size: 12px;">
                <p>Although this is a system generated email,</p>
                <p>If your inquiries are urgent, feel free to hit reply.</p>
                <p>Our admin will recieve your reply shortly, and get back to you soon.</p>
            </div>
        </body>
        </html>
        """


def _generate_confirmation_email_text(name: str, message: str) -> str:
    return f"""
    Hi {name},

    Thank you for reaching out! We've received your message and will get back to you as soon as possible.

    ✓ Your message has been successfully delivered to our site administrator.

    Your Message:
    --------------------
    {message}
    --------------------

    We typically respond within 24-48 hours. In the meantime, feel free to explore our website for more information.
    If you have any urgent inquiries, please don't hesitate to reach out again.

    Although this is a system generated email,
    If your inquiries are urgent, feel free to hit reply.
    Our admin will recieve your reply shortly, and get back to you soon.
    """

Based on the autosend API reference I defined the type definition for the autosend API response.

look below -

class AutosendErrorResponseData(TypedDict):
    message: str
    code: str
    details: Optional[Dict[str, str]]
    retryAfter: Optional[int]


class AutosendResponseData(TypedDict):
    success: bool
    data: Optional[Dict]
    error: Optional[AutosendErrorResponseData]

another helper function with comprehensive error handling (for improving maintainability) -

def send_email(payload: Dict) -> Tuple[bool, Union[AutosendResponseData, Dict]]:
    """
    Send email via Autosend API

    Returns:
        Tuple of (success: bool, response_data: AutosendResponseData or error dict)
    """
    api_url = settings.AUTOSEND_API_URL
    api_key = settings.AUTOSEND_API_KEY
    try:
        response = requests.post(
            url=api_url,
            json=payload,
            headers={
                "Authorization": f"Bearer {api_key}",
                "Content-Type": "application/json",
            },
            timeout=10.0,
        )

        response_data: AutosendResponseData = response.json()

        if response.status_code == 200:
            logger.info(f"Email sent successfully. Message: {response_data}")
            return True, response_data
        else:
            error_msg = response_data.get("error")
            logger.error(f"Autosend API error: {error_msg}")
            return False, response_data

    except requests.exceptions.Timeout:
        logger.error("Autosend API request timed out")
        return False, {"error": "Request timeout"}
    except requests.exceptions.RequestException as e:
        logger.error(f"Autosend API request failed: {str(e)}")
        return False, {"error": str(e)}
    except Exception as e:
        logger.error(f"Unexpected error sending email: {str(e)}")
        return False, {"error": str(e)}

now finally our actual confirmation email sending function which will be given to the shared_task decorator of Celery so that it can be sent to the asynchronous task queue.

@shared_task
def send_confirmation_email(name, email, from_name, from_email, message) -> None:
    email_content = _generate_confirmation_email_html(name, message)
    email_text_content = _generate_confirmation_email_text(name, message)
    payload = {
        "to": {
            "email": email,
            "name": name,
        },
        "from": {
            "email": from_email,
            "name": from_name,
        },
        "replyTo": {
            "email": settings.CONTACT_RECIPIENT_EMAIL,
            "name": settings.CONTACT_RECIPIENT_NAME,
        },
        "subject": "Thank you for contacting us",
        "html": email_content,
        "text": email_text_content,
    }
    success, data = send_email(payload)
    if not success:
        logger.error(data["error"])

Now import the function from tasks file, in views.py like this -

from .tasks import send_confirmation_email

and call the function, just above the line that resets the form -

# everything same as before on above
            if response.status_code == 200:  # Accepted for delivery
                messages.success(request, "Your message has been sent successfully!")
                send_confirmation_email.delay(name,email,settings.FROM_NAME,settings.FROM_EMAIL,message)
                form = ContactForm()  # Reset the form
                return redirect("contact")
# below everything same as before

Full & Final Test With Celery & Redis Running

Generally in a production environment you will use docker for managing containers to run redis and celery but for this tutorial purpose I am running them directly. You can do it with docker if you prefer, by running -

docker run -d -p 6379:6379 redis

Otherwise, make sure you have redis server installed, on Ubuntu/WSL you can install redis server with

sudo apt update
sudo apt install redis-server
sudo systemctl enable redis-server.service
sudo systemctl start redis-server.service

run the redis server with default options -

redis-server

and run the celery worker instance in a seperate terminal where the python virtual environment is activated -

celery -A django_autosend worker -l INFO

Make sure your django development server is already running in a separate terminal. Let's send another email again with the contact form, to see if the user gets a confirmation or not after the contact message is sent to the site admin's mail successfully.

and it works! see that!

How cool is that! We have finally built our robust working contact form that sends actual emails through our simple contact form that doesn't end up in the spam folder. All thanks to AutoSend.

What's Next

Now what you can do is adding rate limiting, name and email validation logic, to further strengthen your site from fake messages and spam bots.

But that will be way beyond the scope of this article so I leave that to you.

Lastly, autosend is not just a puny email sending API. It has many more useful features like -

Sending bulk emails to multiple recipients in a single API request,
Create, Update, delete contacts with an email registered in your autosend account so that you can get a single contact with an ID, or maybe search contacts by emails, and so much more!

Head over to the AutoSend API reference for a detailed overview on what cool and important things you can do with it.

If you ran into problems I am attaching the github link of the source code of django project I created for this tutorial.

Debajyati / django-autosend

code for my technical tutorial on how to use Autosend within your django Application

DJANGO_AUTOSEND

A simple contact form setup for Django projects that automatically sends emails upon form submission. Technologies used: Django, Autosend API for emails, celery for asynchronous tasks.

Created by: Debajyati Dey

Created for the technical blog: A Simple Contact Form Setup With Django & AutoSend

View on GitHub

Conclusion

Now, if you found this article helpful, if this blog added some value to your time and energy, please show some love by giving the article some likes and share it with your dev friends.

Feel free to connect with me :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Follow me on Dev to motivate me so that I can bring more such tutorials like this on here!

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Happy coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀

The Different ways to Style Your React App

Debajyati Dey — Thu, 16 Oct 2025 12:43:02 +0000

As a Web Developer, if you use React, you have a wide number of options available for styling websites.

In this brief article, we are going to dive into the different ways you can style a React App/Site, so that you can pick up the best option depending on your situation and requirement.

Now you might be thinking, why know all the different ways? Why just not learn 1 technique, learn it great enough and apply it everywhere else? This is a natural question that may come up in your mind, and it is okay.

Look, the thing is you might not be always working on a project alone, you might have to work on a site that has been developed from years ago, picking different paradigms over time, and also has all the code using a different way to style the site than you are used to. In that case, if you have never used that method before, jumping straight into writing code will not be possible and you may even spend too much time just learning the technique before getting to code, because you are not even familiar and have never used/seen that way of styling before.

In this era of High-Level AI Code Generators and Vibe Coding, strengthening the fundamentals and having the deeper level understanding of concepts, patterns and techniques is the key to write, manage and integrate maintainable code. That's why, if you know React or are learning React at this time, it is recommended that you learn, get familiarised and be comfortable with all the different kinds of styling paradigms usually seen in the React Ecosystem.

So, without spending more time, let's begin!

Overview

In this article, we will discuss the widely used ways, which are -

Inline Styling,
Stylesheet objects (AKA the RN Stylesheet method),
Using Styled Components,
CSS files,
CSS modules,
CSS frameworks,

Feels like you are now getting excited! I am too! So, let's start with inline styling!

Techniques

1. Inline Styling:

If you have used plain html-css-javascript before, you must be already familiar with inline styling in HTML. Inline is styling in React is not much different than that.

It is a nice and easy method of styling React Apps when -

You are good with applying simple & small number of styles to your components,
Your components don't require high amount of complex nested styling (that would make the code unreadable if inline styling is used) to both parent and child elements.

How does it look like?

export default function AktaComponent({ children }) {
    return (
    <div>
      <h1 style= {{ fontFamily: "JetBrains Mono", color: "cyan" }}>
        Hello,
        <br />
      </h1>
      <h2 style={{ fontFamily: "JetBrains Mono", color: "cyan" }}>
        I am the seer, who sees everything!
      </h2>
      {children}
    </div>);
}

Here you can clearly recognise that the inline styles are not using CSS properties (in kebab-case) directly but JavaScript object key value pairs (in camel-case). They are actual CSS properties mapped to the properties of a JS object var defined in the React library with the type of React.CSSProperties.

Look, here in the code, we are using two curly braces to inject the CSS properties as a JS object in the JSX code.

At first, it might seem daunting and confusing; don't worry, we have been there. Let me explain -

The first curly braces are used to insert the JavaScript style object in the JSX code.
Then the inner curly brackets create an object literal. The styles are then passed as object literals to the element.

Well, you might not have noticed that we are passing all the properties separated by comma, not semicolons. Again, because they are JS object literals, not raw CSS props. This is a thing you should keep in mind, or you will fall in the labyrinth of syntax errors.

Well, as I previously said before, this is only good if you don't have to keep a lot of styles in your components.

If you have, then the components will no longer look elegant and will eventually become a mess, which you'll likely want to avoid.

So, this is the caveat? Okay, so what then if I have a lot of styles put in components inline, and want to refactor my code to improve readability and maintainability?

Yes, that's where our next candidate comes in.

2. Stylesheet Objects

If you are familiar to React Native, you have already used Stylesheets (a utility provided by the React Native library to create style objects that are compatible with the mobile devices) to style your apps.

Well, in react we don't have such Stylesheet import available originally, simply because we don't need it. You can directly define a style object and pass it as a value to the style prop.

Didn't understand anything? Let me show you the code -

const Form = ({ h2, formComponent }) => (
    <div style={Container}>
      <h2 style={Header}>{h2}</h2>
      <div style={FormContainer}>
        { formComponent }
      </div>
);
const Container = { display: "flex", flexDirection: "column" };
const Header = { padding: "10px 20px", textAlign: "center", color: "white" };
const FormContainer = { display: "flex", justifyContent: "center", alignItems: "center"};

This is how you can refactor your existing code which uses inline styling in React into something that is easier to understand and easier to reason about. The named variables are the best part of this method, which makes it better than inline styling. And that's why you don't always have to keep in mind the double curly braces, as supposed to in case of inline styling.

The great strength of this method that truly sets it apart is - you can now encapsulate all the named style objects into one 'styles' (or whatever name you prefer) object, and use it as a module, shared between multiple files.

And that's how you follow the DRY (Do not Repeat Yourself) policy of Software Engineering Best Practices. You are utilizing reusability, which is what we expect from a developer who knows what he/she is doing.

But still, something is missing with these 2 approaches.

Didn't get it? The thing is, - with these React.CSSProperties JS objects, we aren't really able to use pseudo selectors like hover modules, focus modules; not even media queries -- directly within our JSX.

So, what's the solution?

Yes, that's where our next methods come in.

3. Styled Components

Styled-components is a popular CSS-in-JS library that drastically improves the DX for the modern frontend dev while providing a near-perfect UX, with component-scoped CSS.

Why Use Styled Components???

Strong typing,
Proper scoped CSS, tied to components, making them reusable and modular.
Automatically adds vendor prefixes to your code (styles) to ensure compatibility with different browsers — especially older ones that may not fully support modern CSS standards.
Allow collocating styles with component logic for better organization.
Support advanced features like theming, animations, and dynamic styling via props.
Prevent global CSS leaks by generating unique class names.
Supports concurrent server-side rendering, with stylesheet rehydration. This doesn't interfere with global styles, such as keyframes or createGlobalStyle and allows you to use styled-components with React DOM's various SSR APIs.

To use styled components, you first need to install the necessary dependencies -

npm install styled-components
npm install -D babel-plugin-styled-components

with this import directive in the top of your file - import styled from 'styled-components';

You can start using styled components right away. Here's how you do it -

import styled from 'styled-components';
const Container = styled.div`
display: flex;
flex-direction: column;
`;

const Header = styled.h2`
padding: 10px 20px;
text-align: center;
color: white;
`;

const FormContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
`;

See! You are now writing pure CSS properties, not just plain silly JS style objects! This approach allows for nesting, media queries, and pseudo-selectors—things that are tricky with plain JS style objects.

But like every other technology, styled component is no all good for everything. It has its own caveats, which you should be aware of as a skilled React Developer.

Caveats of Styled-Components

Performance Overhead: styled-components can be slower in runtime performance, especially in large applications, due to its reliance on tagged template literals and runtime style injection.
Bundle Size: It tends to have a larger bundle size compared to Emotion, which can impact load times.

Well, if you are interested in the CSS-in-JS way of styling, don't be disappointed just yet! If Styled-component becomes performance intensive for your app, we've got Emotion, which serves as the Modern Alternative to Styled-components.

Where Emotion Excels

Dual Syntax Support: Emotion supports both string and object styles, giving developers more flexibility depending on their use case or team preference.
Smaller Bundle Size: Emotion is generally more lightweight, which helps with faster page loads and better performance.
Framework-Agnostic: Emotion can be used outside of React, making it more versatile for different environments.

When to Choose Emotion Over Styled-Components

Use Case	Recommended Library
Need and prefer object-style syntax.	Emotion
Performance-critical app	Emotion
SSR with minimal config	Emotion
Prefer traditional CSS syntax	Styled-Components
Simple React-only project	Styled-Components

Now, dev teams in many companies really like this kind of styling way of Emotion & Styled Components. In modern dev world, we have some more superior alternatives and we are quickly catching up on them. So, let's go ahead.

4. CSS Files

This is the classic approach—writing styles in .css files and importing them into your React components. It’s simple, familiar to most developers, and works well for small to medium-sized projects.

Pros:

Easy to set up and understand.
Great for global styles and resets.
Works seamlessly with tools like PostCSS or Sass.

Cons:

Styles are global by default, which can lead to conflicts.
No built-in scoping or encapsulation.

Examples:

/* styles.css */
.header {
  padding: 10px 20px;
  text-align: center;
  color: white;
}

and use the CSS file by directly importing it -

import './styles.css';
function Header() {
  return <h2 className="header">Welcome to the Blog</h2>;
}

5. CSS Modules

CSS Modules solve the scoping issue by automatically generating unique class names. This allows you to write modular, reusable styles without worrying about naming collisions.

Pros:

Local scoping by default.
Cleaner and safer for large codebases.
Easy to integrate with existing CSS tooling.

Cons:

Slightly more setup than plain CSS. (negligible though)
Not ideal for global styles.

Example:

/* Header.module.css */
.title {
  padding: 10px 20px;
  text-align: center;
  color: white;
}

import styles from './Header.module.css';

function Header() {
  return <h2 className={styles.title}>Welcome to the Blog</h2>;
}

Developer's have CSS modules as their one of the most ideal and go to choice for its "No Runtime Overhead" nature, simplest integration with React and awesome tooling support! CSS Modules are supported by major bundlers like Webpack and Vite.

In case if you need global styles at some point, CSS Modules still has you covered!

You can still define global styles using :global selectors inside your module files.
This gives you flexibility without sacrificing encapsulation.

The best part is Developers working on different parts of the app won’t accidentally override each other’s styles. Ideal for large teams and enterprise-scale projects.

Even better, you can use CSS Modules as the uncovered region of inline styling. If you prefer inline styling the most, you can keep them with style objects created with named variables and then use CSS modules to style the focus and hover effects (pseudo selectors) and media queries. How cool is that?

What is more? CSS modules have a fantastic feature called composes. Let me show you what I mean -

/* styles.module.css */
.base {
  font-size: 16px;
}

.primary {
  composes: base;
  color: blue;
}

The composes keyword allows you to inherit styles from other classes, making it easy to reuse and extend styles without duplicating code.

6. CSS Frameworks

Frameworks like Tailwind CSS, Bootstrap, and Bulma offer utility-first or component-based styling out of the box. They can drastically speed up development and enforce consistency.

Pros:

Rapid prototyping.
Predefined responsive and accessible styles.
Large community and ecosystem.

Cons:

Can lead to bloated HTML with too many classes.
Requires learning the framework’s syntax and conventions.

Example (Tailwind):

function Header() {
  return <h2 className="p-4 text-center text-white bg-blue-500">Welcome to the Blog</h2>;
}

Concluding

Choosing the right styling method in React depends on your project’s scale, team preferences, and long-term maintainability goals. Whether you're building a quick MVP or a production-grade app, understanding these techniques empowers you to make informed decisions and write cleaner, more scalable code.

So go ahead—experiment, refactor, and find your groove. Because in the end, great styling isn’t just about aesthetics—it’s about clarity, consistency, and craftsmanship.

Now, if you found this article helpful, if this blog added some value to your time and energy, please show some love by giving the article some likes and share it with your dev friends.

Feel free to connect with me :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Follow me on Dev to motivate me so that I can bring more such tutorials like this on here!

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Happy coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀

Face Detection in Python Using OpenCV HAAR CASCADE Method

Debajyati Dey — Sun, 12 Oct 2025 13:44:37 +0000

Let's learn about face detection in Python using the OpenCV library.

Introduction

OpenCV is a highly useful and popular computer vision library that supports programming languages like Python, C++, etc.

You must have seen some LinkedIn posts go viral where they are demonstrating their project which has something to do with hand gestures. There's no way you have been in LinkedIn and didn't see any of those projects' videos.

The key thing that is similar in those projects is Realtime object detection using the captures of the webcam of laptop as the data source. And most of those projects utilise an algorithm or method called, OpenCV Haar Cascade.

So, let's learn and implement OpenCV Haar Cascade for facial image detection (in Python).

Implementation

Haar Cascade classifiers are a cornerstone of face detection methods, because of the speed and simplicity.

Now you might be thinking, what are Haar Cascades?

Haar features are simple rectangular features that capture contrast differences in adjacent regions.

The classifier is trained using positive images (with the object) and negative images (without the object).

OpenCV provides pre-trained XML files for common objects like faces, eyes, smiles, etc.

Initial Setup

First things first, let's initialise a virtual environment, with -

python3 -m venv .venv

Now activate the virtual environment -

source .venv/bin/activate

     (for bash shell)

.venv\Scripts\activate

     (for command prompt)

.venv\Scripts\activate.ps1

     (for powershell)

Install Dependencies

.venv/bin/pip3 install opencv-python numpy matplotlib

      (for Linux/macOS)

.venv\Scripts\pip3.exe install opencv-python numpy matplotlib

      (for Windows)

Step By Step Code

First download and load the Haar cascade classifiers from these links: - front_face_cascade , eye_cascade.

Now start importing the necessary modules.

import cv2
import numpy as np
import matplotlib.pyplot as plt

face_cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml')
eye_cascade = cv2.CascadeClassifier('./haarcascade_eye.xml')

How we define the detection functions -

def detect_faces(img):
    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
    faces = face_cascade.detectMultiScale(gray, scaleFactor=1.2, minNeighbors=5)
    for (x, y, w, h) in faces:
        cv2.rectangle(img, (x, y), (x+w, y+h), (255, 0, 0), 2)
    return img

def detect_eyes(img):
    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
    eyes = eye_cascade.detectMultiScale(gray, scaleFactor=1.2, minNeighbors=5)
    for (x, y, w, h) in eyes:
        cv2.rectangle(img, (x, y), (x+w, y+h), (0, 255, 0), 2)
    return img

Good. Now the only thing left is, loading image and applying detection.

img = cv2.imread('your_image.jpg')
face_img = detect_faces(img.copy())
eye_img = detect_eyes(img.copy())

# Display results
plt.imshow(cv2.cvtColor(face_img, cv2.COLOR_BGR2RGB))
plt.title("Face Detection")
plt.show()

plt.imshow(cv2.cvtColor(eye_img, cv2.COLOR_BGR2RGB))
plt.title("Eye Detection")
plt.show()

Well, for example I used a photo of mine and it worked perfectly well. The matplotlib output for my photo using the code is given below ->

See, it detected the eyes and face portion accurately! How, cool, is that!

Now try with your own face images.

The Drawbacks of Haar Cascades

Well, Haar Cascades are fast and easy to use. But it not the ultimate solution of all face detection tasks. It has its own drawbacks too. What are they?

Haar Cascades can be prone to false positives. It can happen that an image has no human face but there are some dots and marks in the wall that appear to the algorithm as a face structure. This can bring problematic results to your application. So, beware of that!

For a robust detection, consider using deep learning-based detectors like Multi-Task Cascaded Convolutional Neural Network (MTCNN).

Conclusion

Face detection using Haar Cascades in OpenCV offers a fast and accessible entry point into the world of computer vision.

Whether you're building a simple image scanner or experimenting with real-time webcam feeds, this method provides a solid foundation for learning and prototyping.

However, as we've seen, Haar Cascades have limitations—especially in complex environments or with varied lighting. For more robust and scalable solutions, exploring deep learning–based detectors like MTCNN or RetinaFace is the best choice.

Still, mastering Haar Cascades is a valuable milestone in any developer’s journey into visual intelligence.

Now, if you found this article helpful, if this blog added some value to your time and energy, please show some love by giving the article some likes and share it with your dev friends.

Feel free to connect with me :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Follow me on Dev to motivate me so that I can bring more such tutorials like this on here!

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Happy coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀

Intro to PYJSX

Debajyati Dey — Sun, 13 Jul 2025 17:48:13 +0000

Did you know that you can write JSX in python code?

Yes, I am not kidding! It is actually possible today!

You may have found jinja templates ugly and absolutely nightmare for templating in django or flask. If that's so, you are really going to enjoy this quick tutorial.

In this article, I am going to show you an interesting approach to component driven frontend development in python using a new library which is called pyjsx.

So, let's get started!

Set up the Virtual Environment

First things first. Let's quickly set up a venv to install the required library.

python3 -m venv .venv

and activate it -

In Linux/MacOS -

source .venv/bin/activate # for POSIX Shells

In Windows -

./.venv/Scripts/activate.bat REM for windows cmd

./.venv/Scripts/activate.ps1 # for powershell

Install the Library

.venv/bin/pip3 install python-jsx # (for POSIX Shells)

.\.venv\Scripts\pip3.exe install python-jsx # (for windows)

If you use mypy then set up the ini file (mypy.ini) for accurate type checking.

[mypy]
plugins = pyjsx.mypy

Now we are ready to dive in.

Note: I am not going to install flask or quart or hypercorn or any other dedicated backend framework or http server library, for this simple pyjsx demonstration.

We will use the http.server module from the standard library of python for setting up the web server.

Let's Write some Python JSX (PYJSX)

Just exactly how you write functional components and pass props to them in React you do it the same way in pyjsx.

for example, you would write a header component this way -

# coding: jsx
from pyjsx import jsx, JSX

def Header(style, children) -> JSX:
    return <h1 style={style}>{children}</h1>

The most important things here to know and be careful about are -

The comment # coding: jsx is REQUIRED. It is not a plain regular comment but a directive that tells Python to let our library parse the file first.
The components can't be defined in a regular python file. You are only allowed to import the components in a python file, from the parsed files that contain the component definition(s). This component filename must end with .px file extension.
The import from pyjsx import jsx is vital because PyJSX transpiles JSX into jsx(...) calls so it must be in scope.

Let's define some components

Make sure you put the file extension as .px NOT .py.

The <Header/> component -

# coding: jsx
from pyjsx import jsx, JSX

def Header(style, children) -> JSX:
    return <h1 style={style}>{children}</h1>

The <Main/> component -

# coding: jsx
from pyjsx import jsx, JSX

def Main(children) -> JSX:
    return <main>{children}</main>

And here is the <App/> component.

# coding: jsx
from pyjsx import jsx, JSX
from main import Main
from header import Header

def App() -> JSX:
    return (
        <div>
            <Header style={{"color": "darkgreen"}}>Hello from PYJSX!</Header>
            <Main>
                <p style={{"color": "crimson"}}>This was rendered with PyJSX!</p>
            </Main>
        </div>
    )

Now, Here comes the part of server. We will set up a pretty simple http server to serve the <App/> component on GET request.

Hey, hey, hey, before writing a runnable file, remember this -

❗❗ To run a file containing JSX, the jsx codec must be registered first in the runtime, which can only be done with from pyjsx import auto_setup.
⚠️ This must occur before importing px files or any other file containing JSX.

Setting Up the server

Import modules -

from http.server import BaseHTTPRequestHandler, HTTPServer
from pyjsx import auto_setup # MUST import this before importing JSX
from app import App

Define constants -

HOST = '127.0.0.1'
PORT = 8080

Define the HTTP request handler class to setup server

class MyHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)

        # Send response headers
        self.send_header('Content-type', 'text/html')
        self.end_headers()

        # using fstring to convert the JSX into string
        response = f"{App()}"
        # convert the string data into bytes before sending over network
        self.wfile.write(response.encode())

    def log_message(self, format, *args):
        return  # Suppress default logging for clean output

def run_server():
    server = HTTPServer((HOST, PORT), MyHandler)
    print(f"Serving HTTP on {HOST}:{PORT} ...")
    try:
        server.serve_forever()
    except KeyboardInterrupt:
        print("\nShutting down the server.")
        server.server_close()

Now let's run the server to see it in action (I mean browser).

Look, our server works perfectly fine, and the pyjsx code is beautifully rendered in the DOM!

Look at the browser console -

Wrapping it up

You must be delighted to know that pyjsx also supports fragment components <></> and nested expressions like -

<div>
    {[<p>Row: {i}</p> for i in range(10)]}
</div>

already.

So, we see that pyjsx has a lot of potential.

It is a new library, and I think it is not ready for production yet. But it is completely open source with Apache Licence, so with valuable community contributions we can make development of this library progress rapidly and see it as a huge leap forward towards declarative web ui development in python.

What do you think, want to give it a go?

Check it out in GitHub and explore more examples to build something awesome with it!

tomasr8 / pyjsx

Write JSX directly in Python

PyJSX - Write JSX directly in Python

👉 We now have a VSCode plugin!

from pyjsx import jsx, JSX

def Header(style, children) -> JSX:
    return <h1 style={style}>{children}</h1>

def Main(children) -> JSX:
    return <main>{children}</main>

def App() -> JSX:
    return (
        <div>
            <Header style={{"color": "red"}}>Hello, world!</Header>
            <Main>
                <p>This was rendered with PyJSX!</p>
            </Main>
        </div>
    )

Installation

Get it via pip:

pip install python-jsx

Minimal example (using the `coding` directive)

Tip

There are more examples available in the examples folder.

There are two supported ways…

View on GitHub

Conclusion

I would really appreciate your feedback on this tutorial. How would you rate it? How can I improve it?

If you found this project or tutorial helpful, please consider sharing some love to the article. It will encourage me to create more content like this.

If you found this POST helpful, if this blog added some value to your time and energy, please support by sharing it with your developer friends.

Follow me for more quality tech content. 👇🏽👇🏽👇🏽

Debajyati DeyFollow

Web Developer, Freelance Technical Writer, Deep Learning Engineer. Finetuning models in my free time. Always eager to work with new technologies & documenting them. Email me for collaboration.

Feel free to connect with me :)

Thanks for reading! 🙏🏻 Written with 💚 by Debajyati Dey

Happy Coding 🧑🏽‍💻👩🏽‍💻! Have a nice day ahead! 🚀