v1.0.0 Stable · Released April 5, 2026

Focus Smarter.
Ship Together.

Focura helps teams turn scattered tasks into clear priorities, protect deep work time, and maintain steady progress — without the complexity that slows everyone down.

Try Focura LiveView on GitHub
Source Available·Open Source
107+·Commits
Vercel Edge·Deployment

Why Focura Exists

The modern team is overloaded.
Focura is the answer.

Scattered tasks. Siloed projects. Endless context-switching. Productivity tools promised to fix these problems but instead became part of them. Focura was built from scratch to address this — a focused, opinionated platform that helps teams see what matters, work on it without interruption, and track meaningful progress.

Clarity Over Chaos

Most teams don't fail because they lack tools — they fail because their tools add noise instead of removing it. Focura is built around the principle that every feature must reduce cognitive load, not add to it.

Protect Deep Work

Shallow busyness is the enemy of meaningful progress. Focura ships with built-in Focus Sessions (Pomodoro, deep work, custom) so your team can carve out uninterrupted time in a world of constant pings.

Built for Real Teams

Not solo todo lists. Focura is workspace-first — with role-based access, real-time collaboration via SSE, team analytics, and activity feeds that keep everyone aligned without micromanagement.

What Focura Ships

Everything a team needs.
Nothing it doesn't.

8 core feature areas, 80+ custom hooks, and a fully typed API layer.

Task & Project Management

Full-featured task lifecycle from creation to completion — with subtasks, dependencies, recurring schedules, priorities, and bulk operations.

Subtask hierarchyTask dependenciesRecurring schedulesBulk operations

Four Work Views

Switch between List, Kanban Board, Calendar, and Daily Tasks — each optimised for a different planning style with drag-and-drop support.

List viewKanban boardCalendar viewDaily planner

Focus Sessions

Built-in Pomodoro, deep work, and custom focus modes with time tracking and productivity analytics. Protect uninterrupted work time.

Pomodoro modeDeep workCustom sessionsAnalytics

Real-Time Collaboration

Comments, @mentions, team notifications, and an activity feed — all delivered instantly via Server-Sent Events without page refreshes.

SSE real-time@mentionsActivity feedAnnouncements

Analytics & Insights

Workspace dashboards with task completion rates, focus session stats, team activity tracking, capacity visualisation, and custom charts.

Completion ratesFocus metricsTeam activityCharts

File & Storage Management

Cloudinary-backed file uploads and attachments with a built-in browser UI, storage usage tracking, and optimisation tools.

Cloudinary CDNStorage trackingFile browserOptimization

Billing & Subscriptions

Stripe-powered plan management with billing history, invoices, usage-aware plan limits, and subscription status tracking.

Stripe paymentsPlan limitsBilling historyInvoices

Role-Based Access Control

Owner, Admin, and Member roles with workspace-scoped data isolation. RS256 JWT auth, Argon2 hashing, HTTP-only cookies, and audit logging.

3 role levelsRS256 JWTAudit logsRBAC middleware

Under the Hood

A stack built for
production from day one.

Every technology was chosen deliberately — not for hype, but for correctness, performance, and maintainability.

Core Framework
  • Next.jsv16.0.10

    App Router — SSR, RSC, API routes

  • Reactv19.2.0

    UI library with concurrent features

  • TypeScriptv5.9.3

    Strict type safety across the codebase

Styling & Motion
  • Tailwind CSSv4.0

    Utility-first styling — v4 engine

  • Framer Motionv12.23.24

    Animations and page transitions

  • Lucide Reactv0.554.0

    Icon system across all UI

Data & State
  • TanStack Queryv5.90.21

    Server state, caching, optimistic updates

  • Redux Toolkitv2.11.0

    Client-side global state slices

  • Axiosv1.13.2

    HTTP client with interceptors + JWT attach

Forms & Validation
  • React Hook Formv7.66.1

    Performant, uncontrolled form handling

  • Zodv4.1.13

    Runtime schema validation

  • Rechartsv3.7.0

    Analytics charts and data visualisations

Auth & Security
  • NextAuth.jsv4.24.13

    Session management + Google OAuth

  • RS256 JWT

    Token auth issued by backend on exchange

  • Upstash Redis

    Token revocation, rate limiting, caching

Infrastructure
  • Vercel

    Hosting, CDN edge network, preview deploys

  • Cloudinaryv2.8.0

    File uploads, storage, media optimisation

  • PostgreSQL + Prisma

    Backend database with ORM and migrations

How It's Built

Architecture built to scale.

Three-Layer Architecture

Frontend Layer

Next.js 16 + React 19 + TypeScript + Tailwind v4

  • Server Components for zero-JS data fetching
  • Client Components for interactive UI
  • 80+ custom hooks for data abstraction
  • TanStack Query for caching & deduplication
  • Optimistic UI updates via React Query
