This project is an online journal that allows users to keep track of destinations on their bucket list and then capture diary entries when they actually get to visit these sites. It was further practice with using data from multiple collections in a Firebase database.
As a user, I want to be authenticated to log in to the site with my google email login.
From the exercise instructions:
Create a new firebase project and enable google authentication
Create an authentication branch and add in basic login and logout authentication (navbar with logout button, google login button)
When your user is logged out they should see the navbar with only a brand. And an h1 on the page that says Check Out MyTravel Diary (make a home component for this)
When your user is logged in they should see a navbar with a brand and a logout button and an H1 on the page that says Destinations (make a boards component for this)
AC
WHEN I get to the site,
THEN I see a page with the heading Check Out My Travel Diary and a Google login button,
AND I can log in with my Gmail address,
AND WHEN I log in,
THEN I see a Home page with the heading Previous and Future Destinations and 2 buttons in the navbar: Home and Log Out,
AND When I click Log Out,
THEN I get logged out of the site.
Dev Notes
Create a Firebase project (firebase.google.com).
Register your web app: Firebase > On the Project Overview tab for your new project > Click the closing tag icon labeled Web ( </> ) > Don’t worry about the first script - we will use npm firebase install instead; > Just click Continue to Console here. Note: Make sure the Firebase Data > Rules say read and write = true!
Enable google authentication: Firebase project > Authentication tab > Sign-in Method tab > Google option > Change Enable toggle to enable it and add your email in the Project support email field
Now - Do a new git branch for authorization
Create a file for the apiKeys config. And IMPORTANT!!!: add new apiKeys.json FILE TO THE > .gitignore file!!! — src/javascripts/helpers/apiKeys.json
Now we have the file > next we need the keys: Add the keys to your project in VSCode
Create an example file for apiKeys: apiKeys.example.json file
In the Index file: Add navbar with Home and Log Out buttons AND Add 2 divs: 1 for the login page and 1 for the home page you see when logged in.
Add a class of .hide in the main.scss file since you will be using it to control which div the user sees when logged in and when logged out
Start building out project files you will need: Component folders and js and sass files for each component ; utils.js file in a helpers file with the printToDom function
Build out the login.js file (this is where the code for the login button will go -add it!!)
Build out the home.js file for the page inside the app - that the user sees once authenticated and logged in
Build out an authData file inside the helpers > data folder that has the function that controls what the user sees.
Add a Google login button
Build out the main.js file, which imports all this data and calls the functions in the init function.
User Story
As a user, I want to be authenticated to log in to the site with my google email login.
From the exercise instructions:
AC
WHEN I get to the site, THEN I see a page with the heading Check Out My Travel Diary and a Google login button, AND I can log in with my Gmail address, AND WHEN I log in, THEN I see a Home page with the heading Previous and Future Destinations and 2 buttons in the navbar: Home and Log Out, AND When I click Log Out, THEN I get logged out of the site.
Dev Notes
Create a Firebase project (firebase.google.com).
Register your web app: Firebase > On the Project Overview tab for your new project > Click the closing tag icon labeled Web ( </> ) > Don’t worry about the first script - we will use npm firebase install instead; > Just click Continue to Console here. Note: Make sure the Firebase Data > Rules say read and write = true!
Enable google authentication: Firebase project > Authentication tab > Sign-in Method tab > Google option > Change Enable toggle to enable it and add your email in the Project support email field
Now - Do a new git branch for authorization
Create a file for the apiKeys config. And IMPORTANT!!!: add new apiKeys.json FILE TO THE > .gitignore file!!! — src/javascripts/helpers/apiKeys.json
Now we have the file > next we need the keys: Add the keys to your project in VSCode
Create an example file for apiKeys: apiKeys.example.json file
In the Index file: Add navbar with Home and Log Out buttons AND Add 2 divs: 1 for the login page and 1 for the home page you see when logged in.
Add a class of .hide in the main.scss file since you will be using it to control which div the user sees when logged in and when logged out
Start building out project files you will need: Component folders and js and sass files for each component ; utils.js file in a helpers file with the printToDom function
Build out the login.js file (this is where the code for the login button will go -add it!!)
Build out the home.js file for the page inside the app - that the user sees once authenticated and logged in
Build out an authData file inside the helpers > data folder that has the function that controls what the user sees.
Add a Google login button
Build out the main.js file, which imports all this data and calls the functions in the init function.