DEV Community: richi.codes

I Lost a Client in 12 Minutes — So I Built My Own Push Notifications

richi.codes — Fri, 25 Sep 2026 11:25:41 +0000

It's 11:03 AM. Someone fills out your contact form. They're asking about pricing, timelines — they want to start now.

You see it at 4:40 PM, buried between 40 emails and two meetings. By then, that person has already messaged two other vendors. One replied in 12 minutes. They're already talking business.

You didn't lose that client on price, or portfolio, or skill. You lost them to a 5-hour-and-37-minute gap. And it happens again next week, with the next lead, because email does the one thing it was built to do: feel non-urgent.

TL;DR: with the Web Push API (the browser's native push notification standard) and a webhook in your automation tool (n8n, Zapier, Make), any event on your site — a form, a sale, a server going down — can ping your phone in seconds. No app store, no third-party SaaS, no recurring cost.

The channel you actually check, the second it buzzes

No inbox wins in a world where whoever replies first wins the deal. You need something that actually interrupts you: the phone buzzing in your pocket, the notification sitting on your lock screen — the one you check without even thinking, no matter what you're doing.

That already exists. It's called Web Push, an open standard (the same one Gmail or Twitter use to notify you), and it doesn't require shipping anything to an app store or paying a monthly SaaS subscription. Your own website runs it, on your own server, under your own rules. One afternoon of work, zero recurring cost.

How it actually works, no smoke and mirrors

Someone takes an action on your site: fills out a form, completes a purchase, signs up.
A webhook picks it up, in parallel with whatever you already have running (email, CRM). It doesn't replace anything — it just gets added on top.
Your server signs the notification using the Web Push standard (VAPID) and fires it off.
Your phone receives it, browser closed, through a previously installed PWA (Progressive Web App — a website that installs to your home screen like a native app). No Apple Developer account, no Google Play, no one reviewing anything.

Four steps, the same technology already running inside apps you use daily, and you own the entire pipeline.

It's not just a trick for leads. It's a channel for anything you decide matters

Here's the part that's actually worth money: you choose what triggers the alert. Build the channel once, and from then on, anything that matters to your business can end up buzzing in your pocket.

Freelancer or agency: you find out about the lead in minute one, not when you open your laptop in the evening.
E-commerce: "sale completed" the second the payment clears, instead of living inside the Shopify dashboard hitting refresh.
Monitoring: your server goes down and you know before a customer emails asking why the site's not loading.
Payments & subscriptions: a failed Stripe charge, a cancellation, a missed payment — you find out before it turns into an awkward phone call.
Support: an urgent ticket doesn't sit there waiting for you to open the dashboard in the morning.
Any metric you're watching (price, stock, a KPI): the moment it crosses a threshold, you know — not after the window to act on it has already closed.

The pattern is always the same: something happens → your server knows → your phone buzzes. The only thing that changes is you deciding what "something" deserves to interrupt you.

"This sounds like a lot of work"

It isn't, and that's the objection that stops most people from trying. You don't need a marketing budget, a dev team, or anyone's approval. You need one afternoon and the pieces you probably already have lying around, half-built: a website, a server to run it on, and some automation tool running in the background (n8n, Zapier, Make, whatever you use). The rest is just wiring four existing pieces together.

The alternative is competing with a phone that only buzzes when your mom calls, while the lead you took five hours to notice already signed with someone else. That's the real comparison: one afternoon of setup, versus losing deals every week to minutes you don't control.

Build it once. Use it for everything you actually need to know about in time.

If you've got the website and the automation but not the time to sit down and wire it together, this is exactly the kind of project I fix in an afternoon: hooking it into your existing form, store, or n8n flow, without touching what already works.

FAQ

What is the Web Push API?
It's the browser standard (supported by Chrome, Firefox, Edge, and Safari since iOS 16.4) that lets a website send push notifications to a device — even with the browser closed — as long as the user granted permission and installed the PWA.

Do I need to publish an app on the App Store or Google Play?
No. The notification arrives through a PWA (Progressive Web App) installed directly from the browser via "Add to Home Screen." It never goes through an app store or any review process.

What is VAPID, and what does it do?
VAPID (Voluntary Application Server Identification) is the mechanism your server uses to securely sign every push notification, proving it actually comes from your application and not from a third party.

What does it cost to run this?
Nothing recurring. There's no subscription to a notifications SaaS — sending happens on your own server, and the Web Push standard itself is free and open.

Is this only useful for form leads?
No. The mechanism is generic: any event a webhook can detect (a sale, a failed payment, a server outage, an urgent support ticket, a metric crossing a threshold) can trigger a push notification, with zero changes to the architecture.

What do I need to set this up?
A website with its own backend (or serverless), an automation tool with webhooks (n8n, Zapier, Make, or similar), and a VAPID key pair — free to generate in one step. No extra infrastructure or paid licenses required.

Hello Vite + React!

richi.codes — Wed, 17 Feb 2021 09:58:26 +0000

First of all introduce what is Vite ?

Vite is a Next Generation Frontend Tooling created by Evan You, the creator of the open source JavaScript framework Vue.js.

Why React?

So if it's from Vue.js you might wonder... how come I use it to create a React project if it represents that it would be the direct competition? Well, because Vite is an authoring tool, totally agnostic and the tool itself guides us to create a React application as we will see below.

And I can already tell you that the result is impressive, the speed with which it is created and the speed with which you can start working on your project.

How to get started?

yarn create @vitejs/app

Put the name of the project.

In my case richi.codes

Choose the template:

Scaffolding project in /richi.codes....
? Select a template: ... 
  vanilla
  vue
  vue-ts
❯ react
  react-ts
  preact
  preact-ts
  lit-element
  lit-element-ts

I choose React.

And that's it!

We already have our project created now we just need to install and run it.

  cd richi.codes
  yarn
  yarn dev

✨ Done in 130.42s.

Ready really fast

Conclusion

I have to say that compared to create-react-app, Vite is really faster and the result is amazing. It also seems that the project size is smaller than create-react-app, so if you are going to create a new project, Vite is really an option to consider.

Setting up and create your first React Native app with CLI ( not Expo ) with mac

richi.codes — Mon, 23 Nov 2020 11:07:19 +0000

This article will help you install and build your first React Native app with React Native CLI in your mac.

Verify Homebrew installation using brew -v, and if Homebrew is not installed then install Homebrew using

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Note: Homebrew installation requires the xcode-select command-line tool to work so it's recommended to install Xcode as well or it will ask to confirm the installation of xcode-select tool.

Install node and watchman

brew install node watchman

Install JDK using break cask to install GUI software installation setups

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

Install Android Studio

Download and install Android Studio. While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:

Android SDK
Android SDK Platform
Android Virtual Device

Once setup has finalized and you’re presented with the Welcome screen, proceed to the next step.

Add the required android SDK dependencies’ paths in environment variables for React Native:

can use any editor instead of open open ~/.bash_profile

Paste the following text at the end of the file**
# after other pre-configured environment variables export
ANDROID_HOME=$HOME/Library/Android/sdk export

PATH=$PATH:$ANDROID_HOME/emulator export
PATH=$PATH:$ANDROID_HOME/tools export
PATH=$PATH:$ANDROID_HOME/tools/bin export
PATH=$PATH:$ANDROID_HOME/platform-tools

MacOS Cataline has a default shell as zsh so to fix the warning below, edit/create ~/.zprofile (under /users/username/) file for Cataline and execute the commands below in your terminal.

chsh -s /bin/zsh
source ~/.zprofile

You can find Android SDK Location in Android SDK tab preferences in Android Studio to put in ANDROID_HOME

Helpful Commands

printenv prints all environment variables.

xcode-select --version allows you to view the version of xcode-select CLI.

Create and Run a React Native Project

The steps to run the project is the same on all operating systems:

Create a React Native project:

npx react-native init AwesomeApp

Follow the steps to create an android virtual device (AVD)

Run the projects:

cd AwesomeApp
npx react-native run-android --verbose

The above command process may ask to install CocoaPods, which is a dependency manager for iOS projects and required to run iOS apps.

In the above command, -verbose is optional but useful to view any potential issues, like below.

Known Gradle Issues

InvokerHelper Error: Gradle version 6.1.1 can cause this issue, so make sure to update distributionUrl attribute in AwesomeApp\android\gradle\wrapper\gradle-wrapper.properties file:

# To fix the "Could not initialize class org.codehaus.groovy.runtime.InvokerHelper" error, use latest gradle
distributionUrl=https\\://services.gradle.org/distributions/gradle-6.5.1-all.zip

and update classpath in AwesomeApp\android\build.gradle:

classpath("com.android.tools.build:gradle:4.0.0")

Note: React Native may not use the exact

buildToolsVersion

version declared in the

AwesomeApp/android/build.gradle

file, so in case of error the specific version needs to be installed from the Android SDK.

build.gradle file with version

To fix Could not initialize class org.codehaus.groovy.reflection.ReflectionCache

Update gradle-wrapper.properties

In my case distributionUrl distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip

And I changed it to

distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

Once you have updated all the files and followed the commented steps, you can start your application.

npx react-native run-android --verbose

Hi! I’m Richi
programmer, developer or whatever you want!
If you want to have your personal web page, your company needs a web page, you have an idea and you want to turn it into reality, you want to sell your products online, turn your business into online you have a problem in your current page, you need to update it, you want to migrate from hosting. If you have a physical shop or you are an entrepreneur or you have an idea or you have a problem to solve or simply want to chat.
https://richi.codes