How We Built NovaTik: A Modern TikTok Downloader for the Web

Mohamed Ait lahsen — Wed, 02 Sep 2026 17:53:24 +0000

"How We Built NovaTik: A Modern TikTok Downloader for the Web"
published: true
description: "A look at the technologies, architecture, and engineering decisions behind building NovaTik, a modern browser-based TikTok downloader."

tags: webdev, nextjs, typescript, javascript

How We Built NovaTik: A Modern TikTok Downloader for the Web

Building a small web tool can look simple from the outside.

Paste a URL. Click a button. Download a file.

But once you start building a real-world application around third-party platforms, things become much more interesting.

That's what happened while building NovaTik, a browser-based TikTok downloader designed to make saving TikTok content simple without requiring users to install additional software.

You can try the finished product at novatik.app.

In this article, I'll share some of the engineering decisions behind the project and what we learned while building it.

The idea behind NovaTik

The basic concept is straightforward:

A user copies a TikTok URL.
They paste it into NovaTik.
The backend processes the URL.
Available media information is returned.
The user chooses an option and downloads the result.

The challenge is making those steps reliable across different browsers, devices, URLs, formats, and languages.

The goal was to keep the user experience as simple as possible while keeping the architecture flexible enough to evolve.

The technology stack

NovaTik uses a modern JavaScript/TypeScript stack.

Frontend

The frontend is built with:

Next.js
React
TypeScript
Tailwind CSS

Next.js gives us the routing, rendering, metadata, and frontend infrastructure needed for a multilingual application.

TypeScript is particularly useful for a project like this because there are several different data structures involved in processing media and communicating with the backend.

Backend

The backend uses:

Node.js
Express
TypeScript
yt-dlp
FFmpeg

The backend is responsible for processing download requests rather than putting the heavy work directly in the browser.

This separation also makes it easier to improve the frontend independently from the media-processing layer.

Why yt-dlp?

One of the interesting engineering challenges is extracting media information from external platforms.

Instead of trying to implement every extraction mechanism ourselves, NovaTik uses yt-dlp as part of the backend processing pipeline.

This gives the project a mature extraction layer while allowing us to build our own API and user experience around it.

However, using an external extraction tool also means that the application needs to be prepared for changes.

Third-party platforms can change their page structure, APIs, delivery mechanisms, or media URLs.

That means a downloader is never really a "build it once and forget it" project.

Handling media formats

Another challenge is deciding which media format to return to the user.

A video can have multiple available representations, including different resolutions and streams.

Instead of blindly selecting the first available format, the backend evaluates the available information and chooses an appropriate option.

For example, the application can distinguish between:

Standard-definition video
Higher-quality video
Audio
Other available media representations

This becomes especially important when the goal is to provide a predictable user experience.

Keeping the frontend simple

One of the biggest lessons from the project is that a technically complex backend does not mean the UI should be complex.

The main interaction should remain:

Paste → Process → Choose → Download

That's it.

A user shouldn't need to understand codecs, streams, containers, or server-side processing.

The frontend hides that complexity and presents the result in a simple interface.

Building for multiple languages

NovaTik was also designed as a multilingual application.

The project currently supports:

English
French
Spanish
Portuguese
Arabic
Indonesian

This introduced another interesting engineering problem.

Internationalization isn't just translating buttons.

URLs, metadata, navigation, structured data, language alternatives, and page content all need to work together.

For example, a tool page should remain understandable and discoverable regardless of which language version a visitor uses.

Arabic also introduced RTL layout considerations that don't exist in the same way for left-to-right languages.

SEO is part of the architecture

For a public web application, SEO cannot be treated as something added after development.

The frontend needs to generate useful metadata, canonical URLs, language alternatives, structured data, sitemap entries, and crawlable pages.

For NovaTik, this means the technical architecture and SEO architecture are closely connected.

A page that looks great but cannot be properly discovered, crawled, understood, or indexed is still a problem.

What we learned

Building NovaTik has reinforced a few lessons that apply to many web projects.

1. Simple products can have complicated infrastructure

A simple interface can hide a surprising amount of backend work.

2. Third-party dependencies require maintenance

When your product depends on an external platform, you need to expect changes and build your system so those changes can be handled quickly.

3. TypeScript pays off

Strong typing becomes increasingly valuable as the number of API responses, media formats, locales, and components grows.

4. UX should hide technical complexity

Users care about accomplishing their task, not about how the backend processes a media URL.

5. SEO should be considered early

Routing, metadata, internationalization, internal linking, and crawlability are much easier to handle correctly when they're considered during development.

What's next for NovaTik?

NovaTik is still evolving.

We're continuing to improve the downloader, the user experience, multilingual support, performance, and the overall creator workflow.

The long-term goal is simple:

Build useful tools for people who work with short-form content, while keeping the experience fast and straightforward.

If you'd like to try the project, you can visit NovaTik.

Thanks for reading — and if you're building a web tool of your own, I'd love to hear what you're working on.

# Building NovaTik: The Problems I Didn't Expect I started building NovaTik, a simple TikTok video downloader, thinking it would be a relatively easy project. It wasn't. 😂 The basic idea is simple: ```text TikTok URL Backend Process Video Do

Mohamed Ait lahsen — Sun, 30 Aug 2026 17:30:48 +0000

DEV Community: Mohamed Ait lahsen

How We Built NovaTik: A Modern TikTok Downloader for the Web

tags: webdev, nextjs, typescript, javascript

How We Built NovaTik: A Modern TikTok Downloader for the Web

The idea behind NovaTik

The technology stack

Frontend

Backend

Why yt-dlp?

Handling media formats

Keeping the frontend simple

Building for multiple languages

SEO is part of the architecture

What we learned

1. Simple products can have complicated infrastructure

2. Third-party dependencies require maintenance

3. TypeScript pays off

4. UX should hide technical complexity

5. SEO should be considered early

What's next for NovaTik?

# Building NovaTik: The Problems I Didn't Expect I started building **NovaTik**, a simple TikTok video downloader, thinking it would be a relatively easy project. It wasn't. 😂 The basic idea is simple: ```text TikTok URL Backend Process Video Do

# Building NovaTik: The Problems I Didn't Expect I started building NovaTik, a simple TikTok video downloader, thinking it would be a relatively easy project. It wasn't. 😂 The basic idea is simple: ```text TikTok URL Backend Process Video Do