Tagly

• 

  Tagly Dashboard

Inspiration

The inspiration for Tagly came directly from my own daily struggles with scattered notes. I used to jot down some thoughts on random scraps of paper and others in my phone's default notes app. This fragmented routine led to real frustration: I would mix up assignment deadlines, miss homework due dates, or leave grocery lists behind on a desk only to realize it once I was already at the supermarket.

Most existing productivity apps felt bloated with complex features that made quick note-taking even more overwhelming. I wanted to build Tagly to solve my own problem: a clean, lightweight, and distraction-free space where capturing quick thoughts, organizing them with custom tags, and tracking critical deadlines with live countdowns happens effortlessly without any friction.

What it does

Tagly is an intuitive note-taking web application designed around two core concepts: flexible categorization and deadline awareness.

• Custom Tags: Users can create custom tags on the fly to organize thoughts seamlessly.
• Dynamic Filtering: Switch effortlessly between All notes, specific tag bubbles, and priority views.
• Live Deadline Tracker: Notes can include target dates with real-time countdown timers, ensuring urgent deadlines are never missed.
• Persistent & Private: Everything is stored instantly in the browser's local memory—requiring zero logins, accounts, or backend setups.

How we built it

Tagly was developed collaboratively using vanilla web standards:

• Core Stack: Pure HTML5, CSS3, and vanilla JavaScript to maintain lightning-fast performance, simplicity, and zero dependencies.
• Data Persistence: Built entirely around the browser's native localStorage API for instant, private client-side data storage.
• Deployment: Deployed directly to GitHub Pages for instant public accessibility.

Challenges we ran into

• Tool Transition & Student Plan Constraints: As a student building on free-tier plans, hitting token limits forced me to migrate the entire development workflow mid-project from Cursor to Antigravity. Porting the context, aligning the new agent with our existing codebase, and maintaining momentum across different AI tooling under tight quota restrictions was a major hurdle.
• State Management without Frameworks: Managing dynamic UI updates, tag-based filtering, and note states (edit/delete interactions) using pure DOM manipulation required meticulous event handling to prevent state desynchronization.
• Real-Time Countdown Logic: Implementing live, ticking deadline timers that persist accurately across page reloads without causing performance drops or UI flicker.
• AI-Human Calibration: Balancing the speed of AI code generation with precise user intent, ensuring every iteration matched the vision without introducing unwanted code complexity.

Accomplishments that we're proud of

• Resilience Through Workflow Disruptions: Overcoming strict free-tier token limitations and successfully migrating our entire setup from Cursor to Antigravity mid-project without losing momentum or giving up.
• Shipping a Genuine, Focused MVP: Delivering a fully functioning, distraction-free note-taking tool alongside an AI coding partner that does exactly what it promises without unnecessary complexity or bloated frameworks.
• Early Positive Validation: Sharing the concept and live prototype with friends and peers, receiving genuine curiosity and immediate praise for how practical and relevant the tool is for their everyday chaos.
• Seamless Local-First Experience: Implementing a client-side architecture where notes and deadlines persist securely in the browser with zero login friction.

What we learned

Tagly was built using vanilla HTML5, CSS3, and JavaScript, leveraging the browser's localStorage API to keep it fast, lightweight, and dependency-free.

As someone working with an AI coding agent, my role was acting like a product owner—defining the concept, guiding the features, reviewing the logic, and testing the flow. This project taught me how time-consuming and overwhelming things can be when working completely alone, but also that leaving everything entirely to AI results in products that lack a human touch and soul. Instead of just asking casual questions, I experienced what it feels like to collaborate with an AI teammate step by step to ship a real, functioning product. It proved that the true magic happens when human intention guides AI execution, showing me how vital my own decisions and feedback were in shaping the final experience.

What's next for Tagly

• Adding optional drag-and-drop prioritization for notes.
• Introducing dark mode and custom color palettes for tags.
• Data export and import functionality (JSON/CSV) for easy backups.

Built With

• antigravity
• css3
• cursor
• github
• html5
• javascript
• localstorage