<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anthony Riera</title>
    <description>The latest articles on DEV Community by Anthony Riera (@anthonyriera).</description>
    <link>https://dev.to/anthonyriera</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F136505%2Fe62c9359-440c-4b65-acc1-02edd19503c9.jpg</url>
      <title>DEV Community: Anthony Riera</title>
      <link>https://dev.to/anthonyriera</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/anthonyriera"/>
    <language>en</language>
    <item>
      <title>How I Actually Build SaaS with AI in 2026 (No BS, Just What Works)</title>
      <dc:creator>Anthony Riera</dc:creator>
      <pubDate>Mon, 30 Mar 2026 09:55:23 +0000</pubDate>
      <link>https://dev.to/anthonyriera/how-i-actually-build-saas-with-ai-in-2026-no-bs-just-what-works-hbg</link>
      <guid>https://dev.to/anthonyriera/how-i-actually-build-saas-with-ai-in-2026-no-bs-just-what-works-hbg</guid>
      <description>&lt;p&gt;I see a lot of people talking about “AI will build your SaaS in X clicks” or "Coders are cooked because of X new model is out".&lt;/p&gt;

&lt;p&gt;This is BS, no product is 100% AI made.&lt;/p&gt;

&lt;p&gt;If you try to let AI do everything, you’ll end up with a broken, slow, soulless product nobody wants.&lt;/p&gt;

&lt;p&gt;So here’s the real way I build SaaS today. This is not theory. This is what I use every day.&lt;/p&gt;

&lt;p&gt;First, your stack matters more than you think.&lt;/p&gt;

&lt;h2&gt;
  
  
  Use boring stuff.
&lt;/h2&gt;

&lt;p&gt;This is my go-to boring stack that always works:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Next.js&lt;/li&gt;
&lt;li&gt;Tailwind&lt;/li&gt;
&lt;li&gt;Postgres&lt;/li&gt;
&lt;li&gt;ShadCN&lt;/li&gt;
&lt;li&gt;Drizzle&lt;/li&gt;
&lt;li&gt;Better Auth&lt;/li&gt;
&lt;li&gt;TypeScript&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Why?&lt;/p&gt;

&lt;p&gt;Because AI understands it well. You are not fighting your tools.&lt;/p&gt;

&lt;p&gt;If you pick some weird stack, your AI will hallucinate half your app.&lt;/p&gt;

&lt;h2&gt;
  
  
  Second, stop trying to generate your UI with AI.
&lt;/h2&gt;

&lt;p&gt;This is where most people mess up.&lt;/p&gt;

&lt;p&gt;AI UI looks like trash. Always.&lt;/p&gt;

&lt;p&gt;No taste, no spacing, no feeling.&lt;/p&gt;

&lt;p&gt;You need to do this part yourself. This is literally your product.&lt;/p&gt;

&lt;p&gt;If your UI sucks, your SaaS is dead.&lt;/p&gt;

&lt;h2&gt;
  
  
  Third, build onboarding first.
&lt;/h2&gt;

&lt;p&gt;Not features. Not dashboard. Not pricing.&lt;/p&gt;

&lt;p&gt;Onboarding.&lt;/p&gt;

&lt;p&gt;If users don’t get value in the first few minutes, they are gone forever.&lt;/p&gt;

&lt;p&gt;Make it stupid simple. No friction. No thinking required.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fourth, never let your AI go rogue.
&lt;/h2&gt;

&lt;p&gt;Always use plan mode.&lt;/p&gt;

&lt;p&gt;Think of AI as a junior dev, not a cofounder.&lt;/p&gt;

&lt;p&gt;It will:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;misunderstand things&lt;/li&gt;
&lt;li&gt;break stuff&lt;/li&gt;
&lt;li&gt;add random logic you did not ask for&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You are the captain. Always.&lt;/p&gt;

&lt;p&gt;If you are not reviewing the code, you are building on quicksand.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fifth, build less than you want.
&lt;/h2&gt;

&lt;p&gt;If you think you need 10 features, you actually need 3 or 4.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;More features = more bugs&lt;/li&gt;
&lt;li&gt;More bugs = worse UX&lt;/li&gt;
&lt;li&gt;Worse UX = no users&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Simple wins.&lt;/p&gt;

&lt;p&gt;Now the part nobody wants to hear.&lt;/p&gt;

&lt;p&gt;Talk to your users.&lt;/p&gt;

&lt;p&gt;Not once. Not sometimes. All the time.&lt;/p&gt;

&lt;p&gt;Most devs hide behind code and AI because it feels productive.&lt;/p&gt;

&lt;p&gt;It’s not.&lt;/p&gt;

&lt;p&gt;You need to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;answer questions&lt;/li&gt;
&lt;li&gt;watch how people use your product&lt;/li&gt;
&lt;li&gt;understand where they struggle&lt;/li&gt;
&lt;li&gt;fix it fast&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is the real feedback loop.&lt;/p&gt;

&lt;p&gt;This is exactly why I built &lt;a href="https://cossistant.com" rel="noopener noreferrer"&gt;Cossistant&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;It’s basically a  component you drop into your app.&lt;/p&gt;

&lt;p&gt;It lets you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;talk to users directly inside your product&lt;/li&gt;
&lt;li&gt;let AI help answer when you are not there&lt;/li&gt;
&lt;li&gt;learn from conversations so it gets better over time&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So instead of guessing what to build, you just listen and ship.&lt;/p&gt;

&lt;p&gt;That’s it.&lt;/p&gt;

&lt;p&gt;Here is the loop that actually works:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Talk to users&lt;/li&gt;
&lt;li&gt;Understand the problem&lt;/li&gt;
&lt;li&gt;Use AI to implement fast&lt;/li&gt;
&lt;li&gt;Ship&lt;/li&gt;
&lt;li&gt;Repeat&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Never break this loop.&lt;/p&gt;

&lt;p&gt;Ever.&lt;/p&gt;

&lt;h2&gt;
  
  
  Last thing.
&lt;/h2&gt;

&lt;p&gt;Make your product FEEL human. Speed matters. Details matter. Small things matter. People can feel when something is rushed or generic. AI can help you move fast, but taste, care, and attention is still your job.&lt;/p&gt;

&lt;p&gt;Most people won’t do this.&lt;/p&gt;

&lt;p&gt;They will:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;overbuild&lt;/li&gt;
&lt;li&gt;trust AI too much&lt;/li&gt;
&lt;li&gt;ignore users&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you avoid that, you already have an edge.&lt;/p&gt;

&lt;p&gt;Now go build something real, some with AI and some with your human brain, we need you!&lt;/p&gt;

</description>
      <category>saas</category>
      <category>webdev</category>
      <category>ai</category>
      <category>programming</category>
    </item>
    <item>
      <title>My "simple" plan to build a SaaS from $0 to $1M valuation</title>
      <dc:creator>Anthony Riera</dc:creator>
      <pubDate>Wed, 25 Feb 2026 11:11:03 +0000</pubDate>
      <link>https://dev.to/anthonyriera/my-simple-plan-to-build-a-saas-from-0-to-1m-valuation-1mef</link>
      <guid>https://dev.to/anthonyriera/my-simple-plan-to-build-a-saas-from-0-to-1m-valuation-1mef</guid>
      <description>&lt;p&gt;There are a thousand ways to make 1 million dollars in life and one of the best chances I, the nerdy nerd who can code, have to reach this number is by building a successful SaaS and selling it.&lt;/p&gt;

&lt;p&gt;But for most people, this goal of growing a SaaS to 1 million dollars in valuation seems impossible.&lt;/p&gt;

&lt;p&gt;Of course it's really hard. I've actually never done it.&lt;/p&gt;

&lt;p&gt;I just think that with the right mindset and by reframing the thing a little bit, this might actually become... possible?&lt;/p&gt;

&lt;p&gt;But for that, I've got to have a solid plan. A plan so simple that even I can turn it from a plan to a reality.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reframing in numbers
&lt;/h2&gt;

&lt;p&gt;Let me reframe this 1 million dollar valuation into numbers. Something more reachable so my primate brain can better visualize it.&lt;/p&gt;

&lt;p&gt;The target: I'll be following what Marc Lou has been doing for the past year with his startup DataFast and his goal to reach 20K MRR. He has done it and the magic number is 20K.&lt;/p&gt;

&lt;p&gt;20K because if I multiply it by 12, I get an annual recurring revenue of $240,000 USD and a SaaS can generally be sold for around 4 to 5 times the ARR. So that would be my million dollar.&lt;/p&gt;

&lt;p&gt;I'm talking US dollars by the way, sorry to my Canadian and Aussie friends, but otherwise this is cheating.&lt;/p&gt;

&lt;p&gt;Easy right? 20,000 definitely sounds less than 1 million to me.&lt;/p&gt;

&lt;h2&gt;
  
  
  Beginning
&lt;/h2&gt;

&lt;p&gt;I'm starting this journey from 0. I'll share everything. My plan to get there, my successes so I can show what worked for me and my failures so you can laugh at me and not reproduce them. And if you do reproduce them, then, there is I fear, nothing I can do for you.&lt;/p&gt;

&lt;p&gt;Before I start with the plan, I need to come clean. I haven't been completely honest. I'm not starting from zero, my product already generates $60 USD per month. But it doesn't matter, I will explain my plan point by point starting from how to find a valid idea and first customers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Idea
&lt;/h2&gt;

&lt;p&gt;As builders, we tend to let our ego dictate our ideas. We see success stories of big entrepreneurs and think we also have to have big bold ideas for our projects. This is completely false.&lt;/p&gt;

&lt;p&gt;What do Marc Lou, Pieter Levels or even Tony Dinh have in common? Yes they make a lot of money, but their ideas aren't new. They didn't create a new segment or even create a new tech. They took something already proven and made their version of it.&lt;/p&gt;

&lt;p&gt;This is what I'm doing too.&lt;/p&gt;

&lt;p&gt;In the past I fell for the trap of building something I thought people would want and trying to solve a problem very few people have. That's a mistake. I don't have infinite time and money, I don't have this luxury, so it's simpler to just copy an idea and make it mine.&lt;/p&gt;

&lt;p&gt;Nothing is unique anymore, even more in the age of AI.&lt;/p&gt;

&lt;p&gt;My idea is simple: a customer support platform that comes with an AI agent built-in and I'm focusing on the niche of software engineers and small tech teams. The idea exists, customer support is a big problem every SaaS needs to solve, and I'm solving it for this niche. Not every niche, this one only.&lt;/p&gt;

&lt;h2&gt;
  
  
  Craft, do not create
&lt;/h2&gt;

&lt;p&gt;Ideas can be copied. This is exactly what I've done.&lt;/p&gt;

&lt;p&gt;Now, what makes a huge difference is my taste and the soul, care and energy I put in my product. I could have vibe coded the whole thing. I could have carelessly shipped new features and got the product out maybe two months earlier.&lt;/p&gt;

&lt;p&gt;But the truth is good quality development takes time. Even with AI. And you know this as well as I do: you can tell when a product is made with AI. The generic component layouts. The same shadcn defaults everywhere. The lorem ipsum energy of it all.&lt;/p&gt;

&lt;p&gt;Minimum viable products aren't a thing anymore, the bar is too high. Developers especially can smell a lazy build from a mile away because we look at products differently. We inspect elements. We notice when the 404 page is the default Next.js one. We judge.&lt;/p&gt;

&lt;p&gt;So I took a product in a validated market and I'm making it with a better UX for a specific set of people. I wouldn't subscribe to a SaaS with a crap user experience or interface, and neither would you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Know who I'm selling to
&lt;/h2&gt;

&lt;p&gt;I skipped this part for most of my projects, but not with &lt;a href="https://cossistant.com" rel="noopener noreferrer"&gt;Cossistant&lt;/a&gt;. Not knowing who my ideal customers are literally means I'm building my product blindly. Making features because they can be nice. But nice for who? Everyone?&lt;/p&gt;

&lt;p&gt;Being liked by everyone means being loved by no one.&lt;/p&gt;

&lt;p&gt;So I've done the exercise myself, to for once, define who is my ideal customer profile. I created a quick ChatGPT prompt for this (link in comments if you want it). It will help dig and nail this part because it's really important.&lt;/p&gt;

&lt;p&gt;ICP should include things like company type, who their customers are, how many employees they have, who will use the product, the tools they already use or want to replace and what they value.&lt;/p&gt;

&lt;p&gt;Below is my first honest try at defining Cossistant, something I should have done way before writing any line of code:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Cossistant is for small companies selling successful SaaS products built with the React ecosystem. They want to stay close to their customers, offer a good support experience while staying efficient and preserving their time as much as possible to invest it back in the product they're building.&lt;/p&gt;

&lt;p&gt;They think an AI agent can help them save some time on repetitive requests so they can focus on blocking ones. They're B2B or B2C SaaS with an MRR above $1K with 1 to 15 employees. They are product teams: engineers, technical founders, tech-savvy product managers.&lt;/p&gt;

&lt;p&gt;They need to add support to their SaaS, ideally support that would work and fit well with their tech stack. Engineers or technical founders as the primary decision makers.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If you're reading this on dev.to, there's a decent chance you match this profile. Small team, building a SaaS, probably using React or Next.js, and probably handling support in a Slack channel or your personal inbox right now. I've been there.&lt;/p&gt;

&lt;h2&gt;
  
  
  Market the idea
&lt;/h2&gt;

&lt;p&gt;Coding my SaaS is the easy part. Marketing it is where most founders get stuck, including myself.&lt;/p&gt;

&lt;p&gt;And I get it. I'm a developer. I'd rather refactor a component for the third time than write a tweet about my product. But I don't want to get stuck this time. I've got a great product in my hands, but people need to hear about it.&lt;/p&gt;

&lt;p&gt;How do I do that? How can I create momentum around my product?&lt;/p&gt;

&lt;p&gt;First, the obvious: my product must be great. Trying to sell a shitty product is the equivalent of urinating facing the wind. It's a bad idea.&lt;/p&gt;

&lt;p&gt;But once the product is good enough, I need to talk about it a lot. Like Taylor, the CEO of Beehiiv said: ship one marketable feature every week. Only work on features that can have a wow effect and would look nice in an X post, a dev.to article, a demo GIF, anything. The more I do that, the more momentum is created around my product and the more people will want to join the train.&lt;/p&gt;

&lt;p&gt;Humans love stories. If we see other humans enjoying something, we want to enjoy it too. I saw that with SuperX made by Rob. Nothing for months, then everything. Classic overnight success and I'm aiming for the exact same story.&lt;/p&gt;

&lt;p&gt;But I only have 24 hours in a day and I cannot build and market my product on 5 different platforms. So I need to choose and stick to it. I will personally focus on Reddit, X and YouTube. YouTube being long content, X and Reddit more day-to-day updates.&lt;/p&gt;

&lt;p&gt;I don't want to sell anything. I want the product to sell itself. Product-led sales is what attracts me most as a software engineer. When the flywheel spins, it's hard to stop it. Making a better product equals having more people talking about it, sharing it and using it. The absolute dream.&lt;/p&gt;

&lt;p&gt;But the flywheel is really hard to start spinning. The first efforts seem useless until something happens. Marketing efforts compound into more results. I just gotta stick long enough.&lt;/p&gt;

&lt;h2&gt;
  
  
  Experiment and have fun
&lt;/h2&gt;

&lt;p&gt;All of this is a lot of effort and I need to do it for long enough to stay in the game and see results. So my best bet is making experimentations along the way. Building cool stuff to promote my main product.&lt;/p&gt;

&lt;p&gt;This is what I've done with &lt;a href="https://facehash.dev" rel="noopener noreferrer"&gt;facehash.dev&lt;/a&gt; for instance, an avatar library for React that developers can use in their own SaaS. You &lt;code&gt;npm install&lt;/code&gt; it, pass it a string, and it generates a unique avatar. This project is directly tied to Cossistant and my hope is that developers end up using Cossistant because they love what I'm building on the side.&lt;/p&gt;

&lt;p&gt;I actually got my first paying customers after this experimentation, which is really cool if you ask me. Open source as a marketing channel. Who knew.&lt;/p&gt;

&lt;h2&gt;
  
  
  Be present and supportive
