DEV Community: kouliavtsev

Founders & Indie Hackers: Stop Putting All Your MVP Content in a Database

kouliavtsev — Wed, 03 Dec 2025 22:43:32 +0000

I’m building OCR Trips — an obstacle course race trip planner that helps you:

Discover races
Plan trips
Budget flights, hotels, and race fees in one place

The “app” part (accounts and trip plans) runs on Supabase. Ow, yeah! 🏄 But for the MVP content, I didn’t want everything living in a database.

Users would manually add races they know. That was the original idea: a lightweight trip planner where you plug in your next OCR and we help with flights, hotels, and budget.

Then I thought: what if someone doesn’t have a race yet and needs help finding one?

So I expanded the site with Obstacle Course Race Calendar — a public directory where anyone can:

Browse obstacle course races by country and by city.
See nearby airports and rough travel ideas
Check typical weather for race dates
Filter by brand and distance etc.

My first thought:

“Easy. Add a races table in Supabase and build an admin UI.”

My second thought:

Do I really want to put stuff in supabase?

So instead of a races table, I did this:

content/races/
├── spartan/
│   └── 2026/
│       ├── paris.mdx
│       └── london.mdx
├── tough-mudder/
│   └── 2025/
│       └── atlanta.mdx
└── ... 200+ files

Each file has frontmatter + MDX: brand, date, location, distances, coordinates, terrain, plus a description.

Velite reads those files at build time, validates them, and gives me a typed dataset I can import in Next.js.

What I avoided by not using Supabase for races

By not putting race data in the DB (yet), I skipped:

Writing migrations every time I tweak race fields
Building a custom admin panel just to edit content
Managing seed scripts for dev/staging/prod
Worrying about schema drift between environments
Dealing with runtime bugs like “DB not reachable” for pages that could be static

For an MVP, that’s all extra surface area to maintain.

Instead, my workflow is:

Edit a .mdx file
Commit
Vercel rebuilds
/races is up to date

Deployment = publishing.

How I solved it instead: MDX + Velite

Velite makes the flat-file approach feel surprisingly “database-like” — but without the DB.

At build time it:

Validates content against a Zod/TS schema
Generates TypeScript types
Outputs an array I can import and filter

In code, it looks roughly like this (simplified):

import { races } from "@/content/generated";

const frenchSpartan = races.filter(
  (race) =>
    race.brand === "spartan" &&
    race.country === "France"
);

I still get:

Filters
Searching
Typed fields
Autocomplete in my editor

“But what if I outgrow this?”

That’s the nice part: starting in files isn’t a trap.

If /races ever needs:

Non-technical editors
Live updates without deploys
Super complex querying

…I can:

Create a races table in Supabase
Write a one-off script that reads the MDX files and inserts them into the DB
Switch from import { races } to await db.query.races

The early choice (files) doesn’t block the later choice (database).

It just lets me ship faster now.

Conclusion: default to files for MVP content

If you’re a founder or indie hacker sketching out an MVP, it’s worth pausing before you:

model everything in SQL
build an admin UI
wire up forms to manage “content”

Ask:

Will users actually write to this?
Does it change constantly?
Do I need querying tools for it right now?

If the answer is “not really”, try this stack:

Files in Git + a schema layer (Velite or similar) + static generation.

You can always move it into a database later.

But you might not have to.

Simplifying Font Awesome implementation with Nextjs App Router!

kouliavtsev — Sun, 04 Jun 2023 15:46:31 +0000

The Next.js team has successfully transitioned the App Router from beta to a stable release. The App Router uses Server Components. This makes working with Font Awesome icons even more "Font Awesome"!

Before we would have to destructure icons from the library like this:

// pages/example.js

import { faBug, faBugs } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function MyBugsPage() {
  return(
   <>
    <h1>Bugs 🐞</h1>
    <FontAwesomeIcon icon={faBug} />
    <FontAwesomeIcon icon={faBugs} />
   </>)
}

If your application would have to many icons, you would could create a library file that you would import into _app.js.

// _app.js

import "lib/icons";

...

// lib/icons.js

