The SBPD Quote Generator is a web application I had the idea for while watching my favorite TV show of all time, Psych. Built with React and styled to in police department case file fashion, it delivers random quotes from Shawn, Gus, Lassiter, and the rest of the Santa Barbara police department.
The design is essentially a retro aesthetic using Courier New typography and a file-folder appearance, complete with dashed borders and cool color schemes. Each quote is presented as an official "case file" with randomly generated case numbers, adding to the authentic SBPD experience that most fans of the show will instantly recognize.
The application features a curated collection of memorable quotes from all seasons, properly sourced and attributed to maintain authenticity. The interface is clean and intuitive. Just click the pineapple button to generate a new quote, complete with character attribution and episode information where available.
This project allowed me to explore React hooks, specifically useState for managing quote state, while practicing CSS styling techniques to create a cohesive visual theme. The responsive design ensures the experience works seamlessly across desktop and mobile devices.
C'mon son 🍍
Built using React 18 with functional components and hooks, the app leverages a JSON data structure to store quotes with metadata including character names, episode information, and source URLs. The styling uses pure CSS with custom properties and flexbox layouts for responsive design.
Special attention was paid to accessibility and user experience, with proper semantic HTML, hover states, and smooth transitions. The footer spans the full viewport width using viewport units and calculated margins, demonstrating advanced CSS positioning techniques.
Try out the quote generator at randompsychquote.netlify.app and relive your favorite Psych moments.
The source code is available on my GitHub for anyone curious or any fans interested in contributing or creating their own!
thank you Shawn and Gus for all the wonderful memories