How I Built a Domain Ranking App using Vue.js, NestJS & Neon Database

Published on 11 December 2025 04:00 PM
#vue #nestjs #neon #sequelize #cloudflarePages #koyeb
This post thumbnail

The internet holds over 1.5 billion of websites, and their popularity can change every single day.
Ever wondered how your website ranks globally compared to others?

To answer this, I built a Domain Ranking App — a simple, fast tool where users can type a domain name (like nasa.com, earth.com, etc.) and instantly see its ranking over time.

This project uses:

  • Vue.js for the frontend UI
  • NestJS for the backend API
  • Neon for storing ranking history
  • Sequelize ORM for querying database
  • Tranco API as the data source
  • Cloudflare Pages + Koyeb for hosting

In this blog, I'll walk you through the idea, tech stack, caching logic, API usage, deployment steps, and how users can even compare multiple domains in one go.

Why I Built This App

I often check domain rankings on different websites, but:

  • Some sites require login
  • Some sites are slow
  • Some don't show ranking history
  • None allowed multiple domain comparison in a single search

So I decided to build my own tool

You simply type: google.com, facebook.com, openai.com

And the app displays all ranking graphs together.

What data source does the app use?

The app uses the Tranco Ranking API, a public service that provides daily updated global website rankings.

A sample API response looks like this:

{
  "domain": "earth.com",
  "ranks": [
    { "date": "2025-12-08", "rank": 7888 },
    { "date": "2025-12-07", "rank": 7879 },
    ...
  ]
}

The backend reads this, saves it to Neon, and sends a clean response to the frontend.

Tech Stack Overview

Frontend – Vue.js + Chart.js

  • Simple and smooth UI
  • Line charts for ranking trends
  • Multiple datasets for domain comparison
  • Blur + loading spinner while fetching results

Backend - NestJS

  • Single REST API: 
    GET /ranking/:domain
  • Fetches fresh data from Tranco
  • Implements caching (explained below)
  • Saves ranking history to Neon
  • Supports multiple domains separated by comma

Database - Neon

  • Free-tier, serverless Postgres
  • Stores rankings in a rankings table with fields:
    • domain
    • rank
    • date

Deployment

Everything is hosted globally and loads fast.

How Caching Works

To avoid calling Tranco API every time

  • Backend checks Neon for existing rankings.
  • If the most recent record is less than 24 hours old, it serves data from the cache.
  • Otherwise:
    • It fetches fresh ranking data
    • Deletes old entries for that domain
    • Saves new records
    • Returns updated data

This results in less API usuage and faster response because database keeps historical ranking data.

Multiple Domain Comparison (My Custom Feature)

Tranco API only supports one domain at a time. So I added the ability to search: 

google.com, facebook.com, twitter.com;

and the backend processes each one individually. The frontend then displays multiple colored graphs, one for each domain. This feature makes the app more unique and useful for digital marketers, SEO engineers, and curious users.

Hosting the Project

Frontend (Vue.js)

Deployed to Cloudflare Pages. Cloudflare automatically builds the project using: 

$ npm run build

and in Build Output - add dist

dist;

Backend (NestJS)

Deployed to Koyeb using:

npm install
npm run build
npm run start:prod

Domain

Hosted here by creating subdomain in Cloudflare DNS and pointed it to Cloudflare Pages.

Final Result

Users can:

  • Search any domain
  • View its historical ranking
  • Compare multiple domains in one go
  • Get fast results

Conclusion

This project helped me learn:

  • Combining Vue.js + NestJS effectively
  • Using Neon for serverless PostgreSQL
  • Implementing caching strategy in a real app
  • Deploying full-stack apps on Cloudflare + Koyeb

If you're interested in exploring the code, please have a look at my github repo.