Submission for the DEV Weekend Challenge: Community

Lukman Isiaka — Mon, 02 Mar 2026 22:15:17 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

The web development community. We pour hours into building apps, but understanding why users get frustrated remains one of the hardest problems. Enterprise tools like FullStory and Hotjar are expensive and privacy-heavy. Indie developers, small teams, and open-source maintainers are left guessing and reading through support tickets or hoping users speak up.

Reev exists because every web developer deserves to know when their UI is failing users, without needing a six-figure analytics budget.

What I Built

Reev is a lightweight, open-source UX frustration detector that automatically catches real user frustration on your website and asks them what went wrong -right in the moment.

Drop a single <script> tag on your site and Reev detects 4 types of UX frustration in real time:

Rage Clicks - 3+ rapid clicks on the same element within 1.5 seconds
Dead Links - same-origin links that return errors or timeout
Broken Images - images that fail to load, including dynamically added ones
Form Frustration - users clearing and retyping the same form field repeatedly
Flow Suggestions - guide frustrated users to the right page with navigation hints, created manually, auto-discovered from pageview data, or imported from your sitemap

When frustration is detected, an inline popover appears next to the problem element asking the user "What went wrong?". Their feedback is sent to your dashboard with full context -browser, device, the element they interacted with, and recent errors.

The dashboard then groups repeated feedback into patterns -so if 5 users report the same dead link on your pricing page, you see one actionable pattern instead of 5 separate reports.

The tracker is ~7KB, zero dependencies, and works on any website or framework.

Demo

Live app: reev.kreativekorna.com

Quick setup - add to any site in 60 seconds:

<script>
!function(c, s) {
  window.ReevConfig = c;
  s = document.createElement("script");
  s.src = "https://unpkg.com/reev.js/dist/reev.js";
  document.head.appendChild(s);
}({
  projectId: "your-project-id",
  apiUrl: "https://reev.kreativekorna.com"
})
</script>

Code

codellyson / reev

Reev

UX is hard. Reev makes it simple.

Reev is a lightweight, open-source UX frustration detector with real-time feedback collection. Install a script on your site, and Reev catches frustration as it happens - rage clicks, dead links, broken images, form frustration. When issues occur, users can provide instant feedback via inline popovers. The dashboard groups repeated feedback into patterns so you can fix problems fast.

How it works

1. Install   → Paste a <script> tag on your site
2. Detect    → Reev watches for rage clicks, dead links, broken images, and form frustration
3. Collect   → Users submit feedback when issues are detected (optional inline popovers)
4. Fix       → Reports and patterns tell you what's wrong, what users said, and where

What Reev detects

Issue	How it works	Severity
Rage clicks	3+ clicks on the same element within 1.5 seconds	Medium
Dead links	Same-origin links that return errors or

…

View on GitHub

How I Built It

Tracker library (reevjs/):

Vanilla TypeScript compiled to a single IIFE bundle via esbuild
Zero dependencies - uses native browser APIs (MutationObserver, PerformanceObserver)
Configured via window.ReevConfig -supports toggling each detector, popover theme (dark/light), cooldowns, and debug mode
Self-initializes on DOMContentLoaded, no method calls needed

Dashboard & API (app/):

Next.js 16 (App Router) with React 18 and TypeScript
PostgreSQL (Neon-compatible) for event and feedback storage
NextAuth.js for authentication
TanStack Query for data fetching
Tailwind CSS + Framer Motion for the UI

How detection works:

The tracker detects frustration client-side and shows a feedback popover
User feedback is sent to POST /api/events and stored in a dedicated feedback table
When 2+ feedback reports share the same issue type and page URL, a pattern is automatically created
The dashboard shows individual reports (/reports) and recurring patterns (/patterns), filterable by status and issue type
A separate /flows page lets you manage navigation suggestions -create them manually, auto-discover common page transitions from pageview data, or import from a sitemap
Flow widget is configurable per-project: display mode (on frustration or always), position, theme, and max suggestions

Key architectural decisions:

JSONB storage for flexible event data -no schema migrations needed when adding new event types
Ring buffers for context capture (last 5 errors, last 10 breadcrumbs) lightweight memory footprint
Rate limiting (60 req/min per IP, max 50 events per batch, 512KB max payload) to prevent abuse
Privacy-first: no session replay, no PII collection just enough context to fix the problem.

Submitted By: codellyson

How to parse HTML to React

Lukman Isiaka — Thu, 19 May 2022 17:24:07 +0000

Recently, I have been working on a project, one of the requirement was that I should implement a Rich Text Editor and render the text firstly in a preview card as truncated text as shown in the image below

Secondly, The main view, is where users get to read the content in detail. This was not a problem in particular as React provides us with a built-in solution to render raw HTML. dangerouslySetInnerHTML.

Problem

React built-in solution to my problem dangerouslySetInnerHTML works same way like vanilla JavaScript innerHTML. this is a risky solution because:

This solution by default exposes you to Cross Site Scripting (XSS), to be safe you'd have to use it alongside another package dom-purify to sanitize your HTML input.
The text rendered by this solution cannot be truncated because the way dangerouslySetInnerHTML works is by passing it as an attribute to a JSX element



<div dangerouslySetInnerHTML={{
__html: //htmlInput
}}> </div>

and one of my project requirement is to have a preview of the content.

Solution

After doing so many research, I bumped into a package called html-to-react it's available on NPM, actively maintained and about 577k weekly downloads perfect!

The best thing about this package is that it solves the two problems I listed above.

I can now do



import HtmlToReactParser from "html-to-react";
import ReactTruncate from "react-truncated-component";
// other imports
function Wiki({body}) {
// other functions
return (
   <div className="wiki-card"> 
     <ReactTruncate numberOfLines={3} lineHeight={23}. 
       ellipsis="..." >
            <p className="w-hero__desc">. 
             {HtmlToReactParser.Parser().parse(
              body)}
            </p>
     </ReactTruncate>
   </div>
)
}

Using the package this way, you will be able to truncate you r text anyhow you want and also render your HTML content nice and clean.

Peace ✌🏽.

Forem: Lukman Isiaka