El primer commit i la regla que regeix totes les pantalles

A finals de novembre vam fer el primer commit seriós. Fins llavors només hi havia prototips solts, exploracions de disseny a Figma i una pila de notes. El primer commit era l'equivalent a escriure "pàgina 1" en una novel·la que portàvem mesos pensant: emocionant i una mica intimidador.

El més útil d'aquells sis mesos previs no va ser tant el que vam aprendre del sector com una regla que vam decidir imposar-nos abans de començar a teclejar.

La regla d'or

Està escrita literalment al README del repositori:

Si una pantalla necessita explicació, està mal feta.

Sona obvi. No ho és. La majoria de programari de gestió que hem vist requereix un onboarding de mitja hora amb un comercial. No és perquè els hostalers siguin maldestres: és perquè el producte és opac. Etiquetes confuses, fluxos que es bifurquen sense avisar, botons que diuen "Acceptar" quan haurien de dir "Confirmar reserva".

La regla ens obliga a unes quantes coses:

• Text explícit als botons. Res de "Guardar" a seques. "Guardar carta", "Guardar taula 12", "Confirmar canvis".
• Buits amb instruccions. Quan una pantalla és buida (sense reserves, sense plats, sense clients), no es veu un quadre gris trist. Es veu què s'hi pot fer i un botó clar per començar.
• Tooltips només per a casos extrems. Si necessites un tooltip, probablement el disseny està mal i cal reescriure el flux.

Què va entrar en aquell primer commit

El primer commit no era impressionant. Tenia:

• Una estructura de carpetes amb features/ per domini (auth, dashboard, reservations, menu, customers).
• L'esquelet d'autenticació contra Supabase.
• Una pantalla de login funcional, lletja, però suficient per començar.
• Un component de layout amb el selector de restaurant a dalt.

I poca cosa més. La gràcia no era el codi; era que existia un lloc on escriure'l.

El que va canviar quan vam començar a teclejar

Hi ha decisions que només es poden prendre mentre programes, no abans. Algunes que van aparèixer les primeres setmanes:

• L'editor de carta havia d'admetre arrossegar i deixar anar blocs. A Figma es veia bonic; al codi ens va costar dos intents fer-ho decent.
• L'estat de les reserves no eren quatre estats, n'eren set. Van caldre tres entrevistes més per confirmar-ho.
• El selector de restaurant no podia recarregar la pàgina: havia de mantenir el context del que estaves fent.

Com mesurem si la regla funciona

Quan algú extern prova una pantalla per primera vegada, no li expliquem res. El deixem davant i observem. Si triga més de cinc segons a saber què ha de fer, aquella pantalla no passa. La refem.

Aquesta pràctica ens continua salvant avui.