$30 off During Our Annual Pro Sale. View Details »

Story of a side project built with vue.js

Story of a side project built with vue.js

In 2017 in the US we experienced a relatively rare phenomenon: a total solar eclipse that could be seen across the country.

The next event like this will happen in 2045, so we had to enjoy it.

There were hundreds of events organized all over the country. NASA was providing a map but it was not easy to navigate. So I built a nicer UI to it that would just be asking for your location and would filter events around you.

This was my first time building a vue app.
This talk talks about the tech behind the app.

Nicolas Grenié

February 20, 2019
Tweet

More Decks by Nicolas Grenié

Other Decks in Technology

Transcript

  1. STORY OF A SIDE PROJECT BUILT WITH VUE.JS .WS Ross

    Lake, in Northern Cascades National Park, Washington, 21st August 2017, NASA NICOLAS GRENIÉ @PICSOUNG
 DEVELOPER ADVOCATE
 TYPEFORM BOULDERJS
 20TH FEBRUARY
  2. @picsoung @PICSOUNG DEVELOPER ADVOCATE

  3. @picsoung

  4. @picsoung APIs++

  5. AGENDA DEMO STACK CHALLENGES OUTCOME NEXT

  6. @picsoung BIG ECLIPSE IN 2017
 HOPE YOU ENJOYED

  7. @picsoung BIG ECLIPSE IN 2017
 HOPE YOU ENJOYED

  8. @picsoung BIG ECLIPSE IN 2017
 HOPE YOU ENJOYED

  9. @picsoung DEMO
 .WS


  10. @picsoung BUILD A PROJECT
 THAT BRINGS VALUE

  11. @picsoung BUILD A PROJECT
 THAT BRINGS VALUE AND LEARN
 SOMETHING

    NEW
  12. @picsoung .WS WHY VUE? BLAZE TEMPLATES

  13. @picsoung .WS WHY VUE? BLAZE TEMPLATES body.html

  14. @picsoung .WS WHY VUE? BLAZE TEMPLATES body.js body.html

  15. @picsoung .WS WHY VUE?

  16. @picsoung .WS WHY VUE? REACTIVITY DIDN’T NEED TO BE HARD

  17. @picsoung .WS WHY VUE? https://2018.stateofjs.com/front-end-frameworks/overview/

  18. @picsoung .WS WHY VUE? https://2018.stateofjs.com/front-end-frameworks/vuejs/

  19. @picsoung .WS WHY VUE? Started with Matthias Hager’s tutorial to

    build complete Vue.js application
 link
  20. @picsoung .WS STRUCTURE OF A VUE COMPONENT

  21. @picsoung .WS ADD VUE-ROUTER TO HAVE ROUTES

  22. @picsoung .WS COMMUNICATE BETWEEN COMPONENTS authorDetails.vue

  23. @picsoung .WS COMMUNICATE BETWEEN COMPONENTS authorDetails.vue listBooks.vue

  24. @picsoung .WS COMMUNICATE BETWEEN COMPONENTS authorDetails.vue listBooks.vue

  25. @picsoung .WS VUEX TO THE RESCUE I did not use

    it properly in this project 
 
 Similar to Facebook’s flux
 Single source of truth
 Library for Actions, Mutations, Getters
  26. @picsoung .WS VUEX TO THE RESCUE I did not use

    it properly in this project 
 
 Similar to Facebook’s flux
 Single source of truth
 Library for Actions, Mutations, Getters
  27. @picsoung .WS USE NUXT ‣ I did not use it

    properly in this project ‣ Best practices packaged all together ‣ Comes with: ‣ Vuex ‣ Vue-router ‣ vue-méta ‣ Forces a pattern in project structure ‣ Intelligent routing ‣ SEO friendly ‣ And much more
  28. @picsoung .WS WHAT ELSE WAS 
 IN ?

  29. @picsoung .WS TECH STACK APIS

  30. @picsoung .WS EVENTS DATA

  31. @picsoung .WS EVENTS DATA

  32. @picsoung .WS EVENTS DATA

  33. @picsoung .WS EVENTS DATA

  34. @picsoung .WS EVENTS DATA ⚠ Data consistency

  35. @picsoung .WS EVENTS DATA ⚠ Data consistency ⚠ URL field

  36. @picsoung .WS THE FLOW ALGOLIA PLACES LATITUDE, LONGITUDE "latlng": {

    "lat": 37.7792, "lng": -122.419 },
  37. @picsoung .WS THE FLOW GET EVENTS GET LOCAL ECLIPSE CIRCUMSTANCES

    FIND VISUALIZATION "latlng": { "lat": 37.7792, "lng": -122.419 }
  38. @picsoung .WS GET EVENTS EVENTS INDEX GEOLOC SEARCH RENDER "latlng":

    { "lat": 37.7792, "lng": -122.419 }
  39. @picsoung .WS GET EVENTS EVENTS INDEX GEOLOC SEARCH MATCHING EVENTS

    LISTS RENDER "latlng": { "lat": 37.7792, "lng": -122.419 }
  40. @picsoung .WS GET EVENTS

  41. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES "latlng": { "lat": 37.7792,

    "lng": -122.419 } Params: - date - height (default to 200) - coords API CALL
  42. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES { "error":false, "apiversion":"2.0.0", "event":

    "Solar Eclipse of 2017 Aug. 21", "description": "Sun in Partial Eclipse at this Location", "day": 21, "month": 8, "year": 2017, "deltaT": "69.4s", "lat": "37.774889", "lon": "-122.419389", "height": "200m", "tz": "0", "local_data": [ { "phenomenon": "Eclipse Begins", "day": "21", "time": "16:01:30.3", "altitude": "28.7", "azimuth": "97.3", "position_angle": "296.5", "vertex_angle": "349.7" }, { "phenomenon": "Maximum Eclipse", "day": "21", "time": "17:15:12.7", "altitude": "42.8", "azimuth": "111.2" }, { "phenomenon": "Eclipse Ends", "day": "21", "time": "18:37:05.2", "altitude": "56.4", "azimuth": "134.2", "position_angle": "95.6", "vertex_angle": "131.0" } ], "duration": "2h 35m 34.9s", "magnitude": "0.801", "obscuration": "75.5%" }
  43. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES

  44. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in

    UTC0
  45. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in

    UTC0 ✅ Use TimezoneDB API find tmz
  46. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in

    UTC0 ⚠ Endpoint only supports HTTP ✅ Use TimezoneDB API find tmz
  47. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in

    UTC0 ⚠ Endpoint only supports HTTP ✅ Use TimezoneDB API find tmz ✅ Use AMZ API Gateway to proxy
  48. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in

    UTC0 ⚠ Endpoint only supports HTTP ✅ Use TimezoneDB API find tmz ✅ Use AMZ API Gateway to proxy ⚠ Site went down on launch day
  49. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES

  50. @picsoung .WS FIND VISUALIZATION

  51. @picsoung .WS FIND VISUALIZATION

  52. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes

  53. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others
  54. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate
  55. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image
  56. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa
  57. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image ✅ Add geoloc data ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa
  58. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image ✅ Add geoloc data ✅ Create new Algolia index ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa
  59. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image ✅ Add geoloc data ✅ Create new Algolia index ⚠ copyrights issues ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa
  60. @picsoung .WS NASA ONE IMAGE A DAY API

  61. @picsoung .WS OUTCOME

  62. @picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆

  63. @picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆

    ✅ Medium post - 569 569
  64. @picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆

    ✅ Medium post - 569 569 ✅ Featured on Fastco August 7th 1600
  65. @picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆

    ✅ Medium post - 569 569 ✅ Featured on Lifehacker August 7th 3800 22k ✅ Featured on Fastco August 7th 1600
  66. @picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆

    ✅ Medium post - 569 569 ✅ Featured on Lifehacker August 7th 3800 22k ✅ Featured on Fastco August 7th 1600 ✅ SanLuisObispo.com
  67. @picsoung .WS OUTCOME Places

  68. @picsoung .WS OUTCOME ✅ 10k users 12k sessions 15k views

    Places
  69. @picsoung .WS OUTCOME ✅ 10k users 12k sessions 15k views

    ✅ Exceed Algolia free plan Places
  70. @picsoung .WS OUTCOME ✅ 10k users 12k sessions 15k views

    ✅ Exceed Algolia free plan
  71. @picsoung .WS OUTCOME

  72. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places

  73. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange
  74. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange ✅ Discussion with Time&Date API team
  75. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange ✅ Discussion with Time&Date API team ✅ First experience with Vue.js
  76. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange ✅ Discussion with Time&Date API team ✅ First experience with Vue.js ✅ First experience with Bulma CSS
  77. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange ✅ Discussion with Time&Date API team ✅ First experience with Vue.js Emoji Domains ✅ First experience with Bulma CSS
  78. @picsoung .WS NEXT

  79. @picsoung .WS NEXT

  80. @picsoung .WS NEXT

  81. @picsoung .WS NEXT ☠

  82. @picsoung .WS WANT TO START WITH VUE? https://vuex.vuejs.org/ https://www.vuemastery.com/ https://nuxtjs.org

    https://github.com/vuejs/awesome-vue https://madewithvuejs.com/
  83. QUESTIONS? THANK YOU Let us know how you liked it:

    bit.ly/nicoBoulderJS