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.

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