Torna ai progetti
Concluso
1minutesocialpost
Front-end completo di un'applicazione per creare e pianificare contenuti social: sedici schermate funzionanti, costruite prima che il server esistesse.
|
RuoloProgettazione e sviluppo del front-end
SquadraProgetto individuale
Tecnologie9 tecnologie
Di cosa si tratta
Un'applicazione React scritta per essere navigabile per intero prima ancora che ci fosse un server a cui parlare. Ogni dato passa da un livello di servizi che espone già le stesse firme che avrà il client vero: il giorno in cui arriva il server si riscrive una cartella sola, e il resto dell'applicazione non se ne accorge. Dentro ci sono la creazione guidata di un post in tre passi, il calendario di pianificazione, l'identità di marca, il conteggio dei crediti con il suo limite, e una pagina pubblica di presentazione con le animazioni. Tutto in italiano, con tavolozza e marchio propri.
Funzionalità principali
Creazione
- Percorso guidato in tre passi, con il costo in crediti sempre visibile
- Sei angoli di racconto da combinare, oppure un tema scritto a mano
- Formati immagine per verticale, quadrato e storia
Pianificazione
- Calendario mensile con i post programmati
- Date e orari proposti secondo la cadenza scelta, modificabili
- Elenco delle pubblicazioni con filtri e ordinamento
Marca
- Più identità di marca, con un limite sul piano gratuito
- Collegamento degli account social
- Tavolozza e voce riprese nei contenuti generati
Piano
- Crediti mensili che calano a ogni generazione
- Messaggio di limite raggiunto al posto dell'errore
- Confronto fra i piani disponibili
Problemi e soluzioni
Costruire un'interfaccia sopra dati finti significa quasi sempre doverla riscrivere quando arrivano quelli veri: i componenti si abituano a ricevere tutto subito, e con la rete di mezzo non funziona più niente.
SoluzioneI servizi finti restituiscono promesse, con un ritardo simulato che va da otto decimi di secondo a due secondi, e passano tutti dallo stesso gestore di richieste che userà il client vero. Così le attese, gli errori e le liste vuote sono già state disegnate e provate mentre il server non esisteva ancora.
L'applicazione presa a riferimento, a metà della creazione di un post, si piantava su una schermata bianca: una risposta di errore che nessuno aveva previsto.
SoluzioneOgni passo dichiara esplicitamente cosa mostrare mentre carica, quando fallisce e quando non c'è niente da mostrare, con una rete di sicurezza attorno a tutta l'applicazione che rimanda a una schermata di recupero invece che al vuoto.
Le animazioni della pagina di presentazione — il modellino che segue il mouse, gli elementi che galleggiano — sono un problema per chi soffre di cinetosi, o per chi ha semplicemente chiesto al sistema di muovere meno le cose.
SoluzioneTutto il movimento è condizionato a quella preferenza: se è attiva, inclinazione e galleggiamento si spengono e il contenuto resta esattamente dov'è, visibile e leggibile. Non è una versione ridotta, è la stessa pagina ferma.
Accesso al progetto
Tecnologie
React
TypeScript
Vite
Tailwind CSS
Radix UI
React Router
TanStack Query
Framer Motion
Vitest
Indice
- • Di cosa si tratta
- • Funzionalità principali
- • Problemi e soluzioni
