PromptBasket

Problem Statement

Anyone working seriously with LLMs accumulates dozens of reusable prompts — scattered across notes apps, chat histories, and random text files. There's no lightweight, private place to organize them: group related prompts, search by content or tag, and edit with markdown. PromptBasket fills that gap without forcing a sign-up or sending your prompts to someone else's server.

Proposed Solution

A local-first prompt manager. Prompts live in colorful, customizable buckets; you create/edit them in a markdown editor with live preview; and a smart search spans title, content, and tags. Everything is stored in the browser, so it's instant and private — but the data layer is abstracted so it can flip to a backend later without rewriting features.

Full Solution Details

• Dashboard — stat cards (total prompts, total buckets, created this week) plus a recent-prompts list.
• Prompt library — all prompts with search and filter.
• Prompt editor — create/edit with markdown formatting and a live preview pane.
• Buckets — view all buckets (grid of cards), bucket detail pages, and full bucket CRUD via modals (create/edit/delete with confirm).
• Search — by title, content, or tags.
• Responsive — desktop, tablet, mobile.

Technical Documentation

React 18 + Vite + TypeScript, styled with Tailwind CSS, icons via Lucide, clsx for class composition, React Router for navigation. The codebase follows Feature-Sliced Design with a precise internal convention: each feature (dashboard, prompt-library, prompt-editor, buckets-page, bucket-management, bucket-detail) is split into components/ (reusable, self-contained), parts/ (larger feature-specific sections that compose components), and hooks/ (business logic + state). Shared code lives under shared/{ui,services,types,utils}.

Key conventions: hyphenated filenames, one utility function per file, barrel index.ts exports per feature, and — notably — external libraries are re-exported through shared/ui so they can be swapped without touching feature code.

Tech Stack

React 18, TypeScript, Vite, Tailwind CSS, React Router, Lucide React, clsx.

System Design

app/ (layout: app-shell + sidebar, routing)
   │
   ├── features/
   │     dashboard ──┐
   │     prompt-library │  each: components / parts / hooks
   │     prompt-editor  │
   │     buckets-page   │
   │     bucket-mgmt   ──┘
   │
   └── shared/
         ui/        (reusable components + re-exported libs)
         services/  ── storageAdapter ──► localStorage  (swappable → API)
         types/  utils/

Smart Architectural Decisions

• Storage abstraction from day one. All data ops go through a storageAdapter interface, so moving from localStorage to a backend API is a single-adapter change — the features never touch storage directly. This is forward-thinking design in a local-first app.
• Library re-export boundary. Third-party libs (icons, etc.) are re-exported through shared/ui, isolating the rest of the app from dependency churn.
• components / parts / hooks split gives a clear, repeatable internal shape to every feature — easy to navigate and onboard.
• Local-first means zero backend cost, instant UX, and privacy (prompts never leave the browser).

Impacts

A private, instant, zero-signup home for AI prompts with markdown editing and bucket organization — deployed live at promptbasket.devferanmi.xyz, and architected so it can grow into a synced/multi-device product without a rewrite.

Demonstrated Skills

React + TypeScript; Feature-Sliced Design with disciplined internal conventions; the adapter pattern for swappable persistence; local-first app design; markdown rendering with live preview; clean, responsive Tailwind UI.