DEV Community: Emily digiplanPro

Building a Shareable Digital Gift: UX and Frontend Lessons from DigiBouquet

Emily digiplanPro — Tue, 26 May 2026 08:26:32 +0000

I recently looked at a small web product called DigiBouquet, and I think it is a useful example of how a simple frontend experience can turn into a complete product.

DigiBouquet is a free digital bouquet maker. The user can choose flowers and greenery, write a personal card, optionally add music, and generate a shareable link.

At first glance, it looks like a lightweight gifting tool.

But from a product and frontend perspective, it is actually a good case study in:

guided creation flows
state-driven UI
shareable content generation
no-signup UX
emotional product design

This post is not a reverse engineering article. It is a product and frontend design analysis based on the public experience of the site.

The product problem

A normal text message is fast, but it can feel emotionally flat.

For example:


text
Happy birthday!
Thank you!
I miss you.
I am sorry.
Get well soon.

These messages are useful, but sometimes they feel too small.

On the other hand, sending a physical gift can be too heavy:

the sender needs an address
delivery takes time
international delivery is complicated
the cost may be higher than intended
the moment may be casual, not formal

DigiBouquet sits between these two options.

It is more personal than a plain text message, but much lighter than a physical gift.

That is a clear product position.

The core user flow

The product flow is simple:

Choose flowers
↓
Add greenery
↓
Write a message card
↓
Add music or skip it
↓
Generate a share link
↓
Send the bouquet

This is a good example of reducing user decisions.

Instead of giving the user a blank canvas, DigiBouquet provides a guided path. The user does not need to understand design tools. They only need to make a few emotional choices.

That matters because this is not a productivity tool. It is an emotional tool.

When someone wants to send a birthday message, apology, thank-you note, or long-distance love note, they should not have to fight with the interface.

Modeling the state

A digital bouquet builder can be represented with a small state object.

For example:

type BouquetDraft = {
  flowers: Flower[];
  greenery: Greenery[];
  card: {
    recipientName: string;
    message: string;
    senderName: string;
    style: string;
  };
  music?: {
    type: "romantic" | "calm" | "cheerful" | "custom";
    url?: string;
  };
  theme: string;
};

The interesting part is that the state is not technically complex.

The complexity is emotional.

Each field changes how the final gift feels.

flowers  → emotional meaning
card     → personal message
music    → mood
theme    → atmosphere
link     → delivery mechanism

That is what makes the product more than a simple form.

UI modules

A frontend implementation could be divided into these modules:

FlowerPicker
GreeneryPicker
CardEditor
MusicSelector
ThemeSelector
BouquetPreview
ShareLinkGenerator

Each module has a clear responsibility.

FlowerPicker

The flower picker is not just an image selector.

In DigiBouquet, flowers are tied to meaning. Roses feel romantic. Sunflowers feel bright and encouraging. Lilies feel calm and sincere. Forget-me-nots naturally fit long-distance messages.

A good UI should help the user understand these meanings.

For example:

type Flower = {
  id: string;
  name: string;
  imageUrl: string;
  meaning: string;
  recommendedFor: string[];
};

Example data:

const flowers: Flower[] = [
  {
    id: "rose",
    name: "Rose",
    imageUrl: "/flowers/rose.png",
    meaning: "Love, romance, admiration",
    recommendedFor: ["romantic", "anniversary", "love-note"],
  },
  {
    id: "sunflower",
    name: "Sunflower",
    imageUrl: "/flowers/sunflower.png",
    meaning: "Joy, optimism, encouragement",
    recommendedFor: ["birthday", "thank-you", "get-well"],
  },
];

This makes the picker more useful than a grid of pretty images.

The preview is the product

For a tool like this, preview is not optional.

The recipient will eventually open a link and see the bouquet. The sender needs to know what that experience will look like.

So the preview should update immediately when the user changes something.

function BouquetBuilder() {
  const [draft, setDraft] = useState<BouquetDraft>(initialDraft);

  return (
    <div className="builder">
      <div className="controls">
        <FlowerPicker draft={draft} setDraft={setDraft} />
        <CardEditor draft={draft} setDraft={setDraft} />
        <MusicSelector draft={draft} setDraft={setDraft} />
        <ThemeSelector draft={draft} setDraft={setDraft} />
      </div>

      <BouquetPreview draft={draft} />
    </div>
  );
}

This pattern is simple, but it is powerful.

Every input should make the final bouquet feel more complete.

Share link design

The share link is one of the most important features.

