Scroll
Index / Work / 08 · TaskSphere
2025 Self-initiated Solo · fullstack React · SupabaseTanStack QueryCloudinary

A kanban board that doubles as a personal project tracker and an organisation workspace. Supabase carries auth, projects, and todos; Cloudinary handles avatars and attachments; TanStack Query keeps the cache honest with optimistic mutations across boards.

Client
Self-initiated
Role
Solo · fullstack
Duration
03 / 2025 — 11 / 2025
Stack
React · TypeScript · Vite · TanStack Router · TanStack Query · Supabase · Cloudinary · Tailwind
TaskSphere — cover
TASKSPHERE · 2025 · COVER PLATE
08 / 11
2
modes · personal + org
1
cache · TanStack Query
Live
in production · 2025
Personal projects board
Personal projects board
§ 03 · Chapter

Two surfaces, one cache

Users can run TaskSphere in personal mode — projects and todos that belong to them alone — or jump into an organisation where projects, members, and notifications are shared. The same React tree powers both; route boundaries decide which Supabase query keys come along for the ride.

§ 04 · Chapter

Optimistic by default

Every mutation — add, rename, complete, delete — uses TanStack Query’s onMutate to update the cache before the server has even acknowledged the write. Rollback on failure is automatic; the user never sees a list freeze while waiting on a network round-trip.

§ 05 · Chapter

Cloudinary for the heavy stuff

Avatars and todo attachments go through Cloudinary instead of straight into Supabase storage. The transform URL handles thumbnails, format negotiation, and CDN edge caching; the React side just renders an img and trusts the URL.

§99 · Continue

Have a brief?
Let's talk.

© 2026 · Moluno · Powered by sapa
v2.04.026 · 60Hz · 6.5244 N · 3.3792 E