DEV Community: Seif Ahmed

Refactoring Vlox's Theme Engine 🎨

Seif Ahmed — Tue, 01 Sep 2026 13:07:00 +0000

The Architecture:

Most standard theme systems swap a single global class on the <body> element. My engine acts like a blender. It lets themes inherit specific traits from one another. You can inject classes from Theme B, blend them with Theme A, and remove unwanted classes from Theme C by mapping targets.

The Update:

In the past, themes were tracked by index, but reordering the array broke saved themes for existing users.

To fix this, I used unique keys for themes instead of indexes.

The Configuration:

Each unique theme contains an array of configuration objects. Every configuration object contains four keys:

class: (Required): The target CSS class name.
elements: (Required): Elements targeted immediately on page load.
postsComponentElements: (Optional): Elements targeted ONLY after dynamic posts finish loading.
action: (Optional): Specifies whether to add or remove the class. Defaults to add.

The Code:

function runThemeEngine(theme, category) {
    if (!Array.isArray(theme)) return;

    for (let rule of theme) {
        if (!Array.isArray(rule[category]) || !rule.class) continue;
        rule[category].forEach(element => {
            if (rule.action === "remove") NS(element).removeClass(rule.class);
            else NS(element).addClass(rule.class);
        });
    }
}

The Execution Logic:

1. Core UI:

This process fires during initial page load. It updates permanent structural layouts.

2. Post Components:

This engine runs at the end of renderPosts() functions. It filters configuration arrays to style elements only after they exist safely.

If you liked Vlox, please consider giving it a 🌟 on GitHub at https://github.com/Hfs2024/Vlox. It means the 🌎 to me!

You Wished for It. Here It Is. ❤️

Seif Ahmed — Thu, 27 Aug 2026 12:18:09 +0000

I know how tough it can be to build smooth, secure backend features, so I wanted to bring a little joy to your day. I made this polished gift redemption system as my little present to you! Inside it, you will find clean logic and a complete Node.js/MongoDB transaction.

The Logic:

1. Security & Validation

Authentication: The code checks if the user is logged in using the checkAuth middleware.
ID Validation: It ensures the gift ID in the URL is a valid database ID.

2. Character Limit Math

The maximum character limit allowed is 4000 characters.
It calculates how close the user currently is to that limit.
It attempts to grant the user a +100 character boost, capping it if they are already near the 4000-character.
Concurrency Handling: While the system may calculate the same inc value for concurrent requests, the atomic updateOne operation ensures that if applying both boosts exceeds the 4000-character limit, only the faster request succeeds.

3. Database Transaction (All or Nothing)

The system starts a database transaction. This guarantees that both the gift update and the user update must succeed together; otherwise, the entire operation rolls back.

The query looks for an active gift that the current logged-in user has not claimed yet. It increments the gift's usage count (usedCount), save the user's ID in the usedBy array so they cannot claim it again, and changes the status to "expired" if it just reached its max available uses.
Also, It adds the calculated character boost to the user's account.

If the gift is invalid, expired or already redeemed by the logged-in user, the code throws an error and aborts the entire transaction. Otherwise, it successfully returns a success: true response.

The Code:

