[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