Forem: sheep

Make Bookmark Dashboard shareable online

sheep — Wed, 17 Dec 2025 10:40:13 +0000

Recently, I often needed to share bookmarks with teammates, things like code repositories, documentation links, or UI designs on Figma. That’s when an idea came to me: What if I could organize those bookmarks into a dashboard and generate a public webpage to share everything at once?

If I could make this happen, I'd be able to prepare a dashboard by one or more bookmark collections and then simply generate a corresponding webpage. Instead of copying and pasting bookmarks manually, I could just send the URL to my teammates, and they’d be able to open the URL and view all the resources on a clean, static dashboard. So convenient!

Excited by the idea, I jumped right into building it. Since the Bookmark Dashboard(a browser extension I previously developed) itself was already built, what I mainly needed to do is adding a “Generate Sharing Link” button. Clicking it would save the current dashboard layout and produce a unique URL, anyone opening it would see an exact replica of that dashboard at that moment.

But as it turns out, updating UI is the easy part, the real work happens on the backend to handle what occurs when the button is clicked. After some consideration, I decided to go with the simplest and fastest way to get this working.

Below, I’ll walk through how I implemented the backend using Next.js and MongoDB.

Implementation Approach

The dashboard shows the same content as long as the layout passed in is identical. That means the sharing feature comes down to two steps: save the layout when generating the sharing link, and restore it when the link is opened.
So The backend implementation is quite straightforward:

Create an API to receive the dashboard layout and store it in the database.
Create a page that retrieves the stored layout and renders it when visited. The URL of this page will become the sharing link.

Dashboard Link API

My backend service is built using Next.js App Router. To define an API endpoint, I just need to follow the folder-based routing convention.
Since I wanted the API path to be /dashboard/link, I created the folder structure accordingly, and placed a route.js inside.

src/app/dashboard
└── link
    └── route.js

Inside route.js:

import { NextResponse } from 'next/server';
// database util
import connectMongo from '@/db/mongo';
// database model for dashboard layout data
import LinkData from '@/db/entity/link_data';

export async function PUT(req) {
  const accout = ... // read current user's account
  const { content } = await req.json(); // read parameter - the dashboard layout

  // connect mongodb and save
  await connectMongo();
  const item = await LinkData.findOneAndUpdate({ account }, { content }, { upsert: true, new: true });

  return NextResponse.json(
    { re: item._id },
    { status: 200 }
  );
}

The PUT function automatically handles incoming PUT requests to /dashboard/link. After connecting to MongoDB, it saves the content (dashboard layout) under the user’s account.

