keith/PromptBase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📄 docs: Update readme and dev checklist

Browse Source 
🐞 fix: Clean up non-used files
This commit is contained in:
Keith Solomon
2025-07-29 12:29:50 -05:00
parent 3c5b52c294
commit 0abe4f621b
11 changed files with 83 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
README.md
View File

@@ -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.

0
app/public/css/styles.css
View File

71
app/src/components/FilteredPromptList.astro
View File

@@ -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>

59
app/src/components/PromptCard.astro
View File

@@ -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>

0
app/src/components/PromptDetail.astro
View File

70
app/src/components/PromptList.astro
View File

@@ -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>
)}

88
checklist.md
View File

@@ -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`
- [ ] 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
- [x] Build static UI from `Front End Interface.png`
- [x] Sidebar navigation (System / Task)
- [x] Search bar with filters
- [x] Prompt list display
- [x] Prompt detail view
- [x] Tags display and interaction
- [x] Integrate UI with Supabase for live data
- [x] Implement CRUD operations for prompts
---
## 🔍 Phase 4: Search & Tagging
### Phase 4: Search & Tagging
- [ ] Implement keyword and full-text search
- [ ] Add filter by:
- [ ] Type (System, Task)
- [ ] Tags (multi-select)
- [ ] Create tag suggestion/autocomplete
- [x] Implement keyword and full-text search
- [x] Add filter by:
- [x] Type (System, Task)
- [x] Tags (multi-select)
- [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
- [ ] Implement prompt export to JSON
- [ ] Implement prompt import from JSON with validation
---
## 🔐 Phase 7: Authentication & User Features (Future)
### Phase 8: Authentication & User Features (Future)
- [ ] Add Supabase Auth for login/register
- [ ] Create user profile UI
@@ -68,20 +87,7 @@
---
## 🚀 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
### Phase 9: Future Enhancements
- [ ] Add prompt rating system
- [ ] Implement version history tracking

2
docker-compose.yml
View File

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

90
notes/Development Checklist.md
View File

@@ -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

51
notes/Prompt Catalog Features.md
View File

@@ -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.

32
notes/test data.txt
View File

@@ -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."
}
];