import { library } from "@fortawesome/fontawesome-svg-core";

import {
  faBug,
  faBugs,
} from "@fortawesome/pro-solid-svg-icons";

library.add(
  faBug,
  faBugs,
);

By doing this, you could skip the step on importing font awesome icons in the component.

// pages/example.js

export default function MyBugsPage() {
  return(
   <>
    <h1>Bugs 🐞</h1>
    <FontAwesomeIcon icon="bug" />
    <FontAwesomeIcon icon="bugs" />
   </>)
}

This is great, yet not ideal.

Centralizing the configuration of icons could substantially streamline the process. However, expanding from 2 to 50 (or more) icons may introduce several challenges:

An extensive list may become difficult to sift through.
It's annoying to add icons twice in the configuration file.
Identifying unused icons can become complex.
The JavaScript bundle delivered to the client is likely to increase in size.

To solve 1, 2, 3 we could do something like this:

// lib/icons.js
import { library } from "@fortawesome/fontawesome-svg-core";

import { fas } from "@fortawesome/pro-solid-svg-icons";
library.add(fas);

Unfortunately, point 4 becomes more of a problem. If you run next build you will see that you are shipping a whooping 1mb+ to the client.

Route (pages)                   Size     First Load JS
┌ ● / (564 ms)                  9.66 kB        1.06 MB
├   /_app                       0 B            1.05 MB

Yikes! 😕

Why is the bundle size hurting the performance?

This is due how rendering in Nextjs works. Scratch that! How it used to work. All components that are in the pages folder would be pre-render on the server and hydrated. While hydrating we would ship 1mb+ to the client. Nextjs uses tree shaking under hood, yet is not able understand how to do this with the fas import.

The quickfix with App Router Server Components?

With the new App Router we can use Server Components without any set up required. All React (Server Components) run the code on the server and thus reduce bundle size that is sent to the client.

Before:

// pages/example.js 👈

export default function MyBugsPage() {
  return(
   <>
    <h1>Bugs 🐞</h1>
    <FontAwesomeIcon icon="bug" />
    <FontAwesomeIcon icon="bugs" />
   </>)
}

After:

// app/example/page.js 👈

export default function MyBugsPage() {
  return(
   <>
    <h1>Bugs 🐞</h1>
    <FontAwesomeIcon icon="bug" />
    <FontAwesomeIcon icon="bugs" />
   </>)
}

And you are done! 💫

Your bundle size should look, something like this:

Route (pages)                   Size     First Load JS
┌ ● / (564 ms)                  9.66 kB        84,5 kb
├   /_app                       0 B            84,5 kb

NOTE: You need to have Nextjs version 13.4.

If you starting fresh? Good for you, simply use the example above.

If you you are stuck with Nextjs older version, don't worry you can incrementally migrate by using this adoption guide, written by the Nextjs team.

Let's build a simple breadcrumbs component with Tailwind CSS

kouliavtsev — Wed, 27 Jul 2022 14:33:02 +0000

Here is an example of creating a simple breadcrumb component with Tailwind CSS.

Add initial HTML.

<nav aria-label="Breadcrumb">
    <ul>
        <li><a href="/">Home</a></li>
        <li><span aria-current="page">Category</span></li>
    </ul>
</nav>

Add three lines of CSS code.

<nav aria-label="Breadcrumb">
  <ul className="flex">
    <li className="after:content-['/'] after:px-2">
      <a href="/" className="underline">
        Home
      </a>
    </li>
    <li>
      <span aria-current="page">Category</span>
    </li>
  </ul>
</nav>

And you got yourself some breadcrumbs!

How to use KaTex to render math formulas with Nextjs?

kouliavtsev — Thu, 14 Jul 2022 08:10:00 +0000

Here is an easy way to make it possible to implement math formulas inside MDX files within your Nextjs project.

To do this we will use KaTex a math typesetting library and contentlayer to source the files.

As an example will render the formula for the Pythagorean theorem.

Install packages

Assuming that you got Nextjs set up, we will need to install the following packages.

Install contentlayer

yarn add contentlayer next-contentlayer

Install remark-math and rehype-katex plugins.

