Show HN: NeedleDrop – Guess the movie from a song

[wernah]

Backstory: I'm a product designer who's mostly worked for startups and now big tech, and I haven't really touched html/css for nearly a decade. I've worked closely with engineers my entire career but never really rolled the sleeves up and dived into a scripting language. I'd seen some engineers playing around with CodeGPT over a year ago when it launched–we huddled around a screen and tried to decide how quickly our jobs would be replaced by this new technology. At the time, we weren’t in any real danger, but I caught a glimpse of how well it understood prompts and stubbed out large amounts of code.

For the past four or five years, I've played a hacky trivia game with family and friends where I play a song, and they have to guess the movie that features the song; Guess the Needle Drop. After many passionate debates and over-the-top celebrations fueled by my generation’s nostalgia for popular classic songs and films, people often told me that I needed to “build an app for this.”

I started doodling in Figma before quickly starting to build the website in Node, and then read somewhere that it's a better approach to learn vanilla javascript before trying to benefit from frameworks like React, etc. So I started again with a static vanilla website and, piece by piece, built out each chunk of functionality I’d envisioned. My mind was consistently blown at how helpful ChatGPT was–far beyond my lofty expectations, even with all the AI hype. It was like having a 24/7 personal tutor for free. I rarely had to google console errors hoping that a Stack Overflow discussion catered to my exact scenario. With enough information, ChatGPT always knew what was wrong and explained in terms I could understand.

The workflow went like this: I would describe the desired user experience, parse the code GPT suggested, copy it to my editor, and paste back any errors I came across along the way. The errors were abundant at the beginning, but I got better over time at anticipating issues. Perhaps my biggest takeaway was that I had to learn how to converse with ChatGPT: sometimes I would spend 10 minutes crafting a prompt, forcing me to fully understand and articulate my own line of thinking about what I was trying to achieve .

Using ChatGPT to make a static local website is fairly trivial, but the deployment and automation stage is where I fully realised the scope of what I could achieve. As a product designer, I’ve had the luxury of listening to engineers discuss solutions without personally having to sweat the execution. Working solo I couldn’t stay in the periphery anymore. I kinda knew AWS was a whole thing. That git was non-negotiable. That having a staging server is sensible and that APIs could do a lot of the heavy lifting for me. I would sanity-check with ChatGPT whether I understood these tools correctly and whether it was appropriate to use them for what I was building. A few of the things that initially intimidated me but I ended up working out:

- GitHub Actions workflows

- AWS hosting and CloudFront

- Route 53 DNS hosting

- SSL certificates

- Implementing fuzzy search

- LocalStorage and JSON manipulation

- Even some basic python to scrub data

It’s a fairly basic game, and for anyone sneaking a look with the inspector, it’s a dog’s div soup breakfast served with a side of spaghetti logic. But it still goes to show how much AI seems like a learning steroid.

[hiccuphippo]

> sometimes I would spend 10 minutes crafting a prompt, forcing me to fully understand and articulate my own line of thinking about what I was trying to achieve

Yes, usually called rubberducking. Trying to explain a problem to someone else can lead you to the answer. Many times I've found the answer to something while trying to write the question in StackOverflow.

[wernah]

Ha just googled this and realized this is exactly it. Makes a lot of sense as a forcing function to better understand your messy thoughts

[tamimio]

For me it’s usually after I submit an issue, few minutes later I found the solution.

[seandavidfisher]

Love the idea and execution. The spinning record was fun and gave me something to watch while racking my brain. Have you considered adding an “I have no idea” button? I ended up just typing random movies, but having the UI guide the user in some way when they honestly can’t think of a likely movie would be thoughtful.

[ericyd]

Totally agree with this, it would be really nice to be able to request clues without submitting an invalid guess. It could still count towards one of your four guesses but I think from a UX perspective it's nicer to be able to admit ignorance than being forced to guess incorrectly.

[wernah]

I'm going to add this to my backlog, definitely a great suggestion. Even when testing I would just mash answers

[looperhacks]

Congrats! The game is quite hard because there might be multiple correct solutions, but only one gets accepted. But I understand that this is a limitation of the game, maybe adding something like "Correct, but we're looking for something else" would be nice.

Two suggestion for improvements:

- Add a skip button. If I don't have a clue which film it might be, I need to write some nonsense answer to get a clue, a skip button would be nicer. - Play the song immediately when I click the play button. I was wondering why it doesn't start, even though I clicked the Play button!

Sidenote: I spoiled myself because Imagus showed me the movie pictures in the archive ;) Not your fault of course, but I found it funny

[WirelessGigabit]

I worked with a colleague who didn't write JS for a long while. My colleague purposefully tried to build the project with the output of ChatGPT.

One of the problems my colleague ran into is that once things don't work as expected, debugging is really hard. When you build a system yourself you have a knowledge foundation, and a process that you repeat over and over. They are intrinsic to your development process. They allow you to quickly debug problems. But not so much when dealing with this kind of generated code. Much more often did we have to resort in peeling back the layers and realize something a couple of layers down was wrong.

One example is that the generated code does not contain take age of the code into account. So all of the sudden you're mixing ESM and non-ESM packages and you get the weirdest errors.

> sometimes I would spend 10 minutes crafting a prompt, forcing me to fully understand and articulate my own line of thinking about what I was trying to achieve .

The reality is that this is one of the reasons why I actually love coding. As someone who has many times unconsciously said the wrong things and pissed off people (sorry!), using a limited grammar to express my wants feels so much safer. The grammar is limited. It is extremely explicit. There is no ambiguity. And bar a few esoteric languages, there are no emojis, and there is no need for me to be polite or offer a tip.

[wernah]

I found this to be the case as well. My out productivity declined as the project became more unwieldy. I wasn't using ES6 so would very much like to modularize things and use imports/exports next time. "Working code is working code" but I'd dread the idea of someone collaborating on top of my spaghetti. Lot of lessons learned in that respect. Having to reset ChatGPT's understanding of the latest code was tiresome.

[halfmatthalfcat]

What does it say about me if I instantly thought of Anthony Fantano when reading the title?

[thundergolfer]

It says that you are familiar with Anthony Fantano's Youtube channel?

[xd1936]

I know that "Beverly Hills Ninja" with Chris Farley features "Low Rider" by War, but it wasn't a correct answer :(

[snakeyjake]

I'm old enough that Cheech & Chong's Up In Smoke immediately and iconically came to mind.

The song is played in its entirety during the opening credits instead of being used for like 15 seconds.

And it is an incorrect answer.

[gigonaut]

The list of films that use that song are (at least according to IMDB):

https://www.imdb.com/list/ls072864571/

I guessed "dazed and confused" and was told that was incorrect. From the hint it would appear as though they were looking for "gone in 60 seconds"

[speedgeek]

Yeah i guessed Up in Smoke which did use the tune so seems like it needs to accept any correct answer or provide something that narrows it to a specific movie. But I like the idea.

[apgwoz]

I guessed "Dazed and Confused," for that song, which was also wrong--sadly. I guess "School's Out" might have been a _better_ pick for Dazed though.

[spillguard]

I tried to guess "A Gnome called Gnorm" but it wasn't even an available option :(

[AdamTReineke]

Make sure you know the cost to serve that 2MB MP3, especially if you're go viral.

[wernah]

I quickly learned to set up AWS billing alerts, is there anything else I should keep an eye on?

[gknoy]

I have no comments on the JS, but this is a neat idea for a game, and fun to play. Thank you for making and sharing it! :)

[javier_e06]

Arrgh. I suck at this. I was put against a bad movie from 2000. 24 Years ago with a song from 1975 that is way better than the movie. I watched the original at a the matinee. I love the car-wash scene. I'll watch the movie again tonight https://www.youtube.com/watch?v=Le_SnbrNaog

[gknoy]

One thing that would be convenient would be a link to the previous / next song in the game. I found myself linking the archive page to friends, and while convenient, that isn't as compelling as your clear call to action on the normal play page. :)

[wernah]

Ok that's shooting right up the list! Back and forward arrows to allow you to hammer through the back catalogue

[tudorw]

Claude 3 seems much better than GPT4 at Python as of yesterday'ish, it's better at longer contexts (pasted 900 lines for example) and just a little better at organising and planning code. so much fun! Also getting fast!

[krumpet]

I've always considered Stack Overflow research to be very valuable. Less for the answer to my question and more for the related topics, edge cases, and other details that frequently are included in thorough answers / comments / discussions.

When AI answers your question (and only your question), that's great for that specific instance, but it feels to me like it's lacking in breadth. I wonder if that results in the user becoming really, really reliant on said AI as they don't fully grasp the interconnectedness of coding? Just a thought.

[wernah]

That's a fair take. I can't overstate Stack Overflow has been in the past, I think I often had that experience that it usually caters to common but specific scenarios, or I'm just impatient and lurk instead of asking a question and waiting for a response. Interesting I could paste Stack overflow discussions into ChatGPT to ask if this insight is related to my issue and it was usually open to relating the new info and helping me

[atleastoptimal]

You should ideally find songs that are only used in one movie, or perhaps specific versions of songs, like the Spanish version of "hotel California" in Big Lebowski

[groggo]

Wappalyzer extension says it's using Firebase, are you? If so, why mixing it with all the AWS stuff? I've been using Firebase for quick mini-projects and it's fun and quick it is for prototyping. If you use it for hosting, no worries about Cloudfront, routing, SSL, or anything... it even automates the github CI/CD.

How did you like using vanilla JS? What sort of build tool did you use?

[wernah]

ChatGPT actually suggested firebase for some very basic JSON event logging output I wanted to produce but I'm just realising AWS has something called amplify?

JavaScript has a reputation for being quirky but I'm assuming it has come a long way in the last 10 years (or maybe not) but very quickly I became comfortable with it in an obviously limited way. Next project I'd be more interested in a framework but I'm glad I cut my teeth trying to understand the basics first

[plorntus]

Out of interest how did you get the rights to stream the music? Cool game just curious if itl stick around.

I would definitely like some sort of “decade” option if at all possible so you can stick to films of a certain era. Some of the older ones I had no ability to guess (which is fine, just would like to weed those out for my own fun).

Also as others stated, some made for the movie tracks would be nice!

[kfichter]

A few different movies have this song in it, would be cool to accept any of the correct answers, depending on how easy that is.

[wernah]

I considered this, but given the way the clues are revealed i think I had to commit to a single answer per needledrop. I mentioned in the 'how to play' disclaimer the subjective nature of the curated list: We’ve selected what we believe to be the first or most iconic instance of each Needle Drop.

Doesn't make it any less frustrating when it doesn't accept a technically correct answer though.

[farleykr]

I was going to mention the same issue. Not sure how the site decides which is the correct answer, especially considering both possible answers were available in the autocomplete selections.

[hammond]

Indeed, my guess was Cheech & Chong:

https://www.youtube.com/watch?v=eSAOKuO5W8E

[rez9x]

My first thought was Dazed and Confused. I'm not sure if it's more iconic in Gone in 60 Seconds, as I've never seen it.

[WesleyJohnson]

Congrats on shipping! I enjoyed today's puzzle; love that movie. I found myself wanting to stop the song while I typed my answer, because it was a bit distracting. But I guess that's part of the game, right? If you stopped the song, you could "think on it" for minutes before typing your answer.

Fun concept.

[wernah]

I originally had the default 'pause' functionality up until yesterday but a lot of friends had given the feedback that it can exploited and that a running clock adds to the gametime pressure.

[lelandfe]

Congrats - works and looks good.

It's worth noting AI's current limitation for sites: pretty poor accessibility. Consider adding some "screen reader hidden" text for the menu link, and try using the interface with your keyboard (tabbing around). Happy to go into more detail if you want, or email in bio.

[wernah]

I hadn't considered that at all. Will address!

[jayturley]

Might want to add the year to the movie titles in the autocomplete. In today's puzzle, the title for both the 60s movie and the 2000s movie show up in the list and there's no way to differentiate them other than guessing. I guessed wrong.

Other than that, lovely idea and implementation!

[aabhay]

What do you think is the realistic ceiling of using an AI agent helper? Like when do you feel like you would “graduate” from the agent and just have enough skills to want to read documentation yourself, etc.? Or would you always imagine yourself using AI as a permanent coding tool?

[wernah]

I don't really know. I posted this link in the r/webdev subreddit and there was some pushback that this isn't code that is fit to charge clients for and that it shouldn't be trusted for serious engineering. The point was completely missed- I think an AI agent can supplement your understanding if the documentation is usually targeted at professionals. It's also perhaps a more engaging medium for some learners.

[groggo]

AI helper has taken me pretty far. I use rails day to day, but I've been using AI to help me build a few quick mini apps with React+Firebase. In rails I'm pretty comfortable, but I'd still use AI for quickly spitting out FE stuff or writing specs (It's much quicker than trying to remember how CSS grids work and which tailwind classes to use). But on the React+Firebase side, it's really critical to be productive. Maybe I'll eventually get to where I am with Rails, where I'd only ask it for specific types of tasks. But there's so much out there in the JS ecosystem. It's fun to be able to try out different tools and be productive without starting from 0. So - I don't really think there is a ceiling. Even if I was 100% fluent in whichever tools and frameworks I was using, it'd be useful for (interactive) rubber ducking, repetitive things like specs, and quickly prototyping UIs.

[mr_sturd]

This is great. I used to play this sort of game with friends, with our phones on a Bluetooth speaker.

I was on my last go when the screenshot gave it away for me. There were two options available in the search, but it seems I guessed correctly!

[davisp]

One more feature request is a “share score” text. Daily games like these are popular for bragging rights in group texts.

I’d think something like percentage of song played before correct with total number of guessed would cover it.

[wernah]

There should be a 'share your score' button revealed when you finish just like those games (I copied them) :)

[jay_kyburz]

I think if you are going to do this you need to do songs that were written for a movie. You can't play a Where is my Mind then ask somebody what movie its from. It's in _a lot_ of movies.

[dylan604]

Let's check with the judges...yes, we while we were looking for ____, we'll also accept ____

There's no reason you can't do both. Consider how there's a lot of YouTube comments with "who's here because of" type comments where people are looking for something heard in a movie/game/etc.

[tamimio]

In addition to “no clue” button, it would be nice to have some sort of incentive if you answered it fast, say I found out in the first 5sec then X, but if you do after 30sec then XY.

[steezeburger]

Today's song is in 2 movies, and I technically got it correct the first time, but the app counted it wrong.

Edit: it's actually in several movies. At least 4. All quite iconic imo.

[wallawe]

Same - here's the scene from the first movie I guessed https://www.youtube.com/watch?v=Alyx4QeRRdg which was marked as incorrect

[silisili]

Nice site but small usability complaint: on mobile web, the on screen keyboard blocks the suggestion dropdown, so I had to keep closing my keyboard to select a movie.

[LVB]

Small bug: for today's (3/5) puzzle, the autocomplete lists two of the same correct answer (identical text). The first one is a win, the second a loss.

[jebarker]

I really like this. One bug I hit on duckduckgo browser: after closing the tab for the site the music continued to play until I killed the browser entirely

[turtlebits]

Great concept - please add keyboard control, especially on that typeahead/autocomplete dropdown and form submission. (super frustrating to have to click)

[wernah]

ah good callout, ill add it to the list

[jihadjihad]

If you click and drag near the text under the clapperboard, you can see a frame from the film, which might help you guess the answer.

[wernah]

oh my! well spotted haha. Thank you

[LVB]

Well done! I love the idea and interface. The movie selection fit me too (some hard, some guessable quickly, all things I’ve seen).

[derN3rd]

Reminds me of Bandle (bandle.app) where you are guessing the song by listening to parts of a song (drums, then drums+base etc)

[erybodyknows]

Congrats on shipping. Do you have a write up with more detail on your approach to coding using ChatGPT?

[wernah]

Thank you! Not yet, it's definitely worth a talk or blog post IMO. I don't think it's well known how approachable learning how to code is with this kind of a tool. The way you're able to interrogate a response or ask it to clarify more simply what it is doing- I had so many 'a ha' moments with certain topics that felt overwhelming at first.

[ian0]

Congrats! Its lovely, especially like the transition after you submit the answer.

[gardenhedge]

How does the description (on HN) not mention Wordle?

[wernah]

I credit wordle and framed.wtf in the about section. This formatting of games has exploded in the last couple years, it really is a great way to get people returning each day

[ashfernandez]

What editor were you using to compile code?

[ashfernandez]

Super cool.. will def be using it for fun.

[xrd]

Another similar site is cinequote.net