modous/connecting-people-ui-stack

Ontwerp en bouw verschillende states van de UI-Stack

Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md

User story

Je kan een studieplek reserveren bij de OBA.

👨🏼‍💼 Opdracht

Er is een Wireflow en Breakdown-schets getekend waarin de verschillende states van de UI-Stack zijn uitgewerkt.

Wireflow & Breakdown

Partial/Empty state: Het scherm dat mensen zien als het niet meer leeg is, maar ook nog niet gevuld omdat je nog iets moet doen.

Loading state: Het scherm dat je toont als er nog data geladen moet worden.

Error state: Het scherm dat getoont wordt wanneer er een probleem is en je niet verder kan.

Ideal state: Het scherm waar je laat zien dat alles is gelukt of een scherm waar alles compleet is en correct ingevuld is.

Je ziet hier de 5 states naast elkaar waarvan de empty en partial state in 1 voorbeeld worden getoond. Hierin vult de gebruiker zijn gegevens in om een studieplek te kunnen reserveren bij de OBA vestiging.

In de Loading state laten we zien dat de button een laad gif krijgt wanneer hier op gedrukt wordt en je een Error state krijgt wanneer 1 van de velden niet of niet correct zijn ingevult met de juiste feedback.

De Ideal state is dat alles wel correct is ingevult en je de juiste gegevens terug krijgt zodat je kan zien wie op welke datum gereserveerd heeft en hoeveel plekken je gereserveerd hebt.

Licentie

This work is licensed under GNU GPLv3.