DEV Community: Muhammad Salman

I got tired of paying $200 for ugly Facebook ads. So I built an AI to do it instead.

Muhammad Salman — Sun, 08 Jun 2025 05:13:51 +0000

The problem every developer knows

You build something cool. Clean code, great architecture, solid product. Then you realize: people need to actually know it exists.

So you open Canva. Stare at blank templates. Spend 3 hours making something that looks... fine. Maybe. Your designer friend politely says "it's a good start" (translation: it sucks).

Or you post on Upwork: "Need simple Facebook ad, $50 budget." Get 47 responses. Pick someone. Wait 5 days. Get something generic that could be advertising literally any SaaS.

The "aha" moment

I was procrastinating on creating ads (again) when I realized: My website already has my brand. The colors, fonts, logo, even the way I write.

What if AI could just... extract all that and create the ads for me?

Not generic AI templates. Actually good ads that understand MY specific brand.

So I built it

The concept is simple:

Paste your website URL
AI extracts your brand identity (colors, fonts, logos, voice)
Generates ads optimized for different platforms
Download and use

No brand guidelines needed. No "make the logo bigger" iterations. Just ads that actually look like they belong to your brand.

The technical interesting bits

Brand extraction was harder than expected:

Parsing CSS to identify primary/secondary colors
Finding actual logos vs random images
Understanding brand voice from homepage copy
Handling weird website structures

Stack I ended up with:

Next.js for the frontend
Custom vision models for logo detection
GPT-4 for understanding brand voice
Image processing pipeline for different ad formats

The trickiest part was teaching AI to distinguish between "brand colors" and random website colors. A lot of websites have blue links - that doesn't mean blue is their brand color.

What I learned

Developers are terrible at marketing (myself included). We overthink it. We want everything perfect before we start. But honestly? An "okay" ad that ships is better than a perfect ad that never gets made.

AI is really good at pattern recognition. Once I figured out how to feed it the right context about a brand, it started generating surprisingly good stuff.

Solving your own problem works. I built this because I personally hate creating ads. Turns out other developers/founders feel the same way.

Current status

It's live at board.ad. Still working on improving the brand extraction (some websites are just... chaotic). But it already saves me hours of Canva frustration.

If you're a developer who also hates creating marketing materials, might be worth checking out.

Always down to chat about AI, SaaS building, or why CSS grid still confuses me. Find me wherever developers complain about things.

Sell your side projects

Muhammad Salman — Thu, 11 Jul 2024 15:02:53 +0000

Got a side project you’re proud of but don’t know what to do with it? Maybe it’s time to let someone else take it to the next level.

We’re launching a new platform called Acquireside where you can buy and sell unique side projects.

It’s super easy to use and helps you connect directly with folks who are interested in what you’ve built.

Acquireside is coming soon, and we’re excited to get things rolling. If you’re looking to sell your side project, why not join our waitlist? By joining, you’ll be one of the first to list your project when we go live. It’s a great way to ensure your project gets seen by eager buyers from the start.

We can’t wait to see all the amazing projects you’ve been working on. Join the waitlist now and get ready to share your passion projects with the world!

Top 10 Features to Include in Your SaaS MVP

Muhammad Salman — Mon, 06 May 2024 01:14:34 +0000

Creating a Minimum Viable Product (MVP) for your SaaS (Software as a Service) platform is a critical step in the startup journey. It helps validate your idea with minimal risk and investment. However, deciding which features to include can be challenging. Here's a list of the top 10 essential features that can help make your SaaS MVP valuable and attractive to early adopters.

1. User Authentication

Importance: Essential for personalizing experiences and securing user data.
Implementation Tips: Implement standard authentication methods like email/password and consider social logins for added convenience.

2. Core Functionalities

Importance: Focus on the primary function that solves the core problem for your target audience.
Example: If your SaaS is a project management tool, features like task creation and assignment are must-haves.

3. Basic Reporting and Analytics

Importance: Provides insights into how your product is being used and helps users measure their success.
Implementation Tips: Include simple dashboards with key metrics relevant to the user’s activities.

4. Mobile Responsiveness

Importance: Ensures accessibility across all devices, enhancing user engagement.
Implementation Tips: Use responsive design frameworks to ensure your application adjusts seamlessly to different screen sizes.

5. User Feedback System

Importance: Direct channel for receiving user insights and requests.
Implementation Tips: Simple forms or integrated feedback tools like Intercom can be very effective.

6. API Integration

Importance: Allows for scalability and integration with other tools and services.
Implementation Tips: Provide basic APIs that let users connect your SaaS with other tools they use.

7. Data Export and Import Capabilities

Importance: Helps users in data migration and backups.
Implementation Tips: Offer standard data formats like CSV for import and export.

8. Minimalist User Interface (UI)

Importance: Enhances user experience by making navigation intuitive and reducing the learning curve.
Implementation Tips: Focus on simplicity and user-friendly design elements.

9. Security Features

Importance: Critical for protecting user data and building trust.
Implementation Tips: Implement HTTPS, data encryption, and secure access protocols.

10. Customer Support

Importance: Provides users with assistance and enhances user satisfaction.
Implementation Tips: Start with basic email support, and as your user base grows, consider adding chat support.

Conclusion: Building a Focused MVP

Your MVP should not try to be all things to all people. Instead, focus on these essential features that support your core functionality, offer a great user experience, and allow you to collect actionable feedback. Remember, the goal of an MVP is to learn what your customers truly need and how your solution fits into their lives.

Get your SaaS MVP in 30 days - Grab your spot now

From Idea to MVP in Just 20 Days

Muhammad Salman — Mon, 29 Apr 2024 08:35:05 +0000

Have you ever found yourself up late at night, brimming with ideas, wondering how you could ever bring them to life?

Maybe you’ve sketched out plans, daydreamed about the launch, or even told friends about this cool app idea you’ve got. But then, there's that daunting question: "Where do I even start?"

Well, that’s exactly why I started Mossoai.

What’s Mossoai, you ask?
It’s your fast-track ticket from “idea” to “I did it!” We’re here to transform your Micro SaaS idea into a fully functional MVP (that’s Minimum Viable Product) in just 20 days. Yep, you read that right 20 days!

Why so fast?
Because the sooner you get your product out there, the quicker you can see it in action and get real feedback. This isn’t about rushing, it’s about being efficient and smart.

Here’s what we do:
From the moment you share your vision with us, we’re all in. Design, coding, testing, and launching? We’ve got it covered. You focus on dreaming big we’ll handle the nuts and bolts.

Who’s this for?
Anyone with an idea and a dream! You could be a seasoned entrepreneur or a newbie with a vision. If you lack the technical know-how or resources to get started, that’s where Mossoai steps in.

Imagine this:
It’s day 20, and you’re launching your very own app. You’ve skipped the lengthy development headaches, dodged massive costs, and you’re out there, making it happen.

**Why I believe in this:
**I’ve been where you are juggling ideas and wondering if they’d ever grow up to be real products. I started Mossoai because I believe everyone should have the chance to see their ideas come to life, without getting bogged down in the "how."

So, what’s next?
Are you ready to stop dreaming and start doing? Drop us a line, or let’s grab a virtual coffee. Your MVP is just 20 days away from reality, and I can’t wait to help you launch it.

Let’s make something amazing together!

Landing Tech Jobs in 2024: The Untold Method

Muhammad Salman — Mon, 25 Mar 2024 01:36:27 +0000

The tech market of 2024 is a battlefield. People are applying to thousands of jobs and getting ghosted. If you're not doing something different, you're going to be outcompeted. It's as simple as that. So, in this blog post, I'm going to tell you what you should already be doing, along with a new, untold method of getting tech jobs that no one has spoken about. Let's get started.

Step One: Have the Skills

You need to make sure that on your resume, you have some personal projects, open-source work, freelancing on Upwork or Fiverr, and finally, some paid or unpaid internships. If you don't know your tech stack, you're not going to get very far. But even if you do, this isn't 2020 anymore. You're not going to get a job just because you have the skills.

Step Two: Put Yourself Out There

Here's how:

A. Apply to as Many Jobs as Possible

This is basic. This is easy. We all need to be doing this already. But this is not enough anymore.

B. Attend In-person Networking Events

If you're living in New York, Toronto, Montreal, every single weekend, go to some tech event because you never know who you're going to meet.

C. Be Ready for Interviews

You might get one out of the blue, and if you're not prepared, if you haven't done your LeetCode, if you don't know your syntax, you're going to get bent over backwards.

Step Three: The Social Media Method

This way of getting tech jobs is frankly underrated. It involves two things: YouTube and Twitter.

Twitter

There is a vast tech community on Twitter. Everyone that you want to work for is probably on Twitter. Start posting every single day, hit around a thousand followers, share your code and progress, and let people know that you're looking for a job. Once you hit around a thousand followers, people are going to start reaching out to you.

YouTube

YouTube is super powerful because you can showcase your coding skills and your personality. Once you reach around 2 to 3,000 subscribers, people are going to start noticing. You want to make sure that you're coding live every single day, putting general 5 to 6-minute videos out talking about the tech industry, and make sure to put within all of your descriptions that you're looking for a job.

This method works because it's more efficient. You have leverage. Instead of applying to one job at a time, if you make a tweet that goes semi-viral on Twitter, maybe five hiring managers could see it. It's much more efficient than applying to one person at a time where an AI scanner automatically rejects your resume.

Conclusion

In the brutal tech market of 2024, standing out is key. It's not enough to just have the skills and apply to jobs. You need to put yourself out there, network, and be ready for interviews. But to really set yourself apart, leverage the power of social media. Build a following on Twitter and YouTube, showcase your skills and personality, and let the job offers come to you. This is the untold method of landing tech jobs in 2024. It's time to take control of your job search and start doing things differently.

I created a Next.js SAAS Toolkit

Muhammad Salman — Tue, 02 Jan 2024 09:28:13 +0000

Hey Everyone,

I have been working with next.js for the last 2 years and I decided to create Indiespace which is a SAAS toolkit to help you launch your next project without getting overwhelmed by setting everything up from scratch.

Tech Stack:

Next.js
Tailwind CSS
Shadcn UI
Next Auth
Stripe
Resend

What it includes:

2 waitlist pages
3 landing pages
SAAS boilerplate

For the boilerplate, I have also set up the docs for getting started with the boilerplate. Do check it out and let me know if there is I can add or improve.

$0 to $800+ in 3 weeks from a SaaS Boilerplate

Muhammad Salman — Fri, 08 Dec 2023 13:52:34 +0000

Hey Everyone,

So It's been 3 weeks since the launch of my side project Indiespace.store which is a Next.js-powered SaaS Bundle and it's been very surprising for me to see these results.

To know how I came up with this app, from idea to launch you can check my previous post which surprisingly went viral 🫠

In these 3 weeks I have got:

8.7k page views
17 new customers
$847 in revenue
80+ followers on X

It's really surprising to see people paying for something which I made purely for myself and everyone who bought it is happy with it. I have been actively updating the repo since then and added one more new landing page to it.

Also added the Docs for easy boilerplate setup 👇

I have many plans for this app and will convert it into a bigger marketplace for buying multiple boilerplates & templates.

I would highly appreciate it if you guys could check it out and give feedback on what can be improved and what should I include ✨

I took my side project from $0 to $200+ in 4 days

Muhammad Salman — Tue, 21 Nov 2023 11:09:55 +0000

So This is the story of how my side project which is basically a Next.Js SaaS Boilerplate Indiespace, got from $0 to $200+ in 4 days without any social media presence.

The Idea:

I have been working on this project for the last 1 and a half months, The initial plan was to create something I could use because I love to start new projects but often get overwhelmed with the feeling of setting up everything from scratch. So I started building this boilerplate which includes 2 landing pages, 2 waitlist pages, and a SAAS kit with a landing page and all the cool features like dark & light themes, subscriptions, one-time payments, transactional emails, authentication, SEO, etc.

The Expectation:

I had zero expectations of if anyone gonna buy it or not or how I was gonna market this as there are like every other developer launching a boilerplate with heavy stuff included and I don't have an audience. So I built it at my own pace and kept adding features.

The Launch:

My launch plan was to post about this on 3 platforms:

Twitter
Product Hunt
SideProject

So on Friday 17th November, I scheduled the launch on Product Hunt for Saturday 18th November, posted on Sideprojects, and went to sleep. I woke up on Saturday around 2 pm and saw Product Hunt notifications on my phone, So I opened my laptop and went into my Gmail and then I saw an email from Stripe, I opened it and:

So now I'm so confused about what the hell I'm looking at, and questioning myself is this from someone who purchased my boilerplate? I opened the product hunt and It has been 1 hour since the launch I'm in 6th position with 30+ votes without any marketing or asking people to upvote and already made a sale. I was freaking smiling like a child whaaaaaaaaaat?

Then I posted on Twitter, and asked some friends to upvote, and after the launch got the 7th position, 150+ upvotes, 1.7k page views, and around 10+ followers on Twitter.

The Lesson:

I know it's not a lot of money and I know it's nothing compared to what I earn from my full-time job but to be very honest, creating your own digital product, marketing it, and earning even a single penny from it will give you so much happiness. If you are a developer like me or someone who wants to build something and is confused about how everything is gonna work out, don't worry put your project out there in public let the people decide, do your effort, and keep moving forward.

At this point, I know my Indiespace is not perfect and there is just so much to do right now I have to add the freaking documentation as well and I already hate setting up the content layer docs ugghhhh, But yeah I will keep adding features which gonna improve my productivity as a developer.

Last but not the least:

I would recommend you guys give Indiespace.storea try if you are someone who wants to build a SaaS app, In case you are someone just starting out and cannot afford it drop me a message on Twitter I'll be more than happy to help you.

Leveraging Array Methods the Right Way in JavaScript

Muhammad Salman — Tue, 19 Sep 2023 17:25:18 +0000

In JavaScript, methods like map, filter, concat, and reduce are "pure" – meaning they don't change the original array. Instead, they produce a new array based on the logic you supply.

For instance, when you do:

xs.map(x => x.prop);

The original array xs remains untouched, and a brand new array is returned with the mapped values.

But here's a pitfall: some folks might be tempted to use a map just to loop over the array, say for logging:

xs.map((x, i) => console.log(`element #${i}:`, x));

This misuses map, which is intended to transform data, not just to iterate. For side effects like logging, forEach is a much better choice:

xs.forEach((x, i) => console.log(`element #${i}:`, x));

Bad Practice:

Using map without utilizing its return value:

characters.map(character => character.name);
console.log(characters); // The original array remains unchanged!

Recommended:

Use map when you actually intend to create a new transformed array:

const characterNames = characters.map(character => character.name);
console.log(characterNames); // A shiny new array with character names!

The lesson? Make sure to use array methods in a way that aligns with their intended purpose. This ensures that your code is both efficient and easy for others to understand.

What is the difference between an Element and a Component?

Muhammad Salman — Wed, 30 Aug 2023 16:30:48 +0000

Imagine you're building a house using building blocks. In this scenario:

Element: An element is like a single brick. It's the smallest building block in React, representing a part of your user interface. Elements are lightweight and immutable. They describe what you want to see on the screen, but they don't have any behavior or logic.

const element = <h1>Hello, World!</h1>;

Component: A component is a combination of several bricks forming a specific part of your house, like a window or a door. It's a reusable and self-contained piece of UI that can have its own behavior and logic. Components are created by combining multiple elements and other components.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

The Greeting component is made up of an element <h1> and some logic to display a personalized greeting.

Remember, React's component-based architecture allows you to create modular and maintainable UIs. Components are reusable and can encapsulate their own logic, making your application more organized and easier to manage.

What is JavaScript XML?

Muhammad Salman — Tue, 29 Aug 2023 19:45:06 +0000

Imagine you're a chef creating a recipe card for a delicious cake using two different languages: JavaScript and HTML.

JavaScript: This is the language you use to define the logic and behavior of your recipe. It's like the ingredients and instructions for your cake. But, just like a recipe, it's not very visually appealing on its own.

const ingredients = ["flour", "sugar", "eggs", "butter", "vanilla"];

function mixIngredients(ingredients) {
    // Mixing logic here
}

HTML: This is the language you use to describe how your cake should look. It's like the decoration and presentation instructions. This is where you make your cake visually appealing.

<div class="cake">
    <h1>Delicious Cake</h1>
    <ul>
        <li>Flour</li>
        <li>Sugar</li>
        <li>Eggs</li>
        <li>Butter</li>
        <li>Vanilla</li>
    </ul>
</div>

Now, JSX combines the best of both worlds. It lets you write the visual structure of your UI elements using HTML-like syntax directly within your JavaScript code. This is like having your recipe and decoration instructions in the same language.

function Cake() {
    const ingredients = ["flour", "sugar", "eggs", "butter", "vanilla"];
    return (
        <div className="cake">
            <h1>Delicious Cake</h1>
            <ul>
                {ingredients.map(ingredient => (
                    <li>{ingredient}</li>
                ))}
            </ul>
        </div>
    );
}

In the JSX example, we define a Cake component using JSX syntax. It looks almost like HTML but is embedded within the JavaScript code. The {} curly braces are used to embed JavaScript expressions within JSX, enabling dynamic content.

The Power of Design Systems: Streamlining UI Development with Figma and React

Muhammad Salman — Sat, 10 Jun 2023 18:06:30 +0000

Design systems are a game-changer for UI development. Let's explore how to harness the power of Figma and React to streamline your UI development process and build consistent, scalable interfaces!

🎨 Tip 1: Designing with Figma Components
Utilize Figma's component system to create reusable UI elements. By designing and organizing components in Figma, you establish a visual language that can be easily translated into React components, saving time and ensuring design consistency.

✨ Tip 2: Building a React Component Library
Leverage the power of React to create a component library that aligns with your Figma design system. Break down Figma components into reusable React components, encapsulating their functionality and styling.

💻 Tip 3: Using Styled Components for Styling
Integrate Styled Components into your React component library to enhance styling flexibility and modularity. With Styled Components, you can define and reuse styled elements with CSS-in-JS syntax, ensuring consistent and maintainable styles.

import styled from 'styled-components';

const Button = styled.button`
  /* Styles here */
`;

const StyledComponent = () => {
  return <Button>Click me</Button>;
};

🌐 Tip 4: Storybook for Component Documentation and Testing
Utilize Storybook to document, showcase, and test your React components in isolation. Storybook provides a dedicated environment to explore component variations, test edge cases, and document component usage guidelines.

🚀 Tip 5: Collaborating between Designers and Developers
Establish a seamless collaboration workflow between designers and developers using tools like Figma's developer handoff feature. Generate CSS code snippets, export assets, and provide design specifications to ensure accurate implementation and smooth handoff.

💡 By harnessing the power of design systems, Figma, and React, you can streamline UI development, promote design consistency, and build scalable interfaces. Empower your team with a robust design-to-development workflow and elevate your UI development game!