app.post("/api/v1/redeem/gift-link/:id", checkAuth, [
    param("id").exists().isMongoId()
], validateResult, async (req, res) => {
    const id = req.cleanData.id;
    const remaining = Math.max(0, 4000 - req.currentUser.maxPostContentCharsLength);
    const inc = Math.min(100, remaining);
    if (inc <= 0) return res.status(400).json({ error: "Gift redeem failed!" }); // Specify the exact error if wanted!

    const session = await mongoose.startSession();
    await session.withTransaction(async () => {
        // Gift
        const giftResult = await schemas.Gifts.updateOne(
            { _id: id, status: "active", usedBy: { $ne: req.session.userId } },
            [
                {
                    $set: {
                        status: {
                            $cond: {
                                if: { $eq: [{ $subtract: ["$usesCount", "$usedCount"] }, 1] },
                                then: "expired",
                                else: "$status"
                            }
                        },
                        usedCount: {
                            $cond: {
                                if: { $eq: ["$usedCount", "$usesCount"] },
                                then: "$usedCount",
                                else: { $add: ["$usedCount", 1] }
                            }
                        },
                        usedBy: {
                            $setUnion: [
                                { $ifNull: ["$usedBy", []] },
                                [new mongoose.Types.ObjectId(req.session.userId)]
                            ]
                        }
                    }
                }
            ],
            { session }
        );
        if (giftResult.matchedCount === 0) throw new Error("GIFT_REDEEM_FAILED");

        // User
        const userResult = await schemas.Users.updateOne({
            _id: req.session.userId,
            maxPostContentCharsLength: { $lt: 4000 }
        }, {
            $inc: {
                maxPostContentCharsLength: inc
            }
        }, { session });
        if (userResult.matchedCount === 0) throw new Error("USER_UPDATE_FAILED");
    });

    await session.endSession();
    return res.status(200).json({ success: true });
});

Note: A try/catch block is unnecessary here because I am using the express-async-errors.

If you want to view the entire system, check https://github.com/Hfs2024/Vlox.
Hope you liked your 🎁!

I created my X account! 🐦

Seif Ahmed — Wed, 26 Aug 2026 06:27:25 +0000

Let's Connect (Follow for Follow! 🤝)

I just created a brand new X (Twitter) account to document my journey, share open-source updates, and connect with fellow developers.

If you want to support me or just talk about lightweight web tech, let's connect:

👉 Follow me on X:

Seif Ahmed (@seifahmedcoding) / X

Creator of Vlox — the ultimate social network! I also built NanoScript — a custom DOM library for easier web development!

x.com

I am actively following back everyone from the DEV community who hooks up with me there. Drop your X handle or your latest side project in the comments below so I can check out what you are building too!

Looking for good friends? Then come here!

Seif Ahmed — Sat, 22 Aug 2026 11:59:42 +0000

Let’s be honest: searching for a real, human answer online feels impossible lately.

We’ve all experienced it. You type a specific question into Google, click on a link looking for a smart perspective, and instead get hit with a wall of generic, robotic paragraphs.

Quora used to be the gold standard for human curiosity. It was the place where top engineers, pilots, doctors, and experts shared fascinating, real-world stories. Now? It is completely overrun by AI-generated answers, bots talking to bots, and endless pop-up ads. The humans are gone.

When generative AI arrived, platforms like Quora leaned in too hard. Instead of using AI to help humans, the internet became a dumping ground for automated copy-paste answers. If I wanted a ChatGPT response, I would just open ChatGPT!

That's why I built this app as a direct, clean replacement for Quora. It is a place built from the ground up to protect human conversation.

Here is how it works differently:

Human-First Content: We are actively designing features to reward unique, personal experiences rather than generic text walls.
Zero-Fluff Interface: No aggressive paywalls, no endless pop-ups, and no AI-generated noise. Just questions and real answers.
Built for Communities: It’s structured so that niche topics get high-quality moderation from people who actually care about the subject.

👉 Give it a try:. https://vlox.containers.snapdeploy.app

Drop a comment below: What features do you think a modern Q&A platform absolutely needs to survive in 2026? Curious about the tech stack? Let’s chat!

Refactoring the views system in YOUR gift!

Seif Ahmed — Tue, 18 Aug 2026 12:30:45 +0000

In the past, link views were cached in Redis. After 10 seconds, all the views were flushed using a manual loop.

The old flow looked like this:

Loop through every key (ID).
Update its views separately via updateOne.
Move to the next until the loop ends.

Why This Is Wrong:

N+1 Problem: As the number of key operations grows, it runs many separate trips. Under very heavy traffic, the system can run out of resources and crash.
Duplicated Views: In this old flow, I never cleared the views, even after flushing them. This caused a duplicated view count.
No Validation: The system never checked if there were keys to update or not, running unnecessary empty operations.

The Fix:

Instead of running many separate updateOne operations, we group them into bulk operations using bulkWrite. This way, if we have 100 links viewed, we run 1 operation, unlike the 100 operation in the old system.

