Full-stack PWA / Project 04
Zuno
Full-stack PWA · Private Class Zones, from interface to application logic
What I built
I build Zuno as a personal full-stack PWA, connecting the visual design and frontend with authentication, Zone membership, posting, votes, and persistent data.
- Product & UI/UX design
- Frontend
- Backend & data flows
- PWA experience
- My role
- Personal app · Full-stack development & UI/UX
- Timeline
- 2026 — present
- Tools & technologies
- Next.js · React · TypeScript · Tailwind CSS · PostgreSQL · Drizzle · Zustand · PWA
01 / The project
The experience
in context.
Zuno is a private social space built around Zones, with Class Zones as the current beta focus. I shape the interface and application flows from the first invitation through posting, reactions, votes, and daily activity. Expressive scrapbook-style timelines give shared moments a sense of identity, while navigation, settings, and PWA prompts keep everyday actions clear.
The user flow
- 01Sign in
- 02Create a Class Zone or open an invite
- 03Preview and join
- 04Share a post or vote
- 05React and follow activity
- 06Return through the inbox or a notification
02 / The making
What went
into it.
Expressive identity, practical surfaces
Violet-blue atmosphere, serif display headings, cream photo cards, and floating pills give the landing and timeline personality. Shared semantic color roles support light and dark themes across desktop and mobile, with Vietnamese-friendly typography for names and controls.
An invitation that preserves context
Shared links open a Zone preview with its name, member count, and a single join action. Guests who need to sign in are directed back to the invitation, and loading or join errors use readable messages rather than raw API codes.
Fewer steps to share
The global creation flow keeps the destination Zone in an inline picker while composing a post or vote. Numbered vote options and visible option counts make the form easier to scan; text drafts in the Zone composer are saved locally and cleared after a successful post.
Navigation adapted to the task
Phones have labeled Zone, Post, Inbox, and Account controls with safe-area clearance. Posting and inbox controls open dialogs; destinations remain links. Settings group preferences and secondary actions on a dedicated mobile page, while desktop retains a wider Zone grid and compact account menu.
PWA installation and updates
Supported browsers use an install action, while iPhone users get an illustrated Add to Home Screen walkthrough. A new version waits for the user to choose Update or Later, with update prompts suppressed on public and sign-in routes to avoid interrupting entry into the app.
Activity feedback
Contextual Web Push copy identifies the person and Zone involved, with an in-app toast fallback and unread inbox counts. Micro-interactions and landing reveals add feedback and character; desktop decorative effects are gated by pointer capability and reduced-motion preferences.