Now the frontend (the 'Generate' button's click handler) can call this API to save the dashboard layout. The returning _id will be used to construct the sharing link.

Dashboard Page

To specify the dashboard by its _id, the sharing link should be something like /dashboard/link/[id]. I created a page.js under app/dashboard/link/[id].

src/app/dashboard
└── link
    ├── [id]
    │   ├── Dashboard.js
    │   └── page.js
    └── route.js

Here’s page.js:

// database util
import connectMongo from '@/db/mongo';
// database model for dashboard layout data
import LinkData from '@/db/entity/link_data';
// the component
import Dashboard from './Dashboard';

async function loadData(id) {
  await connectMongo();
  let data = null;
  if (id) {
    data = await LinkData.findById(id).exec();
  }
  return data;
}

export default async function DashboardLinkPage({ params }) {
  const id = params.id;
  const data = await loadData(id);

  let layout;
  if (data?.content) {
    const content = JSON.parse(data.content);
    layout = content?.layout;
  }

  return <Dashboard layout={layout} />;
}

This is a server-side page (notice there’s no "use client" directive).
It extracts the id from the route params, uses it to fetch the stored layout via loadData, and passes the data to the Dashboard component (built with React-Grid-Layout, as I introduced in an earlier post).

Simply replace the [id] in /dashboard/link/[id] with the actual _id value. That becomes the sharing link that can be sent to others. When they open it, they'll see a static dashboard that looks exactly the same as the one used to generate the link (the _id). That's because the _id lets the system retrieve the exact layout that was saved earlier.

A Note on MongoDB Connection

Both route.js and page.js use the same connectMongo helper:

import mongoose from 'mongoose';

// reuse the connection across concurrent requests and hot reloads (module re-imports).
let cached = global.mongoose;
if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function connectMongo() {
  if (cached.conn) {
    return cached.conn;
  }

  try {
    if (!cached.promise) {
      cached.promise = mongoose.connect(MONGO_URI, { serverApi: { version: '1', strict: true, deprecationErrors: true } })
        .then((mongoose) => {
          return mongoose;
        });
    }

    cached.conn = await cached.promise;
    await mongoose.connection.db.admin().command({ ping: 1 });
    console.log("Successfully connected to db!");
  } catch (e) {
    cached.promise = null;
    throw e;
  }

  return cached.conn;
}

Since both route.js and page.js run on the server side, they can share the same connection logic and benefit from connection reuse.
This pattern of querying the database directly from server-side pages is one of Next.js’s standout features. It enables server-side data fetching and rendering, which differs significantly from client-side frameworks like React or Vue.

Wrapping Up

So the backend is all set. Here is how the flow works:
To generate a dashboard sharing link, the frontend (from the 'Generate' button's click handler) calls the /dashboard/link API. After saving the layout, the API returns an _id, which will be used to construct the sharing link /dashboard/link/_id. Opening the link tells the page to grab that _id from the path, fetch the saved layout, and render the dashboard content.

open the sharing link:

This sharable dashboard feature is now live in the latest version of Bookmark Dashboard. It’s already saving me a lot of time when sharing resources with others. It's free, and hope it can help more people share their collections quickly and easily.

Thanks for reading!

Implementing Concurrency Control in MongoDB

sheep — Sat, 15 Nov 2025 11:15:29 +0000

MongoDB is my favorite database. As a document-oriented database, it offers great flexibility in how data is modeled and stored. I often use MongoDB together with Mongoose. Today, I’ll share how to implement concurrency control in MongoDB.

An Example of Concurrency Control

Let’s start with a simple example.

Suppose we have a bookmark stored as JSON:

{ "title": "dev.to", "url": "https://dev.to/" }

User A and User B both want to edit this bookmark.
A wants to update the title to "DEV Community",
B wants to update the URL to "https://dev.to/dashboard".

When updates happen sequentially:

A reads { title: "dev.to", url: "https://dev.to/" }
A updates the title and saves { title: "DEV Community", url: "https://dev.to/" }
B reads { title: "DEV Community", url: "https://dev.to/" }
B updates the URL and saves { title: "DEV Community", url: "https://dev.to/dashboard" }

Everything works fine.

When updates happen at (almost) the same time:

A reads { title: "dev.to", url: "https://dev.to/" }
B reads { title: "dev.to", url: "https://dev.to/" }
A updates the title and saves { title: "DEV Community", url: "https://dev.to/" }
B updates the URL and saves { title: "dev.to", url: "https://dev.to/dashboard" }

Problem:
B accidentally overwrites A’s title change because both read data before either update happened.

The correct behavior should be:
When B tries to update, the system should detect that the original data has changed, reject B’s update, and prevent data loss.

Mongoose Solution with `findOneAndUpdate()`

findOneAndUpdate() is atomic, meaning MongoDB performs the match + update in one indivisible step. This allows us to implement optimistic concurrency control by adding a condition in the filter.

I prefer using an updateTime field for the checking purpose:

operation of A:

// read original data
const item = await Bookmark.findById(_id);
// retrieve updateTime value
const updateTime = item.updateTime;
// check updateTime and update
await Bookmark.findOneAndUpdate(
  { _id, updateTime },
  {
    title: "DEV Community", // new title
    updateTime: new Date().getTime(), // new updateTime
  }
);

operation of B:

// read original data
const item = await Bookmark.findById(id);
// retrieve updateTime value
const updateTime = item.updateTime;
// if updateTime has been modified (by A), this will fail
await Bookmark.findOneAndUpdate(
  { _id, updateTime },
  {
    url: "https://dev.to/dashboard", // new url
    updateTime: new Date().getTime(), // new updateTime
  }
);

Both A and B include updateTime in the filter.
If A updates first, B’s findOneAndUpdate() will fail to match any document because the updateTime has already been modified by A, which means the update is rejected safely.

Why `findOneAndUpdate()` Is Not Enough

The previous example updates only one document one time.
But what if the operation needs to:

update multiple documents
write logs
ensure cross-collection consistency
rollback if any step fails

This is where transactions become essential.

A transaction ensures that a group of operations either all succeed or all fail. If any operation fails, all previous operations are rolled back to maintain data consistency and prevent errors.

Using Transactions in Mongoose

Here’s a helper function for running any code inside a transaction:

import mongoose from 'mongoose';

export async function runInTransaction(job) {
  const session = await mongoose.startSession();
  session.startTransaction();

  try {
    const result = await job(session);
    await session.commitTransaction();
    return {
      result,
    };
  } catch (error) {
    await session.abortTransaction();
    throw error;
  } finally {
    session.endSession();
  }
}

If anything inside job() throws an error, all operations are rolled back.

Combining `findOneAndUpdate()` + Transactions

Suppose A and B both also write a log entry while updating the bookmark.
We want:

bookmark update to succeed only if the updateTime matches
log entry to roll back if the update fails

operation of A:

await runInTransaction(async (_session) => {
  // save log
  await LogRecord.create([{ content: 'Update title' }], { session: _session });
  // operation on Bookmark data
  const item = await Bookmark.findById(_id).session(_session);
  const updateTime = item.updateTime;
  await Bookmark.findOneAndUpdate(
    { _id, updateTime },
    {
      title: "DEV Community", // new title
      updateTime: new Date().getTime(), // new updateTime
    },
    { session: _session }
  ).orFail(new Error('Conflict update')); // throw Exception on fail
});

operation of B:

await runInTransaction(async (_session) => {
  // save log
  await LogRecord.create([{ content: 'Update url' }], { session: _session });
  // operation on Bookmark data
  const item = await Bookmark.findById(_id).session(_session);
  const updateTime = item.updateTime;
  await Bookmark.findOneAndUpdate(
    { _id, updateTime }, {
      url: "https://dev.to/dashboard", // new url
      updateTime: new Date().getTime(), // new updateTime
    },
    { session: _session }
  ).orFail(new Error('Conflict update')); // throw Exception on fail
});

If the bookmark update fails due to a conflict:

.orFail() throws an error
the transaction catches it
all previous operations (including logs) roll back

This prevents inconsistencies between LogRecord and Bookmark.

Summary

Concurrency control ensures that multiple clients can read and write data safely without overwriting each other’s changes.

In this post, we explored a practical approach using:

findOneAndUpdate() for optimistic concurrency checks
transactions for keeping multi-operation workflows consistent

Together, they help prevent race conditions and maintain correct, consistent and reliable data even when many operations happen at the same time.

I just developed a browser extension called Bookmark Dashboard, a local-first bookmark management tool, and I’d love to share it with fellow bookmark enthusiasts!

Thanks for reading!

Closing the Gap: Adding Drag-and-Drop for Bookmarks

sheep — Tue, 21 Oct 2025 13:05:36 +0000

It's been encouraging to see my browser extension, Bookmark Dashboard, has now reached 700+ users (500+ on Chrome, 200+ on Edge). Recently I have made a bunch of optimizations, and today I want to share how I implemented the drag-and-drop feature for bookmarks.

Usually the browser's native bookmark manager already supports dragging and dropping bookmarks or folders to move them around. However, this convenient feature was missing in Bookmark Dashboard until now. Previously, moving bookmarks or folders mainly involved opening a modal, selecting the target location, and finally clicking a confirmation button. If I just want to drop a bookmark into a folder right next to it, there’s no denying that drag-and-drop is the more intuitive and convenient way.

To make Bookmark Dashboard embody all the strengths of the native bookmark manager, I decided to tackle this.

Drag and Drop API

HTML already provides the Drag and Drop API, which can be used to enable drag-and-drop functionality. React also offers properties like onDragStart, onDragEnd, and onDrop to handle drag-and-drop events.

Now let’s take a look at the implementation.

Making Bookmarks Draggable

Define onDragStart for the bookmark component, making it a draggable element. Then dragging bookmarks will trigger the handler immediately. Inside the handler, the bookmark’s ID can be passed via dataTransfer.

function BookmarkItem(props) {
  const { bookmarkData } = props;
  // ...
  return (
      <a
        href={bookmarkData.url}
        target='_blank'
        rel='noreferrer'
        onDragStart={(evt) => {
          evt.dataTransfer.setData('text/plain', bookmarkData.id);
        }}
      >
        /* display bookmark */
      </a>
  )
}

Making Folders Droppable

Define onDrop for the folder component, making it a droppable element. Then drag a bookmark onto a folder and drop it will just trigger the handler. In the onDrop handler, first retrieve the bookmark ID from dataTransfer, then use the browser’s bookmarks API, passing the current folder’s ID as the parentId, to complete the move.

function Folder(props) {
  const { folderData } = props;
  // ...
  return (
      <div
          onDrop={(evt) => {
            const targetId = evt.dataTransfer.getData('text/plain');
            // just for chrome
            chrome?.bookmarks?.move(targetId, { parentId: folderData.id }, () => {});
          }}
      >
        /* display folder */
      </div>
  )
}

Just like this, the basic drag-and-drop functionality is working!

Improving the UX with Visual Feedback

By now the user experience isn’t quite polished enough. I think a visual hint is needed when dragging a bookmark over a folder, like showing a border around the folder to indicate that dropping the bookmark will move it there.

The Drag and Drop API’s onDragEnter and onDragLeave are perfect for this. Add onDragEnter and onDragLeave to the folder component, then if a bookmark is dragged over the folder, set the border color to gray from onDragEnter. When the bookmark is dragged away, remove the border color from onDragLeave.

function Folder(props) {
  const { folderData } = props;
  // ...
  return (
      <div
          className='border border-transparent'
          onDragEnter={(evt) => {
            evt.currentTarget.style.borderColor = 'gray';
          }}
          onDragLeave={(evt) => {
            evt.currentTarget.style.borderColor = '';
          }}
          onDrop={(evt) => {
            evt.target.style.borderColor = '';
            const targetId = evt.dataTransfer.getData('text/plain');
            // just for chrome
            chrome?.bookmarks?.move(targetId, { parentId: folderData.id }, () => {});
          }}
      >
        /* display folder */
      </div>
  )
}

This makes it clear which folder the bookmark will be dropped into and helps prevent mistakes.

Solving the onDragLeave Trigger Issue

During testing, I noticed a problem: onDragEnter and onDragLeave weren’t just triggered on the folder component. They were also triggered on its child elements. This meant that if I dragged a bookmark over a folder, onDragEnter would fire, if I then moved the cursor over the folder’s title or action buttons (still inside the folder), onDragLeave would fire unexpectedly. This caused the folder border to flicker even though the bookmark was still technically over the folder.

This was an unexpected challenge. After looking into how other developers handled it, here’s the solution I went with:

const [isDragging, setIsDragging] = useState(false);

function BookmarkItem(props) {
  const { bookmarkData } = props;
  // ...
  return (
      <a
        href={bookmarkData.url}
        target='_blank'
        rel='noreferrer'
        onDragStart={(evt) => {
          evt.dataTransfer.setData('text/plain', bookmarkData.id);
          setIsDragging(true);
        }}
        onDragEnd={() => setIsDragging(false)}
      >
        /* display bookmark */
      </a>
  )
}

function Folder(props) {
  const { folderData } = props;
  // ...
  return (
      <div
          className={`border border-transparent ${isDragging ? 'dragging' : ''}`}
          onDragEnter={(evt) => {
            evt.currentTarget.style.borderColor = 'gray';
          }}
          onDragLeave={(evt) => {
            evt.currentTarget.style.borderColor = '';
          }}
          onDrop={(evt) => {
            evt.target.style.borderColor = '';
            const targetId = evt.dataTransfer.getData('text/plain');
            // just for chrome
            chrome?.bookmarks?.move(targetId, { parentId: folderData.id }, () => {});
          }}
      >
        /* display folder */
      </div>
  )
}

In the bookmark component’s onDragStart handler, I set an isDragging flag to indicate that a drag is in progress. I also defined onDragEnd for the bookmark component to reset isDragging to false when the drag ends. The isDragging flag is used to conditionally add a dragging class to the folder component. Then define the following CSS for the dragging class:

.dragging * {
  pointer-events: none;
}

This way, while a bookmark is being dragged, the dragging class is applied to the folder, and all its child elements ignore mouse events. This prevents onDragEnter and onDragLeave from being triggered by the children. Once the drag ends, isDragging is reset to false, the dragging class is removed, and normal interaction resumes.

Now With these all, the drag-and-drop feature is ready for use!

Wrapping Up

Bookmark Dashboard has been updated to v0.4.1 for Chrome and Edge and what makes me even happier is that the Firefox version was also published just a few days ago.

Besides drag-and-drop, the latest release includes many other smaller features and optimizations. Feel free to give it a try and

Thanks for reading!

Giving DeepSeek a Spin for Bookmark Organization

sheep — Thu, 18 Sep 2025 14:39:24 +0000

In my previous post, I mentioned how I used Gemini to implement a one-click bookmark organization feature. The feedback for the feature was quite positive. However, recently I noticed an increase of errors from Gemini, such as occasional 503 errors, empty responses, or timeouts exceeding 1 minute.

I’m not sure if the issues are caused by the lengthy context when processing a large number of bookmarks, or the high frequency of API calls, or simply because I’m using the free tier of Gemini 2.5 Flash. I need some more time to investigate these issues, but before that, I'd like to give DeepSeek a try to handle the categorization and organization. I am very curious to see how it performs.

Using DeepSeek

As introduced in its official documentation, DeepSeek’s API can be called in various way, I simply used axios to invoke it. After obtaining a DeepSeek API key, I reused the same prompt originally designed for Gemini and created a DeepSeek version of the send function.

import axios from 'axios';

const path = 'https://api.deepseek.com/chat/completions';

async function send(content) {
  const data = {
    "messages": [
      {
        "content": content,
        "role": "user"
      }
    ],
    "model": "deepseek-chat",
    "max_tokens": 8192, // max
    "response_format": { "type": "text" },
    "stream": false,
    "temperature": 1,
    "top_p": 1,
  };

  const res = await axios.post(path, data, {
    maxBodyLength: Infinity,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.DS_KEY}`
    }
  });

  if (res?.status !== 200) {
    console.error('Failed send res:', res)
    throw new Error()
  }

  const { message } = res?.data?.choices?.[0] || {};
  return message?.content;
}

Switching from Gemini’s send function to DeepSeek’s required no other code changes, the replacement was seamless.

The Chrome extension is now available. I’ll monitor its performance for a while and see if DeepSeek offers better stability. Feel free to check out my extension Bookmark Dashboard, and try out the DeepSeek version of the one-click bookmark organization feature!

Thanks for reading!

How to Get a Website's Favicon

sheep — Tue, 29 Jul 2025 10:12:07 +0000

In the process of Chrome extension developing, I encountered an issue where loading favicons for certain pages occasionally failed. After some investigation, I discovered the root cause.

The Initial Approach

Originally, I was using Chrome's internal _favicon directory to retrieve favicons from my extension like this:

function faviconURL(pageUrl, size) {
  const url = new URL(chrome.runtime.getURL("/_favicon/"));
  url.searchParams.set('pageUrl', pageUrl);
  url.searchParams.set('size', `${size || 20}`);
  return url.toString();
}

_favicon is a special virtual directory used internally by Chrome for handling and accessing website favicons. It's not an actual physical directory in the extension filesystem, while could be accessed via chrome.runtime.getURL("/_favicon/") with parameters:

pageUrl: The URL of the webpage whose favicon you want
size: The desired icon size in pixels (e.g., 16, 32)

This worked fine until I realized the limitation - the _favicon directory only returns cached favicons. For pages that Chrome hasn't visited yet, there would be no cached favicon available.

The Solution: Google's Public Favicon API

After some research, I found that Google provides a public API for fetching website favicons:

https://www.google.com/s2/favicons?domain=&sz=

Parameters:

domain: The target domain (without http:// or https:// prefix)
sz: Optional icon size

This is a public API provided by Google that requires no authentication and supports cross-origin requests. By using this API, favicons even for new pages that aren't yet cached in Chrome could be displayed well.

Then my faviconURL function could be updated like this:

function faviconURL(pageUrl, size) {
  return `https://www.google.com/s2/favicons?domain=${new URL(pageUrl).hostname}&sz=${size || 20}`;
}

This guarantees favicons will appear consistently even for those unvisited pages.

Hope you find it useful and Thanks for reading!

Quick Update: My Bookmark Extension Hits 500 Users! 🎉

sheep — Sun, 27 Jul 2025 12:50:29 +0000

Time flies when you're debugging!
Can't believe it's been over a month since my last post.

Here's what I've been up to with my browser extension Bookmark Dashboard:

Fixed some pesky bugs
Optimized a few features for smoother use
Biggest win -- Adapted the extension to survive Chrome's bookmark syncing changes (avoid crashes or disordered UI)

And the best part: Hit 500+ users across Chrome and Edge! 🎉

Feel free to try it out and all feedback is welcome! 🚀

Thanks for reading!

How I Built One-Click Bookmark Organization with Gemini AI

sheep — Wed, 11 Jun 2025 15:39:44 +0000

As a solo developer, free tier of Gemini 2.5 Flash is incredibly attractive. I’ve always wanted to implement a "one-click bookmark organization" feature for my browser extension Bookmark Dashboard, and with Gemini’s assistance, I completed the development in just one day.

One-Click Bookmark Organization

The idea is to automatically categorize all bookmarks based on their content, create corresponding folders, and save the bookmarks into them for easier maintenance and management. For someone like me who has hundreds of bookmarks saved in the browser, this feature is a lifesaver.

Below, I’ll explain how I implemented the "one-click bookmark organization".

Implementation Approach

Bookmark organization is done in two steps:

Tagging: Assign one or two topic-specific tags to each bookmark, describing its core subject.
Categorization: Merge similar tags into broader categories to create a hierarchical structure.

I added two API endpoints to the server side to handle these tasks, both leveraging Gemini for processing. The two APIs respectively call Gemini using the following prompts to obtain the results for tagging and categorization.

Prompt for Tagging Bookmarks

Analyze and categorize the following web links, to each link assign 1 or 2 specific, topic-oriented tags that represent the core subject matter of its content.
Extract tags from the url, title, or keywords of link's content. Focus exclusively on what the content is about, not its format, purpose, or meta-features.
Ensure the results maintain the same order as the input. No additional explanations are needed.

**Guidelines:**
1. ABSOLUTELY PRIORITIZE SPECIFICITY: Tags must describe the primary topic(s) with the highest possible granularity.
2. Tags should be simple and precise, avoid overly broad terms.
3. All tags must be in short, singular English words. Use lowercase and hyphenate multi-word only if necessary.

reference output format:
index: 1
category: tag1, tag2

index: 2
category: tag1


web links (url title):
1. https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18 Mobx Server Side Rendering with Next.js - DEV Community

2. https://blog.logrocket.com/build-full-stack-app-next-js-supabase/ Build a full-stack app with Next.js and Supabase - LogRocket Blog

3. https://www.npmjs.com/package/favicon-getter favicon-getter - npm

4. https://www.baeldung.com/ops/docker-databases How to Deal With Databases in Docker? | Baeldung on Ops

...

Gemini's Response for Tagging

index: 1
category: next.js, mobx

index: 2
category: next.js, supabase

index: 3
category: favicon, npm

index: 4
category: docker, database

...

Prompt for Grouping Tags into Categories

Organize the following tags into several categories, where each tag belongs to only one category, and each category should include as many tags as possible.
The categorization process follows this order:
1. From all tags, identify as many tags of the same type as possible, assign a category name, and group these tags under this category.
2. From the remaining tags, continue identifying as many tags of the same type as possible, assign a different category name, and group these tags under the new category. Repeat this step until no more tags of the same type remain or no tags are left.
3. Any remaining tags that cannot be grouped should be treated as individual categories.

Return the results strictly in the reference output format, with no additional explanations.

**Guidelines:**
1. Prioritize the core function or primary purpose of the tag for categorization.
2. Each tag must be interpreted in isolation, without inferring relationships, context, or common associations from other tags in the list. Treat each tag as if it were the only tag provided.
3. Category names should be simple, precise. Avoid overly broad category names.
4. The meaning of category cannot be narrower than any tags under it.
5. All category names must be in short, singular English words. Use lowercase and hyphenate multi-word only if necessary.

reference output format:
category1: tag1, tag2, tag3
category2: tag4, tag5


tags:
1. react-icons
2. flutter
3. expo
4. react
5. react-native
6. electron
7. next.js
8. vercel
9. docker

...

Gemini's Response for Categorization

framework: react, react-native, next.js, astro, flutter, electron, expo
node: node.js, npm, nvm, express, pm2
icon: remix-icon, ionicons, react-icons
database: supabase, postgresql, row-level-security
devops: github-actions, docker, vercel
web-feature: text-truncation, text-selection, image-map, rel-preload

...

Sending Requests to Gemini

According to the Quick Start, install the Google GenAI SDK, which will be invoked to send messages to Gemini.

async function send(content) {
  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash-preview-05-20",
    contents: content,
  });
  return response.text;
}

Thanks to the power of AI, capabilities like tagging and categorization can be easily achieved. By calling the two APIs implemented from server side, the frontend (browser extension) can achieve categorized organization of bookmarks.

Since users may have a large number of bookmarks (why else would they need one-click organization?), the frontend processes bookmarks in batches — sending a maximum of 30 links per request to avoid server timeouts. Once all bookmarks are tagged, the tags will be aggregated and categorized.

Finally, the categories serve as top-level folders, while tags become subfolders. Bookmarks are then placed into their respective folders, completing the organization. Some optimizations can be applied — for example, if a folder contains only one bookmark, it is better to be merged into its parent folder.

Observations on Gemini’s Performance

Gemini’s response speed is impressive, and its tagging and categorization are generally reasonable. However, this was my first time integrating AI into a product, and the experience was mostly great — with one caveat: AI output is not always consistent.

During testing, the quality of categorization varied. It took multiple iterations of prompt refinement to stabilize the output, and even then, perfect consistency wasn’t guaranteed. For developers accustomed to deterministic code execution (where results are either correct or incorrect), this unpredictability is something to adapt to. If you're a prompt engineering pro, feel free to drop me a comment with your tips – I'd love to level up my AI skills! 😉

Try It Out!

That’s my experience developing with Gemini. If you’re drowning in hundreds of browser bookmarks, give my bookmark extension's one-click organization a try — it might just save you hours of manual sorting!

Thanks for reading!

First Try with Lovart

sheep — Fri, 30 May 2025 11:20:29 +0000

Recently I got to tried out Lovart - a design-focused AI agent. Since I needed to polish up the interface for my browser extension Bookmark Dashboard's website, I applied for an invite code to give it a spin, and I was pleasantly surprised! I've tried other AI design tools before, but never applied them to my real project. Lovart's experience stands out in comparison.

This was my original interface (fully built with the help of Cursor + Claude) - it looked a bit rigid to be honest.

Here's what Lovart designed for me - definitely an improvement over the previous version in my opinion. (visit the website)

Overall I'm quite happy with Lovart's design. It can provide complete layouts with all necessary visual elements (like images), and even allows specific element tweaks. While implementing the design, I removed some unnecessary elements and had Lovart regenerate certain images I was not happy with - but the core design required very few modifications. For solo developers like me, it genuinely helps offload design work.

Lovart's user interface:

The only drawback for me, is Lovart doesn't seem to directly export HTML/CSS yet. I had to copy the webpage source code from the preview page to quickly convert designs into code.

Lovart has opened its beta for testing - might be worth checking out if you have design needs.

Thanks for reading!

Stop Repeating Modal Logic! Build a Reusable useModal Hook

sheep — Mon, 26 May 2025 11:56:56 +0000

Modal is a commonly used component in frontend projects. Many UI libraries provide built-in modal components, making it easy to implement semi-transparent background and dialogs with "Cancel" and "Ok" buttons.

While developing with React, I like using modals for most user interactions — whether for editing data or displaying alerts. As a result, my project became cluttered with modal components everywhere. After repeatedly writing the same logic for controlling the modals, I decided to create a custom hook to simplify the process.

Below, I’ll walk you through my implementation. Let's Go!

The Goal

I named this hook useModal. What I aimed to achieve with useModal was to extract and centralize three key behaviors:

opening the modal
closing the modal
passing parameters to the modal

Implementation of useModal

To achieve the goal, the essential modal behaviors will be encapsulated in the useModal hook. Let's take a look at the source code:

import React, { useState, useCallback } from 'react';

function useModal() {
  const [visible, setVisible] = useState(false);
  const [params, setParams] = useState();

  const open = useCallback((params) => {
    setParams(params);
    setVisible(true);
  }, []);

  const close = useCallback(() => {
    setVisible(false);
    setParams(undefined);
  }, []);

  const props = {
    visible,
    params,
    onClose: close,
  };

  return [props, open, close];
}

Modals manage their own UI implementation independently. The useModal hook intentionally stays decoupled from content rendering, concentrating solely on control flow through three key returns:

props - An object containing the modal's visibility state and parameters
open - A function that accepts parameters and opens the modal
close - A function that closes the modal and clears any parameters

Usage Of useModal

Now let's see how to make use of the useModal hook.

Let's consider a scenario where we have a page(Page) displaying a list of bookmarks(BookMarkItem). Each bookmark in the list has an edit button. When clicking this edit button, it opens a bookmark editing modal(BookMarkEditModal) and passes the corresponding bookmark data into the modal.

First we have a modal's implementation of BookMarkEditModal:

function BookMarkEditModal(props) {
  const { visible, params, onClose } = props;
  return visible ? (
    /* content of modal */
  ) : null;
}

The BookMarkEditModal's visibility is entirely controlled by the visible prop - it only renders when visible is set to true, otherwise it returns nothing.

All necessary data flows into the modal through props: the params provide external data to the modal, while the onClose callback enables the modal to close itself, typically triggered by an internal close button. This pattern elegantly handles the common requirement where modals need to manage their own dismissal while remaining controlled by parent components.

Then let's see how BookMarkEditModal is controlled by useModal hook:

Page:

import React, { useCallback, useState } from 'react';
import BookMarkItem from './BookMarkItem'; // list item
import BookMarkEditModal from './BookMarkEditModal'; // the modal
import useModal from './useModal';

function Page() {
  const [BookMarkEditModalProps, openBookMarkModal, closeBookMarkModal] = useModal();

  const handleItemEdit = useCallback((item) => {
    openBookMarkModal(item)
  }, [openBookMarkModal]);

  return (
    <div id="page">
      {
        list.map(item => (
          <BookMarkItem onEditClick={() => handleItemEdit(item)} />
        ))
      }
        <BookMarkEditModal {...BookMarkEditModalProps} />
    </div>
  )
}

The BookMarkEditModal is rendered as part of the Page's output. From the Page, we gain access to all the necessary control mechanisms through the useModal hook - the BookMarkEditModal receives its visibility state, parameters, and close handler via props. This solution enables the parent Page component to:

Manage the modal's visibility by calling openBookMarkModal or closeBookMarkModal
Pass data to the modal when triggering the openBookMarkModal function
Maintain clean separation of concerns while keeping the modal's behavior predictable

The BookMarkEditModal remains completely unaware of its controlling parent, simply responding to the props it receives, which makes the modal component more reusable and easier to maintain.

Finally

With the useModal hook in place, I no longer need to repeatedly write the same open and close functions for the seven or eight modals that need to be managed across the project. The management of modal control fields (like visible) and parameters no longer gets tangled up with external components either.

The same pattern applies to any reusable logic in your application - abstract it into a custom hook, following the same approach as our useModal implementation.

Hope this little trick helps you too!
Thanks for reading!

From Zero to Chrome Extension: A Practical Guide for React Developers

sheep — Wed, 21 May 2025 05:19:38 +0000

React is one of the most popular front-end frameworks. Using React for Chrome extension development is also recommendable. I'll walk through my implementation using create-react-app to bootstrap the React project, then manually create the additional files required for the Chrome extension.

Create A React Project

I'll bootstrap the project by create-react-app. First install it:

npm install -g create-react-app

then create a project named react-proj:

npx create-react-app react-proj

Customize Webpack Configuration

To gain control over the build process, I customized the Webpack configuration.
install necessary packages:

npm install --save-dev webpack webpack-cli
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev babel-loader style-loader css-loader postcss-loader
npm install --save-dev html-webpack-plugin copy-webpack-plugin

the versions of React & Webpack:

{
  "react": "^19.1.0",
  "react-dom": "^19.1.0",
  ...
  "webpack": "^5.99.8",
  "webpack-cli": "^6.0.1"
}

Then create a new webpack.config.js file in the project's root directory with the following content:

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HTMLPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        index: "./src/index.js"
    },
    mode: "production",
    module: {
        rules: [
            {
              test: /\.js?$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: [
                    '@babel/preset-env',
                    ['@babel/preset-react', {
                      "runtime": "automatic"
                    }]
                  ]
                }
              },
            },
            {
              test: /\.css$/i,
               use: [
                  "style-loader",
                  "css-loader",
                  "postcss-loader"
               ]
            },
        ],
    },
    plugins: [
        new webpack.optimize.LimitChunkCountPlugin({
            maxChunks: 1,
        }),
        new HTMLPlugin({
          title: "React extension",
          filename: 'index.html',
          chunks: ['index'],
          templateContent: `
            <html>
              <head>
                <meta charset="UTF-8">
              </head>
              <body>
                <div id="root"></div>
              </body>
            </html>
          `
        }),
        new CopyPlugin({
          patterns: [
            // files needed by extension
            { from: "icon.png", to: "../icon.png" },
            { from: "manifest.json", to: "../manifest.json" },
            { from: "background.js", to: "../background.js" },
          ],
        })
    ],
    output: {
        path: path.join(__dirname, "dist/my-extension"),
        filename: "index.js",
    },
};

