Debrief

FDND Task-Aggregator

Wat is de opdracht

De HvA krijgt vanaf volgend schooljaar een nieuwe opleiding genaamd: Front-end Design and Development (FDND). Deze opleiding wilt met een op taken gebaseerd systeem werken. Dit houdt in dat studenten taken uitkiezen en bij het vervullen van deze taken studiepunten krijgen. Om duidelijkheid te vormen rondom welke taken er zijn, wilt de opleiding FDND een overzichtspagina hebben waar deze taken in staan. Het is aan ons om deze pagina te maken.

De docenten van FDND hebben kortgeleden een nieuw JavaScript-framework ontdekt genaamd: Svelte. Ze zijn hier erg enthousiast over en willen graag dat de overzichtspagina met dit framework gebouwd wordt.

Stakeholders

• FDND
• Toekomstige FDND-studenten
• HvA
• Docenten FDND

Doelgroep

De voornaamste doelgroep bestaat uit de toekomstige FDND-studenten. De app is bedoeld om de studenten een goed overzicht te geven van de taken die er zijn.

Deadline

Eind januari

Leerdoelen

Tijdens dit project hebben wij een aantal leerdoelen.

• We willen een Git Project leren managen. Dit houdt in dat we het project managen op Github Projects. Alle to-do’s komen hier terecht en wij werken ze door het proces heen.
• We willen Svelte leren gebruiken in een echt project. Dit houdt in dat we tutorials volgen voor basiskennis.
• We willen echte Github data leren ophalen en gebruiken van de Github API, door middel van GraphQL.
• Dit alles komt samen in het project waarin we een overzicht pagina maken voor FDND.

Features:

Het project bevat een aantal features. Om een duidelijk overzicht te schetsen van de features, gebruiken wij de MoSCoW methode:

MoSCoW (Must have; Should have; Could have; Want to have)

Hieronder een tabel met de features:

Must have	Should have	Could have	Want to have
Taken overzicht	Zero-state	Sapper	Niveau quiz?
Zoekfunctie*	Loading-state		Account - taken gedaan/niveau
Filterfunctie*	No-results-state
Sorteerfunctie*

*De features met een nummer zijn verder opgedeeld hieronder

1. Zoekfunctie:

• Taaknaam

• Omschrijving

• Semester en sprint namen

• Tags

2. Filteren taken:

• Op individuele semesters met bijbehorende sprints

• Op specifieke sprints

• 5 moeilijkheidsgraden

• Opdrachtgevers

3. Sorteren op:

• Alfabetisch (en omgekeerd)

• Sprint volgorde (en omgekeerd), taken alfabetisch gesorteerd binnen sprint

• Semester volgorde (en omgekeerd), sprints numeriek gesorteerd binnen een semester, taken alfabetisch gesorteerd binnen sprint.

• Moeilijkheidsgraad (moeilijk -> makkelijk & makkelijk -> moeilijk)

Svelte

Wat is Svelte?

Svelte is een radicale nieuwe manier voor het bouwen van gebruikers interfaces. Waar Vue en React hun werk in de browser doen, doet Svelte dat in een compile stap dat gebeurt wanneer je je app bouwt.

In plaats van het gebruik van technieken als virtual DOM diffing, schrijft Svelte code dat de dom update wanneer de state van de app verandert.

bron: https://svelte.dev/

Waarom Svelte

Svelte compileert code van template/server-side code naar vanilla JavaScript, Html en Css. Hierdoor wordt de code van je website ‘clean’ en ‘lean’ waardoor het ook sneller werkt.