Case study · Web app · Marketplace freelance
Freelando
Chi ha un progetto non sa a chi affidarlo. Chi lavora da freelance non sa dove trovare clienti senza pagare commissioni. Freelando mette in mezzo un mercato, e doveva funzionare davvero: ruoli, crediti, pagamenti, chat.
- Progetto
- Freelandomarketplace
- Settore
- Lavoro freelanceclienti e professionisti
- Tipo
- Web appa due ruoli, con area riservata
- Cosa abbiamo fatto
- Prodotto, design, sviluppofront end, database, pagamenti
- Tecnologie
- React · Supabase · StripeIT, EN, ES
Il punto di partenza
Un mercato a due lati, con la stessa home
Un marketplace deve convincere due pubblici diversi con la stessa pagina: il cliente che pubblica gratis e vuole preventivi in poche ore, e il freelance che paga crediti per rispondere e vuole sapere che non li butta. Se uno dei due non si fida, l'altro non ha niente da fare.
Sotto la home serviva una web app completa, non un prototipo: registrazione con ruolo, richieste e preventivi, crediti con pagamenti veri, chat, recensioni, notifiche, un pannello di amministrazione. E tutto in italiano, con inglese e spagnolo pronti.
01
Due pubblici
Una home, due tasti: «Pubblica un progetto» e «Sono un freelance». Ognuno capisce in cinque secondi cosa ci guadagna.
02
Fiducia
Recensioni, numeri, e per chi paga crediti due garanzie scritte: preventivo mai letto o progetto non assegnato, crediti restituiti.
03
Funziona davvero
Ruoli, permessi, pagamenti, chat in tempo reale. Un utente può fare tutto il giro, dal primo accesso al progetto assegnato.
Cosa abbiamo costruito
Una landing che spiega, una web app che mantiene
Home, come funziona, prezzi, pubblicazione del progetto, accesso. Poi l'area riservata per ogni ruolo.
01
La promessa e la prova, fianco a fianco
A sinistra la promessa: il freelance giusto, in poche ore, gratis e senza intermediari. A destra la prova: una richiesta vera con un preventivo appena arrivato. Chi legge vede il risultato prima di leggere come si ottiene.
Sotto, le stelle e il numero di recensioni. Due tasti, uno per pubblico.
02
Il prodotto spiegato in diretta
Invece di un elenco di funzioni, una finestra che si compila da sola: pubblica, ricevi preventivi, scegli, collabora. Quattro passi che scorrono, e chi guarda ha già usato l'app senza registrarsi.
Sotto, i numeri della piattaforma in una fascia colorata: freelance iscritti, progetti, tempo medio del primo preventivo.
03
Cerca per bisogno, non per categoria
«Di cosa hai bisogno, esattamente?» Una barra dove scrivere il progetto con parole proprie, e le categorie sotto come suggerimento, non come menu. Il cliente non deve sapere se il suo è «sviluppo web» o «grafica».
Poi i tre passi di come funziona, disegnati come un percorso.
04
Pubblica in due minuti
Titolo, descrizione con il conteggio dei caratteri, categoria, scadenza, budget minimo e massimo, lavoro da remoto. Gli esempi nei campi guidano chi non ha mai scritto un brief.
«Più dettagli fornisci, più preventivi mirati riceverai»: la ragione per compilare bene, detta prima.
05
Prezzi trasparenti: crediti, non commissioni
Per i clienti è gratis, sempre, e lo dice in alto. Per i freelance ci sono i crediti: rispondere a una richiesta ne costa in media cinque, il costo esatto è scritto sulla richiesta prima di rispondere.
E due garanzie: preventivo mai letto, crediti restituiti; nessun freelance scelto, crediti restituiti a tutti.
Da telefono la home mette i due tasti sotto il titolo, la richiesta di esempio subito dopo, e l'assistente «Hai bisogno di aiuto?» in basso a destra.
Dentro l'app
Il giro completo, dopo la registrazione
Dieci passi nell'area riservata. Per ognuno la schermata vera e una ricostruzione di come funziona.
ClienteFreelanceAdmin
Bentornato su Freelando
Accedi per gestire progetti, preventivi e messaggi.
La tua professione
Più il profilo è completo, più richieste ricevi.
Passo 3 di 4
Quale proprietà CSS crea una griglia?
Prenota la videochiamata di verifica
15 minuti con il team, da lunedì a venerdì dalle 11 alle 17.
Sito vetrina per studio di architettura
Sviluppo Web · 2.000–4.000 € · da remoto
Pagamento con Stripe · fattura in arrivo
Come è fatto
Sotto il cofano: ruoli, crediti, tempo reale e permessi nel database
Sei meccanismi, uno alla volta. Quelli che fanno la differenza tra un prototipo e un prodotto.
- React
- TypeScript
- TanStack Start
- Supabase
- Postgres + RLS
- Realtime
- Stripe
- Tailwind + Radix
- i18n IT · EN · ES
Un accesso, due ruoli
Due ruoli, un accesso
Cosa vedi. Ti registri scegliendo se sei cliente o freelance, con email o con Google. Ognuno ha la sua dashboard, e non entri nell'area riservata finché il profilo non è completo.
Come è fatto. Il ruolo vive in una tabella a parte, non nel profilo, così nessuno può cambiarselo. Un componente di guardia sulle rotte private manda chi ha il profilo incompleto nel percorso di onboarding; le pagine pubbliche restano navigabili.
Richiesta, preventivi, scelta
Cosa vedi. Il cliente pubblica, i freelance rispondono con prezzo e tempi, il cliente ne accetta uno. La richiesta passa ad «Assegnata» e si apre la chat.
Come è fatto. Ogni richiesta accetta al massimo quindici preventivi, e ogni preventivo può essere a corpo, orario o da definire. Accettare aggiorna lo stato del progetto e crea la conversazione; le notifiche partono dal database, non dal browser.
credit_transactions · rimborso automatico
I crediti, con rimborso automatico
Cosa vedi. Rispondere costa crediti, sbloccare il telefono del cliente ne costa due in più. Se il preventivo non viene letto o il progetto scade senza scelta, i crediti tornano.
Come è fatto. Ogni movimento è una riga in un registro: acquisto, consumo, rimborso. Il saldo si calcola dal registro, mai a mano. Il costo di ogni richiesta lo fissa l'amministrazione quando la approva, in base al valore del progetto.
Supabase Realtime · postgres_changes
Chat e notifiche in tempo reale
Cosa vedi. Scrivi un messaggio e l'altro lo vede subito, senza ricaricare. La campanella in alto conta le novità.
Come è fatto. Il browser si iscrive a un canale per la conversazione e riceve ogni riga nuova della tabella dei messaggi appena viene scritta. Le notifiche fanno lo stesso su un canale per utente. Niente polling, niente server in mezzo.
Row Level Security
Chi vede cosa lo decide il database
Cosa vedi. Un preventivo lo leggono solo il freelance che l'ha scritto e il cliente del progetto. Un utente sospeso non può più scrivere niente.
Come è fatto. Le regole sono policy di Row Level Security su Postgres: valgono per ogni query, da qualunque parte arrivi. Una policy restrittiva blocca inserimenti di preventivi e messaggi a chi è sospeso. Il codice del sito non può sbagliare, perché non decide lui.
Stripe embedded checkout
Pagamenti con Stripe, senza uscire dal sito
Cosa vedi. Scegli un pacchetto di crediti, paghi in una finestra dentro la pagina, e il saldo si aggiorna da solo.
Come è fatto. Il checkout è quello incorporato di Stripe. Il saldo però non lo aggiorna il browser: lo fa un webhook che riceve la conferma da Stripe, controlla di non aver già accreditato quella sessione, e chiama una funzione nel database. Se chiudi la pagina a metà, i crediti arrivano lo stesso.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni web app
Un marketplace, un gestionale, un'area riservata: le decisioni che contano sono le stesse.
01
Spiega il meccanismo, non le funzioni
La finestra che si compila da sola in home vale più di un elenco di feature. Fai vedere il giro completo prima di chiedere la registrazione.
02
Una home, due pubblici, due tasti
Se il tuo prodotto ha due lati, non scegliere per chi scrivere: dai a ciascuno il suo tasto nella prima schermata.
03
Il prezzo giusto è un modello, non una cifra
Crediti invece di commissioni, e due garanzie di rimborso scritte in chiaro. Chi paga sa quando paga e quando no.
04
La fiducia si costruisce nel database
I permessi vanno nel posto che nessuna pagina può aggirare. Se il codice del sito sbaglia, la policy tiene lo stesso.
05
Disegna anche il vuoto
Una lista senza risultati è una schermata che l'utente vedrà: dille cosa fare dopo, mostra i progetti completati, non lasciare un buco.
Il prossimo potrebbe essere il tuo
Vuoi una web app, non solo un sito?
Un marketplace, un gestionale, un'area riservata con pagamenti: se la tua idea ha bisogno di utenti, dati e soldi che girano, la costruiamo per intero. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti