[Feature] Build AI Prompt Library Front-End — Save & Rate Prompts by Model

[luisfponce]

🎯 Goal

Build a front-end for our AI Prompt Library — a place where users can discover, save, and rate the best prompts for the top AI models (ChatGPT, Claude, Gemini, etc.).

Design inspiration: tiiny.host/chatgpt-prompts/

---

📐 Pages & Sections to Build

1. /prompts — Main Discovery Page

Section	Description
Header	Logo + nav links (Prompts, My Saved, Login/Signup)
Model tabs	Horizontal tab bar: All | ChatGPT | Claude | Gemini | Llama | Mistral
Category pills	Colored badge filters (e.g. 📢 Coding, 🎨 Creative, 💰 Finance, 🏥 Health)
Prompt card grid	Responsive 3-col grid with icon, title, 1-line description, model badge, ⭐ rating, ▲ upvote count
Search bar	Filter prompts in real-time by keyword

2. Prompt Card Modal (overlay on click)

• Full prompt text (monospace box, copy-to-clipboard button)
• Model tag + category tag
• ⭐ Interactive star rating widget (POST to API)
• ❤️ Save/unsave toggle (POST to API)
• 🔺 Upvote button + total upvotes

3. /prompts/my-saved — Saved Prompts Page (auth required)

• Grid of user's bookmarked prompts
• Remove from saved

---

🔌 API Integration

The FastAPI backend (root: webapi/) already has:

• webapi/api/ — router modules
• webapi/models/ — SQLAlchemy models
• webapi/schemas/ — Pydantic schemas
• webapi/auth/ — JWT authentication

New endpoints to coordinate with the backend team:

Method	Endpoint	Description
GET	/prompts	List all prompts (filter by model, category)
GET	/prompts/{id}	Get single prompt
POST	/prompts/{id}/rate	Submit star rating
POST	/prompts/{id}/upvote	Upvote a prompt
POST	/prompts/{id}/save	Save to user favourites
DELETE	/prompts/{id}/save	Remove from favourites
GET	/prompts/saved	Get current user's saved prompts

---

🎨 Design Specs

To be defined at team meeting.

---

✅ Acceptance Criteria

To be discussed at team meeting.

---

📎 Resources

• Reference site: https://tiiny.host/chatgpt-prompts/
• Backend docs (Swagger): http://localhost:8000/docs (run locally)
• Backend source: webapi/ directory in this repo

[christopher0331]

Nice scope for the Prompt Library. To seed the discovery page with real, copy-paste-ready content (so it is not empty on launch), here are a few high-quality prompts you can list as starter entries across the model tabs:

• Resume Rewriter: "Rewrite each bullet to start with a strong verb and end with a measurable outcome. Flag vague claims."
• Cold Email: "90-word cold email to [role] at [company]. One compliment, one ask, no fluff + 3 subject lines under 40 chars."
• Research Synthesizer: "Summarize these sources into a one-paragraph verdict + 5-bullet so what."
• Debugging Partner: "List the 3 most likely root causes in plain English, then the minimal fix."

For the rating-by-model feature, store each prompt with a modelsTested array and let users submit scores per model — that doubles as crowdsourced benchmarking. A public free starter set of 5 prompts lives at christopher0331/ai-prompt-samples if you want ready-made seed data with license-clear content.