DEV Community

Cover image for How We Built Intime Cyprus: A Deep Dive Into Real-World Web Architecture, Performance Tuning, and UX Decisions
shabdarak
shabdarak

Posted on

How We Built Intime Cyprus: A Deep Dive Into Real-World Web Architecture, Performance Tuning, and UX Decisions

Building a platform like Intime Cyprus turned out to be far more challenging than a typical corporate website. What initially looked like a straightforward build quickly evolved into a real-world engineering exercise involving performance constraints, UX complexities, and architectural decisions that had to scale with both traffic and content.

The idea behind the project was simple: create a fast, reliable, user-friendly platform that helps travelers and residents discover services across Cyprus. But in practice, this meant dealing with a wide range of technical considerations — from optimizing dynamic content and handling large image libraries, to ensuring smooth navigation for users connecting from different regions and devices.

Our team decided from the very beginning that this project would be approached as a high-performance web application, not just a brochure website. That mindset shaped every decision we made: the tech stack, caching strategy, deployment pipeline, design system, and even how we planned for SEO and content structure.

In this article, I’ll break down the actual architectural and development decisions we made, what worked, what didn’t, and the lessons we learned along the way. If you’ve ever been involved in building a real-world platform with both UX and performance priorities, this deep dive should feel very familiar.

Tech Stack — Why We Picked This Setup

For Intime Cyprus, we needed a stack that was fast, SEO-friendly, and simple enough to maintain without adding unnecessary complexity. The goal was to keep the architecture lean while still delivering solid performance and a smooth user experience. Here’s the setup that worked best for us:

Frontend: Next.js

We chose Next.js mainly because it gives you a good balance between performance and SEO—both key for a content-heavy project.

A few reasons it fit well:

Server-side rendering for better indexing

Strong built-in image optimization

Hybrid rendering (SSR/SSG) for pages that don’t need real-time updates

Fast navigation and minimal setup

For a platform with lots of visual content, these features made a noticeable difference.

Backend: Node.js (Lightweight API Layer)

Our backend is a small Node.js API layer that handles data fetching and a bit of routing logic. Nothing too fancy—just enough to keep things organized and efficient.

Why Node?

Fast and non-blocking

Easy to scale

Straightforward for the team to maintain

Perfect for lightweight APIs

Keeping the backend simple helped us avoid over-engineering.

Database: MySQL

We went with MySQL because the data model was structured and didn’t require anything exotic. With proper indexing and clean schema design, MySQL remains a stable and predictable choice.

What we focused on:

Proper indexing

Avoiding heavy queries

Keeping the schema as clean as possible

This kept response times fast even as the dataset grew.

Deployment: Vercel + CDN

Next.js + Vercel is a smooth combo, so deployment was almost effortless.
We paired it with a global CDN to ensure consistent load times for users in different regions.

The benefits:

Automatic optimization

Edge routing

Reliable global caching

Simple versioning and rollbacks

It allowed us to focus on the product rather than managing servers.

The Result

This stack kept the project lightweight, fast, and easy to evolve. It handled SEO requirements well, delivered good performance out of the box, and let us spend more time on solving real user-experience challenges instead of dealing with technical overhead.

Architecture Overview — Keeping Things Simple and Fast

The architecture behind Intime Cyprus was built around one idea: keep it simple, keep it fast. We didn’t try to reinvent anything — we just combined tools that worked well together and avoided unnecessary layers.

Frontend–Backend Flow

The frontend (Next.js) handles most of the rendering. Whenever it needs data, it calls a lightweight Node.js API layer. The API fetches what’s needed from MySQL, applies minor formatting, and sends it back.
The goal was to keep each request small, predictable, and easy to cache.

Caching & Performance

To reduce server load and improve user experience:

Frequently used endpoints were cached

Static pages used SSG/ISR

Images were served through a CDN

Repeated queries were minimized with simple database-level optimizations

This helped the platform stay fast even during traffic spikes.

Content Delivery

We relied heavily on global CDN routing so content loads quickly no matter where the user is.
Most UI elements are rendered on the edge, and any dynamic data is fetched through a short API round trip.

Deployment Pipeline

Once changes are pushed:

Vercel builds and optimizes the frontend

The API layer is deployed as serverless functions

Cached pages update automatically through ISR

No manual deployment steps, no downtime.

In Short

The architecture isn’t complex — it’s intentionally minimal. Next.js handles rendering, Node.js handles lightweight logic, MySQL stores structured data, and a CDN makes everything load fast. That’s it.

UX & UI Decisions — Designing for Real Users, Not Just Screens

For Intime Cyprus, the UX had to work for a wide range of users: locals, tourists, and anyone searching for services on the go. So our approach focused on clarity, speed, and reducing friction as much as possible.

Mobile-First Structure

Most users browse on their phones, so we designed the layout around mobile screens first.
This helped us keep the interface clean, direct, and free of unnecessary elements.

Straightforward Navigation

Instead of adding too many categories or deep menus, we simplified everything into clear paths.
Users should find what they need in one or two taps — no complicated navigation patterns.

Clean, Lightweight UI

We avoided heavy animations and visual clutter.
The goal was to keep the UI:

quick to load

readable

easy to scan

Simple cards, consistent spacing, and predictable layouts did most of the work.

Optimized Images

Since the platform includes many visuals, we compressed and optimized images heavily. This improved load times without compromising much on quality.

In Short

The UX was built around real usage, not fancy design trends: fast pages, fewer steps, clean visuals, and a structure that works smoothly on mobile.

Performance Optimization — Making Speed a Core Feature

Speed wasn’t just a “nice to have” for Intime Cyprus — it was a requirement. With image-heavy pages and users coming from different regions, we had to make sure the platform stayed consistently fast.

CDN-First Delivery

Most static assets — images, scripts, and styles — are served directly from a global CDN.
This kept TTFB low and ensured stable loading times regardless of location.

Smart Rendering (SSR + SSG + ISR)

We used a mix of:

SSR for dynamic pages

SSG for stable content

ISR for pages that need periodic updates

This approach reduced server load and made navigation feel instant.

Image Compression & Lazy Loading

Large images were the main performance challenge.
To handle this:

All images are optimized through Next.js

Lazy loading prevents blocking the initial render

Heavy visual sections load only when needed

Database Efficiency

A few simple optimizations made a big difference:

Indexing frequently queried columns

Avoiding redundant joins

Caching repeated lookups

Nothing fancy — just practical tuning.

Minimal Client-Side Scripts

We avoided adding unnecessary libraries to keep the JavaScript bundle small.
Less JS → faster first paint → better UX.

In Short

The platform feels fast not because of one major trick, but because of many small, consistent optimizations that work together.

Wrapping Up

Building Intime Cyprus wasn’t about using the flashiest tools or over-engineering the stack. The focus was on making a platform that loads fast, works smoothly on any device, and stays easy to maintain as it grows. A simple architecture, a clean UI, smart performance choices, and a lightweight SEO-friendly setup were enough to get us there.

The result is a platform that feels quick, behaves predictably, and lets users focus on what they came for — not waiting for pages to load.

If you’re working on a similar project or planning to build something content-heavy with strong UX requirements, keeping things simple might get you further than you think.

Top comments (0)