I got my digital version on Amazon using the money received from my microsass 🥳

• Book link

• My microsaas

My highlights

The book is old, and some links and ideas, like marketing all in email, are really outdated nowadays. However, I generally liked all the content and learned a lot. The author is experienced, and the content came at a perfect time for me as I'm exploring this path to entrepreneurship as a solo developer building my platform convide.online. Here are some comments and notes that I would like to highlight:

Marketing > Product

The key factor in an entrepreneur’s success is their ability to market their product.

Marketing is more important than your product.

One thing that I'm really learning is that marketing can't be ignored from day one.

Niche and SEO competition

This highlight is really important. A more specific niche can be cheaper to market on Google Ads, for example, and is sometimes really good for your business as a solo entrepreneur.

Having a $2000/month niche to yourself is much better than having a 20% market share of a $10,000/month niche. No competition means lower ad rates, less SEO competition, and as the market grows your income will automatically increase since you own the entire market.

Freedom to Choose Your Path

I liked this idea: don't waste a lot of time on one idea if you are an Indie Hacker and solo entrepreneur.

If an idea doesn’t work out, scrap it and start another one.

Ads

I learned this year that if you put energy into tweaking your campaign on Google Ads (or other platforms) and it is giving results, the best news is you can keep running it for years without too much effort.

I have campaigns that have been running with minor tweaks for more than two years. The time investment was in the first 2-3 months testing ads and finding the keywords that converted.

I'm building my microsaas, and since I'm not a marketing specialist, it is difficult for me to validate if the money invested brings a return or not. For example, I tried TikTok Ads, YouTube, and Google Ads, but the reports from these services are complex and difficult. So, as I'm using a local Metabase to manage my data, I had a simple idea, which I explain below in an image.

The idea

With this idea, you can implement it in any front-end stack. In my case, I'm using Angular, so I'll show you how I did it:

1. Create a service

2. Listen the URL changes

3. Save the UTM params in the localStorage

4. Get the UTM params and send to the API

The service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UtmService {
  private readonly utmKeys = [
    'utm_id',
    'utm_source',
    'utm_medium',
    'utm_campaign',
    'utm_term',
    'utm_content',
  ];
  private readonly sessionKey = 'NAME-YOUR-SESSION';

  constructor() {}

  saveUtmsFromQuery(params: any): void {
    const utms: any = {};

    this.utmKeys.forEach((key) => {
      if (params[key]) {
        utms[key] = params[key];
      }
    });

    if (Object.keys(utms).length) {
      localStorage.setItem(this.sessionKey, JSON.stringify(utms));
    }
  }

  getUtms(): any {
    const data = localStorage.getItem(this.sessionKey);
    return data ? JSON.parse(data) : null;
  }

  clearUtms(): void {
    localStorage.removeItem(this.sessionKey);
  }
}

Inject the service in the AppComponent:

utmService = inject(UtmService);

In the ngOnInit(), I created a method:

ngOnInit(): void {
    this.listenQueryParams();
}

listenQueryParams() {
    this.route.queryParams.subscribe((params) => {
      this.utmService.saveUtmsFromQuery(params);
    });
  }

Sending the data to your API

This part depends on your backend API. In my case, I made changes to send the data when the user creates a new event. Collecting the UTM is simple:

constructor(
    private fb: FormBuilder,
  ) {
    this.myForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
      utm_source: [null],
      utm_medium: [null],
      utm_campaign: [null],
      utm_term: [null],
      utm_content: [null],
    });

    this.myForm.patchValue(this.utmService.getUtms());
  }

Now, when I send the form data, the UTM goes along automatically.

Remember to set your UTM params in your campaign or links.

That's it 🎉

Why custom?

The reasons can vary, but the main one is that the design system doesn't match the native <select>. In practice, the <select> is often difficult to customize, so we need to create our own. Alright, let's go, but how many variations can a simple component have? In my case, the answer is shown in the image below:

Architecture and organization

One good decision was to create a central component and extends all derivations from that component, since Angular is a Typescript framework based, I can easily extends a class.

The select.component.html:

Example of the select.component.ts:

export class SelectComponent implements OnChanges, OnDestroy {
    @Input() invalid = false;
    @Input() multiple = false;
    @Input() loading = false;
    ...
}

The variation only extends the parent:

export class SelectSimpleComponent extends SelectComponent {
    // Exclusive logic of this variation
}

The beauty of this architecture is that you have all the common inputs and methods, and you can extend them in variations if you need to add new logic. It's a perfect example of object-oriented programming in Angular with TypeScript and JavaScript.

Automatically display content with Overlay from Angular CDK

To display the content inside the select when the user clicks, we could build it using only HTML, CSS, and JavaScript. However, there's a challenge when dealing with dialogs. You might encounter a problem like this:

To solve this problem, we can use a reliable solution: the Overlay API from Angular Material CDK. Overlay is great because it solves almost all your issues by isolating the component outside of the HTML block.

Problem solved! When the user clicks to open, we create an Overlay and attach it to a TemplatePortal. The dropdownContent is the ID used in the template in select.component.html.

@ViewChild('dropdownContent') dropdownTpl!: TemplateRef<any>;

Here is the code to create the Overlay into a TemplatePortal:

private createOverlay() {
    if (this.overlayRef) {
      return;
    }

    const positionStrategy = this.overlay
      .position()
      .flexibleConnectedTo(this.elementRef)
      .withFlexibleDimensions(false)
      .withPush(false)
      .withPositions([
        {
          originX: 'start',
          originY: 'bottom',
          overlayX: 'start',
          overlayY: 'top',
          offsetY: 4,
        },
        {
          originX: 'start',
          originY: 'top',
          overlayX: 'start',
          overlayY: 'bottom',
          offsetY: -4,
        },
      ]);

    const overlayConfig = new OverlayConfig({
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.block(),
      hasBackdrop: true,
      width: this.elementRef.nativeElement.offsetWidth,
      panelClass: ['select-overlay'],
    });

    this.overlayRef = this.overlay.create(overlayConfig);

    const portal = new TemplatePortal(this.dropdownTpl, this.viewContainerRef);
    this.overlayRef.attach(portal);
  }

To close the content:

private closeOverlay() {
    if (this.overlayRef) {
      this.overlayRef.detach();
      this.overlayRef = null;
    }
  }

With this setup, you can create as many variations as you want. In my case, these were the components created by extending from select.

Conclusions

In times when we can use AI to assist developers, having a good architecture is important. If you don't organize from the start, your project can fail, making components hard to reuse and extend. The <select> component is a classic example of how challenging front-end development can be, whether using frameworks or pure JavaScript.