01
Overview.
Tastes Smokey is a whiskey tasting tracker for people who want a simple place to record what they’ve tried and what they thought of it. Users can add bottles with photos, log tastings with a half-star rating and notes, and see each bottle’s average rating across everyone’s tastings.
I built it with React and TypeScript for the website, Node and Express for the server, and a PostgreSQL database to store everything.
02
Built with.
03
Challenges.
Challenge
Before
After
Image upload timing
Whiskeys saved without their photo because the upload URL wasn’t available yet.
Made the upload function return the URL directly and used it in the save request.
Stale ratings
Deleting a whiskey’s last tasting left the old rating showing on the page.
Found the page only loaded the whiskey once, so I made it reload after every delete.
Reusable delete modal
Delete buttons fired instantly, and passing a function to React state ran it immediately.
Stored the pending action as a function in state so one modal confirms any delete.
04
The results.
Homepage showing the currently reviewed whiskies
Information about Ledaig 10 with tasting notes
Add a whisky to the collection
05
What I learned.
01
State isn’t instant
In React, a value you’ve just set isn’t ready to use straight away, so if I need it right away, I keep it in a normal variable and use that instead.
02
Don’t upload too early
Uploading a photo the moment it was picked left unused files behind, so I moved the upload to happen when the form is saved.
03
Server-side permissions
Hiding a delete button isn’t enough, so the server checks who owns something before it lets anyone delete it.
06
