DEV Community

ilhan ak
ilhan ak

Posted on • Originally published at Medium

Building a Movie Puzzle Game When You Have Zero Design Skills

I have a confession: frontend design is my nightmare. Working with APIs and databases feels natural to me. But the second I need to pick a color scheme or fix a CSS layout, I’m stuck. I just lack that visual instinct.

I started Flickle because I wanted a better daily game for movie fans. The backend logic was the easy part. The hard part was not making it look terrible. I also didn’t want to build just another basic Wordle clone. I planned multiple features like timeline sorting, cast guessing, and high-res frame puzzles. For all that to fit on a screen, the UI needed to be invisible. The images had to do the talking.

Minimalist UI design of Flickle movie guessing game featuring a high-resolution cinematic frame.

My stack was pretty standard. Next.js on Vercel to keep things fast. I pulled all the movie data from the TMDB API. For the backend, I went with Firebase. Firestore handles the daily stats, and Firebase Storage serves the 4K frames so the site doesn’t crawl to a halt.

Minimalist Cast Mode interface in Flickle showing a clean list of actors for the daily movie trivia challenge.

Logic worked fine. The interface was a disaster.

I hate writing CSS, so I handed the design work over to AI. I basically told it: “I can’t design. It’s a Next.js app. Give me a clean UI that doesn’t ruin the photos.”

It gave me a dark theme that actually looked good. Every time my mobile grids broke, I just fed the code back into the prompt to fix the flexbox alignment. Later, people asked for an app version. Since I don’t write native apps, I had the AI walk me through adding the manifest and service workers. Now it runs as a fast PWA.

I’m honestly surprised by the result. Hundreds of people play Flickle every day now. The best part is they stick around for about 6 minutes a session, playing through the archive and timeline modes.

Interactive Timeline Mode UI on Flickle featuring movie posters for chronological filmography sorting.

If you usually drop your side projects because making them look good is too painful, just let AI handle the styling. Write the logic, outsource the CSS.

You can see how it turned out here: Flickle

Top comments (0)