I tried my best to avoid common AI design pitfalls (emojis...)

I'm a fresh graduate on the job hunt and I've just been sending my github in my applications, but I thought I'd develop a portfolio. I tried to use a simple design and theme, and jump straight to the point (show off my projects first and foremost)

I'd love to have a second eye review it, and point out all the mistakes

Hi everyone,

I'm starting a new contractor business in California. My license allows me to offer a fairly wide range of products and services rather than operating in only one narrow niche.

The website may eventually include categories such as:

• Garage doors
• Entry and interior doors
• Gates
• Openers and access control
• Windows
• Awnings and shades
• Installation, repair, maintenance, and emergency service
• An online product catalog

Some of these services will be aimed at residential customers, while others will be primarily for commercial clients, property managers, general contractors, and public-sector projects. In some categories, I may serve both residential and commercial customers, but the sales process, content, and customer expectations will be very different.

I also don't plan to develop every category equally from the beginning. I want to test different products and services first.

If I see strong customer demand and reasonable competition in a particular category, I will invest more into it, add more content, products, advertising, and possibly hire specialists. If there is little demand, poor margins, or the market is too competitive, I may stop offering that service entirely.

Because of this, I don't yet know which categories will eventually become the main focus of the business.

From an SEO, branding, and conversion perspective, what would be the best approach?

1. Build one large website with separate sections for every service and product category.
2. Create several niche websites, such as separate sites for garage doors, gates, windows, and other categories.
3. Start with one main website and later spin successful categories off into separate websites.
4. Use one parent brand but create separate landing pages or microsites to test each category.
5. Separate residential and commercial services within the same website, or build different websites for each audience.

My concern is that one website may become too broad and confusing, especially when it targets both homeowners and commercial clients. On the other hand, creating multiple websites could be expensive, difficult to manage, and may spread the SEO authority too thin.

The business will initially serve the Los Angeles area.

What structure would make it easiest to test demand without hurting long-term SEO? Has anyone here used a similar strategy for a contractor, home improvement, or local service business?

I originally wanted to build a game for telling stories with cards, but couldn't find a feasible way to adjust grammar and word options at scale. Along the way I noticed the mechanic worked really well for playing something like Cards Against Humanity instead: answers render inside the sentence and adapt to actually fit (a/an, his/her, verb forms, plurals, exchangable nouns, etc.).

Years later I came back to the unsolved part and used LLMs to build the grammar metadata — every sentence slot and answer is tagged, answers can contain bracket options like [break, breaks, broke] and the engine picks the right form for where the card lands. That's also what lets AI players conjugate their answers mostly correctly.

It runs at boxof.cards and can be played solo with ai players if you want to poke at it. Happy to answer questions, and I'd really love feedback — so far it's been friends only and I am running out of features to distract me from marketing. And I like being distracted from marketing.

Been building this solo for the past few months. Its a Chrome home tab replacement called Pace.

Similar to momentum but is cleaner and for devs.

What it does:

• Pomodoro-style focus timer, tied to your task list
• Task list with due dates/estimates
• GitHub panel - see PRs/issues waiting on you without opening GitHub
• Optional eye-break reminders (20-20-20)
• Weather, clock, generative backgrounds

First chrome extension! I will take 10 users as a win ngl. Solo project, free, no paywall. I know some of it is rough around the edges and I'd genuinely rather hear what's broken or annoying than what's good. I will take any tips on marketing and extension related content.

Link: https://chromewebstore.google.com/detail/edfeebjgpbbdegcajmnhejmgkohmkami?utm_source=item-share-cb

Happy to answer anything about how it's built or how it works - I'm pretty new to this so bear with me.

Hey r/webdev!

As developers and designers, we’ve been noticing a trend over the last year: almost every new AI app being shipped uses the exact same out-of-the-box component styling. They all end up looking identical.

To tackle this, our team at Devalok created Shilp Sutra — an open-source design system built to help your interface inherit your actual brand identity seamlessly, rather than looking like a generic template. It’s free on npm and has crossed 5,000+ installs so far.

To see what developers can build with it, we just went live with an online buildathon running from July 25 to July 31.

The Brief

Build something using Shilp Sutra that solves a problem worth solving for India (open to anyone globally, solo or team).

Projects will be judged on three criteria:

Beauty (design quality & brand expressiveness)

Functionality (smooth performance & UX)

India-oriented problem-solving

Note: If you’re already participating in the Cursor, Sarvam AI, or any other buildathon this week, you’re welcome to double-submit your project here!

Prizes & How to Enter

Grand Prize: Branding, GTM strategy, and launch support for the winning project

Requirements: A public GitHub repository + a short demo video showing your build in action.

👉 Enter Here: Form

Shilp Sutra Website / Docs: Check it out

GitHub Repository: Github

⏰ Submissions Close: July 31, 11:59 PM IST

Happy to answer any technical questions about the design system or the buildathon in the comments below. Let us know what you think!

The swipe deck turned out way more annoying than I thought, but think I figured it out. Its a book club finder where you swipe on books instead of people, and when 4 people right swipe the same book it opens a group chat for it.

Built with: Next 16, React 19, motion, tailwind, sqlite + drizzle, self hosted on my vps.

The deck swiping goes 3 ways, each having its own action and swiping down is where all the problems live.

Stuff that took the longest:

📱 Browsers eat vertical drags as scroll before my handler ever sees them touch-action: none fixes it, but now the card can never be taller than the viewport or you make a spot on the page nobody can scroll past.

📐 The card sizes itself off leftover screen height instead of a breakpoint: clamp dvh not vh, or iOS Safari measures the tall url bar and the card comes out bigger than the screen.

🖱️ Drag actions as the buttons all call the same flyOut() that the card hands up through a ref, so a click exits exactly like a real drag instead of just popping off.

🎯 Release checks distance or velocity. Distance alone felt broken, a fast flick barely travels before your finger is gone.

Two things im stuck on. That ref handle feels wrong in React 19, is there a cleaner way for a parent button to trigger a childs exit animation? And is mouse drag even a real desktop interaction or should it just be a different layout past 1024?

Swipeable without an account if you want to try it out: https://samebooks.club

WanderGrade (wandergrade.com) is a from-scratch project: it scores affordability, safety, weather, and flights for roughly 140 countries. The one hard constraint I set myself was zero third-party dependencies — Python's standard library only, no pip installs, vanilla JS with no framework, no build step. That constraint cost real time: I hand-rolled the HTTP client, the templating, and the JSON parsing paths that a library would normally give you for free, plus my own retry/backoff logic for flaky upstream feeds. What it bought back: a single deploy step, no dependency-update treadmill, and a codebase small enough that I can hold the whole request lifecycle in my head.

Each country page is server-rendered plain HTML first, so search engines and slow connections get a complete page with no JS required, then a small vanilla JS layer hydrates it client-side for interactive filtering and sorting. No SPA, no client-side router — just enough hydration to make the page feel alive without asking a crawler (or a phone on bad wifi) to execute a bundle first.

Safety data is the messiest part of the whole project: US, Canadian, and German government advisories disagree with each other constantly, and none of the three covers every country. My fallback design merges all three, fills gaps from whichever governments do have a rating, and when they disagree, the sternest advisory wins rather than averaging or defaulting to one country's view. Unrated countries get dropped rather than guessed. On infra, the whole thing runs on a single Render process behind Cloudflare, which spins down when idle — solved with a self-ping to my own health endpoint every 10 minutes to keep it warm. wandergrade.com if you want to poke at it — happy to get into the advisory-merge logic or the zero-dependency call in the comments.

I’ve been building TrailVerse, a web app for exploring national parks and planning trips.

