# How I added analytics and confetti to my loyalty app?

 Hey folks!

Back again with another update on **Fidely**, the loyalty app I’ve been building in my spare time as part of *The 10-Minute Company* series. I’ve been making steady progress, and I’m super excited to share what’s new—because this time, there’s more *polish*, more *insight*, and a better *experience*.

If this is your first time hearing about Fidely, check out the [first post in the series](https://pul.hashnode.dev/1-fidely-loyalty-app-side-project) to catch up on what it’s all about.

---

## 📊 Home Dashboard Gets Analytics

One of the key selling points of Fidely is helping small business owners **understand their customers** better. To make this real, I’ve added a basic **analytics section** on the home dashboard.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1746437147447/2c5c0315-35d7-4aa3-81e1-6db1486c009f.png align="center")

This gives the shop owner some quick insights about:

- How many cards are active  
- Which campaigns are running  
- Key stats from recent activity  

The current dashboard acts as a preview—eventually, these metrics will be expanded into a dedicated **analytics section** with proper filters, charts, and detailed views. But it’s a good first step!

---

## ⚡ A Faster Operator Dashboard

Let’s talk about **speed**. The Operator Dashboard now feels snappier, smarter, and more helpful.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1746437338600/de931ef0-9c6e-4498-8ca6-36398fb5a410.png align="center")

The new flow is designed for real-world usage:  
Operators are often juggling customers, so every click matters.

Here’s how it works:

- Search for a card quickly  
- Get instant results under the search bar  
- If there’s a single match, the app auto-selects the card and shows this view:

  ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1746437573283/8da8011f-79c1-44cf-b1df-dbf9a9d0450b.png align="center")

From here the operator can:

✅ View card details  
✅ Join a campaign if the card hasn’t yet  
✅ Assign points/stamps immediately  
✅ See campaign progress  

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1746437740973/b740fb8c-a288-4b48-ac95-98c88921c567.png align="center")

Once points are added, the app brings the operator back to the search view—so they can help the next customer quickly.

But wait—there’s more!

If the customer **unlocks a reward**, the app throws a **confetti animation** (yes, for real 😄), and the workflow pauses, giving the operator time to ask if the customer wants to redeem it.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1746437881955/981aa844-06aa-4515-889e-b494a95f4c6b.png align="center")

It’s small stuff, but it matters for **UX and flow**.

---

## 🐛 Bug Fixing Time

I also spent time cleaning up annoying bugs that were dragging the user experience down.

From navigation glitches to weird reloads—many small fixes that, together, make the app feel smoother and more consistent.

---

## 💳 A New Card Layout

Inspired by credit cards, I gave the **customer card UI** a little makeover.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1746437943682/5ff51f7d-4a4c-447f-9d91-b05589a5d012.png align="center")

Not sure if this will be the final look, but it’s a fun experiment—and it makes cards feel more "real".

---

## 🔔 Global Notification System

Last but not least: I’ve added a **toast notification system**.  
Whenever a user takes an action—like assigning points, joining a campaign, or redeeming a reward—they’ll now get **instant visual feedback**.

It’s a small feature, but it adds a lot of clarity.

---

## What’s Next?

- More detailed analytics  
- Campaign creation wizard  
- Customer view and reward redemption flow  
- Localization (yes, Fidely is still mostly in Italian 😅)

---

That’s it for now. As always, I’m building Fidely a few evenings at a time—progress is slow but steady.  
If you're working on a microSaaS or playing around with loyalty mechanics, I’d love to hear from you!

Let’s keep building!