Design quotes is een applicatie voor studenten die opzoek zijn naar inspirerende design citaten om in hun werk te gebruiken. De applicatie heeft een lijst met citaten van verschillende beroemde developers en ontwerpers. Elke citaat bestaat uit de auteur van de citaat, een biografie van de auteur, een foto van de auteur zelf. De tweede pagina van de applicatie is een about pagina met een korte beschrijving van de applicatie. Tenslotte is de single page applicatie gemaakt met vanilla HTML, CSS en Javascript.
- Design quotes app
- Belangrijke webpaginas
- Applicatie installeren
- De opdracht
- Idee
- Design
- Features
- API
- Activity flow
- Bronnen
git clone https://github.com/K3A101/stress-relief-quotes.git
npm install
Als je verder op het project wil werken, moet je alles in het spa/ bestand doen. In de spa bestandmap, vind je de alle belangrjke bestanden voor de design quotes app.
De opdracht voor dit project is een single page appicatie maken, op basis van een user story.
Als student digital design, wil ik inspirerende web design quotes kunnen bekijken, zodat ik weer een beetje energie krijg wanneer ik het even niet meer zie zitten met al die hard-core deadlines die op me afkomen.
Mijn idee is een quote app voor studenten die opzoek zijn naar inspiratie voor hun projecten. De app heet Design quotes. In design quotes kun je aanmelden en een lijst krijgen met inspirerende quotes van experts in het gebied van design en de web. De quotes worden constant up to date dus elke dag komen er meer quotes erbij. Elk citaat bevat een tag die je kan filtreren op basis van design onderwerpen.
Hieronder staat het design van Design quotes app. Hier bij had ik ook nagedacht aan de UI stack die daarbij horen zoals de zero state, loading state en de error state.
Verder heb ik ook een design bedacht voor grotere schermen. Hier verandert alleen de layout. De content is verdeeld in drie kolommen.
- Loading state voordat de data geladen wordt.
- Empty state wanneer de data geladen wordt.
- Error state wanneer de data niet geladen wordt.
- Filtreren op basis van een searchbar
- Filtreren op basis van de tags.
- Er komt een pop up met instructie wanneer de gebruiker voor het eerst op de applicatie komt.
- Een blank state, wanneer er geen resultaat wordt gevonden.
Voor mijn project heb ik zelf een api gemaakt met behulp van google sheet en de APi van Ben Borgers. Om de spreadsheets een json bestand te maken heb ik een aantal stappen doorgenomen.
- Data invullen in google sheets.
- De header is vetgedrukt en die is de objectnaam. Ik heb ook de eerste row gevriesd want anders krijg foutmelding
- Verder heb ik mijn spreadsheats gepubliceerd op de web.
- De sharing link heb ik iedereen als viewer gegeven. Ik ben de enige met toegang naar het spreadsheet.
- Ik heb de api link van Ben Borgers gebruikt.
https://opensheet.elk.sh/spreadsheet_id/tab_name
- Ik heb mij spreadsheet code/id and sheet naam aan de link toegevoegd:
https://opensheet.elk.sh/14joQ9h8M0ydoJJ-fNYN68ls3TWPCvk8ZvBJvUXpF1cQ/sheet1
-
De code kun je vinden bij de url van de spreadsheet bestand.
Als je deze stappen uitvoert heb je een json bestand met een APi url die je kan fetchen. Een voordeel is dat je data in de spreadsheet kan toevoegen en wordt de json bestand automatisch aangepast.
De activity flow is een visualisatie van wat gebeurd in de achtergond . In mijn activity flow heb ik uitegwerkt hoe de loading state totdat de data geladen is.
Onderdelen in de activity flow zijn:
- Wireflow van de states
- Een swimlane van de url hash
- Control flow
Deze project gebruikt de MIT Licentie.
- B. (z.d.). GitHub - benborgers/opensheet: 💾 An API to get a Google Sheet as JSON, no authentication required. GitHub. https://github.com/benborgers/opensheet#readme
- How to get a Google Sheet as JSON. (z.d.). https://benborgers.com/posts/google-sheets-json
- Uxcel - Where design careers are built. (z.d.). Uxcel. https://app.uxcel.com/courses/designing-wireframes/what-are-wireflows-804
- A. (2019, 28 augustus). A Router Without a Web Server in Vanilla JavaScript. DEV Community. https://dev.to/aminnairi/a-router-without-a-web-server-in-vanilla-javascript-3bmg
- V. (2020, 2 december). Displaying loading animation on Fetch API calls. DEV Community. https://dev.to/vaishnavs/displaying-loading-animation-on-fetch-api-calls-1e5m
- Error handling while using native fetch API in JavaScript. (z.d.). Learn with Param. https://learnwithparam.com/blog/how-to-handle-fetch-errors/
- multiple content “pages” in single html file. (z.d.). Stack Overflow. https://stackoverflow.com/questions/39978986/multiple-content-pages-in-single-html-file