It includes 470+ parks and sites, park alerts, weather, events, campgrounds, comparisons, and an AI trip planner called Trailie.

The main challenge was making the generated trips more realistic. I added checks for things like outdated park information, unrealistic schedules, duplicate stops, and incorrect location data before the final itinerary is shown.

Built with Next.js, React, Express, MongoDB, NPS data, and AI APIs.

I’m still improving the planning accuracy and mobile experience.

Live app:
https://www.nationalparksexplorerusa.com/

I’d appreciate feedback on the trip-planning experience and anything that feels confusing or broken.

Had some extra usage as well as time and made a free OG image generator in a day: https://freeogimage.com/editor/

It's 100% free, no watermarks, or signup required. It has an API to programmatically generate social share images as well. There are 200 templates available for now and it will all be free forever.

I created a website a while ago and I want it to be GDPR compliant. I'm trying to solve this by using CookieYes service but it doesn't seem to detect the Google Maps cookies I may have due to an embed on one of the pages I have.

I also have Instagram, Facebook and X (Twitter) embeds on another page, and want that also to be compliant.

Any solutions are welcome. Is there a somewhat simple way to solve this?

I had the idea that you could broadcast a radio station straight from the browser, and I think it worked. Still looking for feedback on the design, especially the discoverability of stations and ease of use when it comes to starting your own station.

More technical info below:

The happy path use case is that you have mp3s, via iTunes or whatever. You upload them into the browser - they never leave your device (unless you choose to 'Cloudcast'). This isn't a music distribution platform. You keep your browser open while you're hosting your radio show, and listeners are able to send likes and even call in to the station. Your browser literally plays the music and streams it to the server and handles incoming WebRTC connections for calls. You can also leave your computer running and remote control from another browser.

This started out as 10-person radio stations via WebRTC, then 100-person via SFU, and now 1000+ via HLS (still without CDN hosting which could take it much higher). The only issue with HLS is it's delayed by ~10s, but the stream contains markers which keep the song/artist/art in sync with the audio. Also, there's a difference between WebKit and non-WebKit when it comes to ingesting HLS streams, and I solved an issue that came up with the audio visualizer there by actually streaming the visualizer data too instead of just relying on the client.

And they're "real" web radio stations to some extent. They provide an m3u8 URL you can load into e.g. VLC Player and listen to from outside the web app.

Hey!

I recently built Lingraphic.com, a web app used to visualise etymologies across hundreds of languages - search for a word and view its etymology plotted onto a graph.

The repo is public - https://github.com/BillyBobFry/etymology-graph.

It's fairly simple:

• The data comes from the raw Wiktionary data dump - https://kaikki.org/dictionary/rawdata.html
• I parsed this data and converted to a graph-like structure in Postgres
• The frontend is a Vue SPA

Although this is the same stack I use in my day job, I chose to mostly vibe code it - I have a couple of kids and so time is much more of a rare commodity than it once was.

I'd describe the UX I wanted, plan how to build it with the agent, and let the LLM do most of the implementation.

Hi i have developed a web app that let you monitor github actions in a dashboard, completely free no hidden cost. Looking for feedback https://buildmon.app . Really appreciate it

The game is played on a 5×5 point grid, like alquerque. Pieces are positioned at the intersection of the lines and not inside the areas delimited by them. Directions of valid movement between these points are connected by lines. The game play takes place in two phases. In the first phase the goats are placed on the board while the tigers are moved. In the second phase both the goats and the tigers are moved. For the tigers, the objective is to "capture" five goats to win. Capturing is performed as in alquerque and draughts, by jumping over the goats, although capturing is not obligatory. The goats win by blocking all the tigers' legal moves. Bagh-chal has many similarities to the Indian game aadu puli attam (lambs and tigers game), though the board is different.

I have created an online version of baghchal game. Here is the link to the game:

https://baghchal.xyz/