With the customized webpack.config.js, the build process outputs both the final index.js bundle and index.html into the dist/my-extension directory.

Using Webpack's LimitChunkCountPlugin alongside HTMLPlugin ensures all source code and styles get bundled into a single chunk (index.js), and the generated index.html automatically includes references to this consolidated bundle. Later we will see the extension's manifest.json specifies this HTML file (index.html) as the entry point.

At this point, our React project is almost ready. The next step involves adding the necessary extension-specific files to make it operational. Now let's see how these files created.

Create Extension Files

According to my implementation, the extension-specific files are directly placed under the project's root directory. While the webpack.config.js configured these files to be copied from the project's root directory to the dist, you can place it anywhere you want. Just remember to update the corresponding paths in your Webpack configuration accordingly.

The required extension-specific files may vary depending on your chosen implementation approach. For a comprehensive overview of extension files, please refer to my previous post. In this guide, I'll demonstrate the 'New Tab' implementation.

To implement the 'New Tab' approach - open a new browser tab when users click the extension's toolbar icon - we need to add two key files:

manifest.json - The extension's configuration file
background.js - Handles the extension's click event

Create a new file of manifest.json:

{
  "manifest_version": 3,
  "version": "0.0.1",
  "name": "my-extension",
  "description": "extension description here",
  "action": {
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "/background.js"
  }
}

Create a new file of background.js:

chrome.action.onClicked.addListener(function(tab) {
  chrome.tabs.create({'url': chrome.runtime.getURL('my-extension/index.html')}, 
  function(tab) {
    // Tab opened.
  });
});

The generated HTML file of 'my-extension/index.html' is specified as the entry point, it will be loaded by resolving its path through the chrome.runtime.getURL() API.

Finally, add a new file of icon.png under the project's root directory, it will be copied into the extension (configured from webpack.config.js) and serve as your extension's toolbar icon, as specified from manifest.json.

Define build script

Everything is ready. The final step is to set up a build script. Add the following to your React project's package.json:

"scripts": {
    "build-extension": "rm -rf ./dist/* && webpack --config webpack.config.js",
    // other scripts
  }

When you run npm run build-extension, all existing files under the dist directory will be purged, then a fresh bundle with the latest build files will be generated, and extension-specific files will be copied into dist again.

After the exexution of build-extension, the dist directory will become a complete, ready-to-use Chrome extension that immediately loadable for testing or distribution.

dist directory's structure:

dist
├── background.js
├── icon.png
├── manifest.json
└── my-extension
    ├── index.html
    ├── index.js

Finally

The React project contains the extension's core content, which can be displayed in various contexts - whether in a popup, sidebar, or new tab - depending on your implementation approach. The key requirement is ensuring the React components properly adapt to their container dimensions.