There are two common ways to implement it.

Option 1: Store the bouquet server-side
POST /api/bouquets
↓
Create bouquet record
↓
Return bouquetId
↓
Share /bouquet/:id

Example:

async function createBouquet(draft: BouquetDraft) {
  const response = await fetch("/api/bouquets", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(draft),
  });

  return response.json();
}

Pros:

short URLs
easier analytics
easier future editing
better for public previews
better for QR code sharing

Cons:

requires backend storage
requires abuse prevention
requires privacy and deletion policies
Option 2: Encode data in the URL
/bouquet?data=encodedPayload

Example:

function encodeBouquet(draft: BouquetDraft) {
  return btoa(JSON.stringify(draft));
}

function decodeBouquet(data: string) {
  return JSON.parse(atob(data)) as BouquetDraft;
}

Pros:

no database required
fast to prototype
easy for small projects

Cons:

URLs can become very long
private messages may be exposed in the URL
harder to update after sharing
worse for analytics and moderation

For a real emotional gifting product, I would usually prefer the server-side approach because users may write personal messages.

No-signup UX

One of the smart decisions in DigiBouquet is that the creation flow does not require signup.

That matters a lot.

For emotional micro-tools, user intent is often immediate:

I want to send this now.
I do not want to create an account.
I do not want to install an app.
I do not want to go through a checkout flow.

If a product asks for signup too early, it may lose the user before the emotional moment becomes action.

A good approach is:

Let users create first.
Let users share first.
Ask for an account only if they want history, editing, or saved templates.

This keeps the first experience lightweight.

Privacy considerations

A digital bouquet may contain personal messages.

That means privacy matters, even if the product feels playful.

A few things to consider:

Do not make bouquet links guessable
Use random IDs instead of sequential IDs
Avoid exposing private message content in plain URL parameters
Provide a way to delete or expire a bouquet
Consider rate limits to prevent spam
Avoid indexing personal bouquet pages by search engines

For example, a share ID should not look like this:

/bouquet/12345

A safer pattern would be closer to:

/bouquet/ckx8f9a2q7p4v1m0

The product may be cute, but the data can still be personal.

Open Graph previews

Because the product depends on sharing, Open Graph metadata is important.

When a bouquet link is shared on social platforms or messaging apps, the preview should feel attractive.

Example:

<meta property="og:title" content="You received a DigiBouquet" />
<meta property="og:description" content="Open this digital bouquet and read your personal card." />
<meta property="og:image" content="https://example.com/og/bouquet-preview.png" />
<meta property="og:type" content="website" />

For a product like this, the share preview is part of the experience.

A boring preview reduces the feeling of receiving a gift.

Accessibility details

A visual gifting tool should still care about accessibility.

For example:

flower images should have useful alt text
color should not be the only way to express meaning
card text should have good contrast
music should be optional
animation should respect reduced motion settings
the final bouquet should be readable on mobile screens

A simple improvement:

<img
  src="/flowers/sunflower.png"
  alt="Sunflower, representing joy and encouragement"
/>

This makes the flower meaningful for users who rely on assistive technologies.

Product lessons

DigiBouquet is a small product, but it demonstrates several useful lessons.

1. A small product can have a clear emotional job

The job is not “create graphics.”

The job is:

Help me send a warmer message online.

That is a stronger product idea.

2. Constraints can improve the experience

The product does not need a full design editor.

It only needs the right choices:

flowers
greenery
card
music
theme
share link

Too much freedom would make the tool harder to use.

3. Sharing is not an afterthought

The share link is the delivery mechanism.

For a digital gift, sharing is part of the core product, not a secondary feature.

4. The recipient experience matters too

Many builder tools focus only on the creator.

But DigiBouquet has two users:

Sender → creates the bouquet
Recipient → opens and experiences the bouquet

Both sides need to feel good.

Final thoughts

DigiBouquet is a simple digital bouquet maker, but it is a useful example of how a small web app can combine frontend state, UX constraints, emotional design, and shareable content.

The technical implementation does not need to be complicated.

The important part is designing the flow around the user’s real intent:

I want to send something personal, quickly.

That is a strong foundation for a small web product.

If you are building a lightweight web tool, DigiBouquet is a good reminder that a product does not need many features to feel complete.

It needs:

a clear use case
a simple flow
instant feedback
easy sharing
the right emotional tone

You can try the product here:

https://digibouquet.cc/

Building Toon Tone: A Browser-Based Color Matching Game with HSB Sliders

