Building a Cloud To Do React JS Web App on Google Cloud - Code Saadhna Season 4

Using ReactJS and the Google Cloud Platform, we are developing a Cloud To-Do app. You can increase your productivity and remember goals by using this to-do app. Since Firestore stores the to-do list, you may access it online from any device. We authenticate users to access your To-Do list using OAuth 2.0 for security and convenience.

Steps - 

1. Create a new project in Google Cloud.
2. Open Terminal and run -
   git clone https://github.com/AKSHAYBHOPANI/cloud-todo
3. Open Cloud Shell Editor and Expand Cloud To Do
4. Replace cliendId in /index.js which you can get from OAuth Cloud Console API
5. Replace firebaseConfig in src/firebase.js with your config which you can get from creating a new project (When typing Project Name, your existing Google Cloud Project will auto appear. Use that to manage things in one place) in Firebase Console
6. Open Cloud Shell Terminal and run -
   cd cloud-todo/
   yarn install
   yarn start (Optional - To Make and Test Local Changes inside GCP)
7. Deploy -
   gcloud builds submit --tag gcr.io/${PROJECT_ID}/cloud-todo
   gcloud run deploy --image gcr.io/${PROJECT_ID}/cloud-todo --allow-unauthenticated --region=${REGION} --platform=managed
   
8. Copy the URL, Click on Edit Icon in Credentials Page under OAuth 2.0 Client IDs and paste the URL in Authorized JavaScript origins and Authorized redirect URI 
9. Test - (https://mindful-cortex-391509.ey.r.appspot.com/)

(If you just want to host React JS on Google Cloud then refer to 5:57 [Clone this repo - https://github.com/AKSHAYBHOPANI/cloud-todo and copy the Docker file] and 22:20 for steps.)

For In-Depth Steps with Images - Read on Google Cloud Medium

Join for Such Live Coding Session on Google Cloud - https://www.meetup.com/datapreneur-social/

Join Code Saadhna Season 4 (Generative AI) - https://codevipassana.dev/

*This is an edited recording for Code Saadhna Season 4 held on 28 October 2023 at 8:00PM IST.