📄 docs: Update readme and dev checklist

🐞 fix: Clean up non-used files

README.md

@@ -22,13 +22,44 @@ PromptBase is a centralized, searchable repository for storing and managing prom
   - User auth and profiles
   - Prompt favorites and contributions
   - Ratings, version history, and sharing
-  - External API access
+
+## Usage
+
+You'll need a .env file with your Supabase credentials. See `supabase.env.example`.
+
+### Docker
+
+To run the app using Docker, you can use the provided `docker-compose.yml` file.
+
+```yaml
+services:
+  frontend:
+    container_name: PromptBase
+    image: git.keithsolomon.net/keith/promptbase:main
+    restart: unless-stopped
+
+    environment:
+      - NODE_ENV=production
+
+    ports:
+      - "4321:4321"
+
+    volumes:
+      - ./.env:/app/.env:ro  # Bind-mount .env as read-only
+```
+
+### To run locally (for development)
+
+```bash
+npm install
+npm run dev
+```
 
 ## Tech Stack
 
-- **Frontend**: Astro + HTMX + Alpine.js (AHA Stack)
+- **Frontend**: Astro js, Tailwind CSS
 - **Backend**: Supabase (self-hosted)
-- **Deployment**: Vercel or Netlify (frontend), Supabase (backend)
+- **Deployment**: Docker (frontend), Supabase (backend)
 
 ## Database Schema
 
@@ -48,7 +79,7 @@ PromptBase is a centralized, searchable repository for storing and managing prom
 
 ## Development Roadmap
 
-Development is organized into phases. For details, see `Development Checklist.md`.
+Development is organized into phases. For details, see `checklist.md`.
 
 ### MVP Phases
 
