Marker App in Ember

gistfile1.md

AC's APP

• Get inspiration / do the tutorial: https://guides.emberjs.com/release/tutorial/
• Use Ember 3.13
• Use css of tutorial
• DO NOT COPY PASTE TUTORIAL AND THEN MODIFY IT UNTIL YOU HAVE CREATED NEW APP
• Use mirage + ember data models for your data
  • all people are users
    • attr first name
    • attr last name
    • create computed property fullName
  • use relationships between models
• on all pages show navigation banner
  • show markers logo left
  • show about
  • show contact
• pages
  • contact page (design it yourself)
    • header
    • if you have questions, ....
    • address
      • link to website
      • mailto
    • about page (design it yourself)
      • Tell something about the markers..
      • Show people who work here.
        • Try to find some images with google of these people and use those image URL's in your app to show avatars
          • Create avatar component to show avatar in a circle.
        • create a template helper
          • when location = Amsterdam, show Amsterdam, otherwise show 'In the country'
        • Use this info
          • Yori Högemann
            • position: 'CEO'
            • age: 'old'
            • nicknames: 'Heug', 'Sales koning'
            • city: Amsterdam
          • Rick Hermans
            • position 'CEO'
            • age: 'old'
            • nicknames: 'Tricot'
            • city: Weesp
          • Alvin Vogelzang
            • position: 'CTO'
            • age: 'nearing 30'
            • nicknames: 'Un', 'Allie', 'Lee'
            • city: Amsterdam
          • Peter van 't Zand'
            • position: 'Full Stack'
            • age: 'over 30'
            • nicknames: 'Reet', 'PeetReet'
            • city: Amsterdam
          • Sem Rudolph
            • position: 'Intern'
            • age: 'still in his teenage years'
            • nicknames: 'Dries'
            • city: Haarlem
          • Djoeke Kingma
            • position: 'Customer Success'
            • age: 'mid 20's'
            • nicknames: 'Djoekert', 'Djoekie'
            • city: Amsterdam
    • home page (assignment overview)
      • Create filter for course
      • List assignments
        • Sort on created time
        • Data
          • Create 2 imaginary markers with avatar. Add 'about' with a little story about marker
          • Create 5 Assignments
            • name
            • created time
            • course ['Dutch', 'Mathematics']
            • marker
            • status: [in progress, finished]
          • For all assignments that are finished create feedback
            • created time
            • status: ['In progress', 'Sufficient', 'Excellent']
            • student name: -> think of something to generate fake names.
        • For each assignment show
          • avatar of marker on the left
          • name
          • status
          • created time
          • course
          • When status = finished, show a button that links to assignment-detail
    • assignment-detail page
      • show course name as header
      • show avatar of marker
      • show #In progress in green, #Sufficient in orange, #Excellent in red
      • show average 'grade' (where excellent=10, sufficient=6, in progess= 2)
      • show back button that links back to assignment overview
• Before start coding, write Dev AC's
  • What are the routes
  • What are the components
• We don't need tests
• Create a repo in git.
  • try to commit frequently
  • commit your dev's ac's as well
• When finished create a presentation
  • Explain following concepts
    • controller
    • route
    • component
    • actions
    • router
  • What are your thoughts about ember
    • compare it to your own experience with other js frameworks
  • What is hard
  • What is easy

Bonus

• install moment to pretty show the dates