The New Flow:

Run hGetAll to get views.
Check if there is valid data to process. If not, skip this operation entirely.
Map the ID operations (Lightweight for niche apps like ours. I'm not trying to build something for billions, but a quick markdown previewer for devs like you).
Send the request to the database and update with bulkWrite.
If the request reaches the database and is acknowledged, delete the old views. This guarantees that if the server crashes midway, the data is not lost

Note: I added ordered: false because, by default, if one operation fails, the remaining operations are not executed and previous ones are not rolled back.

If you liked your 🎁, please consider giving it a star on GitHub

You loved my markdown previewer, so I’m giving it a major upgrade.

Seif Ahmed — Fri, 14 Aug 2026 08:07:34 +0000

Building a smooth, lovely experience isn’t just about rich text rendering—it’s about ensuring the database layer under the hood is as fast, flexible, and bulletproof as possible.

Here is a full breakdown of the core backend updates implemented in this release, covering everything from atomic database operations to user-customizable UI settings.

1. Migrating from Manual Rollbacks to Native MongoDB Transactions

The Problem

Previously, deleting a save relied on sequential async operations:

Delete the save document from the database.
Decrement the user's savesCount counter by 1.
Remove the associated share link if one existed.

This execution flow introduced serious data integrity flaws:

Unexpected Crashes: If the Node.js process or server crashed mid-execution (for example, right after step 1), orphan data was left behind, permanently corrupting database consistency.
State Mismatches: If a lookup for a save returned null, the system would still blindly decrement savesCount, leading to negative or incorrect counter states.

The Solution

Instead of attempting fragile, manual rollbacks inside application-level try/catch blocks, it now relies entirely on native MongoDB transactions via mongoose.startSession() and session.withTransaction().

By wrapping our operations—deleting from schemas.Saves, updating schemas.Users, and removing linked records from schemas.Links—inside a single transaction block passing { session }, MongoDB guarantees absolute ACID compliance. If any step fails or an explicit error is thrown (like SAVE_DELETE_FAILED or USER_UPDATE_FAILED), MongoDB automatically aborts the transaction and rolls back every write operation atomically.

Key Architectural Decisions:

Atomic Safeguards: Adding savesCount: { $gt: 0 } directly inside the atomic query condition acts as an absolute guardrail at the database layer, preventing a user's save count from ever dipping below zero under any edge case.
Error-Driven Rollbacks: Throwing inside session.withTransaction() naturally passes control to the enclosing catch block, which immediately aborts the session without requiring manual flag tracking like failed = true.

2. Dynamic Patching for Flexible Save Updates

The Problem

Updating a save was previously locked behind strict schema requirements. Users were forced to submit both title and content on every single edit request.

This pattern created zero flexibility: if a user wanted to quick-edit just the content body, the client application was forced to fetch and re-pass the existing title, introducing unnecessary network overhead and strict coupling.

The Solution

I shifted from rigid validation to a dynamic patch object pattern.

When a payload hits /api/v1/update/save/:id, the controller initializes an empty updateObject = {}. Each field (content, title, and color) is length-validated independently. If a field exists on req.body, it gets appended to updateObject; if it doesn't, the execution flow simply moves on.

Finally, we execute a single schemas.Saves.updateOne() using the $set: updateObject operator. By pairing this with { runValidators: true }, Mongoose validates only the specific fields being modified while ignoring omitted keys entirely.

3. Schema-Enforced Color Selection

The Problem

Allowing users to customize the card background color for individual saves creates a great visual experience, but it opens an immediate security and design vector: How do you prevent malicious actors or API requests from injecting arbitrary strings or broken non-hex values into the UI?

Relying on manual validation checks like colorsArray.includes(color) can be tricky—if an attacker sends a string like "hello #f8f9fa", a loose string check might pass, persisting bad data to your storage engine.

The Solution

Instead of writing defensive JavaScript code before the database write, we shift schema integrity to the ORM level using Mongoose schema enum constraints.

By defining enum: ["#f8f9fa", "#c5d9ec", "#83e6b5", "#ee9595"] directly inside the Mongoose schema definition and enforcing { runValidators: true } during update queries, MongoDB guarantees exact matching. Any attempt to pass an unauthorized color string is rejected automatically before hitting the collection.

If you liked my 🎁, please consider giving it a star on GitHub! It means the 🌍 to me!

[Boost]

Seif Ahmed — Tue, 11 Aug 2026 12:04:19 +0000

Seif Ahmed

Aug 4

I made a gift for you: A clean, lightweight Markdown Previewer

#showdev #github #opensource #webdev

1 min read

Goodbye React Fatigue: How I Built a Social Network Using ONLY My Own Library

Seif Ahmed — Mon, 10 Aug 2026 18:46:29 +0000

I got tired of heavy modern frameworks, so I wrote my own jQuery alternative called NanoScript.

To see if it actually worked, I used it to build a whole social network called Vlox.

Read the technical breakdown here: https://dev.to/codemaster_121482/can-my-dom-library-build-a-real-working-social-media-app-4ic7

The app is live too. It’s running on a free container tier, so give it a few seconds to wake up if needed: https://vlox.containers.snapdeploy.app/ or https://vlox.bonto.run

Fellow devs, let me know what you think.

[Boost]

Seif Ahmed — Mon, 10 Aug 2026 18:02:14 +0000

Seif Ahmed

Aug 4

I made a gift for you: A clean, lightweight Markdown Previewer

#showdev #github #opensource #webdev

1 min read

Building a password-protected link sharing workflow

Seif Ahmed — Sun, 09 Aug 2026 14:01:05 +0000

Ever wondered how to build a clean, secure system for sharing user content via unique links? It gets interesting when you have to separate public access from password-protected private shares.

Here is a breakdown of how the frontend and backend interact to extract IDs, enforce security via bcrypt, and protect against brute-force attacks with rate-limiting:

How It Works

URL Activation: A user opens the link http://localhost:3000/?id=POST_ID.
ID Extraction: The frontend parses the URL and extracts the ID using URLSearchParams.
Request Initiation: If an ID is present, the frontend requests data from /api/v1/get/save-from-link/:id.
Backend Verification: The backend checks if the ID exists in the database.
Public Access: If the link is public, the backend returns the content (link.for.content).
Private Access: If the link is private, the backend responds with a success signal and need_password: true without sending any content.
Frontend Evaluation: The frontend checks the need_password flag.
Content Display: If false, it renders the public content.
Password Prompt: If true, a popup prompts the user to enter a password.
Rate Limiting: Users get 10 password attempts per 7 minutes across all private saves globally.
Password Validation: The frontend sends the ID and password to /api/v1/validate-save-password/:id.
Security Match: The backend queries the ID ensuring status: "private", then verifies the password using await bcrypt.compare(password, link.password).

The Code

// In server.js
app.get("/api/v1/get/save-from-link/:id", checkValidID, async (req, res) => {
  try {
    const id = req.params.id;
    const link = await schemas.Links.findOne({ for: id }).populate("for").lean(); // Do you have permissions to see this doc?
    if (!link) return res.status(400).json({ error: "Invalid link!" });
    if (link.status === "private") return res.status(400).json({ success: true, need_password: true }); // Send a success singal, but warns that a password must be entered
    return res.status(200).json({ success: true, content: link.for.content });
  } catch (e) {
    console.log("Error: " + e.message);
    return res.status(500).json({ error: "Server error" });
  }
});

// In actions.js
router.post("/api/v1/validate-save-password/:id", validatePasswordRateLimiter, checkAuth, checkValidID, async (req, res) => {
  try {
    const id = req.params.id;
    const { password } = req.body;
    if (typeof password !== "string") return res.status(400).json({ error: "Password must be a type of string!" });
    if (!password) return res.status(400).json({ error: "You didn't enter a password!" }); // Find link
    const link = await schemas.Links.findOne({ for: id, status: "private" }).populate("for").lean(); // Check password match
    const isMatch = await bcrypt.compare(password, link.password);
    if (!isMatch) return res.status(400).json({ error: "Invalid password. Do you want to try again?", invalid_password: true });
    return res.status(200).json({ success: true, content: link.for.content });
  } catch (e) {
    console.log("Error: " + e.message);
    return res.status(400).json({ error: "Server error" });
  }
});

Liked the project? Please consider giving it a star on GitHub at https://github.com/Hfs2024/Markdown-Previewer

Building a Bulletproof Comment Reply System in Node.js & MongoDB 🚀

Seif Ahmed — Sat, 08 Aug 2026 18:17:49 +0000

When building a nested reply system, most developers worry about deep tree complexity or messy data structures. For Vlox, I took a different approach: keeping things flat.

Here is a deep dive into how I engineered a race-condition-safe reply mechanism:

How It Works 🛠️

User Action: A user clicks the reply icon and submits their reply.
The Payload: Vlox's system sends 3 fields via the endpoint /api/v1/reply/comment/post/:id:
- id: The post ID (passed as a URL parameter).
- rootCommentId: The ID of the root comment being replied to.
- reply: The raw text entered by the user.
Sanitization & Validation: The incoming reply is instantly converted to a trimmed string. It then passes through two critical validation checks:
1. Existence Check: The reply must exist. (If a malicious actor sends a payload without a body, the string literally evaluates to "undefined" and gets blocked).
2. Length Limit: The reply must be under 201 characters, enforcing the standard comment limit.
Atomic Transactions: If the validation checks pass, the system initiates a Mongoose transaction to execute the following steps safely:
- Permission Check: It verifies if the user has permission to reply by checking the post's status via await schemas.Posts.findOne(hotQueries.find_user_post(id, req.session.userId));.
- Creation: If permissions are valid, it creates a new reply. (Fun fact: It reuses the exact same schema as standard comments!)
The Reply Schema Structure: The reply object functions just like a normal comment, with two distinct exceptions:
- It does not contain a repliesCount field.
- It includes an extra rootId field, which explicitly points to the ID of the root comment being replied to.
Concurrency & Caps: To guarantee that a single comment never receives more than 10 replies while simultaneously incrementing the counter, the system runs this precise atomic query:

  {
      _id: rootCommentId,
      repliesCount: { $lt: 10 },
      rootId: null
  }

Error Handling: To catch race conditions or instances where a user attempts to reply to a thread that is already full, the system evaluates the write operation with if (result.matchedCount === 0) throw new Error("COMMENT_UPDATE_FAILED");. Inside the catch block, it intercept this with if (txError.message === "COMMENT_UPDATE_FAILED") return res.status(400).json({ error: "You can't reply to this comment!" });.

The Production Code 💻

// In actions.js
router.post("/api/v1/reply/comment/post/:id", checkAuth, checkValidID, async (req, res) => {
    try {
        const id = req.params.id;
        let { reply, rootCommentId } = req.body;
        reply = String(reply).trim(); // You can change this to an explicit string check too
        if (!reply) return res.status(400).json({ error: "Reply can't be empty!" });
        if (reply.length > 200) return res.status(400).json({ error: "Reply cannot exceed 200 chars!" });
        const session = await mongoose.startSession();

        try {
            await session.withTransaction(async () => {
                // Find post
                const post = await schemas.Posts.findOne(hotQueries.find_user_post(id, req.session.userId));
                if (!post) throw new Error("POST_NOT_FOUND");

                // Add reply
                const newReply = new schemas.Comments({
                    content: reply,
                    rootId: rootCommentId,
                    for: id,
                    by: req.session.userId
                });

                await newReply.save({ session });

                // Inc comments
                const result = await schemas.Comments.updateOne({
                    _id: rootCommentId,
                    for: id,
                    repliesCount: { $lt: 10 },
                    rootId: null
                }, {
                    $inc: {
                        repliesCount: 1
                    }
                }, { session });

                if (result.matchedCount === 0) throw new Error("COMMENT_UPDATE_FAILED");
            });
        } catch (txError) {
            if (txError.message === "POST_NOT_FOUND") return res.status(400).json({ error: "Post not found or you don't have permissions to see it!" });
            if (txError.message === "COMMENT_UPDATE_FAILED") return res.status(400).json({ error: "You can't reply to this comment!" });
            console.log("Error: " + txError.message);
            return res.status(400).json({ error: "Failed to reply. Try again." });
        } finally {
            session.endSession();
        }

        return res.status(200).json({ success: true });
    } catch (e) {
        console.log("Error: " + e.message);
        createErrorMessage(e, req.session.userId, req.originalUrl);
        return res.status(400).json({ error: "Server error" });
    }
});

// In server.js
app.post("/api/v1/get/post/replies/:id", checkAuth, checkValidID, async (req, res) => {
    try {
        const id = req.params.id;
        const { rootCommentId } = req.body;

        // Do you have permissions to access this post?
        const post = await schemas.Posts.find(hotQueries.find_user_post(id, req.session.userId));
        if (!post) return res.status(400).json({ error: "Post not found or you don't have permissions to see it!" });

        // Find replies (Note: You might want to add limit(10) here as a best practice, though it is optional)
        const replies = await schemas.Comments.find({
            for: id,
            rootId: rootCommentId
        })
            .populate("by", "-password -recoveryCodes -pinnedPosts -email -pinnedPostsCount"); // Removes secrets and non-essential data

        return res.status(200).json({ success: true, replies: replies });
    } catch (e) {
        console.error("Fetch Replies Break: ", e.message);
        return res.status(500).json({ error: "Could not retrieve replies." });
    }
});

I built an ultra-light social network for you and your hobbies

Seif Ahmed — Fri, 07 Aug 2026 19:57:15 +0000

A thousand packages in the tree,
A heavy runtime, rarely free.
You spin up React just to write a post,
While memory leaks consume your host.

So I carved a space away from the noise,
To bring back simplicity, speed, and choice.

A sanctuary for you and your hobbies

No Virtual DOM to drain your pace,
Ghost States ensures you never lose your trace,
Pure NanoScript flowing clean and light,
A private network built just right.

The Bloated Way	The Vlox Way
React (hundreds of MBs)	NanoScript (a few KBs)
Complex state boilerplate	Automatic Ghost State saving
Sluggish edge environment loads	Instant response

Take a breath, leave the bloat behind, and see how fast the web can be when it isn't weighed down.

Explore the architecture:

🚀 Live Demo: https://vlox.containers.snapdeploy.app/ or https://vlox.bonto.run/
⚡ Vlox Codebase: https://github.com/Hfs2024/Vlox

DEV Community: Seif Ahmed

Refactoring Vlox's Theme Engine 🎨

The Architecture:

The Update:

The Configuration:

The Code:

The Execution Logic:

1. Core UI:

2. Post Components:

You Wished for It. Here It Is. ❤️

The Logic:

1. Security & Validation

2. Character Limit Math

3. Database Transaction (All or Nothing)

The Code:

I created my X account! 🐦

Let's Connect (Follow for Follow! 🤝)

Seif Ahmed (@seifahmedcoding) / X

Looking for good friends? Then come here!

Refactoring the views system in YOUR gift!

Why This Is Wrong:

The Fix:

The New Flow:

You loved my markdown previewer, so I’m giving it a major upgrade.

1. Migrating from Manual Rollbacks to Native MongoDB Transactions

The Problem

The Solution

Key Architectural Decisions:

2. Dynamic Patching for Flexible Save Updates

The Problem

The Solution

3. Schema-Enforced Color Selection

The Problem

The Solution

[Boost]

I made a gift for you: A clean, lightweight Markdown Previewer

Goodbye React Fatigue: How I Built a Social Network Using ONLY My Own Library

[Boost]

I made a gift for you: A clean, lightweight Markdown Previewer

Building a password-protected link sharing workflow

How It Works

The Code

Building a Bulletproof Comment Reply System in Node.js & MongoDB 🚀

How It Works 🛠️

The Production Code 💻

Links:

I built an ultra-light social network for you and your hobbies

A sanctuary for you and your hobbies

Explore the architecture: