Build a Kanban board (Trello-style) as a full-stack Next.js 16 app (App Router) with React 19 + TypeScript + Tailwind, using Route Handlers and Server Actions for the API and PostgreSQL for storage. Frontend: columns (To Do, In Progress, Review, Done) with cards draggable within and across columns, using a fractional/LexoRank-style ordering key so a reorder never requires renumbering every card. A card-detail modal edits title, description, assignee, labels, and due date. Apply optimistic updates — reflect the drag immediately, persist in the background, and roll back with a toast if the server rejects it. Backend: REST (or tRPC) endpoints for boards, columns, and cards with CRUD plus a move/reorder endpoint that takes the new position key, all input-validated and authorized to board members only. Support filtering by assignee or label. Handle concurrency directly: two users moving the same card (last-write-wins guarded by a version check, or explicit conflict resolution), reconnect after going offline, and empty columns as valid drop targets. Persist enough state that a reload reproduces the board exactly. Done when a drag reorders optimistically and survives reload, a server-rejected move rolls back cleanly with feedback, and two users editing concurrently never corrupt card order.
#16Full-Stack
E-Commerce Product Catalog
Build a product catalog as a full-stack Next.js 16 app (App Router, React 19 + TypeScript + Tailwind; Route Handlers/Server Actions + PostgreSQL). Frontend: category filters, a price-range slider, search with debounced autocomplete, and a grid/list view toggle, with each product card showing image, title, price, rating, and add-to-cart. Implement a cart that lives in localStorage for guests and MERGES into a server-side cart on login (reconcile quantities item by item — do not silently overwrite one with the other). Build product detail pages with an image gallery, a specs table, and related products. Backend: serve paginated products via query params for filters/sort/search, computed on indexed columns, returning total counts for the pagination UI. Get the e-commerce details right: store prices as integer minor units (never floats), format currency on the client, and handle out-of-stock and price-changed-since-added cases in the cart. Make the filter controls accessible (keyboard focus is preserved as results update) and make filter/sort state shareable and bookmarkable via the URL. Done when filters, search, and sort compose and are reflected in the URL, the guest cart merges correctly into the user cart on login, money is never represented as a floating-point number, and stale-price/out-of-stock items are surfaced rather than silently checked out.
#17Full-Stack
Real-Time Collaboration Whiteboard
Build a collaborative whiteboard (Next.js 16 App Router with React 19 + TypeScript + Tailwind for the client; a standalone Node + TypeScript WebSocket server with Redis pub/sub, since long-lived sockets belong outside the Next.js request lifecycle). Frontend: an HTML5 Canvas with freehand drawing (variable brush size and color), rectangle/circle shapes, text sticky notes, and an eraser, rendered efficiently — batch repaints with requestAnimationFrame and redraw only dirty regions rather than the whole canvas each frame. Backend: broadcast drawing operations to everyone in the same room and persist the operation log so a late joiner can replay it to the current state. Show live presence: each remote user's cursor with a name label. Implement per-user undo/redo over a shared document — undo must only revert YOUR own operations without clobbering others' — which means modeling edits as discrete operations rather than full-canvas snapshots; note where you'd reach for CRDT or OT if conflict resolution gets hairy. Add export to PNG. Handle reconnection with a state resync, high-frequency pointer events (throttle what goes over the wire), and large boards. Done when two users draw simultaneously and both converge on a consistent board, a late joiner replays the log to the correct current state, per-user undo never destroys another user's work, and a reconnect resyncs without duplicating strokes.
#18Full-Stack
URL Shortener with Analytics
Build a URL shortener with analytics (Next.js 16 App Router, React 19 + TypeScript + Tailwind; Route Handlers + PostgreSQL, with Redis caching the hot lookup path). Frontend: a form to submit URLs with an optional custom alias and expiration date, the shortened link with a copy button, and a per-link dashboard (total clicks, clicks over time, top referrers, country breakdown). Backend: a create endpoint that validates and normalizes the URL, generates a collision-free short code (base62 over an ID, or random with a uniqueness check), and rejects malicious or loopback targets; a redirect endpoint that issues a fast 301/302 while recording click metadata (timestamp, referrer, user-agent parsed to device/browser, IP-derived country) ASYNCHRONOUSLY so the redirect stays sub-10ms; and analytics endpoints with date-range filtering. Cache code→URL lookups in Redis. Handle the realities: expired and disabled links (410/404), custom-alias collisions, open-redirect and SSRF protection on the target URL, bot filtering in analytics, and high read volume. Done when redirects are fast and cache-served, clicks are recorded without slowing the redirect, expired/duplicate/malicious links are each handled with the right status, and the dashboard reflects the real recorded data.
#19Full-Stack
Blog CMS with Markdown Editor
Build a blog CMS (Next.js 16 App Router, React 19 + TypeScript + Tailwind; Route Handlers/Server Actions + PostgreSQL). Editor: a split-pane Markdown editor with live preview, full Markdown plus fenced code blocks with syntax highlighting, drag-and-drop image upload (to object storage, inserting the returned URL), and front matter for title, slug, tags, and publish date. Critically, SANITIZE the rendered Markdown/HTML against XSS using an allowlist (e.g. rehype-sanitize) — never inject raw user content via dangerouslySetInnerHTML. Backend: CRUD for posts with draft/published states, tag filtering, full-text search (Postgres tsvector), and enforced slug uniqueness. Public site: a paginated post list, individual post pages with a generated table of contents and proper SEO/OpenGraph meta, and an RSS feed endpoint. Handle autosave and draft recovery, optimistic-concurrency on edits (don't let a stale tab overwrite a newer save), cleanup of images dropped from a post, and reading-time estimation. Done when a post round-trips draft → publish with a guaranteed-unique slug, rendered Markdown is provably XSS-safe against a hostile payload, search and tag filters return correct results, and the generated RSS feed validates.
#20Full-Stack
Multi-User Authentication System
Build a complete authentication system as a full-stack Next.js 16 app (App Router, React 19 + TypeScript + Tailwind; Route Handlers/Server Actions + PostgreSQL). Flows: registration with email verification, login, password reset via an emailed single-use expiring token, Google OAuth2 social login, and session management. Frontend: forms with client-side and server-side validation, a protected-route wrapper, and a profile page with avatar upload. Backend: bcrypt password hashing, short-lived JWT access tokens with HTTP-only Secure refresh-token cookies and rotation, CSRF protection on cookie-based requests, account lockout with backoff after 5 failed attempts, and an admin panel to list and suspend users. Treat tokens and reset links as security-critical: store reset/verification tokens HASHED in the DB, expire them, invalidate other sessions on password change, and prevent user enumeration on both registration and reset by returning uniform responses. Handle verification-link reuse, simultaneous logins across devices, and refresh-token theft detection (reuse of a rotated token revokes the session family). Done when every flow works end to end, reset and verification tokens are single-use and expiring, a password change invalidates other sessions, and neither registration nor password reset reveals whether an email is already registered.
#21Full-Stack
Recipe Sharing Platform
Build a recipe-sharing platform (Next.js 16 App Router, React 19 + TypeScript + Tailwind; Route Handlers/Server Actions + PostgreSQL). A recipe has a title, description, an ingredients list with quantities and units, ordered steps, prep/cook time, servings, difficulty, tags, and a photo. Features: search by ingredient ("what can I make with chicken and rice?"), filtering by dietary tags (vegetarian, gluten-free, etc.) with multiple compound filters at once, a favorites collection, and a meal-planning calendar where users drag recipes onto days of the week. Model ingredients RELATIONALLY (not as a freetext blob) so ingredient search — and a future shopping-list feature — actually work, and design the indexes the compound-filter queries need. Backend: a paginated recipe listing that combines all active filters in a single SQL query, plus persistence for the drag-to-plan calendar. Get the details right: unit handling and serving-size scaling that recomputes quantities, image upload and optimization, empty and zero-result states, and authorization so a user can only edit their own recipes. Done when ingredient and multi-tag filters compose correctly inside one paginated query, changing the serving size rescales every quantity, the meal-plan drag persists per user and survives reload, and users can't edit recipes they don't own.