&lt;/h2&gt;

&lt;p&gt;The last point and the most important one: communicate with my customers. Ship important features fast and well. Fix bugs like if my life depended on it. Make my product feel premium and made by a human.&lt;/p&gt;

&lt;p&gt;In the age of AI, this is exactly what humans will crave. We need AI and will learn to live with it, but at our core, we want to know a human can be there for us. We want to know we're heard. When I open a GitHub issue and the maintainer responds in 20 minutes, I remember that. When I get a canned "we'll look into it" three weeks later, I remember that too.&lt;/p&gt;

&lt;p&gt;So I need to be there along the way. Create communities, be proactive and listen carefully. Not take things personally. If somebody gives me feedback it means they care enough to take some of their precious time and write something for me. If my product is bad or not good enough, this is on me, not them. So I fix it, make it better and make more money.&lt;/p&gt;

&lt;p&gt;For what it's worth, if you're dealing with support on your own SaaS right now, check out &lt;a href="https://cossistant.com" rel="noopener noreferrer"&gt;cossistant.com&lt;/a&gt;. If you read until this point, it probably means we're aligned and you'd like the product I've crafted.&lt;/p&gt;

&lt;h2&gt;
  
  
  Patience
&lt;/h2&gt;

&lt;p&gt;This is my plan. Now I need to do it long enough, well enough to start seeing results. I would like to say I'll make it in 2 months, but this is probably wrong. 6 months, 1 year, 2 years? More likely. Time will tell, but I'll share everything along the way.&lt;/p&gt;

&lt;p&gt;What are you building? Drop it in the comments and I'll give you my honest feedback on your idea.&lt;/p&gt;

</description>
      <category>saas</category>
      <category>startup</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Your app probably looks like sh*t when users don’t upload avatars</title>
      <dc:creator>Anthony Riera</dc:creator>
      <pubDate>Mon, 02 Feb 2026 11:22:34 +0000</pubDate>
      <link>https://dev.to/anthonyriera/your-app-probably-looks-like-sht-when-users-dont-upload-avatars-3pfn</link>
      <guid>https://dev.to/anthonyriera/your-app-probably-looks-like-sht-when-users-dont-upload-avatars-3pfn</guid>
      <description>&lt;p&gt;I love making good polished UIs. If you’re reading this, chances are you do too.&lt;/p&gt;

&lt;p&gt;But you know the story.&lt;/p&gt;

&lt;p&gt;You ship a clean UI.&lt;br&gt;
Everything looks sharp.&lt;br&gt;
Then users sign up… and never upload a profile picture.&lt;/p&gt;

&lt;p&gt;Now your app is full of empty circles, broken layouts, or that sad default avatar everyone pretends is fine (it’s not, I hate it so much).&lt;/p&gt;

&lt;p&gt;I got tired of it, so I built &lt;a href="https://facehash.dev" rel="noopener noreferrer"&gt;Facehash&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Facehash generates simple, deterministic avatars from a name.&lt;br&gt;
Same name, same face. No randomness. No API calls. Simple React component.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { Avatar, AvatarImage, AvatarFallback } from "facehash";

&amp;lt;Avatar&amp;gt;
  &amp;lt;AvatarImage src="/photo.jpg" /&amp;gt;
  &amp;lt;AvatarFallback name="anthony" /&amp;gt;
&amp;lt;/Avatar&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbihijdc4o4r2o0q8hr7u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbihijdc4o4r2o0q8hr7u.png" alt="How the lib works in action" width="800" height="261"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A few things that mattered to me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Works with any React setup (Next.js, Vite, Remix, whatever)&lt;/li&gt;
&lt;li&gt;Easy to style with Tailwind or plain CSS&lt;/li&gt;
&lt;li&gt;Looks decent out of the box&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’m already using it in real products, especially anywhere avatars show up a lot (dashboards, chats, support tools, can also be used for your AI agents).&lt;/p&gt;

&lt;p&gt;Once you drop it in, your UI just… stops looking unfinished.&lt;/p&gt;

&lt;p&gt;There are also a couple of dumb hidden things on the landing page.&lt;br&gt;
If you find them, congrats, I didn't spend those extra Claude tokens for nothing.&lt;/p&gt;

&lt;p&gt;Side note: this came out of building &lt;a href="https://cossistant.com" rel="noopener noreferrer"&gt;Cossistant&lt;/a&gt;, it a customer support platform where avatars actually matter because humans and AI are both in the loop. Facehash is just one of those tiny pieces that quietly makes it feel more polished and I wanted to make it a lib!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8kzw1jpi6asp7fgsl84i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8kzw1jpi6asp7fgsl84i.png" alt="Cossistant dashboard with profile pictures" width="800" height="514"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Steal it. Ship it.&lt;/p&gt;

&lt;p&gt;Your users still won’t upload photos and you know it, but at least your app won’t look broken.&lt;/p&gt;

</description>
      <category>react</category>
      <category>webdev</category>
      <category>ui</category>
      <category>uidesign</category>
    </item>
    <item>
      <title>Just added support for a NextJS route that generates the same avatars in PNG.

Super useful for emails!
Enjoy 😁</title>
      <dc:creator>Anthony Riera</dc:creator>
      <pubDate>Fri, 30 Jan 2026 13:06:41 +0000</pubDate>
      <link>https://dev.to/anthonyriera/just-added-support-for-a-nextjs-route-that-generates-the-same-avatars-in-png-super-useful-for-53d2</link>
      <guid>https://dev.to/anthonyriera/just-added-support-for-a-nextjs-route-that-generates-the-same-avatars-in-png-super-useful-for-53d2</guid>
      <description>&lt;p&gt;

&lt;/p&gt;
&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/anthonyriera/your-app-looks-like-sht-when-users-dont-upload-avatars-1o5p" class="crayons-story__hidden-navigation-link"&gt;Your app looks like sh*t when users don’t upload avatars&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/anthonyriera" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F136505%2Fe62c9359-440c-4b65-acc1-02edd19503c9.jpg" alt="anthonyriera profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/anthonyriera" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Anthony Riera
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Anthony Riera
                
              
              &lt;div id="story-author-preview-content-3209056" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/anthonyriera" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F136505%2Fe62c9359-440c-4b65-acc1-02edd19503c9.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Anthony Riera&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/anthonyriera/your-app-looks-like-sht-when-users-dont-upload-avatars-1o5p" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Jan 30&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/anthonyriera/your-app-looks-like-sht-when-users-dont-upload-avatars-1o5p" id="article-link-3209056"&gt;
          Your app looks like sh*t when users don’t upload avatars
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/react"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;react&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/ui"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;ui&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/saas"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;saas&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/nextjs"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;nextjs&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/anthonyriera/your-app-looks-like-sht-when-users-dont-upload-avatars-1o5p" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;3&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/anthonyriera/your-app-looks-like-sht-when-users-dont-upload-avatars-1o5p#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              1&lt;span class="hidden s:inline"&gt; comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            2 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;




</description>
      <category>react</category>
      <category>ui</category>
      <category>saas</category>
      <category>nextjs</category>
    </item>
    <item>
      <title>Your app looks like sh*t when users don’t upload avatars</title>
      <dc:creator>Anthony Riera</dc:creator>
      <pubDate>Fri, 30 Jan 2026 03:33:34 +0000</pubDate>
      <link>https://dev.to/anthonyriera/your-app-looks-like-sht-when-users-dont-upload-avatars-1o5p</link>
      <guid>https://dev.to/anthonyriera/your-app-looks-like-sht-when-users-dont-upload-avatars-1o5p</guid>
      <description>&lt;p&gt;I love making good polished UIs. If you’re reading this, chances are you do too.&lt;/p&gt;

&lt;p&gt;But you know the story.&lt;/p&gt;

&lt;p&gt;You ship a clean UI.&lt;br&gt;
Everything looks sharp.&lt;br&gt;
Then users sign up… and never upload a profile picture.&lt;/p&gt;

&lt;p&gt;Now your app is full of empty circles, broken layouts, or that sad default avatar everyone pretends is fine (it’s not, I hate it so much).&lt;/p&gt;

&lt;p&gt;I got tired of it, so I built &lt;a href="https://facehash.dev" rel="noopener noreferrer"&gt;Facehash&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Facehash generates simple, deterministic avatars from a name.&lt;br&gt;
Same name, same face. No randomness. No API calls. Simple React component.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { Avatar, AvatarImage, AvatarFallback } from "facehash";

&amp;lt;Avatar&amp;gt;
  &amp;lt;AvatarImage src="/photo.jpg" /&amp;gt;
  &amp;lt;AvatarFallback name="anthony" /&amp;gt;
&amp;lt;/Avatar&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbihijdc4o4r2o0q8hr7u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbihijdc4o4r2o0q8hr7u.png" alt="How the lib works in action" width="800" height="261"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A few things that mattered to me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Works with any React setup (Next.js, Vite, Remix, whatever)&lt;/li&gt;
&lt;li&gt;Easy to style with Tailwind or plain CSS&lt;/li&gt;
&lt;li&gt;Looks decent out of the box&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’m already using it in real products, especially anywhere avatars show up a lot (dashboards, chats, support tools, can also be used for your AI agents).&lt;/p&gt;

&lt;p&gt;Once you drop it in, your UI just… stops looking unfinished.&lt;/p&gt;

&lt;p&gt;There are also a couple of dumb hidden things on the landing page.&lt;br&gt;
If you find them, congrats, I didn't spend those extra Claude tokens for nothing.&lt;/p&gt;

&lt;p&gt;Side note: this came out of building &lt;a href="https://cossistant.com" rel="noopener noreferrer"&gt;Cossistant&lt;/a&gt;, it a customer support platform where avatars actually matter because humans and AI are both in the loop. Facehash is just one of those tiny pieces that quietly makes it feel more polished and I wanted to make it a lib!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8kzw1jpi6asp7fgsl84i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8kzw1jpi6asp7fgsl84i.png" alt="Cossistant dashboard with profile pictures" width="800" height="514"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Steal it. Ship it.&lt;/p&gt;

&lt;p&gt;Your users still won’t upload photos and you know it, but at least your app won’t look broken.&lt;/p&gt;

</description>
      <category>react</category>
      <category>ui</category>
      <category>saas</category>
      <category>nextjs</category>
    </item>
    <item>
      <title>What's the easiest path to become web dev: my thoughts</title>
      <dc:creator>Anthony Riera</dc:creator>
      <pubDate>Mon, 23 May 2022 09:27:14 +0000</pubDate>
      <link>https://dev.to/anthonyriera/whats-the-easiest-path-to-become-web-dev-my-thoughts-4eml</link>
      <guid>https://dev.to/anthonyriera/whats-the-easiest-path-to-become-web-dev-my-thoughts-4eml</guid>
      <description>&lt;p&gt;The best way to learn anything and especially to code is in my opinion to have a clear plan and clear goal in mind.&lt;/p&gt;

&lt;p&gt;You need to learn by intention, meaning you need to solve the &lt;strong&gt;“how”&lt;/strong&gt; to get the &lt;strong&gt;“where”&lt;/strong&gt;. Coding is all about problem solving.&lt;/p&gt;

&lt;p&gt;The “where” can be anything: you might want to start a blog, launch the new Tinder for dogs or create the website for a business you have in mind.&lt;/p&gt;

&lt;p&gt;You’ve got to start small and I think web development is one of the easiest and most versatile skills to pick up right now.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start by learning the basics of a website
&lt;/h2&gt;

&lt;p&gt;To reach your goal you need to start with the basics: learn &lt;code&gt;HTML&lt;/code&gt;, &lt;code&gt;CSS&lt;/code&gt; and &lt;code&gt;JavaScript&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;A good analogy to understand why you need to learn those three languages is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HTML is the skeleton, it defines the structure&lt;/li&gt;
&lt;li&gt;JavaScript is the brain and muscles, it will manage the logic and the interactions&lt;/li&gt;
&lt;li&gt;CSS is the skin/clothes, it manages the overall look and feel&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A good place to start is to learn using these resources: &lt;a href="https://www.codecademy.com/catalog" rel="noopener noreferrer"&gt;Codecademy&lt;/a&gt;, &lt;a href="https://www.w3schools.com/default.asp" rel="noopener noreferrer"&gt;W3Schools&lt;/a&gt; and &lt;a href="https://developer.mozilla.org/en-US/" rel="noopener noreferrer"&gt;Mozilla&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Some are free and some come with a fee, but these skills being in high demand it is definitely worth the price.&lt;/p&gt;

&lt;h2&gt;
  
  
  Find a mentor (optional but recommended!)
&lt;/h2&gt;

&lt;p&gt;I started learning coding alone without any guidance or help but I wish I had someone to guide me towards the right tech and help me focus on the right thing. This is maybe one the most important tip that will make you grow SO MUCH FASTER: find a mentor.&lt;/p&gt;

&lt;p&gt;They will help you when you're stuck, they will motivate you and more importantly they will inspire you!&lt;/p&gt;

&lt;h2&gt;
  
  
  Use your new skills to implement a cool design
&lt;/h2&gt;

&lt;p&gt;You now know the basics, it's time to get your hands dirty and code a real life example. Take a website that you love or pick a cool design on &lt;a href="https://dribbble.com/shots/popular/product-des" rel="noopener noreferrer"&gt;Dribbble&lt;/a&gt; and code it!&lt;/p&gt;

&lt;p&gt;Some cool examples:&lt;br&gt;
| &lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkoxvw3krcz2y1c2jszhq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkoxvw3krcz2y1c2jszhq.png" alt="Landing page" width="800" height="600"&gt;&lt;/a&gt; |&lt;br&gt;
|:--:|&lt;br&gt;
| &lt;a href="https://dribbble.com/shots/17816364-Geener-Agency-Digital-Marketing-Landing-Page" rel="noopener noreferrer"&gt;Minimalist landing page&lt;/a&gt; |&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0bw4hutpumtsgwlxgwjx.jpg" alt="Photo gallery" width="800" height="600"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;| &lt;a href="https://dribbble.com/shots/14370638-Minimalist-web-design-for-Interior-designer-from-Russia" rel="noopener noreferrer"&gt;Minimalist photo gallery&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Learn NPM and React
&lt;/h2&gt;

&lt;p&gt;This one is really opinionated, there is many more libraries/frameworks available but React is the one that will help you land the most jobs and is also by far the easiest to pick up.&lt;/p&gt;

&lt;p&gt;It will help you make professional web apps, create complex flows and any king of interactions easily.&lt;br&gt;
It's widely adopted by the community and you can find an endless number of libraries to help you on your journey.&lt;/p&gt;

&lt;p&gt;It's being used by the best out there: Facebook, Airbnb, Instagram, Shopify, Paypal, Dropbox to name a few.&lt;/p&gt;

&lt;p&gt;The best place to start is the &lt;a href="https://reactjs.org/docs/hello-world.html" rel="noopener noreferrer"&gt;official documentation&lt;/a&gt;. You can also refer to &lt;a href="https://www.codecademy.com/learn/react-101" rel="noopener noreferrer"&gt;Codecademy's course&lt;/a&gt; which is really nice.&lt;/p&gt;

&lt;h2&gt;
  
  
  Find a project, learn, code, fail, repeat
&lt;/h2&gt;

&lt;p&gt;Project based learning is the fastest way to pick up any new tech. Find a project you want to work on, it can be anything - an idea of yours or you can copy an existing one.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Copying is about reverse engineering&lt;br&gt;
-- Austin Kleon&lt;/p&gt;

&lt;p&gt;Make copies, young man, many copies. You can only become a good artist by copying the masters.&lt;br&gt;
-- Jean-Auguste-Dominique Ingres&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Some product idea that can be copied:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://teuxdeux.com/" rel="noopener noreferrer"&gt;https://teuxdeux.com/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.getminimalist.com/" rel="noopener noreferrer"&gt;https://www.getminimalist.com/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Thanks for reading
&lt;/h3&gt;

&lt;p&gt;I also made a video version of it on youtube, I'm curious to have your thoughts about it!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://youtu.be/1HbdeNs3sp0" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4n3hgihne0wy79k1h73s.jpg" alt="Watch it on Youtube" width="480" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Anthony.&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