Emily digiplanPro — Sat, 16 May 2026 02:27:40 +0000

Building Toon Tone: A Browser-Based Color Matching Game with HSB Sliders

I recently built a small browser game called Toon Tone.

You can try it here:

https://toontone.work/

Toon Tone is a simple color matching game. The player sees a target color and tries to recreate it by adjusting three sliders:

Hue
Saturation
Brightness

After submitting a guess, the game calculates how close the selected color is to the target color and gives the player a score. Each game has 10 rounds.

The concept is simple, but building it was a good reminder that even small browser games require a lot of product and implementation decisions.

The Original Idea

The first idea was more visual.

I wanted Toon Tone to be a cartoon-style color memory game. A player would see a cute character, remember the color of one part of the character, such as a hoodie, hat, or accessory, and then recreate that color with sliders.

For example:

Remember the hoodie color.

Now match it from memory.

That sounded more unique than a normal color tool, but the asset workflow became complicated very quickly.

To make a character-based version work, I needed layered image assets:

A base character image
A mask for the color-changing area
A shading or highlight layer
Perfect alignment between all layers

If the mask and shading layers were even slightly misaligned, the result looked broken. SVG was easier to control, but the generated characters often looked too rough. PNG illustrations looked better, but separating and aligning layers took too much time.

So I decided to simplify the first version.

Instead of starting with characters, I built a pure color card version first.

Why Start With Color Cards?

The main goal of the MVP was to test the core game loop:

Show a target color
Let the user adjust the sliders
Preview the selected color in real time
Submit the guess
Calculate a score
Move to the next round

This version removed the hardest visual production problems and helped me focus on the actual gameplay.

The questions I wanted to answer were:

Is matching colors fun?
Are HSB sliders intuitive?
Is 10 rounds the right length?
Does scoring create replay value?
Does the game work well on mobile?

Those questions felt more important than solving character asset layers too early.

Why HSB Instead of RGB?

I chose HSB controls because they feel more natural for a casual color matching game.

RGB is useful for developers, but it can feel technical for general users. If you ask a player to adjust red, green, and blue values directly, the experience quickly becomes less intuitive.

HSB is easier to understand:

Hue changes the color family.
Saturation changes how intense or muted the color is.
Brightness changes how light or dark the color appears.

This makes the game easier to play without requiring color theory knowledge.

HSB to RGB Conversion

The sliders control HSB values, but the browser needs RGB or HEX values to display colors.

Here is a simplified version of the conversion logic:


ts
type HSB = {
  h: number; // 0 - 360
  s: number; // 0 - 100
  b: number; // 0 - 100
};

type RGB = {
  r: number;
  g: number;
  b: number;
};

function hsbToRgb({ h, s, b }: HSB): RGB {
  s /= 100;
  b /= 100;

  const k = (n: number) => (n + h / 60) % 6;
  const f = (n: number) =>
    b - b * s * Math.max(Math.min(k(n), 4 - k(n), 1), 0);

  return {
    r: Math.round(255 * f(5)),
    g: Math.round(255 * f(3)),
    b: Math.round(255 * f(1)),
  };
}

Building a Browser-Based Square Face Avatar Generator with HTML5 Canvas

Emily digiplanPro — Sat, 09 May 2026 09:39:30 +0000

I recently built squareface-generator.org, a free browser-based avatar maker for creating cute square face icons, PFP avatars, and simple profile images.

The idea was simple: bring back the fun of classic square face avatar generators, but rebuild the experience for the modern web.

A lot of older avatar tools were Flash-based, slow, difficult to use on mobile, or no longer accessible in today’s browsers. At the same time, people still need quick, lightweight profile pictures for Discord, TikTok, YouTube, forums, gaming profiles, and online communities.

So I wanted to create something that was:

Free to use
Fast in the browser
No Flash
No installation
Mobile-friendly
Easy to export as PNG
Simple enough for non-designers

The result is Square Face Generator, a small web app that lets users customize square face avatars using original Canvas-drawn parts.

Why HTML5 Canvas?

For this project, HTML5 Canvas was a natural choice.

The avatar is built from multiple visual layers: face shape, hair, eyes, mouth, clothes, accessories, and background. Each part can be drawn or positioned on the canvas, then exported as a final PNG image.

Canvas made it possible to keep the experience lightweight and flexible without requiring a backend image-rendering service for every avatar.

A simplified drawing flow looks like this:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

