DEV Community: Abde Lazize

From Full Stack Freelancer to Micro SaaS Founder: Vibe coding as a Solo Developer

Abde Lazize — Tue, 29 Apr 2025 16:09:16 +0000

After four years as a freelance full-stack developer, I decided to join the indie hacking movement and build my own micro SaaS. The result? StickersAI – an AI-powered sticker generator that creates custom stickers from text prompts.

The Unexpected Journey

I had spent years comfortable in my code editor, building products for clients. When I decided to create StickersAI, I naively thought that development would be the challenging part. I couldn't have been more wrong.

While building the product was straightforward for someone with my background, I quickly discovered that creating a SaaS business involves much more than just writing code. Marketing, legal requirements, and tax considerations became my new daily challenges – areas I had never needed to master as a freelancer.

Tech Stack Snapshot

For those curious about what's powering StickersAI, here's the stack I chose:

Frontend/Backend: Next.js
Database/Auth: Supabase
Styling: Tailwind CSS with shadcn UI components
Monitoring: Sentry for error reporting
AI Integration: OpenAI for prompt enhancement and Replicate for image generation

Leveraging V0 and Cursor AI as my development tools alongside this modern stack dramatically accelerated my workflow as a solo developer. These AI-powered tools handled much of the boilerplate. The combination of Next.js and Supabase proved especially valuable for indie hacking – providing enterprise-level capabilities with minimal DevOps overhead and a scaling path that grows with your user base.

Beyond The Tech

What shocked me was how little time I actually spent coding once the initial product was built. Instead, my days became filled with:

Learning about marketing channels to reach potential users
Setting up legal documents and understanding compliance requirements
Figuring out tax implications for digital products sold globally
Building a personal brand to support my product

The Vibe Coding Reality

"Vibe coding" your way to a successful micro SaaS looks glamorous on Twitter, but the reality is both more challenging and more rewarding than it appears.

The biggest takeaway? Technical skills are just one piece of the indie hacking puzzle. Being willing to learn, adapt, and push beyond your comfort zone is what ultimately determines success.

If you're a developer contemplating your own micro SaaS journey, know that the code is just the beginning – but don't let that stop you. The skills you'll develop along the way are invaluable, regardless of the outcome.

Feel free to check out StickersAI and reach out if you have questions about my indie hacking journey!

Happy vibe coding!

Using $ to select HTML elements without using jquery

Abde Lazize — Mon, 12 Jul 2021 20:38:47 +0000

you want to use the dollar sign $ to select HTML elements but you don't want to use Jquery ?
All you need to do is this:

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document)

Now let say we have a div with the class container, you can select it like this:

const container = $(".container");

Now lets say we have multiple inputs with the class input and we want to select all of them, you can do it like this.

const inputs = $$(".input");

If you found this post useful give it a like.

javascript: type conversion and type coercion

Abde Lazize — Mon, 12 Jul 2021 17:59:36 +0000

Some of the helpful and most used features in JavaScript are type conversion and type coercion, although, they can help you write less and more readable code, they can be the source of bugs especially type coercion, therefore knowing and understanding them will save you from some painful bugs. So what are type conversion and type coercion?

They both mean converting values from one type to another, for example from string to number, from number to Boolean, etc. but there is a huge difference between them.

1- Type conversion:

As we said, it’s changing the type of values, but manually, as an example, let’s say we have the value of an input which is a year of birth and we want to calculate the current age, as you know the type of input value is a String and to do the calculation we need to convert it to a number.

const  input = document.querySelector(‘input’);
const  currentYear = new Date().getFullYear();
const yearOfBirth = Number(input.value);
const  currentAge = currentYear - yearOfBirth;

We stored the input value in the input variable, we get the current year using the getFullYear() method and assigned it to the current year variable, and this is the important part,
we converted the input value which is a string to a number using the Number() function, and finally, we stored the result of the calculation in the current variable.

In JavaScript, you will always need to perform such conversions, the widely used functions are:

String(): to convert a value to the type of String.
Number(): to convert a value to the type of Number, but if the value is not a valid number the output will be NaN which means Not a Number (by the way, type of NaN is Number).
Boolean(): to convert a value to the type of Boolean, true or false.

Those functions are very important and useful.

2- Type coercion:

This conversion is done automatically by JavaScript, it may look hard to grasp at first but understanding it is crucial for mastering JavaScript.

Let’s go back to the first example:
Before doing the calculation you need to check if the user submitted his year of birth and you may do it like this:

const  current;
if(input.value.trim() !== ""){
    currentAge = currentYear - yearOfBirth;
}

As you may know any string but an empty string is true even a string with whitespace that's why we use the trim() method to remove whitespace from both sides of a string, so If the input value doesn’t equal an empty string then do the calculation, now let’s do it with the coercion in mind :

const  current;
if(input.value.trim()){
    currentAge = currentYear - yearOfBirth;
}

Do you see the difference? What’s happening is that JavaScript will automatically convert the input value from a string to a Boolean and if the value is true then do the calculation.

This behavior exists everywhere in JavaScript, for example:

1 + ‘1’  // ‘11’
1 - ‘1’ // 0
true * false // 0
10 / true // 10
1 == true // true

This behavior is weird but it’s beneficial and learning it has a lot of advantages.
I hope you have learned something from this article, if you found it useful don't forget to give it a like.

Storing data in electron

Abde Lazize — Sun, 11 Jul 2021 20:44:43 +0000

I created a lot of applications using electron, and the problems I faced were always with persisting data and user preferences.
I had to spend a lot of time and effort trying to save data to a JSON file and trying to update it every time the data changes in the app, so I said to my self why not creating a package that can help me do so.
I started writing the package and adding to it all the features I needed, so after some coding, testing, and debugging I come up with this package called electron-data-holder. BTW it was very difficult to find this name because every name I try is already taken. Nowadays, finding a name for your package is harder than making the package itself.

This package has a lot of features such as:

Creating multiple files each one with its name, for example, a file for storing data and another for storing user preferences.
Encrypting the data
Specify the folder where you want to put the JSON files
The data is watched and the JSON files will be updated after every change
There is no API to manipulate the data, work with your data as you would do in vanilla Javascript.

How it works

Step 1 :

In the main process call initDB(), this function accepts a configuration object with 2 properties:

key : string (not required) : the encryption key must be 32 characters long
customPath : string (not required) : The path to the folder where you want to store the JSON files.

const { initDB } = require('electron-data-holder');

// the encryption key must be 32 characters long.

initDB({ key: 'the-encryption-key', customPath: 'the-path-to-the-folder' });

The 2 parameters are not required, if you didn't pass an encryption key the data won't be encrypted and if you didn't pass a folder path, the folder will be app.getPath('userData').

Step 2 :

In the rendrer call storeDB(), this function accepts 2 parameters :

Data object : object (required) : The data must be an object.
Configuration object : (not required) : accepts 2 properties :
- fileName : string: The name is a string and without the .json part the default is data.json.
- encryption : boolean : whether you want the data to be encrypted or not, the default is false.

const { storeDB } = require('electron-data-holder');

// This function will returns a proxy with your data in it in order to watch the changes and update the JSON file.

const data = storeDB(
  {
    user: {
      firstName: 'Elon',
      lastName: 'Mask',
    },
    hobbies: ['learning', 'codding'],
  },

  {
    fileName: 'dataFile',
    encryption: true,
  }
);

// you can create multiple files by giving each one a different name

const config = storeDB(
  {
    darkMode: true,
    fontSize: 16,
    fontFamily: ['Courier', 'Courier', 'Everson Mono'],
  },

  { fileName: 'config' }
);

When the app is launched, it will search for the JSON files and get the data from them if they exist and return it, if not it will use the object you passed as the first parameter.

After writing these lines of code, you are now ready to work on your app without worrying about the data.

Manipulating data

Let's use this example:

const { storeDB } = require('electron-data-holder');

const data = storeDB(
  {
    user: {
      firstName: 'Elon',
      lastName: 'Mask',
    },
    hobbies: ['learning', 'coding'],
  },

  {
    fileName: 'dataFile',
    encryption: true,
  }
);

Reading data

Let's log to the console the first element in the hobbies array:

console.log(data.hobbies[0]); // 'learning'

Modifying data

Let's add "gaming" to the hobbies array:

data.hobbies.push('gaming');

console.log(data.hobbies); // Proxy {0: "learning", 1: "coding", 2: "gaming"}

Let's add an "age" property to the user object:

data.user.age = 47;

console.log(data.user); // Proxy {firstName: "Elon", lastName: "Mask", age: 47}

The storeDB() function returns a proxy with your data in it in order to watch the changes and update the JSON file.
Every time you modify your data the JSON file will be updated accordingly.

As you can see there is no extra stuff for reading and modifying your data and also you don't need to worry about saving it in every change, this package will handle everything for you so you can focus on building your app. HAPPY CODING

javascript: add an event listener to an inexistent element.

Abde Lazize — Sat, 21 Nov 2020 18:50:04 +0000

When writing the code for your website or app, manipulating the DOM ( document object model ) is a critical skill you must have, so in this article, we will see how to add an event listener to an inexisted element and also some important tips and tricks to avoid unexpected and weird bugs.
I will be using codepen to better demonstrate the example.
the first codepen example

1-Adding a click event to the future element:

The HTML I’m using in the first example is just a simple button that says Go to login page.

<!DOCTYPE html>
<html>
<head>
<title>DOM manipulation</title>
</head>
<body>

<button class="login">Go to Login page</button>

</body>
</html>

For Javascript, I'm adding an event to the button listening for a click, so when the button is clicked, the event function will clear the DOM and insert a login form.

const body = document.querySelector('body');
const btn = document.querySelector('.login');

btn.addEventListener('click', (e)=>{

  body.innerHTML = '';

  body.insertAdjacentHTML('afterbegin', `
  <form action="#" class="form">
  <input type="email" class="input" placeholder="Email">
  <input type="password" class="input" placeholder="Password">

  <button type="submit" class="submit-btn">Login</button>
  </form>
  `)

})

The future element I'm willing to attach the click event to is the button with class submit-btn, to do so we need to determine the closest and always existing parent (in this example is the body) and attach the click event to it, then we will test if the targeted element has the class submit-btn, if so, I'm going to prevent the form from submitting and just write to the console you are logged in :).

body.addEventListener('click', event => {
  if(event.target.matches(".submit-btn")){
    event.preventDefault()
    console.log("you are logged in :)")  
  }
})

2-Adding a different event to the future element:

What if the event we want to attach is not a click let say it’s a change event, how we are going to implement it?
the second codepen example

The HTML I'm using in this example is a button that says Choose a car.

<!DOCTYPE html>
<html>
<head>
<title>DOM manipulation</title>
</head>
<body>

<button class="btn">Choose a car</button>

</body>
</html>

the javascript I will use in this example is the same but instead of inserting a form, I will insert a select element with cars names as options.

btn.addEventListener('click', (e)=>{

  body.innerHTML = '';

  body.insertAdjacentHTML('afterbegin', `
  <label for="cars">Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
  `)

})

The future element we want to attach the change event to it is the select element, so we will attach a click event to the body (the closest and always existing parent), testing if the targeted element has the ID cars if so, we will add a change event to the select element, in the callback function for the change event I will store the select value in a car variable and write it to the console.

body.addEventListener('click', event => {
  if(event.target.matches('#cars')){
    document.getElementById('cars').addEventListener('change', e => {
      const car = document.getElementById('cars').value;
      console.log(car);
    })
  }
})

It works, BUT WAIT A MINUTE.

At first, it looks like it's working, then when you do it again the event fires multiple times, why is that happening?

The first time I got this error I was about to get crazy, I searched everywhere, I tried all the solutions I found but nothing worked for me, then I started experimenting with my code, and BOOOM I found the solution.

the problem why this is happening is because each time we click the select element a change event gets attached to it because the callback function we are using is anonymous, so the solution is declaring the function with a name and then use it as a callback.

const eventHandler = e => {
      const car = document.getElementById('cars').value;
      console.log(car);
    }

body.addEventListener('click', event => {
  if(event.target.matches('#cars')){
    document.getElementById('cars').addEventListener('change', eventHandler)
  }
})

I suggest experimenting with it in codepen example so you can get a better understanding of what happening. I won't fix it in the example, I want to give you the chance to fix it your self to understand it and memorize it.
thank you for reading this article, I hope you liked it and learned something from it. And please excuse my English.

web development: the start

Abde Lazize — Fri, 13 Nov 2020 17:14:18 +0000

When I first decided to learn web development it took me a long time to figure out the path I will take along this journey, so I watched a lifetime of youtube videos, and I read a ton of articles in which I got to know the different languages and stacks, then I started drawing my roadmap to start the actual learning, so I thought why not share my experience it may help someone to start without losing much time.

concepts to grasp

Web development consists of two parts front-end and back-end.

1. the front-end

The front-end is all about the client-side in which you will use HTML CSS and JAVASCRIPT, those are the main tools you will need to create the client-side, but to call yourself a front-end developer you must learn one of the client-side frameworks such as Angular, React and Vue. You may ask, which is the best framework? There is nothing such a thing, it all depends on your preferences, so to know what suits you better try to make a simple app with all of them so you will end up with the one you prefer. Well, is that all? Actually NO, front-end needs some skills you have to learn and develop but they require a lot of practice, this is where your creativity will shine and this is what differentiates a front-end developer from another:

Web design: mainly focuses on the appearance of a website, the colors, fonts, icons, etc used.
UI design: user interface design focuses on making the website look simple and easy to understand by the end-user.
UX design: user experience design is studying the way users use the website and making changes accordingly by putting the most used parts of the website simple to access.

2. the back-end

Also, known as server-side programming, is all about creating the logic that powers the website or the app you are working on, for the tools you will need:

a programming language: there are a variety of programming languages that you can use for example (java, go, c#, python), etc, it’s not like the front-end where you are limited to javascript (you can also use javascript in the back-end with nodejs).
an operating system: you can choose one of the Linux distributions like Ubunto, CentOS, etc, or you can go with Windows or Mac os, pick the one you are comfortable with.
a web server: the web server is just a program that serves the website or application content to the client, the most popular web servers are Apache and Nginx.
database: the database is where your data will be stored you can either go with SQL databases like Mysql, Postgresql, SQLite, etc, or NoSQL databases like MongoDB, MariaDB, CouchDB, etc, try to learn the differences between them and how to choose the best database for your project.

A roadmap for you

With this massive amount of new technologies, finding your way is very overwhelming. So here is a roadmap you can use to have a smooth and crystal clear learning path, follow this list one by one in the order putted in, the learning resources are limitless, youtube, freecodecamp, etc.

how the web works
security in the web
HTTP and HTTPS
cookies
a little bit about networking
APIs
HTML and CSS the basics
javascript the basics
browser development tools
the difference between server-side and client-side rendering

Choose your way

Now you need to choose your way in this Domaine, do you want to be a front-end developer, back-end developer, or a full-stack developer (which means working with the front-end and the back-end).

For the front-end :

Advanced Html
Advanced CSS and Sass
Advanced javascript
Nodejs
Npm
Webpack
A front-end framework

For the back-end :

A programming language
Database
How to write code with the performance in mind
How to secure your app
Authentication types and how to implement them
How to configure a web server
The different ways of scaling an application

Is this all?

Learning all of this won’t make you a pro, now the next step is to make projects and learn from your mistakes, and also you need some skills like :

How to search on the web
How to read the documentation
How to read others code
How to debug

To sum up, continue in your way of learning, never give up and you must know that the hardest part is to keep up with the new technologies and updates happening in this field so you need to be ready. Good luck.
I hope you enjoyed reading this article and learned something from it. thanks for reading.