Skip to content
LOCEN/Ontario · CAStandbyOK/--:--:--EST
M4M4RK_YUportfolio
  • Projects
    ProjectsOverview
    • WorkSelected case studies and write-ups
    • GamesPlayable prototypes and game-dev logs
  • Gallery
    GalleryOverview
    • ArchivePhoto collections and visual experiments
    • ShopPrints, posters, and one-off objects
  • Logs
    LogsOverview
    • BlogLong-form devlogs and field notes
    • NotesShort observations, links, snippets
  • Resources
    ResourcesOverview
    • Tools38 in-browser developer utilities
    • LinksDaily-use dev and design bookmarks
  • About
  • Contact
中文
← projects
Web app · 2024Draft

Nimbus

A secure file management platform shaped around calm organization, OTP access, and storage analytics.

Role
Full-stack product engineer: interface architecture, authentication flow, storage workflows, responsive UI, and deployment.
Stack
Next.jsTypeScriptAppwriteTailwind CSSshadcn/uiChart.js
Links
LiveSource
Nimbus monochrome cover

Context

Problem

Personal cloud tools often feel either too bare or too opaque. Nimbus reframes file storage as a focused operating surface for uploads, access, and usage signals.

Approach

Solution

The product combines a Next.js interface, Appwrite-backed storage, OTP authentication, and compact analytics so the main file workflows stay fast and readable.

Features

  • Secure file upload and organization
  • OTP-based access flow
  • Storage usage visualization
  • Responsive dashboard layout

Architecture notes

  • Server-rendered routes keep the dashboard shell quick to parse.
  • Client interactivity is scoped to upload state, charts, and account actions.
  • Storage primitives are abstracted away from the visual project surface.

Challenges

Outcome

A production-style case study for authenticated SaaS interfaces, storage UX, and polished dashboard motion.

What I learned

Lessons learned

  1. 01Authentication copy matters as much as authentication mechanics.
  2. 02Storage products need visual hierarchy before they need decoration.

Next steps

Next steps

  1. 01Add deeper audit logs
  2. 02Tighten empty and error states
  3. 03Document the Appwrite model

Related work

Web app

M4rketView

A cryptocurrency screener built for quick scanning, watchlist thinking, and market table clarity.

Web app

Bloomprint

Turns yard inspiration into a buildable plan — what to buy, how much, what tools, in what order, and what can go wrong.

Back to archive
NextBioLoomAn AI-assisted bio generator that turns scattered identity notes into concise, platform-ready personal copy.
Back to archive
open channel·say hi anytime · 2026
--:--:--EST
get in touch

Saw something here?Tell me about it.

It's a portfolio, not a service · but I read every note — drop a line if anything here resonated, or just to say hi.

Start a conversation

Newsletter

Get the occasional dispatch

Notes and logs from m4rkyu.com — short, dated, no noise. Unsubscribe anytime.

Work

Production builds, games, and visual archives.

  • Projects
  • Games
  • Archive
  • Logs

Resources

Daily-use tools and a personal link library.

  • Search
  • Latest
  • Tools
  • Links
  • Notes
  • Topics
  • RSS
  • JSON feed
  • Shop

Studio

Background, contact, and channels for collaboration.

  • About
  • Contact
  • Changelog
  • Colophon
  • Resumepending

Socials

Find me on the usual feeds.

  • Facebooksoon
  • Instagramsoon
  • YouTubesoon
  • LinkedInsoon
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
Crafted since 2024
ZhenXiao Mark YuZhenXiao Mark Yu
© 2026 ZhenXiao Mark Yu·Ontario, Canada
  • Email
  • GitHub
  • dev.to
  • LinkedIn (soon)
  • Twitter / X (soon)
  • Instagram (soon)
Built with Next.js 16 · React 19 · Tailwind 4

Built with Next.js 16 · React 19 · Tailwind 4