yarn add remark-math rehype-katex

Configure contentlayer

In next.config.js wrap configuration options with withContentlayer.

import { withContentlayer } from 'next-contentlayer'
export default withContentlayer({})

In the root of the project create a file contenlayer.config.js and add the configuration below.

import { defineDocumentType, makeSource } from 'contentlayer/source-files'

const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: { type: 'string', required: true },
  },
}))

export default makeSource({
  contentDirPath: 'posts',
  documentTypes: [Post]
})

In this file, we have defined document type Post with a title field that is a string. The contentDirPath tells contentlayer the location of our sourced MDX files.

Add theorem as content

Create an MDX file posts/home.mdx.

---
title: "Pythagorean theorem"
---

a^2 + b^2 = c^2

a = side of right triangle
b = side of right triangle
c = hypotenuse

Render home page

In /pages/index.js add the code below.

import { useMDXComponent } from 'next-contentlayer/hooks';
import { allPages } from 'contentlayer/generated';

export const getStaticProps = () => {
  const page = allPages.find((page) => page._raw.sourceFileName === "home.mdx")
  return { props: { page } }
}

export default function HomePage({ page }) {
  const MDXContent = useMDXComponent(page.body.code)

  return (
    <div>
      <h1>{page.title}</h1>
      <MDXContent />
    </div>
  )
}

Render formula

We are almost there! If you boot up the app you will see that we are rendering a^2 + b^2 = c^2. Instead, you want to render the formula like this:

To make it work you, have add remark-math and rehype-katex to contentlayer configuration.

import { makeSource } from 'contentlayer/source-files';
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

export default makeSource({
  // ...
  mdx: { 
    remarkPlugins: [remarkMath], 
    rehypePlugins: [rehypeKatex],
  },
})

The plugins will convert KaTex into HTML. To style the formula we need to load a CSS file.

import Head from "next/head";

export default function HomePage({ page }) {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossOrigin="anonymous">
      </Head>
      ...
    </>
  )
}

And this is it, we just implemented KaTex in MDX.

Best Netlify forms alternative on Vercel! 🔥

kouliavtsev — Wed, 06 Jul 2022 17:28:47 +0000

After migrating from Netlify to Vercel, I do miss Netlify Forms... A lot!

With Netlify Forms I could add a simple form to a website in couple of seconds, without having to worry about backend implementation.

Simply, add a snippet to your project and you are ready to go.

<form name="contact" method="POST" data-netlify="true">
  <label>Your Name: <input type="text" name="name" />
  <button type="submit">Send</button>
</form>

It was what I call "A form bootstrap heaven". 🙏

The move 🚚💔

After a while, I have stopped working with Netlify due to my relocation to Vercel. I was heartbroken for a while, yet got over it.

Dating Formspree 🌹

At some point I have met Formspree. The implementation is quite close to Netlify.

<form action="https://formspree.io/f/{form_id}" method="post">
  <label for="email">Your name: <input name="Name" id="name" type="name"></label>
  <button type="submit">Submit</button>
</form>

At first sight things looked very promising. Yet, you have to do a bit more extra work to get started.

1. Install a npm package yarn add @formspree/react
2. Generate form-id here.
3. And a react hook.

import { useForm } from '@formspree/react';

function MyForm() {
  const [state, handleSubmit] = useForm('{form-id}');
  if (state.succeeded) {
    return <div>Thank you for signing up!</div>;
  }
  return (
    <form onSubmit={handleSubmit}>
      <label for="email">Your name: <input name="Name" id="name" type="name"></label>
      <button type="submit" disabled={state.submitting}>Sign up</button>
    </form>
  )
}

To be honest, I a quite happy with Formspree, yet the experience that I would have with Netlify Forms is not the same.

Love of my life Web3Forms ❤️

Recently, I have a met the love of my life. We are engaged and soon are getting married.

The cool thing about Web3Forms is that it is slightly easier to get started.

Go to web3forms.com
Click on Create your Access Key
Enter your email address

And voila you have generated access_key!

