Week 2 Front End - mbergevoet/blok-tech GitHub Wiki

Jobstory

Wanneer ik een profiel heb aangemaakt met mijn hobby's en interesses wil ik mensen met dezelfde interesses kunnen opzoeken, vinden en matchen zodat ik iemand kan ontmoeten met overeenkomende interesses en we beter bij elkaar passen.

HTML CSS JavaScript Breakdown

Ik heb profielen nodig op de site met informatie er in over de desbetreffende persoon. Het algorithme doet een voorstel en op basis van de foto en de interesses en die kun je als gebruiker bevestigen of afwijzen.

HTML

<section class ="profiel container">
   <figure>
      <img url ="profile.png>
      <figcaption>Jan van dijk</figcaption>
   </figure>
   <p>
      <ul>
         <li>interesse 1</li>
         <li>interesse 2</li>
         <li>interesse 3</li>
         <li>interesse 4</li>
         <li>interesse 5</li>
      </ul>
   </p> //informatie dat in de database wordt opgeslagen
</section>

Javascript

Profiel informatie word in een object of array opgeslagen die vervolgens in de database komt. Die array's worden gefilterd met een js functie die de matches ophaalt en toont aan de gebruiker die vervolgens kan goedkeuren.

Stappen

  1. Dating site/profielen maken in html
  2. Dating site/profielen maken in css
  3. Knoppen in js klikbaar maken
  4. Informatie in array's stoppen
  5. Array's in de database opslaan
  6. On click een request die de interesses opvraagt van de andere profielen sturen naar de database sturen
  7. Het request vergelijken met jou profiel interesses
  8. De overeenkomende profielen laten zien aan jou

Wordload

  • HTML en indeling (8h)
  • CSS responsive & styling (10h)
  • Client side JS (20h)
  • Server/ Node JS (20h)
  • Database opzetten (10h)

Wireframe & Wireflow


Dit zijn mijn eerste ideeën van hoe mijn interface en app er uit moet komen te zien. Ik heb de mobile navigatie en de desktop navigatie geschetst met daar onder hoe ik het zoek formulier zou willen maken. Dan als laatste nog een schetsje van hoe ik de profielen "tiles" wil maken.
⚠️ **GitHub.com Fallback** ⚠️