Pick-A-Psych

A Random TV Episode Picker Web App

Case Study

Pick-A-Psych is a lightweight web app that randomly selects an episode from the TV show Psych. Built with simple, clean HTML, CSS, and vanilla JavaScript, it was my first completed coding project — and a major stepping stone in learning how to design, troubleshoot, and deploy functional web applications to a live server.

Problem and Solution

• Problem: Finding a quick way to randomly select TV episodes was tedious.
• Solution: Build a fast, mobile-friendly random episode generator with filters.

Goals

• Build a simple, fun tool to randomly select an episode from the Psych TV series.
• Practice working with JavaScript event listeners, randomization functions, and basic DOM manipulation.
• Learn how to upload and deploy a working web app to a live hosting environment (Bluehost).
• Gain experience troubleshooting live site issues across browsers and platforms.

My Role

Responsibilities

• Designed the app’s layout and user flow.
• Developed functionality using HTML, CSS, and JavaScript with iterative help from GPT models.
• Troubleshot local environment bugs and deployment issues once uploaded to a live server.
• Learned to diagnose, tweak, and optimize code manually when needed to improve responsiveness and stability.

Custom Features and Innovations

Random Episode Generator

The core functionality is a one-click randomizer that selects a random season and a random episode from all eight seasons of Psych, displaying the result cleanly in a styled card format.

Simple, Responsive Layout

The app features a playful, lightweight design that adapts cleanly to both desktop and mobile devices, ensuring quick and easy use regardless of platform.

Tagging and Filtering (Future Potential)

The dropdown "Filter" functionality hints at future extensibility — allowing users to someday pick specific seasons, themes, or favorite characters if expanded upon.

Challenges

While building the randomizer was straightforward with GPT’s help, the biggest challenges came after deployment. I learned that apps can behave differently once uploaded online, across different browsers, and depending on server settings. I encountered and solved issues with HTTPS security warnings, inconsistent CSS rendering, and minor JavaScript bugs in live environments — lessons that became essential for building more complex projects later on.

Lessons Learned

• How to work iteratively with GPT models to brainstorm, troubleshoot, and refine working applications.
• The basics of event-driven JavaScript (button clicks, random number generation, DOM updates).
• How to deploy a live app to a hosting service, manage files remotely, and handle live environment troubleshooting.
• How "simple" coding challenges can teach critical real-world skills like debugging and iteration.
• The foundation for more advanced projects (sorting algorithms, dynamic grids, larger app architectures).

Next Steps

• Expand the filtering system to allow episode selection by season, theme, or characters.
• Enhance visual polish with animations or smoother transitions.
• Potentially allow users to save favorite episodes for future rewatching.