MONO is a fully functional, single-page web application that acts as a minimal issue-tracking / task management tool, presented as a polished product landing page. It was built entirely with HTML, CSS, and vanilla JavaScript (no frameworks, no backend, no external libraries except Google Fonts).
What the Project Is MONO is a client-side only productivity tool inspired by tools like Linear, but stripped down to pure black-and-white minimalism. It combines two things in one page:
A marketing / landing page (hero, principles, call-to-action, footer) A real working product interface (the interactive issue tracker embedded in the hero)
Everything runs in the browser. All data is stored in the user’s localStorage, so it persists even after refreshing or closing the tab.
Core Purpose MONO lets a person (or small team) manage work items (“issues”) with:
Creation Editing Status changes Priority Assignee Filtering & views Deletion
The design philosophy is clarity over features — no clutter, no color noise, no unnecessary process.
Detailed Breakdown of What It Does
- Authentication (Simulated)
Start free / Log in / Get started buttons open a modal. User enters a name (required) and optional email. On submit, the name is saved in localStorage. The navigation updates: login/start buttons disappear and a user pill appears showing the first letter + first name. Clicking the user pill logs the person out (with confirmation). This is not real server auth — it is a local identity simulation so the app feels personal.
- Issue Tracking System (The Real Product) This is the interactive panel on the right side of the hero. Data model for each issue:
Unique ID (M-1001, M-1002…) Title Status → todo | doing | done Priority → high | medium | low Assignee (free text) View (mainly inbox)
What you can do:
ActionHowCreate issueClick “+ New issue”, press N, or use the empty-state buttonView issuesClick any issue rowEdit title, priority, assigneeOpen detail panel → change fields → SaveChange statusClick Todo / Doing / Done buttons in the detail panelDelete issueOpen issue → Delete (with confirmation)FilterTabs: All / Todo / Doing / DoneSwitch viewsSidebar: Inbox, My issues, All issues, Engineering, DesignNavigate with keyboard↑ ↓ to move, Enter to open, Esc to close, N for new All changes are immediately written to localStorage. 3. Views & Filtering Logic
Inbox → shows issues marked as inbox (default for new issues) My issues → shows only issues that have an assignee All issues → everything Engineering / Design → currently show all (placeholder for future team filtering) Status tabs further narrow the list in real time
- Landing Page Sections (Also Interactive)
Hero Left side = marketing copy + CTAs Right side = the live product Marquee Continuously scrolling principle phrases Principles section Three clickable cards. Clicking any card shows a short toast confirmation of that principle. Closing CTA “Get started free” opens the same auth modal. Footer Every link (Features, Changelog, Pricing, About, Blog, Careers, Docs, API, Status) is wired. Clicking them shows a relevant toast message instead of going nowhere. Logo (top and footer) Clicking scrolls smoothly back to the top.
- Navigation All main nav links perform smooth scrolling to the correct section (#product, #principles, #start).
- Feedback System A toast notification appears at the bottom for almost every meaningful action:
Issue created / saved / deleted Status updated Login / logout Footer link clicks Principle card clicks
- Keyboard Support The product is keyboard-first:
N → new issue Arrow keys → move between issues Enter → open selected issue Esc → close panels/modals
- Persistence
Issues → localStorage key mono_issues_v2 User → localStorage key mono_user_v2 Refreshing the page restores everything exactly as left.
Technical Summary
LayerTechnologyStructureSemantic HTMLStylingPure CSS (custom properties, Grid, Flexbox, transitions)LogicVanilla JavaScriptDatalocalStorageFontsSyne (display) + Inter (UI)No dependenciesNo React, no Vue, no backend, no database
Design Intent
Pure black & white (no accent colors) High contrast, sharp 1px borders Strong typography hierarchy Minimal visual noise Product interface feels like a real tool, not a static mockup Every interactive element gives immediate feedback
In Short MONO is a self-contained, browser-based issue tracker wrapped inside a high-craft landing page. You can create an identity, add real tasks, change their status, filter them, edit them, delete them, and everything survives page reloads — all without any server.