DEV Community: Jakub Jabłoński

I built my first SaaS - NotiFast

Jakub Jabłoński — Sun, 23 Jun 2024 01:22:26 +0000

The project is called NotiFast. The goal was to create a versatile bot that will send you notifications if something changes on the websites you follow. I focused on making it work for the majority of websites. NotiFast comes with a visual creator, so you don't need any technical knowledge to use it.

It was based on my previous open-source project webscraper-bot.

Motivation

This is the second version of this bot. The first approach was webscraper-bot, which I built because I needed to be notified about new rental apartments quickly (more about that in this post). Some people started discovering the bot, and after a few months, I had around 100 users. But there was one big problem: over 90% of the users didn't manage to create a single scraping bot because it required a query selector to be inserted. So, how I interpreted it was:

There are people looking for this kind of service.
It needs to be way easier and detect which items you want to track automatically.

So, I gave it a try.

What can it do?

NotiFast can notify you about:

New items being added (e.g., shop items, blog posts, videos, comments, or any list of items from a website).
Content updates (e.g., "Out of stock" notifications or price changes).

All of this is achieved using a (somewhat) simple visual creator.

Currently, sites that require authentication or any user action before seeing the content are not supported.

Why Discord bot form factor?

There are several reasons why Discord was the perfect choice for this application:

Universal Notification Delivery: Works seamlessly across all mobile devices.
No Authentication Worries: No need for managing user credentials.
Spam Protection: Inherent spam protection provided by Discord.
Integrated Payment System: Easy handling of payments.
Developer-Friendly SDK: Discord.js SDK is really good and easy to use.

All of the above significantly speed up development. The end goal is for it to be a web application with adapters for all major communicators like Slack or Signal, but for now, Discord makes things a lot easier.

How did it go?

The biggest challenge was to make it versatile and work even on pages it was not prepared to work on. The solution is a lot of heuristics to determine which container is the most likely to have some relevant content. There's some room for improvement, but the effects are satisfying for now, and on most pages I tested, NotiFast can point to the correct HTML container quite fast.

Another challenge was determining which items were already seen. To identify elements, I'm using a unique element link (chosen by the user), the element's content, and a custom signature based on element's images. Combination of those three works quite effective.

I worked on this side project in the evenings and weekends after my full-time job and was able to finish it in less than 6 months. The website (notifast.me) was made during one weekend.

Try it out

At this moment, I'm running a free beta for the first 100 users who want to try the app (Live counter at the top of the website notifast.me).
Learn more
Join the community
Install to your server directly

Try it out yourself and see if it works for the website you're interested in!

Next steps

After the beta testing phase, a period of bug fixes and improvements will happen. Then, proper subscription tiers will be released after user surveys and Discord verification process.

Next big milestones I see for this project are:

Personal user commands (allow to chat with the bot and get notifications privately)
Web interface — easier job management and possibility to add charts and other custom UI elements
Adding other communicator interfaces — e.g., Slack, Telegram, and more

Conclusion

NotiFast is designed to make your life easier by notifying you of changes on the websites you care about, without requiring any technical know-how. It's still early days, and there's plenty of room for growth and improvement, so your feedback is invaluable. If you're intrigued, join the free beta and let me know how it works for you!

Next.js Shopify eCommerce Starter with Perfect Web Vitals 🚀

Jakub Jabłoński — Fri, 12 Apr 2024 16:58:43 +0000

Hey, we are coming again with a Next.js boilerplate made by Blazity.
This time it's a brand new enterprise-commerce - ⚡ Next.js storefront for high-performance eCommerce with AI features and one-click deployment.
✨ Live demo here ✨

Architecture

In Enterprise Commerce high-level architecture, Meilisearch serves as the primary source for all product data and potentially other types of data in the future. The system is designed to easily integrate AI personalization tools without needing to modify any frontend code. While we are integrated with Shopify by default, we are not tightly bound to it, and you can use any system that works with Meilisearch and can adapt data to our format.

From a structural viewpoint, we use a monorepo (Turborepo) to manage packages, even though we currently have only one Next.js app. We chose this setup because it prepares us for future developments, which will include additional apps. This arrangement helps keep the packages well-separated and self-contained.

Features

