Meesterproef WEEK 01

🕛 15-04-2024 t/m 19-04-2024

Analysefase

Code Conventie Afspraken

📅 15-04-2024

1. Project Structuur

1.1. Bestandsindeling Volg de principes van atomic design om componenten te structureren:

• Atoms: Kleinste herbruikbare componenten (bijv. Button, Icon).
• Molecules: Combinaties van atoms die samen een functie vervullen (bijv. SearchBar).
• Organisms: Combinaties van molecules die samen een sectie van een interface vormen (bijv. Header).
• Templates: Herbruikbare pagina layouts (bijv. MainLayout).
• Pages: Unieke pagina's die templates en organisms samenbrengen (bijv. Home).

src/
├── components/
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
│   ├── templates/
│   ├── pages/
├── graphql/
│   ├── queries/
│   ├── mutations/
├── lib/
├── routes/
├── styles/

2. Naamgevingsconventies

2.1. Algemeen

• Gebruik Engelse benamingen voor alle code elementen.
• Bestandsnamen voor CSS: Kebab-case (bijv. navigation-list).
• Bestandsnamen voor Svelte componenten: PascalCase (bijv. UserProfile.svelte).
• JavaScript/TypeScript variabelen en functies: camelCase (bijv. getUserData).

3. TypeScript Conventies

3.1. Typing Gebruik altijd expliciete types voor variabelen, parameters en return types. Definieer interfaces voor objecten en complexe datastructuren.

interface User {
  id: string;
  name: string;
  age: number;
}

3.2. Gebruik van any Vermijd het gebruik van het any type. Gebruik unknown als het type niet van tevoren bekend is en voer type checks uit.

4. CSS Conventies:

• Gebruik voor CSS-code altijd een apart bestand en zet dus geen CSS in je HTML-code.
• Gebruik in je CSS-code geen !important.
• CSS-code wordt in lower case geschreven.
• Maak in je CSS-code zo weinig mogelijk gebruik van id selectors (#).
• Voorzie je CSS-code zoveel mogelijk van zinvol commentaar.
• Gebruik zinvolle naamgeving waaruit blijkt wat de CSS-code doet of waar het voor gebruikt wordt.
• Webpagina’s zijn responsive voor telefoon, tablet en desktop

4.1. CSS Order:

• 🔗 CSS-rule-order

Team Canvas

📅 15-04-2024

Team Afspraken

• Documentatie bijhouden in de Readme en Wiki.
• Voortdurende communicatie via Teams.
• Elk teamlid zorgt ervoor dat je de dagelijkse voortgang volgt, en indien nodig je planning bijwerkt in het projectboard.
• Branch-namingconventie: Feature/Naam van het teamlid/Issue nummer/Naam van de feature. (bijv. feature/Michelle/43/navigation)

1. • Prefix "feature/": Geeft aan dat de branch gericht is op nieuwe functionaliteiten.
2. • Naam van het teamlid: Specificeert de persoon die verantwoordelijk is voor deze branch.
3. • Issue nummer: Verbindt de branch met een specifiek issue of ticket in het trackingsysteem.
4. • Naam van de feature: Geeft een beknopte beschrijving van de functionaliteit die wordt ontwikkeld.

• Codebeoordeling: Elke teamlid bekijkt je PR en keurt en goed voordat de code wordt samengevoegd.Voorbeeld PR-schrijven
• Issue-koppeling: Koppel PR's aan gerelateerde GitHub-issues om de traceerbaarheid en communicatie te verbeteren
• Merge-strategie: Merge pull request.
• Elke maandag een Stand-up
• Elke twee weken een Sprint review
• Elke 3 weken een Kampvuur-sessie.

Planning

📅 15-04-2024

Doelstellingen en Scope Definiëren

1. Opdrachtomschrijving:

• 1. WOGO wil een oplossing implementeren om plaatsconflicten tussen het reserveringssysteem van de website en de agenda van de cocktailbars te voorkomen.
• 2. WOGO wil een oplossing voor het responsive problemen
• 3. WOGO wil een oplossing voor het handmatig menselijke inbreng in een chatbox.
• 4. WOGO wil een oplossing voor het reserveringssysteem voor losse tickets bij een specifieke bar, gericht op individuele aankopen van prepaid drankjes.
• 5. WOGO wil een oplossing voor het ongemak dat gebruikers momenteel ervaren doordat ze beperkt zijn in hun mogelijkheid om zelf boekingen te wijzigen.
• 6. WOGO wil een giftcard-systeem
• 7. WOGO wil een oplossing implementeren voor het eenvoudig plaatsen van reviews, 
• 8. WOGO wil een oplossing voor een login-systeem
• 9. WOGO wil een volledig nieuwe dynamische, app-like gebruikersinterface (UI):

• 9.1. Homepagina

• 9.2. About pagina

• 9.3. Ticketpagina's

• 9.4. Work-with-us pagina met subpagina's voor "Are you a bar" en "Are you a brand"

• 9.5. Work-with-us pagina met subpagina's voor "Are you a bar" en "Are you a brand"

• 9.6. Groepsuitjes pagina

• 9.7. Blog Pagina

2. Doelstellingen van het project.

Het herontwerpen en optimaliseren van de WOGO website om te voldoen aan de groeiende behoeften van het platform, met als kernpunten het verbeteren van de laadtijden en responsiviteit, en het integreren van nieuwe functies. Deze functies omvatten het boeken van individuele bars met specifieke cocktails, een realtime synchronisatie met de reserveringssystemen van bar-eigenaren, en een verbeterde chatbox met AI-ondersteuning voor efficiënte klantinteracties.

De website wordt voorzien met diverse pagina's, waaronder een Homepage, Ticketpagina's, en een Work-with-us pagina met subpagina's voor "Are you a bar" en "Are you a brand". Daarnaast komt er een How-it-works pagina, een pagina voor Groepsuitjes met een contactformulier, en secties voor About, Blog, Giftcard, een Reserveringssysteem en een Betalingssysteem.

3. Bepaal de scope: wat wordt wel en niet meegenomen in het project?

Tijdsinschatting en Mijlpalen Vaststellen

1. Maak een grove schatting van de tijd die nodig is voor elke fase van het project.
2. Stel belangrijke data vast waarop mijlpalen bereikt moeten zijn.

Taken Opsplitsen en Toewijzen

1. Brainstorm met het team over alle taken die volbracht moeten worden.
2. Wijs elke taak toe aan een teamlid met de juiste expertise.