Reel Github Grabber

Ship #1

@jupeme6 on Reel Github Grabber · about 1 month ago

What did you make?
A local tool called ReelTools to save reel links (Instagram, TikTok, etc.)
that mention GitHub repos or useful websites. Each entry stores the tool’s
name, the reel URL, the repo URL, a short description, tags, and a
transcript. Everything lives in the browser’s localStorage, so it works
fully offline with no account and no backend. There’s also an export button
that dumps the whole list into a .md file, so you can use it as a “tool
memory” to feed other AIs later.

What was challenging?
Two bugs almost broke me. My editor’s autocomplete kept rewriting value
to ariaValueMax and reset to requestFullscreen. The second one made
the whole page go fullscreen black when I hit submit, and it took me
embarrassingly long to spot. Later, when I added the edit button, editing
the first entry kept deleting the last one. Turned out I was loading the
data twice from localStorage, which created different object instances, so
indexOf returned -1 and splice ate the last entry. Classic JS reference
trap.

What are you proud of?
The export to .md actually works and produces a clean file you can use
right away. Also the search bar — it filters in real time by name, tag, or
description, and I had to figure out how to keep the original index working
when the list is filtered, which felt like a real problem to solve rather
than just following a tutorial.

What should people know so they can test your project?
It runs entirely in the browser, no install needed. Open the demo URL,
paste a reel link (or any URL), add a name and whatever else you want, hit
Add. Try the search bar and the edit button on each entry. Hit “Export to
.md” to download the whole list as a markdown file. Everything stays in
your browser, nothing is sent anywhere. Refresh the page and your entries
are still there.

Live demo: https://notjuangamer10.github.io/reeltools/
Source: https://github.com/notjuangamer10/reeltools

3 devlogs
10h
1.36x multiplier
14 Stardust

Try project → See source code →

Open comments for this post

@jupeme6 on Reel Github Grabber · about 2 months ago

2h 38m 19s logged

Small update on ReelTools. Added a search bar that filters by name, tag or
description in real time, and an edit button on each entry (before you could
only delete). Edit is a bit hacky: it loads the entry into the form and
deletes the old one, then when you hit Add it creates a new entry with the
changes. Felt cleaner than a full edit mode.

Hit a sneaky bug: editing the first entry kept deleting the last one. Took
me a while to figure out but turns out I was loading the data twice from
localStorage, which created different object instances, so indexOf returned
-1 and splice ate the last entry. Classic JS reference trap.

Search was tricky too because of the same issue, keeping the original index
when the list is filtered. Not touching the UI for now, ReelTools is done.
Moving on to the next project.

Open comments for this post

@jupeme6 on Reel Github Grabber · 2 months ago

5h 34m 42s logged

Second version is up. Now each entry saves a name, the reel URL, the repo
URL, a short description, tags, and a transcript. I also added an export
button that dumps everything into a .md file because the idea is to use it as a
“tool memory” to feed other AIs later. The transcript sits inside a
dropdown so it doesn’t clutter the list.

Hit two stupid bugs while building it. My editor’s autocomplete kept
rewriting value to ariaValueMax and reset to requestFullscreen.
The second one made the whole page go fullscreen black when I hit submit.
Took me embarrassingly long to spot.

The UI still screams AI though. Same orange theme, same emojis everywhere.
I know I said I’d remove the emojis for this version and… I didn’t.
For v3 I’m committing to it: no emojis, more sober palette, cleaner layout.
If anyone has actual UI design tips for someone who’s bad at CSS, please
share.

Open comments for this post

@jupeme6 on Reel Github Grabber · 2 months ago

1h 45m 28s logged

I’ve finished the first version; for now it only saves the link and little else, but bigger things are coming. Also, the UI screams AI, and I don’t like that design. Does anyone have any videos or tips on how to design UIs? Gemini has been showing me and has added his own “artistic touches.” I don’t like the design; I think it’s ugly. I’ll probably remove the emojis for the second version.