HTTPS · RS256 JWT

Backend API Layer

Express.js + Node.js + Prisma ORM

  • Modular monolith architecture
  • RS256 JWT authentication on every request
  • Role-based access control middleware
  • Real-time notifications via SSE stream
  • Rate limiting & audit logging via Redis
HTTPS · RS256 JWT

Data Layer

PostgreSQL + Prisma + Upstash Redis

  • PostgreSQL — primary relational store
  • Prisma ORM — type-safe queries + migrations
  • Upstash Redis — token revocation + rate limits
  • Workspace-scoped data isolation
  • Cloudinary — media and file storage

Request Lifecycle (e.g. Create Task)

1

User triggers action (e.g. Create Task)

2

Custom hook fires — optimistic update applied

3

Axios POST with RS256 JWT attached

4

Backend validates token → checks RBAC → writes DB

5

SSE notifies assignees in real-time

6

TanStack Query cache updated — UI reflects truth

Real-Time via SSE

No WebSocket overhead

Each authenticated user holds a persistent GET /api/notifications/stream connection. The backend pushes events in real-time — no polling, no WebSocket infrastructure required.

useNotifications()Connects → Listens → Updates React Query cache

Auth Token Flow

Login / OAuth — NextAuth validates credentials
HMAC proof — Sent to backend /api/auth/exchange
RS256 JWT issued — Stored in HTTP-only cookie
Axios interceptor — Attaches token to every request
Silent refresh — 1 min before expiry — no interruption

The Person Behind It

Built by one developer,
with production in mind.

Focura was designed and built entirely by Mohammad Raihan Gazi — from the database schema and RS256 JWT auth system through to the Kanban board drag-and-drop (coming...), Pomodoro focus engine, and Paddle billing integration.

The goal was never to ship a side project — it was to build a production-grade SaaS platform from scratch and learn every layer of the stack deeply. Focura v1.0.0 Stable shipped on April 5, 2026.

@gaziraihan1focura-client.vercel.app
MR

Mohammad Raihan Gazi

Creator & Maintainer · Focura

Next.jsReact 19TypeScriptExpressPostgreSQLPrisma ORMRedisPaddle

110+

Commits

80+

Custom Hooks

99.8%

TypeScript

Repository Languages

TypeScript99.8%
Other0.2%

Engineering Principles

Values baked into
every line of code.

These are not aspirations — they are verifiable properties of the Focura codebase.

Security-First

Security is Non-Negotiable

RS256 JWT auth, Argon2id password hashing, HTTP-only cookies, CORS enforcement, rate limiting, timing-safe comparisons, and workspace-scoped data isolation. Security isn't a feature — it's the baseline.

Performance

Performance by Default

Server Components minimise client JS. TanStack Query deduplicates requests and applies optimistic updates. Vercel Edge Network delivers assets globally. Speed is a design constraint, not an afterthought.

Composability

Composable Architecture

80+ custom hooks encapsulate all data-fetching and side-effect logic. Components are thin. Business logic is reusable. The codebase is structured to be extended, not rewritten.

Type Safety

Full Type Safety

TypeScript in strict mode across 98.5% of the codebase. Zod schemas validate all runtime inputs. API responses are fully typed end-to-end. If it compiles, it's correct by construction.

Testability

Designed to be Tested

Vitest for unit tests, Playwright for E2E. Custom hooks are isolated and testable. The architecture separates concerns so that every layer can be verified independently.

Real-Time

Real-Time Without Compromise

Server-Sent Events deliver notifications instantly without WebSocket infrastructure overhead. The useNotifications hook handles reconnection, backoff, and cache invalidation transparently.

Open Contribution

Source-available.
Contributions welcome.

Focura is source-available under a custom license. We welcome contributions, bug reports, and feature discussions.

How to Contribute

01

Fork the repo

Fork gaziraihan1/focura-client on GitHub and clone your fork locally.

git clone https://github.com/gaziraihan1/focura-client.git
02

Create a feature branch

Keep changes focused — one branch per feature or fix.

git checkout -b feature/your-feature-name
03

Follow the conventions

TypeScript strict mode, Tailwind v4 utilities (shrink-0 not flex-shrink-0), clear commit messages.

npm run lint && npm run dev
04

Open a Pull Request

Describe your changes clearly, reference related issues, and wait for review.

git push origin feature/your-feature-name
Live on Vercel · v1.0.0 Stable

Ready to focus?

Start a free workspace on Focura today. No credit card required. Full feature access from day one.

Start for Free

View Source

focura-client on GitHub

Get in Touch

focurabusiness@gmail.com