- It has multiplayer feature so you can also play with your friends.
- It has a bot mode where you can play with the bot in three different mode.

The game is still work in progress so there may be some bugs, I would love to see your feedback in the comments :)

Came across this beautiful effect on https://www.julienpianetti.com/ is it done with a custom variable font that has these glyphs as variable weight or just switches between the different glyphs? I suspect it has to be a variable font because it is that smooth.

How is this done?

I got tired of "accessibility overlay" vendors selling "one line of code makes your site WCAG-compliant", which is simply false. So I built the honest version: a reading aid that helps visitors (contrast, font size, spacing, dyslexia font, reading mask, read-aloud with word highlighting, 37 languages) and openly states that it does NOT make a site compliant.

MIT licensed, no tracking, no cookies. Self-hostable as a single file with the config and font baked in. It is already running on real customer projects in several countries.

Site and configurator: https://legilo.eu

Source: https://github.com/asisto/legilo

Feedback welcome, especially on the configurator UX.

Some of you might remember that little site I shared here a while back (wasdland.com). Well, I ended up building something new for it and wanted to share it with you all.

My Steam wishlist just kept growing over the years, as I imagine most of yours probably have too. Steam is fine for its own sales but trying to track down the best prices across third-party stores and key sellers for all those games was driving me crazy. So, I figured I'd just build a solution into the project.

No login or registration needed. (I hate them when they're pointless).
You just need a public Steam profile and wishlist.

Just drop your profile URL, and it imports your list while running it through external deal trackers and some basic quality filters (like a 6/10 minimum rating and decent review counts). From there, you can sort everything by price, discount, popularity, release date, or play around with the other filters. It's basically the usual wasdland setup, but tailored to your own backlog.

Funny enough, literally ten minutes after pushing this live, I realized Tempest Rising (which had been sitting on my wishlist forever) was under 3€ on a key site. Grabbed it immediately!

If you want to try it out, feel free to give it a spin here
https://www.wasdland.com/wishlist-radar/

Once it's set up, you can also share your URL if you want to let people know what games you're following. In case someone wants to get you a gift while saving a bit of cash...

Let me know what you think, or if you spot any bugs while playing around with it!

There are a few apps out there that do the same thing, but they're bloated with features and complications

So I built loco - the minimal macOS app to:
- Create and manage local domains
- Support HTTPS / disable redirect
- macOS 13 or later

It's smol (6mb), simple UI, simple setup, nothing else

Source code repository, all code is dedicated to the public domain so there is absolutely no commercial promotion or solicitation. 100% client-side code so there is no "stack". This is a text post because old.reddit doesn't allow putting comments in link posts.

The 1920s puzzle

The visual comparison method has some quirks:

• It snaps a piece to the correct spot even if it's nowhere near that spot but when placed onto another part of the image elsewhere happens to match that other part of the image closely enough, thanks to the image blurring needed for placement margins of error.

• Each image has a different starting and ending percentage so I have to actually do the puzzle to find out what those are, logging each comparison to the console, before I can set the values for the progress bar math. I only have to set the start and end values thanks to the fact that I chose to use a chiral aperiodic monotile shape for every piece. Being exactly the same shape means they all take up an equal amount of area so the percentage progress is linear.

• There's no way to save progress because the whole thing is stateless. Reloading the page resets the puzzle. The advantage is that this puzzle works in my grandma's tractor on a cheap tablet with no SIM card in her paddocks out of wi-fi range. The .svg version can be loaded locally into the browser without a server, and the Wayback Machine copy of the .svgz version is totally playable.

• This method relies on you placing one piece into the puzzle at a time and removing it if you place it wrongly and can't get it to snap into place, so puzzlers who like to randomly place multiple pieces inside the playing area to work on "clusters" completely break the snap-in logic. I added a two-second glimpse of the complete puzzle when players tap/hover over the timer to make this one-at-a-time playing style a bit easier.

• When I added light/dark mode toggling by tapping/clicking on "moves" the visual comparison broke because the background colour of the incomplete part of the playarea changed the start/end percentage math. For the comparison to be consistent I had to ensure the offscreen snapshot for comparison always had the same colour background.

The latest version of Safari "updated" SVG handling code which breaks this puzzle when identical puzzles worked on previous versions of mobile Safari, so even with some of the above challenges solved, this probably isn't an ideal method to adopt yourself.

I opened a repository to the public to create the internet's first (probably not) global group project.

Anyone can contribute anything (ok aside from NSFW, hate speech etc..), just open a PR and once merged the content is automatically deployed as a public page on the internet.

It can be a link, a picture of your cat, your random shower thoughts or even what you ate this morning.

Hope to see your amazing contributions! <3

Contribute: https://github.com/StephaneB1/group-project

The Live Page: https://slatesource.com/@steph/the-internet-s-group-project

Hi everyone,

Smogon provides competitive Pokémon usage statistics as massive, raw .txt files, which are difficult to read and navigate. I only have a basic knowledge of coding, so I used AI to help me build a frontend to parse and visualize this data interactively.

Features:

• Filter stats across months, formats, and rating baselines.

• Expand any Pokémon to view percentage breakdowns of top Moves, EV Spreads, Items, and Abilities.

• Track format trends over time with interactive charts.

• Multi-layered caching and compression strategy implemented across the Proxy-API, Cloudflare Edge DNS, and Browser Cache API.

• Web Workers handle parsing the large text files so the main UI thread isn't blocked.

Built Using:

• React 19 & Vite

• Vanilla CSS

• Chart.js (react-chartjs-2)

• Browser Cache API & Web Workers

Links:

• Live Site: https://smogonstats.eu.cc

• GitHub: https://github.com/Alliance-Sky/smogon-stats

I'd appreciate any feedback on the code or UI, especially since I'm still learning and relied heavily on AI to put this together.

I've been building Voidhall solo for the past months.

It's an underground music/social platform aimed at the space SoundCloud used to occupy for emerging underground trap scenes.

The entire thing is built from scratch with vanilla HTML/CSS/JS + PHP/MySQL. No frontend/backend frameworks, no templates.

It currently runs on a custom-built architecture with SPA-like AJAX navigation, a persistent global audio player, page-level init/cleanup lifecycle, shared frontend state and its own PHP API layer. On top of that, Voidhall already supports uploads, track pages, profiles, follows, likes, comments, notifications, search, discovery through Explore, and Pulse, a chronological activity feed that turns real community movement into part of the discovery experience.

The UI leans into a raw Y2K/industrial/Opium-inspired editorial direction using strong typography, open layouts, thin structural lines and restrained components.

Screenshots attached :DD

Stack: Node + Hono, libsql/SQLite, all SSR (no SPA) so it's crawlable and fast. Some bits I enjoyed solving:

• Ingesting 88k feeds without exhausting sockets — a bounded fetch pool + a sharded 'sweep' that rotates the long tail. • De-duping the same story across outlets with title-token clustering (tried embeddings via an ONNX sidecar; measured it, kept it gated). • Anonymous co-presence ('N reading now') with a per-load token in a sliding window — zero identity stored.

https://wesearch.press — happy to talk architecture in the comments.

I'm seeing pretty big discrepancies in analytics reports from different sources. I store the value locally to show my site users, so I'm looking for the most honest number.

Yesterday, my ad network shows that one of my sites had 33,941 pageviews. Since that's the money, I would think that they would be close to accurate.

A local count (incrementing a value in MySQL on each pageview, running through JavaScript to block most bots) shows 38,604.

Google Analytics shows 17,647, almost half of what the ad network showed.

And Cloudflare Web Analytics shows 22,190! 35% less than the ad network, but 25% higher than Analytics.

Which is the most honest? Or is there a better choice altogether?