An AI Prompt Engineering Platform. 97+ curated prompts, community forums, Matrix dark theme, and a performance score of 9.8/10. The first full-stack React application. The project that proved the web was home.
GGPrompts started as a personal prompt library and became a full platform. React 18 with Vite for the frontend, Supabase (PostgreSQL) for the backend, deployed on Vercel. It taught React component architecture, state management with React Query, authentication flows, database design, and what it means to optimize for real users. The Matrix-themed dark UI was not just aesthetic -- it was a statement.
First time touching React, Vite, Supabase, and Playwright. Every technology was new. Learned by building, not by reading.
Standard React SPA architecture with Supabase as the BaaS. CSS Modules for scoped styles, React Query for server state, RLS policies for data security.
Performance was not an afterthought -- it was a design constraint. The Matrix particle background runs at 60fps on mobile by reducing particle count via device detection. React Query handles caching so repeated page views never re-fetch. CSS Modules eliminate unused styles. Every image is lazy-loaded. The result: a visually complex app that feels instant.
The prompt card component -- a React component with copy-to-clipboard, category badges, and CSS Module styling.
import { useState } from 'react'; import { useMutation } from '@tanstack/react-query'; import styles from './PromptCard.module.css'; export default function PromptCard({ prompt }) { const [copied, setCopied] = useState(false); const handleCopy = async () => { await navigator.clipboard.writeText(prompt.text); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return ( <div className={styles.card}> <div className={styles.header}> <h3>{prompt.title}</h3> <span className={styles.category}> {prompt.category} </span> </div> <p className={styles.text}>{prompt.text}</p> <button onClick={handleCopy}> {copied ? 'Copied!' : 'Copy'} </button> </div> ); }
Coming from Godot's nodes, React's component model felt natural. A PromptCard is a scene. Props are exported variables. State is internal data. The mental model transferred perfectly.
PostgreSQL, auth, real-time, storage -- all in one dashboard. Row Level Security was the revelation: security as SQL. No backend code needed for basic data protection.
Users notice speed before they notice features. The Matrix background was beautiful but tanked mobile FPS. Device detection that adapts visual complexity based on hardware was the solution. Performance is UX.
Deploying on Vercel and sharing the link changed everything. Feedback from real people is qualitatively different from self-testing. The forum feature came from user requests, not personal ideas.