Interactive office map in JS

Slide 1

Slide 1 text

Interactive ofﬁce map in 1 JS

Slide 2

Slide 2 text

Agenda •fairytale •how to draw a map •how to ﬁnd a … •which data to collect •godmode •one more thing •hosting •analytics 2

Slide 3

Slide 3 text

It all started with an idea Aleksandra Golubeva 3

Slide 4

Slide 4 text

Sad story 4

Slide 5

Slide 5 text

Poll StarWars meeting room 8% Gemini team 12% QA from the Setapp team 21% Napkins 26% Someone’s workplace 33% macOS 8% Android 10% iOS 35% Web 47% 5

Slide 6

Slide 6 text

Three Months Later… 6

Slide 7

Slide 7 text

Web app 7

Slide 8

Slide 8 text

Basic stack •node.js •express •mongo •react •react-bootstrap •redux •react-router •webpack 8

Slide 9

Slide 9 text

Authorization 9

Slide 10

Slide 10 text

leaﬂetjs 10

Slide 11

Slide 11 text

react-leaﬂet 11

Slide 12

Slide 12 text

Tiles 12

Slide 13

Slide 13 text

Tiles svg + svg2png + image-tiler 13

Slide 14

Slide 14 text

Fuse.js A lightweight fuzzy-search, with zero dependencies. 14

Slide 15

Slide 15 text

react-autosuggest •WAI-ARIA compliant •full rendering control •keyboard events •active section highlight •any idea you want 15

Slide 16

Slide 16 text

Data entities Area •array of coordinates Room •coordinates •title •description •keywords Houseware •coordinates •title •description •keywords Employee •coordinates •BambooHR •Slack Table •array of coordinates 16

Slide 17

Slide 17 text

godmode •point-in-polygon •leaﬂet-draw •leaﬂet-path-transform 17

Slide 18

Slide 18 text

macOS & iOS apps 18

Slide 19

Slide 19 text

One more thing… Steve Jobs 19

Slide 20

Slide 20 text

Slack bot •ngrok •block kit builder 20 ➡What do you do when you see a spaceman? ➡Park your car, man!

Slide 21

Slide 21 text

Hosting heroku + mlab == ❤ $22/month 21

Slide 22

Slide 22 text

Analytics amplitude + amplitude-js 22

Slide 23

Slide 23 text

Q&A