TrisFactor — Webapp Game-Based XFactor Italia 2022

Platform:

Web Application

Deliverables:

Infrastruttura Cloud, Backend e Front-end development, UI/UX design

trisfactor mobile mockup
Cosa ci hanno chiesto

Sky Italia/Fremantle - Sviluppare l'applicativo di un mini gioco che si ispira al tradizionale “tris”, dove il giocatore deve indovinare tutte le mosse dei protagonisti di X Factor 2022, abbinando un personaggio del cast, a scelta tra concorrenti, giudici e conduttrice, ad un evento relativo al Live Show in onda, con la caratteristica di essere integrato all'interno del sito web di xfactor tramite iframe, e all'interno della loro app mobile.

trisfactor mockup
Cosa abbiamo fatto

Con la collaborazione di Quelli di FantaSanremo, per l'ideazione della gamification, noi abbiamo progettato e sviluppato l'applicativo TrisFactor.

L'applicativo è stato sviluppato in React (Create React App) per la parte frontend, integrando recoil per la gestione dello stato applicativo.

Per la parte back end abbiamo usato NestJS, un framework che consente di costruire applicazioni back end in maniera scalabile ed efficiente, e il framework serverless che ci ha permesso di sfruttare la scalabilità delle Lambda AWS. Per il database abbiamo invece optato per la versione serverless di MongoDB fornita da Atlas.

La Login è stata invece gestita da Sky e integrata all'interno del nostro applicativo.

L'infrastruttura cloud su Amazon AWS è stata creata usando terraform, un tool per l'Infrastructure as Code multi provider, che permette di creare i diversi ambienti riducendo il più possibile la possibilità di errore facilitando la gestione/manutenzione.

Abbiamo utilizzato la libreria MUI per i componenti, adattando il design con la style guide di XFactor fornita da SKY inserendo pure delle personalizzazioni per lo sponsor ufficiale Skoda.

Questo ci ha permesso di avere una certa continuità con il loro sito, dato che la nostra applicazione è stata inserita all'interno di un iFrame nel sito di XFactor e nella loro app mobile.

Tools e Tecnologie utilizzate

Questi sono alcuni strumenti e tecnologie, di cui siamo follemente innamorati, usati per realizzare questo prodotto

Hai un progetto in mente?

Pianifica una consulenza gratuita di 30 minuti