In this chapter, we will build our fourth app. We will cover new topics, such as:

• Managing the state of the app in a centralized store using the official Vuex library
• Using the Google OAuth API to connect our users to the app
• Integrating Google Maps to our app with the vue-googlemaps third-party library
• Rendering functions and JSX
• Functional components--making lighter and faster components

The app will be a Geolocated Blog that will mainly display a big map where the user will add blog posts. Here are the main features of the app:

• A login page will ask the user to authenticate using their Google account
• The main view will be a Google map embeded in the app, with a marker for each post
• Clicking on the markers will display the content in a side panel to the right, with the description of the location, the post, a like counter, and a list of comments
• Clicking anywhere else on the map will display a form in the side panel so the user can create a new post at this location
• The top bar of the application will display the current user's avatar and name, with a button to center the map on their position and another to log out

The final application will look as follows: