WEEK 01
Datum: 14‐02-24 tot 16‐02-24
📅 14-02-2024
WOGO is een DaaS voor cocktailbars en (sterke drank) merken in de vorm van een cocktailplatform. Het is de ultieme gids voor een avondje uit. Dagelijks samengesteld om je de coolste bars, beste merken en fijnste cocktails aan te bieden. WOGO staat voor alles wat met cocktails te maken heeft. Het is een kenniscentrum waar je informatie kunt vinden over onder andere cocktails, (sterke drank) merken en bereidingsmethoden, maar nog belangrijker, het vertelt je waar je naartoe moet voor een geweldige avond uit, wat je daar moet drinken en zorgt ervoor dat je minder betaalt dan wanneer je zonder WOGO naar de bar zou gaan. WOGO laat de klanten zitplaatsen reserveren in de bars via het reserveringssysteem op website, waardoor ze goede deals krijgen op hun drankjes omdat elke bar zijn speciale WOGO-aanbieding heeft. Naast de reservering bieden we ook evenementen aan die hen naar verschillende geweldige bars brengen voor een gereduceerde pakketprijs.
"De ultieme gids voor een avondje uit." Dagelijks samengesteld om je de coolste bars, beste merken en fijnste cocktails aan te bieden."
WOGO brengt gasten naar de bars en klanten naar de merken en levert waardevolle ervaringen aan mensen. De diensten omvatten reserveringen voor klanten en bars, op maat gemaakte campagnes (evenementen) voor merken en bedrijfsuitjes voor bedrijven. WOGO creërt een eenvoudige gids naar de beste bars voor klanten en bieden een eenvoudige manier om indrukken en aandacht te genereren voor bars en merken. Voor zowel de bars als de merken verminderen onze zakelijke oplossingen tijd en kosten door een meerwegsplatform te bieden voor blootstelling en ontdekking dat nieuwe manieren opent om een momenteel onbenut publiek te bereiken.
- WOGO wil een oplossing implementeren om plaatsconflicten tussen het reserveringssysteem van de website en de agenda van de cocktailbars te voorkomen. Om het probleem te voorkomen kan er een systeem worden geimplmenteerd dat real-time updates mogelijk maakt.
- WOGO wil een oplossing voor het responsiviteitsprobleem met Wix. Om dit probleem te voorkomen kan een custom-code een oplossing bieden.
- WOGO wil een oplossing voor het handmatig menselijke inbreng in een chatbox. Om dit probleem te voorkomen kan er een AI-gestuurd chatbox systeem worden geïmplementeerd?
- WOGO wil een oplossing voor het reserveringssysteem voor losse tickets bij een specifieke bar, gericht op individuele aankopen van prepaid drankjes.
- WOGO wil een oplossing voor het ongemak dat gebruikers momenteel ervaren doordat ze beperkt zijn in hun mogelijkheid om zelf boekingen te wijzigen.
- WOGO wil een giftcard-systeem om potentiële klanten aan te moedigen aankopen te doen.
- WOGO wil een oplossing implementeren voor het eenvoudig plaatsen van reviews, met als doel waardevolle feedback van klanten te ontvangen.
- WOGO wil een oplossing voor een login-systeem waar klanten kunnen inloggen om hun punten te bekijken, waardoor ze beloond worden voor hun loyaliteit.
- WOGO wil een volledig nieuwe dynamische, app-like gebruikersinterface (UI), gericht op het verbeteren van de gebruikerservaring in vergelijking met de oude website
De opdracht die door WOGO werd gegeven, was gebaseerd op haar eigen ervaring en analyse van de huidige no-code website gebouwd met Wix, en voldoet niet langer aan de eisen van WOGO. Het is te moeilijk om nieuwe functies toe te voegen en bestaande functies te verbeteren omdat de website niet voldoet aan webstandaarden. De beslissing komt voort uit de groei van het platform. Gebruikers die een cocktail ticket willen kopen worden geremd tijdens het boeken door de lange laadtijd van de website en responsieve problemen ervaren. Daarnaast vragen gebruikers om mogelijk 1 bar met 1 cocktail te boeken. Bar-eigenaren ervaren problemen met reserveringssysteem dat niet synchroon loopt met hun reserveringssysteem. De Opdrachtgever ervaart automatiseringsproblemen, zoals handmatig beantwoorden van geen complexe vragen in de chatbox, handmatig aanpassen van boeking wijzigen. De oorspronkelijk UI was gemaakt zonder enige onderzoek, en komen niet overheen met de behoefte van de gebruikers.Dit resulteert op zijn beurt in het product dat niet gebruiksvriendelijk is.
De doelstellingen voor de opdrachtgever zijn het herontwerpen en optimaliseren van de website om te voldoen aan de groeiende behoeften van het platform. Dit omvat het verbeteren van de laadtijd en responsiviteit, het toevoegen van nieuwe functies zoals de mogelijkheid om één bar met één cocktail te boeken, en het synchroniseren van het reserveringssysteem met dat van bar-eigenaren. Daarnaast is het doel om automatiseringsproblemen aan te pakken, zoals het efficiënt beantwoorden van vragen in de chatbox en het stroomlijnen van het boekingsproces. Het uiteindelijke streven is een vernieuwde gebruiksvriendelijke gebruikerservaring met een dynamische en app-achtige gebruikersinterface (UI). die optimaal aansluit bij de behoeften van zowel gebruikers als bar-eigenaren.
- Een volledig responsive webapplicatie die voldoet aan webstandaarden.
- Een dynamische app-like gebruiksvriendelijke interface.
- Een content management system(CMS)
- Gedetailleerde readme van het project, inclusief technische specificaties en instructies voor het beheer en onderhoud van de webapplicatie.
- Hosting: Selectie van een geschikte hostingomgeving
- Kostenoverzicht: Licentiekosten CMS, beveilingskosten en hostingkosten.
De planning met voor alle belangrijke milestones.
- Week 1-2 Projectvoorbereiding.
- Week 3-4 Ontwerp van de gebruikersinterface.
- WEEK 5-6 Project opzetten, basis functionaliteiten, Contentful(CMS inrichten).
- Aanleveren van alle benodigde content.
- Huisstijl Gids
Mijzelf als frontend developer en eventueel nog iemand die kan bijspringen?
Ontwikkelingsframeworks en -libraries
- SvelteKit
Programmeer- en Opmaaktalen
- HTML
- CSS
- TypeScript
Ontwerptools
- Figma
Deployment en Hosting Services
- Vercel
Betalingsprocessors
- Stripe
Content Management System (CMS)
- Contentful
- Responsive website
- Gebruiksvriendelijke interface
- Snelle laadtijd
- Goede vindbaarheid in zoekmachines
- Volledig functioneel op alle browsers
- Vertragingen bij de levering van content
- Onvoorziene technische problemen
- Wijzigingen in de eisen van de klant
- De klant is verantwoordelijk voor het aanleveren van alle benodigde content.
- De website wordt opgeleverd in een test-omgeving. Na goedkeuring van de klant wordt de website live gezet.
- De klant heeft recht op twee rondes feedback na oplevering.
- Na oplevering is ben ik als student niet verantwoordelijk voor de website. Het project kan eventueel worden ondergebracht bij FDND-agency, waar andere studenten verder gaan werken.
- Als tweedejaars frontend student kan volledige productproof garantie niet worden gegarandeerd. Toewijding aan de ontwikkeling van Interface, het boekingssysteem en de betalingsgateway wordt geboden.
Communicatiekanaal:
- Whats-app groep telefoon, videobellen. Updates project:
- Wekelijkse stand-up op maandag.
Feedbackproces:
- Om de twee weken een feedback-sessie.
Link naar 2e fase onderzoek Tech-stack
Voor het onderzoek van de een mogelijke tech-stack heb onderstaande mogelijk keuze gevonden op https://jamstack.org/. Bij het onderzoek heb ik de belanghebbende(stakeholders) goed in acht genomen. Bij het werken met de tech-stack komen immers meerdere partijen samen. De gebruiker die uiteindelijk met het systeem moet gaan werken én (medewerkers van) de opdrachtgever die het systeem gaat beheren. Daarom heb ik ervoor gekozen bij het onderzoeken van een mogelijke tech-stack verschillende invalshoeken te gebruiken.
- User eXperience (UX)
- Developer eXperience (DX)
- Content management eXperience (CX)
📅 16-02-2024
| Categorie: | Next.js | SvelteKit | Nuxt |
|---|---|---|---|
| Bundelgrootte | Groter | Kleiner | Middelgroot |
| Ecosysteem | Groter | Kleiner | Middelgroot |
| Templating | JSX | Svelte-templates | Vue.js templates |
| Conditionele logica | if/else statements in JSX | Directe if/else statements in HTML | if/else statements in Vue.js templates |
| Loops | map functie op een array | each-blokken | v-for directives in Vue.js templates |
| Statebeheer | Redux of context | Stores | Vuex or context |
| Asynchrone data | useEffect met een afhankelijkheidsarray | Direct uitpakken van promises in de template | asyncData in Vue.js components |
| Server-side ( goed: SEO) rendering | Ja | (optioneel) | Ja |
| Static site generation | Ja | Ja | Ja |
| Routing | Geavanceerde opties | Beperkte opties | Flexibele opties |
| Prestaties | Goed | Uitstekend | Goed |
| Leercurve | Steiler | Lager | Gemiddeld |
| TypeScript ondersteuning | Ja | Nieuw | Ja |
| Ecosysteem van modules | Groot | Klein | Middelgroot |
| Toepassingen | Complexe applicaties, websites met veel features | Eenvoudige websites, websites met focus op prestaties | Full-stack applicaties, websites met een duidelijke structuur |
| Updates | Grote en actieve community, frequente updates en releases. | Groeiende community, regelmatige updates, focus op stabiliteit. | ature community, stabiele releases, voortdurende ontwikkeling van nieuwe features. |
| Aantal beschikbare Library | Duizenden bibliotheken en componenten die alle mogelijke functionaliteit toevoegen. | Honderden | Geoptimaliseerde bibliotheken speciaal voor SvelteKit, wat resulteert in kleinere bundelgrootten en betere prestaties. |
| Populair library | • Populaire bibliotheken zijn onder andere React Router, Redux, React Query, Prisma, Tailwind CSS. | • Geoptimaliseerde bibliotheken speciaal voor SvelteKit, wat resulteert in kleinere bundelgrootten en betere prestaties. | |
| Payment methodes | Werkt met mollie, stripe en shopify | Werkt met mollie, stripe en shopify | Werkt met mollie, stripe en shopify |
| Webstandaarden | SvelteKit maakt gebruik van native webcomponenten en CSS-in-JS. | React en Server-Side Rendering (SSR) | HTML, CSS en JavaScript. De code is eenvoudig te leren en te gebruiken, maar kan minder performant zijn dan SvelteKit. |
Voor het onderzoek heb ik een bericht geplaatst op Reddit waar ik advies vraag voor het kiezen van een tech-stack. Er is ook een opmerking over het gebruik van WordPress of Squarespace, vooral voor marketingwebsites, vanwege de gebruiksvriendelijkheid en beschikbare plugins.
Sveltekit:
- Kies voor Svelte als je enthousiast bent
- Ondanks minder UI-bibliotheken.(De genen die er zijn, zijn geweldig)
- Het belangrijkste is iets te bouwen in plaats van technologie.
- Voor groei, blijf bij wat je kent, dus kies SvelteKit om webconcepten volledig te leren en vermijd beginnersstatus in meerdere frameworks.
- Wat doet Svelte specifiek met Stripe en Shopify dat je niet met HTML en JS zou kunnen doen?
Nuxt
- Voor SEO is nuxt goed en dit is belangrijk voor het project.
Translation Paraglide JS: https://inlang.com/m/gerre34r/library-inlang-paraglidejs
CMS
- Directus CMS for authentication
- Pocketbase
Payment Stripe
UI library
- Shadcn-svelte
- Skeleton
Calender
- Calendly
- Superform
Suggesties voor andere frameworks
- Astro
Wat heb ik geleerd?
Het "beperkte ecosysteem" of "minder bibliotheken" is eigenlijk geen probleem vanwege hoe Svelte werkt. Het heeft geen bibliotheek nodig voor veel dingen, zoals bij Vue of React. En je kunt gemakkelijker elke JavaScript-bibliotheek koppelen met de use-richtlijn.
Voor een vergelijking die misschien wat gedateerd is: een React/Vue/etc-specifieke bibliotheek lijkt op een jQuery-plug-in. Je moet de conventies volgen voor React/Vue/jQuery om JavaScript ermee te laten werken. Met Svelte daarentegen kun je de reguliere JavaScript-bibliotheek gebruiken.
- https://medium.com/swlh/what-is-dx-developer-experience-401a0e44a9d9
- https://www.softermii.com/blog/10-tips-in-choosing-the-best-tech-stack-for-your-web-application
- https://symfony.com/ten-criteria
- https://www.velvetech.com/blog/choosing-project-tech-stack-basic-principles/
- https://tray.io/blog/align-revenue-ops-tech-stack
- https://www.zachleat.com/web/site-generator-review/