vue create vue-geolocation
- Root Component will have Navbar directly nested inside. This Navbar component will always be visible.
- '/', on the address bar will tell the Vue Router to go to our Map.vue component.
- Map.vue is responsible for displaying the google map API, and all of the different users doted around that map and their geolocation. When clicking in one of those Users is going to redirect to '/profile/:slug' of that User and with that the Router will display the Profile.vue component.
- Profile.vue will show the Users comments and all the different messages that other people have send them.
- Signup.vue '/signup' to sign up as a new user.
- Login.vue '/login' to load up the login view.
- Route Guard is going to be implemented on the components Map.vue and Profile.vue. Only people with authentication can navigate to this routes.
- Firebase Auth will handle the signup and login components.
- Firestore database is going to be required to handle the data on each User (Geolocation and messages history).
This firebase server takes a username and a password from our users, so here we are filling those up with a form in this application. It takes those and signs them up, and it stores them in a separate kind of database that is not a firstore database, but its own firebase auth database. This also takes additional data as the unique Id. This mangages authentication record for each individual user.
Store additional information about each user is also needed, such as the geolocation, the alias, etc. This can't be store in the authentication server. Instead of this we have to set a new record separately for each individual user in our own firestore database collection.
A user collection is setup on this database and inside this users collection, each user will have it's own record or document and each of those records will have a geolocation and an alias property. We also need a way to link up a user from here with a user from Firebase Auth, to say which user on Auth belongs to which user on firestore. To make that link, we take the Id that is auto generated by the Firebase Auth service when signup user auth and we store it as a property inside the firestore collection as user_id.