• File
  • Edit
  • Selection
  • View
  • Go
  • Run
  • Help

EXPLORER

Progetti

...
BoolBnB

Single Page Application ispirata ad AirBnB. Per il backend ho utilizzato Laravel per creare API RESTful. Il frontend l'ho sviluppato con Vue3 per creare interfacce utente dinamiche e interattive. La libreria Pinia store viene utilizzata per gestire lo stato dell'applicazione e semplificare la gestione e la condivisione dei dati tra i vari componenti.

Come è stato creato:
  • SCSSSCSS
  • PhpPhp
  • LaravelLaravel
  • MySQLMySQL
  • API RESTfulAPI RESTful
  • BootstrapBootstrap
  • JavascriptJavascript
  • VueVue
  • PiniaPinia
...
React - (n)Ice Cream

Una web app creata con React dove tramite una chiamata API otteniamo la lista dei gelati disponibili con la possibilità di filtrarli per categoria.

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • BootstrapBootstrap
  • JavascriptJavascript
  • ReactReact
...
Crypto Angular

Single page application creata con Angular e l'utilizzo di API RESTful. Ottiene tutti i dati delle monete virtuali con la possibilità di aprire ogni singola moneta e consultare il grafico che rappresenta il valore dell'ultimo mese. Nel jumbotron vengono mostrate le primi 10 monete classificate in ordine di rank.

Come è stato creato:
  • HtmlHtml
  • SASSSASS
  • JavascriptJavascript
  • API RESTfulAPI RESTful
  • AngularAngular
...
Bank Card Interactive

Il sito utilizza HTML, CSS e JS Vanilla per rappresentare una carta di credito con autoriempimento tramite form. Le informazioni inserite dall'utente vengono verificate prima dell'invio. Il design è moderno e pulito.

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • JavascriptJavascript
  • Vue3Vue3
...
Whatsapp Desktop

Ho sviluppato una replica della famosa applicazione di messaggistica istantanea con alcune features in javascript. Infatti avremo la risposta random del computer(no AI), possibilità di filtrare i contatti nell'input cerca, cambio di stato con 'Sta Scrivendo...' e 'Online', possibilitò di pickare l'emoticon da una tabella di emoticon, possibilità di eliminare i messaggi

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • BootstrapBootstrap
  • JavascriptJavascript
  • Vue3Vue3
...
Slider Città React

Uno slider creato con React che consente di scorrere in loop le città disponibili. È stato incluso un loader stile Pacman, di una libreria, che viene caricato fino a quando la chiamata API non viene effettuata con successo.Se la chiamata API ritorna un errore viene mostrato un componente Error. Tutto viene gestito tramite gli hooks e vengono passati i dati alla singola città tramite props.

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • BootstrapBootstrap
  • JavascriptJavascript
  • ReactReact
...
Netflix

Progetto ispirato al famoso servizio di streaming Netflix. Per svilupparlo, ho utilizzato un API che mi ha permesso di avere un insieme di risultati congrui per la ricerca. All'hover sulla card appaiono le informazioni relative al film/serie TV quali: titolo, titolo originale, lignua, voto e overview. Inoltre è possibile effettuare una ricerca per nome.

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • BoostrapBoostrap
  • JavascriptJavascript
  • Vue3Vue3
...
Palette React

Selezionando un colore ed inserendo la quantità, viene mostrato il numero di sfumature richiesto per quel colore

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • BootstrapBootstrap
  • JavascriptJavascript
  • ReactReact
...
Darkmode React

Questo sito è figlio delle mie esercitazioni con gli Hooks di React, infatti viene usato l'useEffect per cambiare la classe al tag html ogni volta che cambia il valore di 'theme'. Per cambiare l'icona all'interno del tasto mi servo dell'useState per tenere traccia di 'isDark' e cambiare l'icona tramite l'operatore ternario. Salvo anche lo stato del tema nello storage del browser per non perdere lo stato al refresh o al ritorno in pagina.

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • BoostrapBoostrap
  • JavascriptJavascript
  • React.jsReact.js
...
Rick And Morty

Questo sito è stato creato per fare pratica con le chiamate API, infatti in base alla selezione fa una chiamata API differente.

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • BootstrapBootstrap
  • JavascriptJavascript
  • Vue3Vue3
...
Prossimi eventi React

Un sito molto semplice creato con react che mostra i prossimi eventi in città e ti dà la possibilità di eliminare ed aggiornare la lista degli eventi.

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • BootstrapBootstrap
  • JavascriptJavascript
  • ReactReact
...
Discord

Uno dei primissimi progetti realizzati ispirato a Discord, la famosa piattaforma statunitense di VoIP, messaggistica istantanea e distribuzione digitale

Come è stato creato:
  • HtmlHtml
  • CSSCSS
...
Slider vue3

Uno slider creato ai miei esordi con js vanilla, composto da immagine e relativa thumbnail con la possibilità di scorrere tra le immagini o inserire l'autoplay. n.b.: Che la grafica non è stata curata è un dato oggettivo :D

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • JavascriptJavascript
...
Landrick

Un sito completo creato con Vue3

Come è stato creato:
  • HtmlHtml
  • CSSCSS
  • SassSass
  • BootstrapBootstrap
  • Vue3 Vue3