Voor de herkansing van het vak front-end applications moest ik opnieuw een React app bouwen. Dit keer was er wel fysiek les en dat hielp ontzettend wanneer ik vast liep omdat er een speciale vak docent was die mij en andere studenten kon helpen.
Omdat andere studenten hiervoor al een D3 visualisatie hadden gemaakt moest ik voor dit vak iets nieuws verzinnen. Maar omdat ik voor de Minor Web Design & Development al de Star Wars API gebruikt had besloot ik dat concept te vertalen in een React App. De styling kon ik hergebruiken maar ik heb het wel omgezet naar SASS.
Op de home page kun je kiezen voor character filter of visualisatie. Via de navigatie boven in kan ook van pagina veranderd worden.
Om verschillende pagina’s en routes mogelijk te maken in React heb ik react-router-dom gebruikt. Dit kleine framework simuleert het maken van schillende routes in je React App zonder zelf lastige routing te hoeven schrijven.
Op de character filter pagina zijn alle karakters uit de Star Wars API te zien. Je kun de karakters filteren op film door één van de zes te kiezen in de drop down menu. De titel van de film komt dan ook boven aan te staan.
Dan kun je op een karakter klikken om meer gedetailleerde informatie te zien die ook afkomstig is uit de API. Bijvoorbeeld in welke films het karakter voorkomt of wat de lengte is.
Op de visualisatie pagina heb ik met D3 een force layout visualisatie gemaakt op basis van data over de oogkleuren. Met wat code kon ik een nieuw array maken met alle oogkleuren van alle karakters bij elkaar opgeteld. De grootte van een cirkel laat zien hoe vaak een oogkleur voor komt. En met de legenda en de hover tool tip is af te lezen welk aantal het gaat.
Naar React App