function drawAvatar(parts) {
ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBackground(ctx, parts.background);
drawFace(ctx, parts.face);
drawHair(ctx, parts.hair);
drawEyes(ctx, parts.eyes);
drawMouth(ctx, parts.mouth);
drawAccessories(ctx, parts.accessories);
}

function exportPNG() {
const imageUrl = canvas.toDataURL("image/png");
return imageUrl;
}

The real implementation has more structure, but the core concept is still simple: render each avatar part in order, then allow the user to export the final canvas as a PNG.

Layering Matters

One of the biggest small details in an avatar generator is layer order.

For example:

Background
Face
Ears
Hair behind face
Eyes
Mouth
Clothes
Hair in front
Accessories

If the order is wrong, the avatar can look broken. A hat might appear behind the hair, glasses might be hidden by the face layer, or clothing might overlap in strange ways.

So I had to treat the avatar almost like a mini rendering engine. Each part needed a clear category, position, and z-index.

Random Generation

One of the most useful features is the random avatar button.

Many users do not want to customize every single detail from scratch. They just want inspiration quickly. Random generation solves that by creating a complete avatar instantly.

The basic logic is straightforward:

function getRandomItem(items) {
return items[Math.floor(Math.random() * items.length)];
}

function generateRandomAvatar(config) {
return {
face: getRandomItem(config.faces),
hair: getRandomItem(config.hair),
eyes: getRandomItem(config.eyes),
mouth: getRandomItem(config.mouth),
clothes: getRandomItem(config.clothes),
background: getRandomItem(config.backgrounds),
};
}

But the tricky part is making random results look good.

Not every combination works well. Some colors clash. Some accessories only fit certain hairstyles. Some facial parts need spacing rules.

So the generator needs a balance between randomness and constraints.

PNG Export Sizes

Another feature I added was multiple PNG export sizes.

Users may need different image sizes depending on where they want to use the avatar:

256px for small icons
512px for most profile pictures
1024px for higher-quality profile images

This makes the tool more useful across different platforms without requiring users to resize the image manually.

Shareable Avatar Links

A useful feature for avatar tools is the ability to share a generated result.

Instead of only downloading the image, users can also create a shareable link. This makes it easier to save, revisit, or send an avatar to someone else.

The general idea is to serialize the avatar configuration into a URL-friendly format:

const avatarState = {
face: "face_01",
hair: "hair_05",
eyes: "eyes_03",
mouth: "mouth_02",
background: "blue",
};

const encoded = encodeURIComponent(JSON.stringify(avatarState));
const shareUrl = ${location.origin}/?avatar=${encoded};

Then the app can read the URL parameter and rebuild the avatar from the saved configuration.

Designing for Non-Designers

The biggest product lesson from this project was that avatar generators should feel playful, not complicated.

It is tempting to add too many controls: sliders, advanced color pickers, layer editing, manual transforms, and detailed positioning. But most users just want a cute profile image quickly.

So I focused on keeping the interface simple:

Click to change parts
Use random generation for inspiration
Export PNG quickly
Share the result easily

The goal was not to build a professional illustration tool. The goal was to make avatar creation feel fast and fun.

Why I Built It

The inspiration came from older square face icon tools that many people used years ago. Those tools had a very specific charm: simple shapes, cute expressions, and a quick customization experience.

But many of them depended on outdated technology or were not built for modern browsers.

I wanted to rebuild that nostalgic experience using modern web technology, original artwork, and a cleaner user experience.

What I Learned

Building a simple avatar generator is more complex than it looks.

Some of the challenges included:

Managing canvas layers
Keeping generated avatars visually consistent
Supporting multiple export sizes
Making the app work well on mobile
Creating shareable avatar states
Keeping the UI simple enough for casual users

It reminded me that small tools can still involve interesting technical and design decisions.

Final Thoughts

Square Face Generator started as a small browser experiment, but it became a useful reminder of why I enjoy building web tools.

A good web app does not always need to be complex. Sometimes the best tools are simple, fast, and focused on one specific user need.

In this case, the need is simple:

Create a cute square face avatar, export it as a PNG, and use it anywhere online.

You can try it here:
https://squareface-generator.org/

I would love to hear feedback from other developers, especially around Canvas rendering, avatar state sharing, and improving random generation quality.

How I Built a Simple AI Tool to Remove Text and Backgrounds from Images

Emily digiplanPro — Sun, 03 May 2026 06:20:01 +0000

Images are everywhere: product pages, social posts, landing pages, screenshots, thumbnails, documents, presentations, and marketing assets.

But there is one small problem that comes up again and again:

You have an image that is almost perfect, except it contains unwanted text, a watermark, a messy background, a logo, a caption, or some object you want to remove.

For designers, this is easy enough with professional tools. But for many creators, ecommerce sellers, marketers, students, and everyday users, opening Photoshop just to clean up one image feels like too much work.

That is the problem I wanted to solve with AI Remove Text From Image.

What the tool does

AI Remove Text From Image is a browser-based image cleanup tool that helps users remove unwanted elements from images with AI.

The main features include:

Remove text from images
Remove watermarks
Remove captions and subtitles
Remove logos and labels
Remove unwanted objects
Remove image backgrounds
Use manual brush masking for more control
Preview and download processed images directly in the browser

The goal is simple: upload an image, select the area you want to clean, let AI process it, and download the result.

No Photoshop. No complex editing workflow. No design experience required.

Why I built it

I noticed that a lot of image editing tools are either too broad or too complicated.

Many tools try to become full design platforms. That can be powerful, but it also creates friction for users who only want to do one quick task.

For example:

An ecommerce seller wants to remove a messy background from a product photo
A creator wants to remove captions from a screenshot
A marketer wants to clean a poster or ad image
A student wants to remove text from a scanned image
A designer wants to quickly extract an object for reuse
A real estate agent wants to clean up interior visuals
A social media manager wants to prepare cleaner thumbnails

These users do not always need a full editing suite. They just need a fast, focused image cleanup tool.

That is why I decided to build a tool around a very specific workflow.

The workflow

The core workflow is designed to be as simple as possible:

Upload an image
Select or brush over the area to remove
Let AI generate a clean result
Preview the processed image
Download the final image

For background removal, the tool can automatically detect the subject and remove the background, which is useful for product photos, portraits, pet photos, logos, design assets, and ecommerce images.

For text or object removal, users can manually mask the area they want to remove, which gives them more control over the result.

Example use cases

Here are some common use cases the tool is designed for.

Product photos

Ecommerce sellers often need clean product images for online stores, ads, and marketplaces.

A product photo might be taken on a table, in a room, or against a distracting background. With background removal, the product can be isolated and used on a white or transparent background.

This is useful for Shopify stores, Amazon listings, Etsy products, and independent ecommerce websites.

Portraits

Users can remove distracting backgrounds from personal photos and create cleaner profile images.

This can be useful for LinkedIn, resumes, personal websites, creator profiles, and social media accounts.

Social media content

Creators often need to reuse people, products, pets, or objects in thumbnails, posts, banners, and short-form video covers.

Removing the background makes it easier to place the subject on a custom design, gradient, poster, or branded visual.

Logos and objects

Sometimes you have a logo, icon, sticker, or small object inside an image, but you need it as a clean transparent asset.

Background removal makes it easier to reuse that visual in slides, websites, videos, posters, and marketing materials.

Text removal

There are many cases where users need to remove text from an image:

Captions on screenshots
Text overlays on posters
Labels on product images
Handwriting on photos
Unwanted subtitles
Old design text that needs to be replaced

Instead of manually cloning pixels, users can brush over the text and let AI reconstruct the background.

Design decisions

One of the main design decisions was to keep the interface focused.

I did not want users to feel like they had to learn another complex design tool.

So the product focuses on a few core actions:

Upload
Mask
Remove
Preview
Download

Another decision was to support free 720p previews and downloads, so users can test the result before deciding whether they need original-quality exports.

This makes the tool easier to try, especially for users who are not sure whether AI cleanup will work well for their image.

What I learned while building it

One thing I learned is that image cleanup is not just a technical feature. It is also a user experience problem.

The AI result matters, of course. But the workflow around the result matters just as much.

Users need to understand:

What type of image works best
Whether they should use automatic background removal or manual masking
How to select the right area
What quality they can preview
When they should export the original image

A good AI product is not only about the model. It is also about making the model easy to use for people who are not technical.

Why this matters

AI image editing is becoming more accessible, but many tools are still too complex for quick everyday use.

I think there is value in smaller, focused tools that solve one practical problem well.

AI Remove Text From Image is built around that idea.

Instead of trying to replace every design tool, it focuses on helping users quickly clean up images in the browser.

Try it

You can try the tool here:

https://airemovetextfromimage.com

If you specifically want to remove image backgrounds, you can use:

https://airemovetextfromimage.com/remove-background

I would love to hear feedback from other builders, creators, designers, and developers.

What would you improve in an AI image cleanup workflow?