<form action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
    <label for="email">Your name: <input type="text" name="name" required></label>
    <input type="hidden" name="redirect" value="https://web3forms.com/success">
    <button type="submit">Submit Form</button>
</form>

Copy the forms with the access_key into your project and be happily married for the rest of your life. 💒

PS: If you are using gmail and not getting any emails, check the promotions tab.

How to override prose class in Tailwind CSS?

kouliavtsev — Thu, 16 Jun 2022 11:57:27 +0000

When it comes to styling articles, I love working with @tailwindcss/typography
plugin. 🤩 By simply adding .prose to an HTML element it styles the inner HTML elements by itself.

<article class="prose">
  <h1>Title</h2>
  <p>Some text</p>

  <h2>Subtitle</h2>
  <p>Some text</p>

  <ul>
   <li>item 1</li>
   <li>item 2</li>
  </ul>
</article>

While working with MDX components it makes a bit challenging if you want to style inner components.

The problem

For example you want style a <Warning /> component inside an MDX article. You would create something like this.

export default function Warning({ children }) {
  return (
    <section
      className="px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500"
    >
      {children}
    </section>
  );
}

The component will be added to the article in this manner.

---
title: "Very important article"
---

Some text

<Warning>
  <p>Be careful!</p>
</Warning>

This will yield:

<article class="prose">
  <p>Some text</p>

  <section className="px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500">
    <p>Be careful!</p>
  </section>;
</article>

Even though .text-red-500 is applied on the warning section, the text will inherit the styles from the .prose. Yikes... 😬

The solution

The solution is actually quite simple.

By adding .not-prose to the section element the .prose styles will be ignored.

export default function Warning({ children }) {
  return (
    <section
      // Adding .not-prose here! 🏗
      className="not-prose px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500"
    >
      {children}
    </section>
  );
}

How to track inbound links with Plausible in Nextjs?

kouliavtsev — Wed, 02 Mar 2022 10:31:57 +0000

Plausible is an excellent privacy-oriented Google alternative. It is easy to set up in Nextjs, but tracking inbound links takes more effort.

In this article:

Why I choose Plausible?
Set up Plausible in Nextjs
Create a custom event in Plausible
Create a link component that tracks inbound clicks
Track component clicks

Why I choose Plausible?

In my side projects, I take privacy seriously. So, in short, this is how I think about it.

I want to gather usability feedback in an anonymized way.
I don't want to collect all user data.
Instead, I want to track page visits and button clicks.
I don't need a complex dashboard for this.
I don't want to deal with accepting privacy cookies.
Data collection should be GDPR compliant.
It should be easy to implement.

Even though Google Analytics is one of the most popular tools, it scores 2.5 / 6 on the list above. In addition to this, the problem with Google is that their business model is not privacy first. To me, it feels like their priorities are elsewhere, so I decided to search for an alternative.

Say hello to Plausible! 🤗

Plausible is lightweight and open source web analytics. No cookies and fully compliant with GDPR, CCPA, and PECR. Made and hosted in the EU, powered by European-owned cloud infrastructure.

Why is Plausible better than Google? 🥊

Privacy first business model
Is a simple analytics tool
Full data ownership
Open-source (transparent)
Compliant with GDPR, CCPA, and PERC
No cookies means no popups
Better page performance
Avoids Ad Blocking
Community-oriented

How to set up Plausible in Nextjs?

Use next-plausible

yarn add next-plausible

In _app.js add:

import PlausibleProvider from 'next-plausible'

export default function MyApp({ Component, pageProps }) {
  return (
    <PlausibleProvider domain="yourwebsite.com">
      <Component {...pageProps} />
    </PlausibleProvider>
  )
}

Proxy the analytics script to avoid being blocked by adblockers.

const { withPlausibleProxy } = require('next-plausible')

module.exports = withPlausibleProxy()({
  // ...your next js config, if any
})

And "voila," you are done!

PS: The reason why you have to proxy.

We're blocked by some blocklist maintainers who have taken the stance that they want to block every tracking script and don't want to have the responsibility to judge what's good and what's bad.

Create a custom event in Plausible

To start tracking inbound link clicks, you need to create a custom goal in Plausible.

