Vastgoedwebsite

Ik heb een webapplicatie voor woningaanbiedingen gebouwd als onderdeel van een assessment voor DTT. De applicatie stelt gebruikers in staat om woningaanbiedingen te bekijken, te maken, te bewerken en te verwijderen. Het is ontwikkeld met Vue3, HTML, CSS en JavaScript, volgens de hoogwaardige standaarden en detailgerichte aanpak van DTT. Dit project toont mijn vermogen om bij te dragen aan DTT en zijn klanten, zoals Greenpeace, Randstad, ING, Philips, Rabobank, FOX Sports en KPMG.

🔌 API Informatie

Gegevens werden opgehaald van een externe bron met behulp van een bestaande API, die een api-key vereiste voor operaties.

🎨 Ontwerp

Het ontwerp van de webapp werd vooraf aangeleverd via links naar desktop- en mobiele workflows.

📖 User Stories

DTT gebruikt user stories als basis voor al hun (technische/ontwerp) documentatie.

User story 1: Als gebruiker wil ik een vaste navigatieheader kunnen zien, zodat ik gemakkelijk door de app kan navigeren.

  • 🧭 Ik wil naar de huizenpagina kunnen navigeren.
  • 📍 Ik wil kunnen zien welke pagina momenteel actief is.

User story 2: Als gebruiker wil ik een overzicht van alle beschikbare huizen kunnen zien als de homepage van de webapp, zodat ik kan zien wat de app te bieden heeft.

  • 🏠 Ik wil het adres, de postcode en de stad van de aanbieding kunnen zien.
  • 🖼️ Ik wil de afbeelding, de grootte en het aantal slaapkamers en badkamers van de aanbieding kunnen zien.

User story 3: Als gebruiker wil ik door de beschikbare huizen kunnen zoeken op minstens een van de eigenschappen van de huisaanbieding, zodat ik specifieke huizen kan vinden op basis van zoekcriteria.

  • 🔍 Ik wil mijn zoekinvoer kunnen wissen nadat ik ben begonnen met typen.
  • 📊 Ik wil een resultaatindicatie kunnen zien, die mij informeert over het aantal gevonden resultaten of als mijn zoekinvoer geen resultaten opleverde.

User story 4: Als gebruiker wil ik de beschikbare huizen op de homepage kunnen sorteren op minstens een optie (prijs of grootte), zodat ik kan sorteren op basis van mijn voorkeur.

  • 📈 Ik wil kunnen sorteren op prijs.
  • 📏 Ik wil kunnen sorteren op grootte.

User story 5: Als gebruiker wil ik de details van een huis kunnen openen, zodat ik meer diepgaande informatie kan lezen over mijn geselecteerde huis.

  • 🏡 Ik wil het adres, de postcode en de stad van de aanbieding kunnen zien.
  • 📋 Ik wil de beschrijving, afbeelding, het aantal slaapkamers en badkamers, de grootte, de bouwdatum en of de aanbieding een garage heeft of niet kunnen zien.
  • ✏️ Ik wil de aanbieding kunnen verwijderen en bewerken, als het mijn aanbieding is.

User story 6: Als gebruiker wil ik mijn aanbieding(en) kunnen maken door alle verplichte velden in een formulier in te vullen.

  • 🏢 Ik wil het adres (straatnaam, huisnummer, toevoeging, postcode en stad) van mijn aanbieding kunnen toevoegen.
  • 📝 Ik wil een afbeelding, een beschrijving, een prijs, de grootte, het aantal slaapkamers en badkamers, de bouwdatum en of mijn aanbieding een garage heeft of niet kunnen instellen.
  • ⚠️ Als ik niet alle verplichte velden heb ingevuld of er is een validatiefout in het formulier, wil ik een passende foutmelding kunnen zien.
  • 🔄 Na het invullen van het formulier en het maken van de aanbieding, wil ik doorgestuurd worden naar de nieuw aangemaakte detailpagina van de aanbieding.

User story 7: Als eigenaar van een aanbieding wil ik een bewerk- en verwijderknop op de detailpagina van een huis dat ik bezit, zodat ik naar de bewerkpagina van mijn aanbieding kan navigeren of de aanbieding kan verwijderen.

  • ✏️ Ik wil een bewerkknop op de detailpagina van mijn aanbieding.
  • ❌ Ik wil een verwijderknop op de detailpagina van mijn aanbieding.

User story 8: Als eigenaar van een aanbieding wil ik mijn aanbieding(en) kunnen bewerken.

  • 🏢 Ik wil het adres (straatnaam, huisnummer, toevoeging, postcode en stad) van mijn aanbieding kunnen bewerken.
  • 📝 Ik wil de afbeelding, beschrijving, prijs, grootte, het aantal slaapkamers en badkamers, de bouwdatum en of mijn aanbieding een garage heeft of niet kunnen bewerken.
  • ⚠️ Als ik niet alle verplichte velden heb ingevuld of er is een validatiefout in het formulier, wil ik een passende foutmelding kunnen zien.

User story 9: Als eigenaar van een aanbieding wil ik mijn aanbieding(en) kunnen verwijderen.

  • ⚠️ Ik wil een waarschuwing kunnen zien voor de succesvolle verwijdering van mijn aanbieding.
  • 🗑️ Ik wil dat de aanbieding permanent wordt verwijderd na bevestiging.