🔀 Next.js App Router & Turborepo
⚛️ React Server Components (RSCs), Suspense and Streaming
🖥️ Server Actions
🖼️ Dynamic OG Images
🧠 AI Vector Search
⚡ Lightning fast search & filtering
✏️ Designed with v0
📸 AI Image captioning
🏎️ Perfect Performance & SEO
🔎 Extremely strict TypeScript
✏️ Draft Mode
📊 A/B Tests
🎨 TailwindCSS, Shadcn UI
📈 Analytics (GTM, Vercel)
💡 Highly Scalable SEO Redirects (Bloom Filters)
🏗️ Complete and fast CI/CD pipelines
🌐 Platform agnostic (integrated with Shopify by default)
📝 Easy migration - migrate your existing solution in minutes
✅ Conventional commits git hook
🎭 Playwright - write end-to-end tests like a pro
📚 Storybook - create, test, and showcase your components
⚙️ T3 Env - manage your environment variables with ease
🔧 Patch-package - fix external dependencies without losing your mind
🔗 Components coupling and cohesion graph - a tool for managing component relationships

Check out the code at ✨ GitHub ✨

Free Next.js Boilerplate for ⚡️High-Performance⚡️ Enterprise Apps

Jakub Jabłoński — Thu, 18 May 2023 17:20:42 +0000

The next-enterprise is an open-source template developed by Blazity that provides a robust set of features for building enterprise projects. It offers high-performance, maintainable and enjoyable web app development, making it an excellent choice for developers who want to streamline their workflow.

Features:

🏎️ Next.js - Fast by default, with config optimized for performance
💅 Tailwind CSS - A utility-first CSS framework for rapid UI development
✨ ESlint and Prettier - For clean, consistent, and error-free code
🛠️ Extremely strict TypeScript - With ts-reset library for ultimate type safety
📊 Bundle analyzer plugin - Keep an eye on your bundle size
🧪 Jest and React Testing Library - For rock-solid unit and integration tests
🎭 Playwright - Write end-to-end tests like a pro
📕 Storybook - Create, test, and showcase your components
🌬️ Smoke Testing and Acceptance Tests - For confidence in your deployments
📝 Conventional commits git hook - Keep your commit history neat and tidy
🔍 Observability - Open Telemetry integration for seamless monitoring
🎯 Absolute imports - No more spaghetti imports
⚕️ Health checks - Kubernetes-compatible for robust deployments
🧩 Radix UI - Headless UI components for endless customization
💎 CVA - Create a consistent, reusable, and atomic design system
🤖 Renovate BOT - Auto-updating dependencies, so you can focus on coding
🩹 Patch-package - Fix external dependencies without losing your mind
📈 Components coupling and cohesion graph - A tool for managing component relationships
🚀 GitHub Actions - Pre-configured actions for smooth workflows, including Bundle Size and performance stats
🤖🧠 Automated ChatGPT Code Reviews - Stay on the cutting edge with AI-powered code reviews!
💯 Perfect Lighthouse score - Because performance matters
🚢 Semantic Release - for automatic changelog
💻 T3 Env - Manage your environment variables with ease

All completely free and open-source and that's not even all. Check out https://github.com/Blazity/next-enterprise to see everything it has to offer!

Web-Scraping Discord Bot

Jakub Jabłoński — Sun, 25 Sep 2022 10:15:30 +0000

🚨 There's a new, more advanced version of this bot that you can checkout for free 🚨
Visit notifast.me to learn more

Intro

You can get a serious advantage on the internet when you can code your own tools. This post is about how I got my apartment with a web-scraping Discord bot.

The problem

Apartment market in Poland is a mess with the current state of the world. The prices are crazy high because of inflation and demand is even higher with millions of people form Ukraine running away from the war. There I was, in the situation where I needed to find a new place to rent in less than 3 weeks. There were a few popular websites for listing places but the issue was that they were gone after a few minutes since the listing was posted. I needed a way to get notified as soon as possible.

The solution

The solution was very simple. To get an advantage I decided to create a bot that checks the site every single minute and sends me a message on Discord when it finds a new listing.

I decided to go with the following stack:

Node.js
Prisma
Discord.js
Puppeteer

Hosted on Heroku free tier (R.I.P)

The results

First in one day I did a quick working prototype with JS and hardcoded one single URL and it was working as a charm for a few days. 90% of the times I was the first one to call but it was still difficult because of people that were blindly paying before seeing the place.

Then after checking out additional websites I decided to make it more generic and open for other people to use. I changed it to TypeScript created a simple Discord bot where you can add your own URL and get notified when a new item appears.

The new version of the bot checking 3 different websites ran for a little over a week notifying me about hundreds of new listings and I finally got the perfect place for me. I'm absolutely sure I wouldn't be able to get it without the bot.

This is how it turned out with a simple instruction on how to use it:

Adding new scraper job

Bot is working for every single site with dynamic content (amazon, ebay, etc.). The only requirement is that the service has unique links to items.

Use /create-job command and fill in the form:

name - name of the job
url - url that the bot will scrape
selector - selector for an a tag with link to element (examples below)
interval - interval of the job in minutes (min 1 minute)
active? - default true, if the job should be active right away (you can always enable/disable job with [enable/disable]-job commands)
channel? - defualt channel where the command was run which channel should be messaged when the new item appear
clean? - default true, if the query params should be ignored (essential for some sites like Ebay)

After that you can do basic CRUD opeartions on jobs with commands like /list-jobs, /update-job, /delete-job...

Wait...

After that you simply wait for the job run and it will send message when new items are found:

You can also run the job manually with /run-job. Note that the first run will get all the elements that will be on the webiste.

Code bits

You can check out the whole project here: https://github.com/jjablonski-it/webscraper-bot

Main function

This is the main function that runs when the bot starts. It checks if the guild exists in the database and if not it saves it. Then it registers the Discord slash commands for the guild. After that it runs the web server and the interval jobs.

const client = await getClient()
const existingGuilds = await getGuilds()

client.guilds.cache.forEach((guild) => {
  const guildExists = existingGuilds.some((g) => g.id === guild.id)
  if (!guildExists) {
    saveGuild(guild.id)
  }
  registerCommands(CONFIG.CLIENT_ID, guild.id)
})

runWebServer()
runIntervalJobs()

Web scraper

This is the very basic web scraping function that extracts the links of new elements from the website.

export const scrapeLinks = async (
  url: string,
  selector: string
): Promise<Array<string>> => {
  const page = await browser.newPage()
  await page.setCacheEnabled(false)
  await page.goto(url)
  await page.waitForSelector(selector)
  const links = await page.$$(selector)
  const res = await Promise.all(
    links.map((handle) => handle.getProperty('href'))
  )
  const hrefs = (await Promise.all(
    res.map((href) => href.jsonValue())
  )) as string[]
  await page.close()
  return hrefs
}

Web server

This was only to health-check the app and wake it up from Heroku.

const server = createServer((_req, res) => {
  res.write('OK')
  res.end()
})

export const runWebServer = () => {
  const { PORT } = CONFIG
  server.listen(PORT, () => console.log(`Server listening on port ${PORT}`))
}

Interval jobs

This is the function that handles all the jobs form all discord channels.

export const runIntervalJobs = async () => {
  let i = 0
  const run = async () => {
    const jobs: Job[] = await getJobs()
    const jobsToRun = jobs.filter(
      ({ interval, active }) => i % interval === 0 && active
    )
    console.log(`${jobsToRun.length} jobs in queue`)
    await runJobs(jobsToRun)
    i++
  }
  run()
  const intervalId = setInterval(run, 1000 * (isDev ? 10 : 60))
  return intervalId
}

Conclusion

I'm very happy with the results and I'm sure I will use this bot in the future. It's currently working until the Heroku free tier dies but if anyone will be interested I will move it somewhere else and maybe improve it a bit further. It is working but is no way near perfect so feel free to contribute if you are interested.

Bot icon generated by DALL·E 2

Functional vs Object Oriented vs Procedural programming

Jakub Jabłoński — Mon, 09 Aug 2021 17:19:57 +0000

Intro

This is a real life example showing differences of three most common programming paradigms. I will be solving one problem in three different ways.

It's based on the Academind Video
but in the end my solution happened to vary a bit.

Each example will handle form submit, validate user input and print created user to the console. I also added saving error logger.

Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="procedural.js" defer></script> -->
    <!-- <script src="oop.js" defer></script> -->
    <!-- <script src="functional.js" defer></script> -->
  </head>
  <body>
    <form id="user-form">
      <div>
        <label for="username">Username</label>
        <input id="username" />
      </div>
      <div>
        <label for="password">Password</label>
        <input id="password" type="password" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Simple HTML login form which will have three valid js files in different paradigms.

Procedural programming

Procedural programming is just solving problem step by step. It's completely valid way of coding, but it has many drawbacks when you want your application to scale.

const form = document.querySelector('form')
const logs = []

form.addEventListener('submit', e => {
  e.preventDefault()
  const username = e.target.elements.username.value
  const password = e.target.elements.password.value

  let error = ''

  if (username.trim().length < 3)
    error = 'Username must be at least 3 characters long'
  else if (!password.match(/[0-9]/))
    error = 'Password must contain at least one digit'

  if (error) {
    logs.push(error)
    alert(error)
    return
  }

  const user = {
    username,
    password,
  }

  console.log(user)
  console.log(logs)
})

Simple step by step solution to the problem. But it's not reusable and scalable at all. Although it's completely valid for solving such problem and as you will see it's much shorter than others.

Object Oriented Programming

Object Oriented Programming (OOP) is the closest to the real world so it's quite easy to wrap your mind around. We look at the code dividing it to Object where each one does only it's job.

Useful concept to learn in OOP is SOLID.

// Class responsible only for logging
class Logger {
  static logs = []

  static showAlert(message) {
    this.logs.push(message)
    alert(message)
  }
}

// Class responsible only for validating input
class Validator {
  static flags = {
    minLength: 'MIN-LENGTH',
    hasDigit: 'HAS-DIGIT',
  }

  static validate(value, flag, validatorValue) {
    if (flag === this.flags.minLength) {
      return value.trim().length >= validatorValue
    }

    if (flag === this.flags.hasDigit) {
      return value.match(/[0-9]/)
    }
  }
}

// Class responsible only for creating valid user
class User {
  constructor(username, password) {
    if (!Validator.validate(username, Validator.flags.minLength, 3))
      throw new Error('Username must be at least 3 characters long')
    if (!Validator.validate(password, Validator.flags.hasDigit))
      throw new Error('Password must contain at least one digit')

    this.username = username
    this.password = password
  }
}

// Class responsible only for from handling
class FormHandler {
  constructor(formElement) {
    this.form = formElement
    this.form.addEventListener('submit', this.handleSubmit.bind(this))
  }

  handleSubmit(e) {
    e.preventDefault()
    const username = e.target.elements.username.value
    const password = e.target.elements.password.value

    try {
      const user = new User(username, password)
      console.log(user)
      console.log(Logger.logs)
    } catch (err) {
      Logger.showAlert(err)
    }
  }
}

const form = document.querySelector('form')
new FormHandler(form)

Now you can see what I meant by dividing problem to Objects. FormHandler is it's own class that takes care of form handing. User is another class that takes care of creating user and validates the input using Validator class. If theres an error Logger class is used to display an alert and save the log.

As you can see there is much more code and it looks more complicated... So why would anyone prefer this over Procedura paradigm?

Cool thing is that now we can use it for any similar form just by calling

new FormHandler(new_form)

So it's reusable across every file that includes this script. And also it's easily extendable because everything is divided into blocks that do one thing only (Single responsibility principle).

Functional

Finally my favorite paradigm of all. It's really popular for the time of writing this and quite straight forward.

Note that it doesn't mean that it's better by any means. Which to use is
completely up to you although some paradigms might be better for certain problem.

const FLAGS = {
  minLength: 'MIN-LENGTH',
  hasDigit: 'HAS-DIGIT',
}

// Function that handles validation
const validate = (value, flag, validatorValue) => {
  switch(flag){
    case FLAGS.minLength:
      return value.trim().length >= validatorValue

    case FLAGS.hasDigit:
      return !!value.match(/[0-9]/)
  }
}

// Function that sets submit handler
const setFormSubmitHandler = (formId, onSubmit) => {
  const form = document.getElementById(formId)
  form.addEventListener('submit', onSubmit)
}

// Function that returns values of required fields as object
// In this case it will return {username: "<value>", password: "<value>"}
// It might look scary but keep in mind that it's completely reusable
const getFormValues = (e, ...fields) => {
  const values = Object.entries(e.target.elements)
  const filteredValues = values.filter(([key]) => fields.includes(key))
  return filteredValues.reduce(
    (acc, [key, { value }]) => ({ ...acc, [key]: value }),
    {}
  )
}

// Function that creates valid user
const createUser = (username, password) => {
  if (!validate(username, FLAGS.minLength, 3))
    throw new Error('Username must be at least 3 characters long')
  if (!validate(password, FLAGS.hasDigit))
    throw new Error('Password must contain at least one digit')

  return { username, password }
}

// Function that creates logger object with *logs* and *showAlert* function
const logger = (() => {
  const logs = []
  return {
    logs,
    showAlert: message => {
      logs.push(message)
      alert(message)
    },
  }
})()

// Main function
const handleSubmit = e => {
  e.preventDefault()
  const { username, password } = getFormValues(e, 'username', 'password')

  try {
    const user = createUser(username, password)
    console.log(user)
    console.log(logger.logs)
  } catch (error) {
    logger.showAlert(error)
  }
}

setFormSubmitHandler('user-form', handleSubmit)

As you can see in Functional programming we want to solve the problem using small (ideally pure) functions. This method is also very scalable and functions can be reusable.

Pure function is a function without a side effects that are hard to track.
Pure function should only depend on the given arguments.

Conclusion

There are no better and worse paradigms. Experienced developer can see the advantages of each and chose the best for given problem.

Procedural programming does not say you can't use functions and Functional programing does not prevent you from using Class. These paradigms just help to solve the problem in a way that can be beneficial as the code grows.

3 useful JavaScript Generic Function Currying methods

Jakub Jabłoński — Sat, 24 Jul 2021 08:56:33 +0000

Intro

There are some cases when you deal with multiple functions either when they are completely separate or depend on each other. I'm sure you have stumbled upon the problem that could use some helpers. I will present some methods I found useful for dealing with that problem.

Disclaimer

I'm not an expert by any means, this blog is just result of me learning and trying to understand some concepts deeper while sharing it. Maybe someone will find it interesting. Any feedback appreciated.

runAll

Let's start from something easy to read. One of the simplest yet powerful examples is runAll function you could implement as following:

const runAll = (...fns) => fns.forEach(func => func?.())

It runs all functions one by one.

If you don't know what this (func?.()) does it just runs function only when it's defined

runAll example

const handleRefresh = runAll(closeModal, clearSearch, clearFilter, clearSort)
handleRefresh()

It's just a simple and elegant solution when you want to run multiple void functions. I personally think that it helps to keep your code clean and DRY.

chain

If your functions depends on each other you might want to use function chaining similarly to:

const chain = (...fns) => (...args) => fns.reduce((arg, func) => func(arg), args)

It runs functions one by one passing previous function result as the parameter.

This one-line function is incredibly powerful and gives you lots of possibilities.

If you want to have more math alike nesting you use reduceRight so if you combine a,b,c it's interpreted as a(b(c)) instead of c(b(a)).

chain example

const increment = (x) => +x + 1
const decrement = (x) => +x - 1
const square = x => x * x

const chained = chain(increment, square, decrement)
console.log(chained(2)); // 8

Value passed as an argument is first incremented then squared and finally decremented. Kind of silly example, but you get the idea.

combineResults

Sometimes you only care about combining the results of function. Usually it's only two functions but if you have to write it anyway why not make it generic?

const combine = (...fns) => (...args) => fns.reduce((results, func) => ({ ...results, ...func?.(...args) }), {})

It's little bit harder to read but all it does is running all functions with the same parameters and then combining the results.

combine example

const funcA = (prop) => ({
  common: 'A',
  propA: 'A ' + prop
})

const funcB = (prop) => ({
  common: 'B',
  propB: 'B ' + prop
})

const funcC = (prop) => ({
  common: 'C',
  propC: 'C ' + prop
})


const combined = combine(funcA, funcB, funcC)

console.log(combined('demo')) // { common: 'C', propA: 'A demo', propB: 'B demo', propC: 'C demo' }

As you can see unique properties of the objects are all present in the result, but the common that was shared between all functions got overridden by funcC.

It's the same as just calling all functions and doing {...resA, ...resB, ...redC}

That's basically it

That's all I came up with when it comes to functions one-liners. Have you ever used something similar in a project?