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:SCSS
Php
Laravel
MySQL
API RESTful
Bootstrap
Javascript
Vue
Pinia

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:Html
CSS
Bootstrap
Javascript
React

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:Html
SASS
Javascript
API RESTful
Angular

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:Html
CSS
Javascript
Vue3

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:Html
CSS
Bootstrap
Javascript
Vue3

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:Html
CSS
Bootstrap
Javascript
React

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:Html
CSS
Boostrap
Javascript
Vue3

Palette React
Selezionando un colore ed inserendo la quantità, viene mostrato il numero di sfumature richiesto per quel colore
Come è stato creato:Html
CSS
Bootstrap
Javascript
React

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:Html
CSS
Boostrap
Javascript
React.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:Html
CSS
Bootstrap
Javascript
Vue3

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:Html
CSS
Bootstrap
Javascript
React

Discord
Uno dei primissimi progetti realizzati ispirato a Discord, la famosa piattaforma statunitense di VoIP, messaggistica istantanea e distribuzione digitale
Come è stato creato:Html
CSS

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:Html
CSS
Javascript

Landrick
Un sito completo creato con Vue3
Come è stato creato:Html
CSS
Sass
Bootstrap
Vue3