BKMRKS

📝 Brief

🧩 Project Summary

Bkmrks is a personal project: a lightweight, modern bookmark manager built with React, Next.js App Router, and TypeScript. I designed and developed it to scratch my own itch—organising bookmarks in a clean, minimal way without relying on browser extensions. The app supports tagging, search, and optional cloud sync with Supabase, making it both flexible and portable.

🎯 The Challenge

Browser bookmark tools are either too basic or too bloated. I wanted a solution that:

• Works as a static-friendly app (so it can be hosted anywhere, even shared hosting).
• Lets me import/export bookmarks via JSON.
• Stays accessible and responsive, not just functional.
• Provides optional cloud sync without being locked into a platform.

🛠️ My Approach

I treated Bkmrks as a product design + engineering exercise, not just a coding side project:

• Tech stack: Next.js App Router, React, TypeScript, Tailwind CSS, shadcn/ui, and optional Supabase integration.
• Data model: JSON-first, with schema validation via Zod, so the app works offline or self-hosted.
• Features:
  • Tagging and search for quick filtering.
  • Import/export bookmarks as JSON.
  • Supabase sync for those who want multi-device storage.
  • Architecture: Built around feature modules for scalability, with unit and integration testing (Vitest + Playwright).
  • Accessibility: Semantic HTML, keyboard navigation, ARIA patterns, and reduced-motion fallbacks baked in.

📱 Outcomes

The result is a fast, minimal, and user-friendly bookmark manager that runs on almost any hosting setup. It demonstrates:

• My ability to design, build, and ship a full product independently.
• Strong skills in modern React/TypeScript development.
• A product-focused mindset, balancing usability, performance, and maintainability.

Bkmrks now lives as a personal tool I use daily, and a showcase of my front-end craft, design system thinking, and product sensibility.

💡 Why This Matters

Bkmrks is more than just a side project: it’s proof that I can take an idea from concept to production, applying the same rigor I use with client work. It highlights my strengths in:

• Modern frontend engineering (React, Next.js, TypeScript).
• Product thinking (usability, accessibility, and feature prioritisation).
• Independent ownership (building something end-to-end, tested and deployed).

📑 Details