100 Days in Kyoto to Create a Web App with Google Maps API Series' Articles

Cover image for Day 1: Creating SaaS to solve my own problem

Masa Kudamatsu

Aug 16 '21

Day 1: Creating SaaS to solve my own problem

#googlemaps #saas #kyoto #ux

2

9 min read

Cover image for Day 2: Finding design concept to drive UI design process

Masa Kudamatsu

Aug 20 '21

Day 2: Finding design concept to drive UI design process

#googlemaps #kyoto #design #saas

1

11 min read

Cover image for Day 3: Visualizing design concept with mood boards

Masa Kudamatsu

Aug 23 '21

Day 3: Visualizing design concept with mood boards

#uxdesign #uidesign #googlemaps #kyoto

9 min read

Cover image for Day 4: Customizing Google Maps color scheme (and its place label visibility)

Masa Kudamatsu

Sep 3 '21

Day 4: Customizing Google Maps color scheme (and its place label visibility)

#googlemaps #saas #webdev #design

2

22 min read

Cover image for Day 5: Switching embedded Google Maps into custom dark mode after 6pm

Masa Kudamatsu

Sep 8 '21

Day 5: Switching embedded Google Maps into custom dark mode after 6pm

#googlemaps #darkmode #ux #webdev

6

24 min read

Cover image for Day 6: Using Google Fonts as Google Maps place markers

Masa Kudamatsu

Sep 16 '21

Day 6: Using Google Fonts as Google Maps place markers

#googlemaps #uidesign #webdev #darkmode

2

30 min read

Cover image for Day 7: Making buttons look like "clouds" for embedded Google Maps

Masa Kudamatsu

Sep 30 '21

Day 7: Making buttons look like "clouds" for embedded Google Maps

#svg #buttons #uidesign #webdev

9

3

26 min read

Cover image for Day 8: Positioning buttons over embedded Google Maps

Masa Kudamatsu

Oct 7 '21

Day 8: Positioning buttons over embedded Google Maps

#googlemaps #styledcomponents #css #uidesign

6

18 min read

Cover image for Day 9: Picking the dark-mode color palette for web app buttons logically

Masa Kudamatsu

Oct 15 '21

Day 9: Picking the dark-mode color palette for web app buttons logically

#darkmode #color #uidesign #button

6

10 min read

Cover image for Day 10: Fixing a bug that renders buttons in dark mode but embedded Google Maps in light mode

Masa Kudamatsu

Oct 16 '21

Day 10: Fixing a bug that renders buttons in dark mode but embedded Google Maps in light mode

#nextjs #react #darkmode #webdev

5

8 min read

Cover image for Day 11: web app vs native app on location services

Masa Kudamatsu

Oct 19 '21

Day 11: web app vs native app on location services

#googlemaps #geolocation #webapp #webdev

3

7 min read

Cover image for Day 12: Showing user location on embedded Google Maps (with Geolocation API and React)

Masa Kudamatsu

Oct 26 '21

Day 12: Showing user location on embedded Google Maps (with Geolocation API and React)

#geolocation #react #googlemaps #webdev

5

18 min read

Cover image for Day 13: Flashing tapped button while user is waiting (with React and Styled Components)

Masa Kudamatsu

Oct 26 '21

Day 13: Flashing tapped button while user is waiting (with React and Styled Components)

#styledcomponents #react #cssanimation #webdev

4

11 min read

Cover image for Day 14: Tracking user location on embedded Google Maps

Masa Kudamatsu

Nov 2 '21

Day 14: Tracking user location on embedded Google Maps

#googlemaps #react #geolocation #webdev

4

2

10 min read

Cover image for Day 15: Showing user's direction of movement on embedded Google Maps

Masa Kudamatsu

Nov 4 '21

Day 15: Showing user's direction of movement on embedded Google Maps

#geolocation #googlemaps #webdev #svg

6

9 min read

Cover image for Day 16: Icon buttons should be labelled with aria-label

Masa Kudamatsu

Dec 17 '21

Day 16: Icon buttons should be labelled with aria-label

#a11y #html #button #svg

5

6 min read

Cover image for Day 17: Styling a search box like Google's

Masa Kudamatsu

Aug 11 '22

Day 17: Styling a search box like Google's

#html #css #webdev #searchbox

6

1

17 min read

Cover image for Day 18: Building a close button with ripple effect as a React component

Masa Kudamatsu

Dec 12 '22

Day 18: Building a close button with ripple effect as a React component

#webdev #react #button #ripple

6

17 min read

Masa Kudamatsu

Dec 16 '22

Day 19: Styling a popup like clouds

#webdev #css #glassmorphism

11 min read

Cover image for Day 20: Toggling a search box for keyboard users with React

Masa Kudamatsu

Dec 19 '22

Day 20: Toggling a search box for keyboard users with React

#webdev #react #a11y #search

1

14 min read

Cover image for Day 21: Animating transitions for a React app without external libraries

Masa Kudamatsu

Jan 2 '23

Day 21: Animating transitions for a React app without external libraries

#webdev #react #css #animation

1

10 min read

Cover image for Day 22: Using container transform pattern to animate the appearance of a search box

Masa Kudamatsu

Jan 3 '23

Day 22: Using container transform pattern to animate the appearance of a search box

#css #animation #webdev

11 min read

Masa Kudamatsu

Jan 8 '23

Day 23: Animating the closing of a popup as if button ripple effect wipes it away

#webdev #react #css #animation

2

17 min read

Cover image for Day 24: Making autocomplete search accessible for React apps with Downshift

Masa Kudamatsu

Feb 7 '23

Day 24: Making autocomplete search accessible for React apps with Downshift

#webdev #a11y #react #autocomplete

13 min read

Cover image for Day 25: Adding Google Maps autocomplete search to a React app

Masa Kudamatsu

Feb 24 '23

Day 25: Adding Google Maps autocomplete search to a React app

#googlemap #react #webdev #tutorial

5

26 min read

Cover image for Day 26: Integrating Google Maps search with a React app

Masa Kudamatsu

Jul 2 '23

Day 26: Integrating Google Maps search with a React app

#react #googlemaps #webdev #a11y

2

29 min read