DEV Community: geekecia

Show Dev: SwiftPoker - Real-Time Planning Poker with Zero Friction & No Signups

geekecia — Wed, 14 Oct 2026 12:00:00 +0000

Why another Planning Poker tool?

Sprint estimations should be quick, dynamic, and focused on requirements—not on managing passwords or waiting for everyone to create an account on a third-party website.

That's why I created SwiftPoker (https://www.swiftpoker.pro).

What makes it different:

Instant Access for Developers: Team members join directly using a room link or QR code with zero signup required.
Real-Time Architecture: Real-time synchronization keeps cards, timers, and stories perfectly in sync across desktop and mobile browsers.
Flexible Agile Metrics: Fibonacci, Hours, T-Shirt sizes, and MoSCoW prioritization.
Automated Analytics: Immediate calculation of average, mode, and consensus rate right after reveal.
Installable PWA: Works seamlessly on mobile and desktop without app store installs.

Built with:

Next.js 16 (App Router)
React 19 & TypeScript
Tailwind CSS
Real-time Engine
Progressive Web App (PWA)

Check it out live: https://www.swiftpoker.pro

I’d love to hear your thoughts, feedback, and what agile features you'd like to see next!

Building a Zero-Friction, Real-Time Planning Poker App with Next.js and WebSockets

geekecia — Wed, 14 Oct 2026 10:07:28 +0000

Every sprint refinement meeting seems to face the same unnecessary friction:

"Wait, which planning poker tool are we using today?"
"I forgot my password, let me reset it..."
"Can you invite me to the organization first?"
"Wait, my screen hasn't updated yet—did everyone vote?"

After watching our engineering team lose 10-15 minutes of productive discussion every single week just getting everyone into the same voting room, I decided to build SwiftPoker.

Our core design principle was simple: Zero friction, sub-100ms real-time sync, and no mandatory logins for voters.

Here is a breakdown of how we architected the system using Next.js (App Router) and WebSockets.

1. The Real-Time Problem: WebSockets over HTTP Polling

In a live planning session, instant feedback is everything. When the facilitator clicks "Reveal Cards", every participant's screen must flip in unison.

Why not polling?

Polling at 500ms intervals generates unnecessary HTTP overhead and creates a noticeable, clunky lag when voters are on mobile devices or slower connections.

The WebSocket Solution

We used Pusher Channels for real-time pub/sub. Each planning poker room operates on a dedicated channel:

// Client-side subscription inside room hook
const channel = pusherClient.subscribe(`room-${roomId}`);

channel.bind('player-voted', (data: { userId: string }) => {
  markPlayerVoted(data.userId);
});

channel.bind('reveal-votes', (results: RoundResults) => {
  flipCardsAndShowMetrics(results);
});

By decoupling state broadcast from page reloads, screen sync is instantaneous with imperceptible latency.

2. Preventing "Client-Side Cheating" with Blind Voting

A critical aspect of planning poker is unbiased estimation. If an engineer sees that the Tech Lead voted an 8 or a 13 before casting their own vote, an anchoring bias occurs.

If we broadcasted the vote value over WebSockets immediately upon voting, any developer could open DevTools > Network > WS and inspect incoming payloads.

How we solved it:

When a player selects a card, the client sends a POST request to the backend with their encrypted/hashed vote.
The WebSocket channel broadcasts a minimalist payload:

   { "userId": "usr_abc123", "hasVoted": true }

The actual values remain secure on the server until the facilitator triggers the reveal-votes endpoint.
Only upon reveal does the server compile the results, calculate metrics (consensus percentage, mode, average), and broadcast the full payload to all clients.

3. Eliminating Layout Shift in Next.js

Our landing page features an interactive room manager allowing users to either Create a Room (with custom presets: Fibonacci, T-Shirt, Hours) or Join an Existing Room.

Initially, conditional unmounting in React caused slight Cumulative Layout Shift (CLS):

// ❌ Avoid: Causes layout flicker and height recalculations
{activeTab === 'create' ? <CreateRoomForm /> : <JoinRoomForm />}

We refactored this to keep both views mounted, toggling visibility purely through CSS utility classes with synchronized element heights:

// ✅ Smooth: No DOM thrashing or height shifts
<div className={activeTab === 'create' ? 'block' : 'hidden'}>
  <CreateRoomForm />
</div>
<div className={activeTab === 'join' ? 'block' : 'hidden'}>
  <JoinRoomForm />
</div>

4. Zero Friction for the Team

The most important product feature isn't code—it's UX empathy:

No registration required for voters: The room creator shares a link or displays a QR code.
Teammates open the link on desktop or mobile, enter their name, and immediately see their voting deck.
Spectator mode toggle: Observers (Scrum Masters, Product Managers, or guests) can join without skewing the team's consensus statistics.

Tech Stack Summary

Frontend / Backend: Next.js 14+ (App Router, Server Actions)
Styling: Tailwind CSS & Lucide Icons
Real-Time Engine: WebSockets via Pusher
Hosting: Vercel

If you want to test it with your agile team during your next refinement, it is live and free to use:
👉 https://www.swiftpoker.pro

I would love to hear feedback on the architecture and overall UX from fellow developers! What essential features does your team rely on during sprint planning?

Show Dev: Why I built a 100+ developer utilities suite that runs strictly in the browser

geekecia — Wed, 14 Oct 2026 00:43:12 +0000

We’ve all been there: you need to format a quick JSON with an API token, validate a test card for your checkout, or compare two code snippets. You Google it, click on a random portal, and immediately get hit with cookie banners, 10 flashing ads, and the uncomfortable feeling that your input is being logged by a remote server.

To solve this for myself and the developer community, I built TipTools (https://tiptools.com.br).

Why Client-Side Only?

Most utility sites could be entirely static, yet they process your data on backend endpoints. On TipTools, we made an architectural commitment:

Your data never leaves your machine: Calculations, regex parsing, Luhn algorithms, and formatting run exclusively inside your browser via client-side JavaScript and native Web APIs (like Web Crypto).
Instant Performance: Since there are zero server roundtrips, results render in the very millisecond you type or paste.
Command Palette (Ctrl + K / Cmd + K): You don't have to navigate through endless menus. Just hit the shortcut and find what you need.

What's included?

Data & Dev: JSON Formatter & Minifier, SQL/HTML/XML/CSS formatters, Base64 encoder/decoder, JWT viewer, and Diff Checker.
Security & Testing: Gateway sandbox test cards (Stripe, Cielo, Mercado Pago with approved/declined/3DS scenarios), Strong Password Generator, UUID v4/v7 generator.
Design & Media: Color palette & HEX/RGB/HSL converter, QR Code Generator with SVG/PNG export, SVG optimizer.
Finance & Utils: Currency converter, percentage calculators, and text cleaners.

The Tech Stack

Framework: Next.js (fully static SSG export)
Styling: Tailwind CSS with Dark/Light mode support
Icons: Lucide React
Hosting: Vercel (Edge CDN)

Check it out live: 👉 https://tiptools.com.br

I’d love to hear your thoughts: what utility is still missing that you find yourself searching for every week?