🐛 Bug / Enhancement
Area: UI / User Experience — Global
Type: UX Fix
Priority: High — affects every user interaction
📌 Description
FlowForge currently uses native browser alert()
popups for ALL user feedback messages. This is a
significant UX problem because browser alerts:
- Are visually jarring and break the polished UI
- Completely block the page — user cannot interact
with anything until dismissed
- Are unstyled — look nothing like the app theme
- Are considered bad practice in all modern web apps
Every production web app (Notion, Linear, Vercel)
uses a toast/snackbar notification system instead.
🔍 Proof — alert() Found in Source Code
In frontend/app/login/page.tsx:
alert("Supabase is not configured.");
alert("Please enter your email and password.");
if (error) alert(error.message);These blocking popups fire on the most common
user actions — login attempts and errors.
❌ Current Behaviour
- User clicks Login without filling fields
- Browser freezes and shows a native OS popup
- User must click OK before doing anything
- Popup has zero styling — completely out of
place with the rest of the app
✅ Expected Behaviour
- User clicks Login without filling fields
- A styled toast notification slides in
smoothly from the top-right corner
- Shows the error in the app's theme colors
- Auto-dismisses after 3-4 seconds
- User can still interact with the page
💡 Proposed Implementation
New Files to Create
1. frontend/app/context/ToastContext.tsx
- Global
showToast(message, type) function
- Manages toast queue and auto-dismiss timer
- Types:
success | error | info
2. frontend/app/components/Toast.tsx
- Fixed notification at top-right of screen
- Styled with CSS variables matching app theme
- Smooth slide-in / fade-out animation
- Manual close button
Files to Modify
3. frontend/app/layout.tsx
- Wrap app with
<ToastProvider>
4. frontend/app/login/page.tsx
- Replace all
alert() calls with showToast()
📂 Summary of Changes
frontend/app/
├── context/
│ └── ToastContext.tsx ← new
├── components/
│ └── Toast.tsx ← new
├── layout.tsx ← minor edit
└── login/
└── page.tsx ← replace alert()
🖥️ Steps to Reproduce
- Go to
http://localhost:3000/login
- Click "Sign in" without entering anything
- Observe the jarring native browser alert popup
- Compare with the polished homepage design
@Shriii19
I'd like to work on this issue.
Could you please assign it to me?
nsoc26
🐛 Bug / Enhancement
Area: UI / User Experience — Global
Type: UX Fix
Priority: High — affects every user interaction
📌 Description
FlowForge currently uses native browser
alert()popups for ALL user feedback messages. This is a
significant UX problem because browser alerts:
with anything until dismissed
Every production web app (Notion, Linear, Vercel)
uses a toast/snackbar notification system instead.
🔍 Proof — alert() Found in Source Code
In
frontend/app/login/page.tsx:These blocking popups fire on the most common
user actions — login attempts and errors.
❌ Current Behaviour
place with the rest of the app
✅ Expected Behaviour
smoothly from the top-right corner
💡 Proposed Implementation
New Files to Create
1.
frontend/app/context/ToastContext.tsxshowToast(message, type)functionsuccess|error|info2.
frontend/app/components/Toast.tsxFiles to Modify
3.
frontend/app/layout.tsx<ToastProvider>4.
frontend/app/login/page.tsxalert()calls withshowToast()📂 Summary of Changes
frontend/app/
├── context/
│ └── ToastContext.tsx ← new
├── components/
│ └── Toast.tsx ← new
├── layout.tsx ← minor edit
└── login/
└── page.tsx ← replace alert()
🖥️ Steps to Reproduce
http://localhost:3000/login@Shriii19
I'd like to work on this issue.
Could you please assign it to me?
nsoc26