(05/05)Web app, designed and coded
Turns a TV-series binge into a plan: tell it how many days and hours you have, and it tells you when you will finish.
In short
01 · The problem
For people who love TV series, a marathon is chaos: how long will it take, when will it end, and will it collide with exams or sleep?
Marathoner turns it into a planned experience, based on the free time you have.
02 · The brief
What the course asked for
A website with several pages, an external API and a database holding the user’s data. Marathoner is my answer to each of the three.
From the login to the planner, and an ironic page of ready-made excuses.
Series, posters, episodes and running times.
Accounts and watchlists stay between visits.
03 · The choices
Search starts from the field on the home page
The debounce avoids a request on every key
Series, posters, episodes and runtimes from the API
Responses that arrive out of order are dropped
Days, hours, end date and episodes per session
Accounts and watchlists stay between visits
What happens between a key pressed and a watchlist saved.
04 · The project
01/04 Search
The home page is a large search field over The Movie Database: suggestions appear after a 300 ms debounce, with protection against out-of-order responses, above trending and top-rated series.
02/04 Planner
Pick days per week and hours per day: thanks to Vue’s reactivity the planner instantly recalculates viewing days, weeks, the finish date and episodes per session.
03/04 Alerts
Two built-in alerts: an exam warning that tells you how many episodes a day you need to finish in time, and a sleep check that reminds you to stop at a decent hour.
04/04 Excuses
The excuses page has no maths at all: ready-made excuses to cancel plans, with a fake “credibility” meter. It exists to make visitors smile and gives the product a personality.
05 · The outcome
What I delivered
Built with Vue 3, Vue Router and Vuetify’s Material components, Firebase Firestore for accounts and watchlists, and the TMDB API for posters, episodes and running times.
What I learned
Wiring the TMDB API, Firestore and Vue’s reactivity showed me how data, waiting time and state shape an interface: a debounced search or a response that arrives out of order is a user-experience problem before it is a technical one.
(03) Contact
UX/UI internships and a master’s
I am looking for internships and collaborations as a UX/UI designer, and a master’s programme starting in autumn 2027. Get in touch.