The custom goals can be configured here:
plausible.io/[your-domain]/settings/goals

Or follow this step-by-step instruction:

Go to plausible.io/sites
Hover over your website and click on the gear icon.
You should redirect to plausible.io/[your-domain]/settings/general
Click on goals
You should redirect to plausible.io/[your-domain]/settings/goals

Next, create a custom goal

Click on + Add goals
Click on Custom Event
Enter event name Inbound Link: Click
Click Add goal →

Create a link component that tracks inbound clicks

Let's wrap next/link in a Link component.

import NextLink from 'next/link';

const Link = ({ href, children, ...props }) => {
  return (
    <NextLink href={href}>
      <a {...props} onClick={() => plausible('Inbound Link: Click')}>
        {children}
      </a>
    </NextLink>
  );
};

export default Link;

Import plausible and send onclick events to Plausible.

import NextLink from 'next/link';
import { usePlausible } from 'next-plausible';

const Link = ({ href, children, ...props }) => {
  const plausible = usePlausible();

  return (
    <NextLink href={href}>
      <a {...props} onClick={() => plausible('Inbound Link: Click')}>
        {children}
      </a>
    </NextLink>
  );
};

export default Link;

When the user clicks on your Link component below:

<Link href="/some-url">
  Some text
</Link>

The onclick handler will send your custom Inbound Link: Click event to Plausible. If you inspect your goal conversion dashboard, you should see it updated. 🙌

Track component clicks

As a bonus, let's add extra custom props that we can use to check what components are clicked by the user. You will be able to see a component clicks breakdown under the goal conversion overview.

As you can see in the image above, I have done this for one of my projects nicer.work, where freelancers can compare freelance websites.

Here I have added property customProps where I could define custom properties that I would like to send to Plausible.

import Link from './Link';

const Header = () => {
  return (
    <Link href="/some-url" customProps={{ component: 'Header' }}>
      Some text
    </Link>
  );
};

The Link component looks like this:

import NextLink from 'next/link';
import { usePlausible } from 'next-plausible';

const Link = ({ href, children, customProps = { component: 'Any' }, ...props }) => {
  const plausible = usePlausible();

  return (
    <NextLink href={href}>
      <a
        {...props}
        onClick={() => {
          plausible('Inbound Link: Click', {
            props: {
              ...customProps
            }
          });
        }}>
        {children}
      </a>
    </NextLink>
  );
};

You can always extend the customProps, with other properties to extend custom event breakdown.

Wrap-up

Plausible got my back when it comes to taking care of user privacy. I hope that you will enjoy Plausible as much as I do.

Get Started in Seconds with Nexjs Examples

kouliavtsev — Fri, 18 Feb 2022 19:12:20 +0000

Most of the developers that start with Nextjs are not aware of the abundance of Nextjs examples, that are part of the Nextjs GitHub repo. You can use a handy CLI tool create-next-app to get any example running in seconds.

Where Can You Find Nextjs Examples?

If you want quickly browse all the examples, you can find them in the examples folder here.

Yet, there is a better way. Simply go to https://nextjs.org/examples. If you scroll down a bit, you will find a nifty filter.

Pretty neat, huh?

Here you can filter examples by:

Styling
Data Fetching
Authentication
CMS
Next.js Features
Database
State Management
Misc

How to Use Create Next App with an Example?

Nextjs has built an awesome CLI tool that makes it easy to get started in seconds.

npx create-next-app@latest
# or
yarn create next-app

If you want to start a project with an example, you can do it like this.

npx create-next-app@latest --example [name]|[github-url]
# or
yarn create next-app --example [name]|[github-url]

Let's do this with a real working example (no pun intended).

yarn create next-app --example auth0 auth0-app

This will simply create a new Nextjs app located in auth0-app folder. The example auth0 will be already pre-installed.

Bonus

The benefit of using the CLI tool is that you can combine it with many other options. For example, you could add a --ts flag to have typescript also included in your project.

You can read more about other options here.

I hope that Next time (sorry, no pun intended, again) you will be looking for a Nextjs example, you will know where to start.

Happy hacking!