Een website om een smartzone te zoeken en boeken.
Deze pagina is gemaakt voor de volgende userstory's:
- "Als vervoerder wil ik een overzicht van smartzones in een stad kunnen bekijken, zodat ik kan zien waar ik kan parkeren om mijn goederen te laden/lossen"
- "Als vervoerder wil ik onderweg vanuit mijn voertuig meer informatie over een smartzone kunnen bekijken, zodat ik kan zien of de zone geschikt is om mijn goederen te laden en/of lossen"
- "Als vervoerder wil een smart zone kunnen reserveren, zodat ik mijn plek kan bevestigen"
De eerste pagina is een overzichtspagina met de verschillende smartzones, die ook hun eigen detailslide hebben. Verder is een kaart te zien met de locaties van de zones. De tweede pagina is een pagina waar een reserveerformulier staat waar je de gewenste smartzone kunt boeken en je gegevens invult.
De website vind je hier.
Deze website bestaat uit meerdere delen. Aan de linkerkant staat een overzicht van alle smartzones. Aan de rechterkant staat de kaart of het formulier om te kunnen reserveren.
Elke smartzone heeft een eigen tegel en ziet er als volgt uit:
Er is meer informatie beschikbaar per smartzone als je op het i-icoontje klikt:
Het logo en de navigatiebar blijven in beeld staan als je scrollt:
De navigatiebar bevat de volgende pagina's:
De kaart heeft markers die gelinkt zijn aan de zones en ziet er als volgt uit:
Het formulier om te reserveren bevat de volgende velden:
Er zijn drie manieren om met het formulier te beginnen:
- Op de 'Book' knop uit de navigatie klikken. Het formulier begint dan helemaal leeg.
- Op de 'Book now' knop van een smartzone klikken. In het formulier worden al de smartzone en de start datum ingevuld.
- Op de 'Book later' knop van een smartzone klikken. In het formulier wordt al de smartzone ingevuld.
Voor dit project heb we met node.js, express en ejs gewerkt. Daarnaast heb ik ook gebruik gemaakt van de JavaScript library Leaflet en maptiler.
HTML is ondergebracht in partials die door middel van EJS aan een grotere pagina vastzit.
Met behulp van CSS zijn er SVGs geanimeerd met keyframes.
In JavaScript hebben een invalid statement voor het formulier gemaakt. Hierdoor kijkt het formulier pas als je op de submit knop hebt gedruk of alles is ingevuld.
Met NODE hebben we de pagina's een route gegeven waardoor ze de informatie uit de API krijgen en informatie naar de API kunnen sturen.
Door EJS kunnen we JavaScript in de HTML gebruiken. Hierdoor kunnnen we in het formulier kijken naar welke datum vandaag is en ervoor zorgen dat dat de minimum datum vandaag is.
Voor de kaart hebben we Leaflet gebruikt. Hiermee kunnen we kunnen we makkelijk een kaart maken met markers die klikbaar zijn.
Om (verder) te kunnen werken aan dit project, moet je de volgende stappen volgen:
- Instaleer node versie 18.15.0
- Clone deze repository
- Open de terminal (CTRL + `)
- Type 'npm install'
- Je ziet nu de node_modules map
- Maak een .env bestand
- Type in terminal 'npm start'
- Klik link localhost
Let op, er is gebruik gemaakt van een .env bestand.
- Leaflet
- Maptiler
- Front-End Performance Checklist
- Informatie uit de colleges van FDND
This project is licensed under the terms of the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent