besttechfrom.eu/docs/superpowers/specs/2026-10-17-product-details-design.md

Richer product details: design

Date: 2026-10-17

Intent

besttechfrom.eu is a Product Hunt style directory of European tech products. Today a product has a title, description, website, logo (stored as thumbnail), category, tags and a status. Visitors deciding between products need more: what it looks like, what it costs, who makes it, whether it is open source or EU based, and what else they could pick instead.

The site shows information. Visitors decide for themselves. Nothing here ranks, scores or endorses a product.

Goals

1. Screenshots: any number per product, shown as a gallery.
2. Badges: four tick marks, "Free tier", "Open source", "EU hosted", "EU made".
3. Pricing: a list of plans per product.
4. Team: a product has either a single author or a team of registered users with roles.
5. Alternatives: other products on the site, worked out automatically from shared tags.
6. Tags: already exist (tags, product_tag, tag picker on the create and edit forms). Keep them and make sure the submission form and product page expose them as in the mockup.

Non-goals

• No scoring or "trust" level from badges.
• No team invitations or acceptance flow.
• No edit rights for team members. They are listed only.
• No hand-picked alternatives, no external (non-listed) alternatives.
• No filter-by-badge on listings. (Possible later; see "Left to the builder".)
• No notifications when an admin unticks a badge.
• Not part of this work: the existing bugs (comment visibility, feature flags, and so on).

Anti-goals

• A badge that implies a claim the site has not checked. This is why the approving admin can untick badges.
• A product page that looks broken for products with no screenshots, no pricing, no team or no alternatives. Each section must hide itself when empty.

Decisions (made by the product owner)

Badges

• Four booleans on the product: free tier, open source, EU hosted, EU made.
• The submitter ticks them on the submission form.
• The approving admin can see and untick any badge while reviewing (on the manage screen or an edit view available to them). Whatever is saved after review is what visitors see.
• Badges are independent. "Free tier" is a tick, not derived from the pricing plans.
• Shown as pills in the product header and as small pills on product cards.
• Once a product is approved, badges are locked for the submitter: the edit form shows them read-only and the update ignores any badge input from them. Only admins and moderators can change badges after approval. (Product owner's decision.) While the product is still pending, or after rejection, the submitter can still tick and untick them.

Screenshots

• Unlimited count.
• Uploaded by the submitter on the form, removable on the edit form.
• Shown as a gallery under the header: one large image with smaller ones beside it, an "+N more" tile when there are many, and clicking opens the image full size.
• Section hidden when there are none.

Pricing

• A list of plans per product, any number, added by the submitter with an "Add plan" button.
• Each plan: name, price in euros, billing period (monthly, yearly or one-time), short description. A free plan is price 0.
• Shown as side-by-side cards in the main column under the description.
• Section hidden when there are none.

Team

• A product shows either its single submitter (when it has no extra members) or a list of people, each with a role (free text such as "Founder"), linked to their profile page.
• The submitter searches registered users and adds them directly. No invitation, no acceptance.
• Shown in the sidebar.
• Only the submitter and admins can add or remove team members. (Product owner confirmed the direct-add flow. The permission rule is our call, flagged below.)

Alternatives

• Computed automatically: other approved products ordered by the number of tags shared with this product, top few shown (default 3, our call).
• Products sharing zero tags are not alternatives.
• Shown as cards in the main column, below pricing and above comments, each with logo, name, short tagline (description excerpt), the product's badges and the number of shared tags.
• Section hidden when there are none.

Page layout (agreed in the mockup; the mockup files are not in the repo)

Product page, top to bottom:

1. Header: logo, title, tagline line with author, badge pills, tag list, upvote button on the right.
2. Screenshot gallery: one large image on the left, smaller ones beside it, an "+N more" tile when there are many.
3. Two columns. Main column (about three quarters): About, Pricing (plan cards side by side), Alternatives (cards), Comments. Sidebar (one quarter): Team.

Submission form, new fields in this order: badge checkboxes, tag picker (already exists), screenshot uploader with thumbnails and remove buttons, pricing rows with an "Add plan" button (name, price, period, description), team search with role field and remove buttons.

Constraints

• Laravel, Blade, Tailwind, Alpine, MySQL, Pennant for feature flags (already in the project). Follow existing conventions: slug route keys, Gate authorization, public disk for uploads (thumbnails/ is the existing folder), Pest tests.
• Existing products have none of the new data and must keep rendering normally.
• Only approved products appear as alternatives.
• Dark mode styles like the rest of the site.

Our calls (flagged for review)

• Only the submitter and admins manage the team.
• Show 3 alternatives.
• Screenshot limits per file follow the existing thumbnail rules (image types jpeg, png, jpg, gif; 2 MB each). Total count has no limit, as requested.
• Billing period is a fixed set: monthly, yearly, one-time.
• A user cannot be added to the same product's team twice, and the submitter cannot be added as a member.
• The submitter is always shown. With no extra members the page shows just the author. With extra members the submitter is listed first as "Author", followed by the members and their roles.
• Admins and moderators (the roles that already approve products) can tick or untick badges. They do it in the existing product edit form, which the edit Gate must now allow them to open. Their changes persist whether the product is then approved or rejected, and they can also do it on an already approved product.
• Submitters can add and remove screenshots, pricing plans and team members when editing, as with other fields today. Editing does not send an approved product back to review.
• Deleting a user deletes their team memberships. Deleting a product deletes its screenshots (files too), plans and team rows.
• Prices are stored as decimals with two places (for example 9.99), euros only, no "contact us" option.
• Alternatives never include the product itself. Ties in shared-tag count are ordered by upvotes, then newest.
• No feature flag. The new sections ship on for everyone.

Left to the builder

• Table and column design, migrations, indexes.
• Gallery and lightbox implementation (Alpine).
• User search endpoint for the team picker.
• Whether to cap the displayed screenshots in the gallery tile row.
• Whether the badge filter on the listing page is cheap enough to include. It is not required.
• Tests.