@@ -66,17 +97,6 @@ Development is organized into phases. For details, see `Development Checklist.md
 - Ratings, version control, external API
 - Shareable links and embeds
 
-## Usage
-
-To run locally:
-
-```bash
-npm install
-npm run dev
-```
-
-You'll need a .env file with your Supabase credentials. See `supabase.env.example`.
-
 ## Contributing
 
 Pull requests are welcome! Please keep contributions focused on core functionality and usability improvements.

app/src/components/FilteredPromptList.astro

@@ -1,71 +0,0 @@
----
-import PromptCard from './PromptCard.astro';
-
-const { prompts = [] } = Astro.props;
-
-type Prompt = {
-  slug: string;
-  title: string;
-  type: string;
-  description: string;
-  tags?: string[];
-  created_at: string;
-  updated_at: string;
-  notes?: string;
-};
----
-
-<div class="border-b mb-4 flex justify-between items-center">
-  <h2 id="prompt-count" class="text-xl font-semibold text-gray-300 mb-2"></h2>
-  <a href="#filters" class="block lg:hidden bg-blue-600 text-white px-2 py-0 pb-1 mb-2 rounded cursor-pointer hover:bg-blue-700 transition-colors duration-300">Filters &downarrow;</a>
-</div>
-
-<div id="prompt-grid" class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
-  {prompts.map((p: Prompt) => (
-    <div class="prompt-card" data-type={p.type} data-tags={(p.tags ?? []).join(',')}>
-      <PromptCard {...p} />
-    </div>
-  ))}
-</div>
-
-<script is:inline>
-  const form = document.getElementById('filter-form');
-  const cards = document.querySelectorAll('.prompt-card');
-
-  const clearBtn = document.getElementById('clear-filters');
-  clearBtn?.addEventListener('click', () => {
-    form.reset();
-    filterCards();
-  });
-
-  function filterCards() {
-    const params = new URLSearchParams(new FormData(form));
-    const type = params.get('type');
-    const query = params.get('q')?.toLowerCase() || '';
-    const tagParams = params.getAll('tag');
-
-    cards.forEach(card => {
-      const cardType = card.dataset.type;
-      const cardTags = card.dataset.tags.split(',');
-      const cardText = card.innerText.toLowerCase();
-
-      const matchesType = !type || type === cardType;
-      const matchesTags = tagParams.length === 0 || tagParams.some(t => cardTags.includes(t));
-      const matchesSearch = !query || cardText.includes(query);
-
-      card.style.display = matchesType && matchesTags && matchesSearch ? 'block' : 'none';
-
-      const visibleCount = Array.from(cards).filter(c => c.style.display !== 'none').length;
-
-      document.getElementById('prompt-count').textContent =
-        visibleCount === 1
-          ? "1 prompt shown"
-          : `${visibleCount} prompts shown`;
-    });
-  }
-
-  form.addEventListener('input', filterCards);
-
-  // Trigger filter once on page load
-  filterCards();
-</script>

app/src/components/PromptCard.astro

@@ -1,59 +0,0 @@
----
-const {
-  slug,
-  title,
-  type,
-  description,
-  tags = [],
-  created_at,
-  updated_at,
-  notes,
-} = Astro.props;
-
-const formatDate = (dateStr: string | undefined) => {
-  if (!dateStr) return "–";
-  const date = new Date(dateStr);
-  return isNaN(date.getTime())
-    ? "Invalid date"
-    : date.toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-      });
-};
----
-
-<div class="border border-gray-400 rounded p-4 bg-gray-700 text-gray-200 shadow-sm flex flex-col gap-2 min-h-[12rem]">
-  <div class="flex items-center justify-between">
-    <h3 class="text-xl font-semibold">{title}</h3>
-    <span class={`text-sm font-medium px-2 py-1 rounded ${
-      type === 'System' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'
-    }`}>
-      {type}
-    </span>
-  </div>
-
-  <p class="text-md">{notes}</p>
-
-  <div class="flex flex-wrap gap-2 mt-2">
-    {tags.map((tag: string) => (
-      <span class="text-sm bg-gray-200 text-gray-800 px-2 py-1 pt-0 rounded">{tag}</span>
-    ))}
-  </div>
-
-  <details name="prompt-details">
-    <summary class="cursor-pointer font-semibold mt-2 text-lg">View Details</summary>
-    <div class="text-md border-t mt-2 pt-2">
-      <div class="flex justify-between items-center">
-        <h3 class="text-xl font-semibold px-2">Prompt</h3>
-
-        <a class="bg-green-600 text-white px-2 py-0 rounded text-sm hover:bg-green-700 transition-colors duration-300" href={`/edit?slug=${slug}`}->Edit</a>
-      </div>
-
-      <p class="my-2 px-2 text-balance" set:html={description.replace(/\n/g, '<br />')} />
-
-      <hr class="my-2" />
-      <p class="text-sm"><strong>Created:</strong> {formatDate(created_at)} &bull; <strong>Updated:</strong> {formatDate(updated_at)}</p>
-    </div>
-  </details>
-</div>

app/src/components/PromptList.astro

@@ -1,70 +0,0 @@
----
-import PromptCard from './PromptCard.astro';
-
-const { prompts, error } = Astro.props;
-
-const typeFilter = typeof window !== "undefined"
-  ? new URLSearchParams(window.location.search).get("type")
-  : null;
-
-  const tagFilter = typeof window !== "undefined"
-  ? new URLSearchParams(window.location.search).get("tag")
-  : null;
-
-console.log("🔍 searchParams:", typeFilter, tagFilter);
-
-type Prompt = {
-  slug: string;
-  title: string;
-  type: string;
-  description: string;
-  tags?: string[];
-  created_at: string;
-  updated_at: string;
-  notes?: string;
-};
-
-const filtered = prompts?.filter((p: Prompt) => {
-  return (!typeFilter || p.type === typeFilter) &&
-         (!tagFilter || p.tags?.includes(tagFilter));
-});
----
-
-{error ? (
-  <p class="text-red-500">Failed to load prompts: {error.message}</p>
-) : (
-  <form class="mb-4 flex gap-4 items-end" method="GET">
-    <div>
-      <label for="type" class="block text-sm font-medium">Type</label>
-      <select name="type" id="type" class="border p-2 rounded w-full bg-gray-800">
-        <option value="">All</option>
-        <option value="System" selected={typeFilter === 'System'}>System</option>
-        <option value="Task" selected={typeFilter === 'Task'}>Task</option>
-      </select>
-    </div>
-
-    <div>
-      <label for="tag" class="block text-sm font-medium">Tag</label>
-      <input type="text" name="tag" id="tag" class="border p-2 rounded w-full" value={tagFilter || ''} />
-    </div>
-
-    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">
-      Filter
-    </button>
-  </form>
-
-  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-    {filtered?.map((prompt: Prompt) => (
-      <PromptCard
-        slug={prompt.slug}
-        title={prompt.title}
-        type={prompt.type}
-        description={prompt.description}
-        tags={prompt.tags}
-        createdAt={prompt.created_at}
-        updatedAt={prompt.updated_at}
-        notes={prompt.notes}
-      />
-    ))}
-  </div>
-)}

checklist.md

@@ -1,6 +1,10 @@
-# ✅ Prompt Catalog Development Checklist
+# Prompt Catalog Development Checklist
 
-## 🔧 Phase 1: Planning & Setup
+## MVP Phases
+
+This checklist outlines the phases for developing the Prompt Catalog MVP. Each phase includes specific tasks to complete.
+
+### Phase 1: Planning & Setup
 
 - [x] Review and finalize requirements from `Prompt Catalog Features.md`
 - [x] Choose JavaScript framework (React, Vue, etc.)
@@ -13,7 +17,7 @@
 
 ---
 
-## 🧱 Phase 2: Database & API
+### Phase 2: Database & API
 
 - [x] Define and implement Supabase schema
 - [x] Set up Supabase RLS rules (if applicable)
@@ -21,30 +25,52 @@
 
 ---
 
-## 🖼 Phase 3: Front-End Interface
+### Phase 3: Front-End Interface
 
-- [ ] Build static UI from `Front End Interface.png`
+- [x] Build static UI from `Front End Interface.png`
-  - [ ] Sidebar navigation (System / Task)
+  - [x] Sidebar navigation (System / Task)
-  - [ ] Search bar with filters
+  - [x] Search bar with filters
-  - [ ] Prompt list display
+  - [x] Prompt list display
-  - [ ] Prompt detail view
+  - [x] Prompt detail view
-  - [ ] Tags display and interaction
+  - [x] Tags display and interaction
-- [ ] Integrate UI with Supabase for live data
+- [x] Integrate UI with Supabase for live data
-- [ ] Implement CRUD operations for prompts
+- [x] Implement CRUD operations for prompts
 
 ---
 
-## 🔍 Phase 4: Search & Tagging
+### Phase 4: Search & Tagging
 
-- [ ] Implement keyword and full-text search
+- [x] Implement keyword and full-text search
-- [ ] Add filter by:
+- [x] Add filter by:
-  - [ ] Type (System, Task)
+  - [x] Type (System, Task)
-  - [ ] Tags (multi-select)
+  - [x] Tags (multi-select)
-- [ ] Create tag suggestion/autocomplete
+- [x] Create tag suggestion/autocomplete
 
 ---
 
-## 🤖 Phase 5: AI Integration
+### Phase 5: Import/Export
+
+- [x] Implement prompt export to JSON
+- [x] Implement prompt import from JSON with validation
+
+---
+
+### Phase 6: Deployment & QA
+
+- [x] Set up frontend docker image and  deployment compose file
+- [x] Set up Supabase production environment
+- [x] QA Testing:
+  - [x] UI functionality
+  - [x] Prompt CRUD operations
+  - [x] Search and filtering
+  - [x] Import/export behavior
+- [ ] Write usage documentation
+
+---
+
+## Post-MVP Phases
+
+### Phase 7: AI Integration
 
 - [ ] Set up API key management (e.g., OpenAI, Together, Ollama)
 - [ ] Add prompt suggestion UI for user input
@@ -52,14 +78,7 @@
 
 ---
 
-## 📦 Phase 6: Import/Export
+### Phase 8: Authentication & User Features (Future)
-
-- [ ] Implement prompt export to JSON
-- [ ] Implement prompt import from JSON with validation
-
----
-
-## 🔐 Phase 7: Authentication & User Features (Future)
 
 - [ ] Add Supabase Auth for login/register
 - [ ] Create user profile UI
@@ -68,20 +87,7 @@
 
 ---
 
-## 🚀 Phase 8: Deployment & QA
+### Phase 9: Future Enhancements
-
-- [ ] Deploy frontend to hosting platform
-- [ ] Set up Supabase production environment
-- [ ] QA Testing:
-  - [ ] UI functionality
-  - [ ] Prompt CRUD operations
-  - [ ] Search and filtering
-  - [ ] Import/export behavior
-- [ ] Write usage documentation
-
----
-
-## 🌱 Phase 9: Post-MVP Enhancements
 
 - [ ] Add prompt rating system
 - [ ] Implement version history tracking

docker-compose.yml

@@ -1,7 +1,7 @@
 services:
   frontend:
     container_name: PromptBase
-    image: promptbase
+    image: git.keithsolomon.net/keith/promptbase:main
     restart: unless-stopped
 
     environment:

notes/Development Checklist.md

@@ -1,90 +0,0 @@
-# ✅ Prompt Catalog Development Checklist
-
-## 🔧 Phase 1: Planning & Setup
-
-- [x] Review and finalize requirements from `Prompt Catalog Features.md`
-- [x] Choose JavaScript framework (React, Vue, etc.)
-- [x] Set up Supabase project
-  - [x] Create `prompts` table
-  - [x] Create `users` table (future)
-  - [x] Create `user_prompts` table (future)
-- [x] Define JSON structure for import/export
-- [x] Choose hosting platform (Vercel, Netlify, etc.)
-
----
-
-## 🧱 Phase 2: Database & API
-
-- [x] Define and implement Supabase schema
-- [x] Set up Supabase RLS rules (if applicable)
-- [x] Connect frontend to Supabase using client API
-
----
-
-## 🖼 Phase 3: Front-End Interface
-
-- [ ] Build static UI from `Front End Interface.png`
-  - [ ] Sidebar navigation (System / Task)
-  - [ ] Search bar with filters
-  - [ ] Prompt list display
-  - [ ] Prompt detail view
-  - [ ] Tags display and interaction
-- [ ] Integrate UI with Supabase for live data
-- [ ] Implement CRUD operations for prompts
-
----
-
-## 🔍 Phase 4: Search & Tagging
-
-- [ ] Implement keyword and full-text search
-- [ ] Add filter by:
-  - [ ] Type (System, Task)
-  - [ ] Tags (multi-select)
-- [ ] Create tag suggestion/autocomplete
-
----
-
-## 🤖 Phase 5: AI Integration
-
-- [ ] Set up API key management (e.g., OpenAI, Together, Ollama)
-- [ ] Add prompt suggestion UI for user input
-- [ ] Integrate with AI API to return prompt suggestions
-
----
-
-## 📦 Phase 6: Import/Export
-
-- [ ] Implement prompt export to JSON
-- [ ] Implement prompt import from JSON with validation
-
----
-
-## 🔐 Phase 7: Authentication & User Features (Future)
-
-- [ ] Add Supabase Auth for login/register
-- [ ] Create user profile UI
-- [ ] Track user-owned prompts
-- [ ] Enable user favorites system
-
----
-
-## 🚀 Phase 8: Deployment & QA
-
-- [ ] Deploy frontend to hosting platform
-- [ ] Set up Supabase production environment
-- [ ] QA Testing:
-  - [ ] UI functionality
-  - [ ] Prompt CRUD operations
-  - [ ] Search and filtering
-  - [ ] Import/export behavior
-- [ ] Write usage documentation
-
----
-
-## 🌱 Phase 9: Post-MVP Enhancements
-
-- [ ] Add prompt rating system
-- [ ] Implement version history tracking
-- [ ] Add social sharing (links, embed)
-- [ ] Provide external API for prompt access
-- [ ] Improve AI integration with context-aware suggestions

notes/Prompt Catalog Features.md

@@ -1,51 +0,0 @@
-# Prompt Catalog
-
-- June 21, 2025: Initial planning
-
-## Overview & Purpose
-
-The Prompt Catalog is a centralized repository for prompts used in various applications, such as AI models or chatbots. It aims to provide a structured way to store, search, and categorize prompts for easy access and management.  It will serve as a comprehensive and user-friendly catalog of prompts that can be easily searched, categorized, and tagged, enhancing the usability and discoverability of prompts for developers and users alike.
-
-## Features
-
-- **Storage**: Store prompts, metadata, and (future) users in Supabase (self-hosted or cloud).
-- **Prompt Metadata**: Include metadata for each prompt:
-  - Type (System, Task)
-  - Title
-  - Description
-  - Tags
-  - Creation date
-  - Last modified date
-- **Categorization**: Organize prompts into types (System, Tasks) for easier navigation.
-- **Tagging System**: Use tags to describe prompts for better filtering.
-- **Search Functionality**: Quickly find prompts by keywords, tags, or text search.
-- **AI Integration**: Connect to AI models via API (OpenAI, Together, Ollama, etc.) to suggest prompts based on user input or context.
-- **Export/Import**: Allow users to export prompts in JSON format and import them back.
-
-## Technical Details
-
-- **Web Interface**: A user-friendly web interface to view, search, and manage prompts.
-  - See `notes/Front End Interface.png` for mockup.
-- **Database**: Use Supabase for storing prompts and metadata.
-  - Tables:
-    - `prompts`: Stores prompt details (id, type, title, description, tags, created_at, updated_at).
-    - `users`: (Future) Stores user information (id, username, email, created_at).
-    - `user_prompts`: (Future) Stores user contributions and favorites (user_id, prompt_id, created_at).
-- **Authentication**: Implement user authentication for future features (e.g., user profiles, contributions).
-- **Deployment**: Host the application on a platform like Vercel or Netlify for the front end, and Supabase for the backend.
-- **Front End**: Use AHA Stack (Astro, HTMX and Alpine.js) for a modern, responsive user interface.
-  - **Astro**: For static site generation and routing.
-  - **HTMX**: For dynamic content loading and interactions without full page reloads.
-  - **Alpine.js**: For lightweight interactivity and state management.
-- **Back End**: Use Supabase's built-in API for database interactions.
-- **AI Integration**: Use OpenAI or other AI APIs to suggest prompts based on user input.
-
-## Future Enhancements
-
-- **User Profiles**: Create profiles for users to manage their contributions and favorites.
-- **User Contributions**: Allow users to submit their own prompts to the catalog.
-- **Favorites**: Users can mark prompts as favorites for easy access later.
-- **Rating System**: Rate prompts to help others find the best ones.
-- **Version Control**: Track changes to prompts over time.
-- **API Access**: Provide an API for external applications to access the catalog.
-- **Sharing**: Enable sharing of prompts via links or social media.

notes/test data.txt

@@ -1,32 +0,0 @@
-const prompts = [
-  {
-    slug: "summarize-document",
-    title: "Summarize Document",
-    type: "System",
-    description: "Summarizes a document or long input using GPT-4.",
-    tags: ["summary", "long-form", "NLP"],
-    createdAt: "2025-06-01",
-    updatedAt: "2025-07-10",
-    notes: "Summarizes input using GPT-4 with smart chunking."
-  },
-  {
-    slug: "translate-text",
-    title: "Translate Text",
-    type: "Task",
-    description: "Translate English text into French, Spanish, or Japanese.",
-    tags: ["translate", "language"],
-    createdAt: "2025-05-15",
-    updatedAt: "2025-06-22",
-    notes: "Uses multilingual model for more accurate translation."
-  },
-  {
-    slug: "generate-code",
-    title: "Generate Code",
-    type: "Task",
-    description: "Generate Python or JavaScript functions from descriptions.",
-    tags: ["code", "generation", "devtools"],
-    createdAt: "2025-06-05",
-    updatedAt: "2025-07-01",
-    notes: "Includes language detection and function wrapping."
-  }
-];