If you love working with React, why not try building your own browser extension with it?

I just developed a Chrome extension called Bookmark Dashboard, a bookmark management tool, and I’d love to share it with fellow bookmark enthusiasts!

Thanks for reading!

Chrome Extension Development: Which Implementation Fits Your Needs

sheep — Tue, 20 May 2025 03:11:47 +0000

There are several ways to build a Chrome extension, each with distinct capabilities. which approach would you choose?

Before start

Every Chrome extension starts with a manifest.json file, which serves as the blueprint for the extension. This file defines essential metadata such as the extension’s name, version, permissions, and the scripts or pages it will use.

According to the official announcement from Chrome for Developers, starting from June 2025 with Chrome version 139, only Manifest V3 will be supported, while Manifest V2 will be phased out.

We will explore the whole way based on the Manifest V3 standard. Let's go!

1. Popup

One of the most common ways to interact with an extension is through a popup that appears when the user clicks the extension icon in the toolbar. This popup is a small HTML page defined in the manifest and typically contains a simple interface for quick interactions.

directory structure :

popup
├── icon.png
├── manifest.json
└── popup.html

manifest.json

{
  "manifest_version": 3,
  "version": "0.0.1",
  "name": "my-extension",
  "description": "describe here",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

In manifest.json, in addition to specifying the extension's version, name, and description, it also configures the popup's HTML file (popup.html) through the action.default_popup field and the toolbar icon via action.default_icon.

popup.html

<!DOCTYPE html>
<html>
<body>
  <div style="padding: 16px">
    <h3>My Extension</h3>
  </div>
</body>
</html>

The popup.html forms the foundation of its user interface, it may contain references to supporting CSS and JavaScript files that together enable the extension's functionality and interactivity.

interaction:
Click the extension's toolbar icon, its popup interface will appear.

2. New Tab

Instead of a popup, some extensions may prefer to open a full tab when clicked. This approach is useful when the extension requires more space for complex interactions.

To achieve this, the extension can listen for clicks on the browser action and then programmatically open a new tab. The background.js script handles this logic.

directory structure:

newtab
├── background.js
├── icon.png
├── index.html
└── manifest.json

manifest.json

{
  "manifest_version": 3,
  "version": "0.0.1",
  "name": "my-extension",
  "description": "describe here",
  "action": {
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "/background.js"
  }
}

In manifest.json, background.js is specified by the background.service_worker field.

background.js

chrome.action.onClicked.addListener(function(tab) {
  chrome.tabs.create({'url': chrome.runtime.getURL('index.html')}, 
  function(tab) {
    // Tab opened.
  });
});

In background.js, it listens for click events on the icon and invokes the api of chrome.tabs.create to open a new tab. The new tab's URL is generated using chrome.runtime.getURL('index.html'), which automatically resolves the full extension-relative path for the specified HTML file (index.html).

index.html

<!DOCTYPE html>
<html>
<body>
  <div style="padding: 16px">
    <h3>index page</h3>
  </div>
</body>
</html>

index.html can accommodate significantly more content than the popup window since it functions as a complete standalone page, offering full flexibility for your implementation needs.

interaction:
Click the toolbar icon to open a new tab.

3. Sidebar

Chrome also supports a less common but interesting option: the sidebar (or side panel). This opens a vertical panel next to the current webpage, perfect for tools that need to stay visible while browsing — like document outlines or live translators.

To use a sidebar, the manifest.json needs the "sidePanel" permission, and the extension controls it using the chrome.sidebarAction API. Unlike popups, sidebar stay open until the user closes them, making them great for long-term tasks.

directory structure:

sidebar
├── background.js
├── icon.png
├── manifest.json
└── side_panel.html

manifest.json

{
  "manifest_version": 3,
  "version": "0.0.1",
  "name": "plugin-test",
  "description": "describe here",
  "side_panel": {
    "default_path": "side_panel.html"
  },
  "action": {
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "/background.js"
  },
  "permissions": [
    "sidePanel"
  ]
}

In manifest.json, the sidebar's HTML file (side_panel.html) is declared through the side_panel.default_path field. Additionally, the "sidePanel" permission must be included in the permissions array to enable sidebar functionality.

background.js

chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

Click events will be listened from background.js to control the sidebar.

side_panel.html

<!DOCTYPE html>
<html>
<body>
  <div style="padding: 16px">
    <h3>side panel</h3>
  </div>
</body>
</html>

side_panel.html can be utilized much like a full tab page, with both providing sufficient possibility for feature-rich interfaces.

interaction:
Click the toolbar icon to toggle the sidebar open and closed.

4. Embedding Widget

Some extensions modify web pages by embedding small interactive widgets directly into them. Content scripts can add floating toolbars or translation bubbles by modifying current page’s DOM. These scripts run inside the webpage but can’t use most Chrome extension APIs due to security restrictions.

directory structure:

widget
├── manifest.json
└── widget.js

manifest.json

{
  "manifest_version": 3,
  "version": "0.0.1",
  "name": "my-extension",
  "description": "describe here",
  "content_scripts": [
    {
      "matches": ["https://test.com/*"],
      "js": ["widget.js"]
    }
  ]
}

The content_scripts field in manifest.json defines which scripts get injected into matching web pages, specifying the JavaScript (or CSS) files to inject and the URL patterns that determine when injection occurs.

widget.js

const widget = document.createElement('div');
widget.id = 'extensionWidget';
widget.style.position = 'fixed';
widget.style.top = '15px';
widget.style.right = '160px';
widget.style.padding = '10px';
widget.style.background = 'blue';
widget.style.borderRadius = '8px';
widget.style.zIndex = '9999';

widget.innerHTML = `<h4 style="color: white">Extension Widget</h4>`;
document.body.appendChild(widget);

Once the extension is installed and enabled, widget.js will be injected and executed in all pages matching the https://test.com/* URL pattern, and the "Extension Widget" widget will be displayed on the top-right corner.

This method allows for seamless integration with web pages but requires careful handling of existing page elements to avoid conflicts.

Summary

Each approach has its use cases - popups for quick interactions, new tabs for complex UIs, injected sidebars for persistent tools, and embedded widgets for page integration. The best choice depends on your extension's specific requirements and user experience goals.

Remember to always request the minimal necessary permissions and test your extension thoroughly, as Manifest V3 has stricter security requirements than its predecessor.

I just developed a Chrome extension called Bookmark Dashboard, a bookmark management tool, and I’d love to share it with fellow bookmark enthusiasts!

Thanks for reading!

Getting Started with React-Grid-Layout

sheep — Fri, 16 May 2025 02:53:09 +0000

React-Grid-Layout is a powerful grid layout system that allows you to create responsive grid layouts with ease.

The Dashboard component in the Bookmark Dashboard leveraged React-Grid-Layout, which provides built-in drag-and-drop and resizing support - making it effortless to integrate and use.

Here’s a screenshot of React-Grid-Layout in action within Bookmark Dashboard:

It is obvious that the library enables dynamic grid layouts with seamless dragging and resizing - perfect for building customizable dashboards.

Now let me walk you through how to use React-Grid-Layout - the powerful library behind Bookmark Dashboard's flexible layout system.

Installation

First, install the package via npm or yarn:

npm install react-grid-layout

yarn add react-grid-layout

Basic Usage

Here's a simple example from my own implementation:

import React, { useState, useCallback } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
import GridItem from './GridItem';

import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css'; // dependency of react-grid-layout

const ResponsiveGridLayout = WidthProvider(Responsive);

function MyDashboard() {
  const [layout, updateLayout] = useState([]);

  const handleDragAndResize = useCallback((layout, oldItem, newItem) => {
      updateLayout(layout)
  }, []);

  return (
    <ResponsiveGridLayout
      breakpoints={{ md: 960, sm: 720 }}
      cols={{ md: 12, sm: 12 }}
      rowHeight={40}
      layouts={layout}
      onDragStop={handleDragAndResize}
      onResizeStop={handleDragAndResize}
    >
      {layout.map((item) => (
        <div key={item.i}>
          <GridItem item={item} />
        </div>
      ))}
    </ResponsiveGridLayout>
  )
}

ResponsiveGridLayout‌ refers to the complete grid system that automatically adapts to its container. It is responsive and supports breakpoints. Based on breakpoints, the container's width will be divided into specific number of columns.

Within the grid layout, each grid item is measured by grid unit, which is the foundational building block.

Dimensions of grid unit:

width: container's width / the number of columns
height: Defined by rowHeight

Based on the grid unit, a grid item's dimension calculated:

The actual width of a grid item = grid unit width * w
The actual height of a grid item = grid unit height * h

For more about the width and height of grid item, refer to the document here.

Now, let's examine the data structure of layout property to understand how each grid item is rendered. We will find out where the w and h come from.
Here is some example data of layout:

// layout
[
  {
    "i": "3184",
    "w": 4,
    "h": 3,
    "x": 0,
    "y": 4,
    "moved": false,
    "static": false
  },
  {
    "i": "3232",
    "w": 8,
    "h": 4,
    "x": 0,
    "y": 0,
    "moved": false,
    "static": false
  },
  {
    "i": "3216",
    "w": 4,
    "h": 9,
    "x": 8,
    "y": 0,
    "moved": false,
    "static": false
  },
  {
    "i": "3196",
    "w": 4,
    "h": 5,
    "x": 4,
    "y": 4,
    "moved": false,
    "static": false
  }
]

The i field represents the ID of a grid item, while w, h, x, and y define its dimensions and position. Specifically:

w (width) and h (height) determine the item's size in grid units.
x and y specify the coordinates of the item's top-left corner, positioning it within the grid.

The layout consists of an array of these grid items, each with their own i, w, h, x, and y values, collectively defining how they are rendered on the dashboard.

Whenever a grid item is resized or moved to a new position, either onResizeStop or onDragStop will be triggered, passing the updated layout data to the handler function. Updating this layout data will refresh the entire grid system.

GridItem is a customized component that represents grid items's content. In my implementation, it displays a list of bookmarks, but you can customize it to contain any content you need.

Finally

React-Grid-Layout is a user-friendly yet powerful library. My development experience with this library has been excellent. Its GitHub repository provides comprehensive documentation and live demos, making it highly recommended for developers to have a try.

Thanks for reading !

Forem: sheep

Make Bookmark Dashboard shareable online

Implementation Approach

Dashboard Link API

Dashboard Page

A Note on MongoDB Connection

Wrapping Up

Implementing Concurrency Control in MongoDB

An Example of Concurrency Control

Mongoose Solution with findOneAndUpdate()

Why findOneAndUpdate() Is Not Enough

Using Transactions in Mongoose

Combining findOneAndUpdate() + Transactions

Summary

Closing the Gap: Adding Drag-and-Drop for Bookmarks

Drag and Drop API

Making Bookmarks Draggable

Making Folders Droppable

Improving the UX with Visual Feedback

Solving the onDragLeave Trigger Issue

Wrapping Up

Giving DeepSeek a Spin for Bookmark Organization

Using DeepSeek

How to Get a Website's Favicon

The Initial Approach

The Solution: Google's Public Favicon API

Quick Update: My Bookmark Extension Hits 500 Users! 🎉

How I Built One-Click Bookmark Organization with Gemini AI

One-Click Bookmark Organization

Implementation Approach

Prompt for Tagging Bookmarks

Gemini's Response for Tagging

Prompt for Grouping Tags into Categories

Gemini's Response for Categorization

Sending Requests to Gemini

Observations on Gemini’s Performance

Try It Out!

First Try with Lovart

Stop Repeating Modal Logic! Build a Reusable useModal Hook

The Goal

Implementation of useModal

Usage Of useModal

Finally

From Zero to Chrome Extension: A Practical Guide for React Developers

Create A React Project

Customize Webpack Configuration

Create Extension Files

Define build script

Finally

Chrome Extension Development: Which Implementation Fits Your Needs

Before start

1. Popup

2. New Tab

3. Sidebar

4. Embedding Widget

Summary

Getting Started with React-Grid-Layout

Installation

Basic Usage

Finally

Mongoose Solution with `findOneAndUpdate()`

Why `findOneAndUpdate()` Is Not Enough

Combining `findOneAndUpdate()` + Transactions