Today I would like to show you how one real web application evolved over time — from a small CMS-based tool to a more modern platform with a custom backend and frontend.
Key points on slide
A real product story
From small tool to complex platform
How architecture changes over time
02
Why This Is a Good Case Study
What to say
This is not just a list of technologies. It is a real example of how technical decisions change when a product grows, gains larger clients, and needs to become more scalable and maintainable.
Key points on slide
Real product, real clients, real constraints
Real architectural change
Not just a list of tech — a story of decisions
03
Phase 1: The Beginning
PHASE 1
What to say
The first version of Studio Assistant was a relatively small application for independent studios. It was built in Joomla, using PHP and MySQL, with the server rendering complete HTML pages for the browser.
Key points on slide
Small app for independent studios
Joomla + PHP + MySQL
Server rendered full HTML pages
04
What Is a CMS?
What to say
A CMS is software that helps people create and manage content without building everything from scratch. It usually provides an administration interface, user roles, routing, and extension mechanisms — which makes it useful for early-stage products.
Key points on slide
CMS = Content Management System
Provides admin interface, user roles, routing
Useful for fast early development
05
Core Technologies of Phase 1
PHASE 1
What to say
Joomla gave us the structure of the application. PHP handled the server-side logic and rendering. MySQL stored the data. This was a very practical combination for building the first version quickly.
Key points on slide
Joomla — open-source CMS and framework
PHP — server-side web language
MySQL — relational database
06
Traditional Server-Rendered Architecture
What to say
In the classic model, the browser asks for a page, the server generates the HTML, and the browser displays it. This works well for simpler applications, but it becomes limiting when the interface needs to feel more interactive.
Key points on slide
Browser requests → Server builds HTML → Browser shows page
Simple and effective
Less suitable for highly dynamic UI
07
Phase 2: A More Dynamic Product
PHASE 2
What to say
When the product started to be used by a much larger client, the interface had to become more responsive and application-like. We still used Joomla in the backend, but we started moving more UI rendering to JavaScript in the browser.
Key points on slide
First major client: Atlantic Records
Backend still Joomla, frontend more dynamic
Data loaded asynchronously
08
AJAX and Fetch
PHASE 2
What to say
AJAX allowed the browser to request new data without reloading the whole page. Fetch is the modern browser API for this. This shift made the interface feel much more responsive and dynamic.
Key points on slide
AJAX = asynchronous browser requests, no full reload
Server returns data instead of full HTML
Fetch = modern API for HTTP requests
09
From Server Pages to JavaScript UI
PHASE 2
What to say
This second phase was hybrid. The backend was still based on Joomla and PHP, but the browser was doing more and more rendering work. This is a very common transitional stage in real projects.
Key points on slide
Phase 1: server renders everything
Phase 2: browser renders more UI
A hybrid architecture — very common in real projects
10
Phase 3: Rebuilding the Application
PHASE 3
What to say
Later, as the product became more serious and investors became interested, we decided to rebuild the application. The goal was not to follow trends, but to create an architecture better suited to long-term product growth.
Key points on slide
Investor interest → decision to rebuild
Clear separation: frontend and backend
Goal: scalability, not following trends
11
Modern Stack
PHASE 3
What to say
In the rebuilt version, the backend moved to Express, the database remained MySQL, Prisma provided a safer and more structured way to work with data, Svelte powered the frontend, and TypeScript improved reliability in a growing codebase.
Key points on slide
Express — backend framework for Node.js
Prisma — ORM above MySQL
Svelte — frontend UI framework
TypeScript — typed JavaScript
API-first architecture
12
What Changed Technically
PHASE 3
What to say
The important change was not only the choice of tools, but the change in architectural thinking. The backend became responsible for business logic and data, while the frontend became responsible for the user interface and interaction.
Key points on slide
Backend: business logic and data (API)
Frontend: UI and user interaction
API separates the two layers cleanly
13
Three Phases, Three Models
What to say
If I had to summarize the whole story, I would say that the project evolved from a CMS-based monolith, to a hybrid solution, and finally to a more modern separated architecture.
Key points on slide
Phase 1: CMS-based monolith
Phase 2: hybrid system
Phase 3: separated frontend and backend
Evolution driven by product needs
14
Lessons Learned
What to say
The main lesson is that technology should follow the real needs of the product. The right solution at one stage may not be the right solution later. Real-world software almost always evolves step by step.
Key points on slide
Start with what fits the current stage
Architecture changes as complexity grows
Rewriting is a serious decision
Practical choices matter more than fashionable ones
15
Conclusion
What to say
For me, this is the most interesting part of the story: each phase was the right answer at its time. The product evolved, and the architecture evolved with it. That is a very realistic lesson from web development.