Developer Overview

Stack, architecture goals & repo structure

Focura is a full-stack TypeScript SaaS split across two repositories: a Next.js 16 client and an Express.js backend. Both share a PostgreSQL database via Prisma and communicate over HTTPS with RS256 JWT tokens.

Tech stack

Layer	Technology
Frontend runtime	Next.js 16 (App Router) + React 19
Language	TypeScript throughout
Styling	Tailwind CSS v4 + tw-animate-css
State / data	TanStack Query (React Query) v5
Auth (client)	NextAuth.js v5
HTTP client	Axios (custom instance in lib/axios.ts)
Backend runtime	Node.js + Express.js
ORM	Prisma + PostgreSQL (Supabase)
Auth (server)	RS256 JWT — private key on backend only
Caching	Upstash Redis (ioredis, TLS)
Real-time	Server-Sent Events (SSE)
Job scheduling	node-cron
Testing	Vitest + React Testing Library + MSW

Repository structure

🖥focura-client

Next.js 16 frontend. Folders: app/ components/ hooks/ lib/ types/ constants/ context/ utils/ tests/

⚙️focura-backend

Express.js API. Folders: src/modules/ src/middleware/ src/lib/ src/sockets/ src/crons/ prisma/ keys/

Backend modules

activityAudit trail — logs every task/workspace mutation

analyticsDAU stats, workspace usage, productivity metrics

attachmentFile attachment CRUD linked to tasks

calendarScheduling logic, insights, aggregation

commentTask comments, @mention parsing, replies

dailyTaskDaily task list with cron-based reset

fileManagementFile listing, filters, workspace-scoped storage

focusSessionFocus Mode sessions, analytics, stats

labelPer-project task labels with color

notificationSSE notification records, mark-read

projectProject CRUD, members, slug, stats

storageSigned upload URLs, storage quota

taskFull task lifecycle, filters, activity, notifications

uploadMultipart upload handler

workspaceWorkspace CRUD, member roles, invitations

💡

Every module is self-contained. Adding a new domain feature means creating a new folder under src/modules/ — you never touch other modules.