De afgelopen 4 weken hebben we een client side Single Page web App (SPA) gemaakt. Op basis van de data uit de API dat gelinked is met mijn user story, heb ik een prototype gebouwd.
Officiele user story is "As a student Digital Design, I want to look at inspiring web design quotes, to get some fresh energy when I'm down while working on crazy deadlines"
Maar de afgelopen weken heb ik mijn eigen user story uitgewerkt. "As a student front-end developer i want to look at affirmative web design quotes, so that imposter syndrome doesn't hit me hard" Ik wou deze user story uitwerken, omdat ik zelf imposter syndrome heb meegemaakt. Met mijn applicatie hoop ik dat ik studenten kan helpen die imposter syndrome hebben. Om dit uit te werken moet ik wel een bijpassend api hebben.
Ik was lang opzoek naar een api die past bij mijn user story, maar kon die jammer genoeg niet vinden. Ik heb uiteindelijk gekozen om mijn eigen api te maken door middel van een spreadsheet vanuit google spreadsheet. Ik heb de volgende tutorial gevolgd https://benborgers.com/posts/google-sheets-json. Ben Borgers heeft een uitgebreide en makkelijk te volgen tutorial gemaakt. Ik vertel nog heel even hoe ik mijn api gemaakt:
- spreadsheet gemaakt met quotes
-
Daarna heb ik de link van Ben Borgers gebruikt
https://opensheet.elk.sh/spreadsheet_id/tab_name -
Mijn eigen spreadsheet gelinked
https://opensheet.elk.sh/1W7nmmrM1C2uX6_nRSsXP5x3A7R1A9b5P6Q-fJhtwLQ8/blad1 -
Json file (automatisch gemaakt)
Aan de hand van de User story en API heb ik de volgende schetsen gemaakt.
Ik heb uiteindelijk voor de laatste schets gekozen om uit te werken. Ik vond dit design het leukste, het lijkt alsof de quotes constant worden geschreven op het notitieblok.
-
Clone dit repository via de terminal git clone https://github.com/laibaaac/waffs.git
-
Packages installeren npm install
De volgende features heeft mijn applicatie
- Loading state tijdens wanneer mijn data wordt geladen.
- Empty state wanneer er niks wordt gedaan op mijn website
- Error state wanneer ik geen data binnen krijg (demo)
- Filteren (ik had het geprobeerd bij about me te filteren op quotes en auteurs, maar het lukte mij niet zo goed)
Ik heb de router routie gebruikt, ik volgde de voorbeeld van joost. Ik heb de volgende gedaan:
- vendor map aangemaakt en de routie daarin gezet
- daarna heb ik mijn router gemaakt
`import './vendor/routie.min.js' import { toggleNav } from './change.js';
export function handleRoutes() { console.log('hoiiii'); routie( { 'home': () => { toggleNav('home') }, 'about': () => { toggleNav('about'); } }) }`