Esc
Start typing to search across all documentation…

Task Management Application

A production-grade task management system built on Google Cloud Platform (GCP) and Firebase — designed as an enterprise mentorship project to demonstrate real-world cloud architecture, authentication, database design, and business intelligence reporting.

5
Phases Completed
7
Cloud Services
₹0
Monthly Cost
10
DB Columns
Live & Deployed Application is live at https://my-todo-app-4dc76.web.app — Built by Rakesh Oza | GCP + Firebase Mentor Task | March 2026

What is this project?

This project was assigned by a senior mentor to gain hands-on experience with Google Cloud Platform (GCP) and Firebase by building a real, functional task management application from scratch. Every service used is the same technology that powers enterprise applications at MNCs worldwide.

The application supports Google OAuth 2.0 login, task CRUD operations with priority and due date tracking, PostgreSQL persistence via Supabase, and a live Looker Studio dashboard — all deployed on Firebase Hosting with zero server management.

Core Features

🔐
Google OAuth 2.0 Login
Enterprise-standard federated identity using Firebase Authentication. No custom password system — delegates to Google's trusted identity provider.
🗄️
PostgreSQL Database
Supabase-hosted PostgreSQL with full SQL support, ACID transactions, and REST API. Stores all task data permanently with 10-column schema.
📊
Looker Studio Dashboard
Live BI dashboard connected directly to PostgreSQL. Auto-refreshes every 15 minutes. Pie charts, bar charts, scorecards — no coding required.
🚨
Overdue Detection
Automatic detection of tasks past their due date. Red row highlighting, overdue badge, and separate filter view for at-risk tasks.
🎯
Priority Management
Three-tier priority system (High / Medium / Low) with color-coded badges. Tasks auto-sort with overdue items first for manager visibility.
👤
Private Task Isolation
Each user sees only their own tasks — scoped by Gmail address. Multi-user capable with complete data privacy per account.

Project Status

PhaseComponentStatusCost
Phase 1GCP + Firebase Project Setup✓ DoneFree
Phase 2Firebase Hosting — Deploy HTML✓ DoneFree
Phase 3Firebase Auth — Google Login + Full App✓ DoneFree
Phase 4Supabase PostgreSQL Database✓ DoneFree
Phase 5Looker Studio Dashboard✓ DoneFree
Phase 6Cloud Run — Python Flask API⏳ Pending billingPay-per-use
Phase 7Cloud SQL PostgreSQL (GCP managed)⏳ Pending billing~₹600–800/mo

Project Overview

Complete breakdown of every service, their purpose, and how they work together to power the Task Management Application.

Services Used

ServiceCategoryPurposeStatusCost
Firebase HostingFrontendHost HTML/CSS/JS website globally via CDN✓ DoneFree (10 GB/mo)
Firebase AuthenticationAuthGoogle OAuth 2.0 — social login, JWT tokens✓ DoneFree (10K users/mo)
Supabase PostgreSQLDatabasePermanent relational SQL database for tasks✓ DoneFree (500 MB)
Looker StudioAnalyticsLive BI dashboard — charts and reports✓ DoneFree (Google)
Cloud RunBackendServerless Python Flask REST API⏳ PendingPay-per-request
Cloud SQL PostgreSQLDatabaseGCP managed PostgreSQL for production⏳ Pending~₹600–800/mo
GCP ConsolePlatformCloud infrastructure management & billing✓ ActiveFree to use

Folder Structure

bashC:\Users\Lenovo\my-todo-app\
my-todo-app/
│
├── public/                     ← Files deployed to Firebase Hosting
│   ├── index.html              ← Main app: HTML + CSS + JS (all-in-one)
│   └── 404.html                ← Custom 404 page (auto-created by Firebase)
│
├── .firebaserc                 ← Active Firebase project reference
├── firebase.json               ← Firebase hosting configuration
│
└── (future)
    ├── main.py                 ← Python Flask API for Cloud Run
    ├── Dockerfile              ← Docker container config
    └── requirements.txt        ← Python dependencies

Configuration Files

.firebaserc

json.firebaserc
{
  "projects": {
    "default": "my-todo-app-4dc76"
  }
}

firebase.json

jsonfirebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

System Architecture

End-to-end architectural overview of how all GCP and Firebase services connect — from the user's browser to the database to the analytics dashboard.

💡
Manager SummaryUser opens the app URL → signs in with Google → adds/manages tasks → data saves to PostgreSQL database → Looker Studio reads that database and shows live charts and reports automatically.

Current Architecture (Phase 1–5)

🏗️ Current Production Architecture — Firebase + Supabase + Looker Studio
👤 User (Browser) Opens app URL in Chrome / Edge opens website 🌐 Firebase Hosting my-todo-app-4dc76.web.app Serves index.html (HTML + CSS + JS) via global CDN Google login REST API calls 🔐 Firebase Authentication Google OAuth 2.0 Provider Returns ID Token (1hr) + Refresh Token (∞) uid · email · displayName · photoURL 🗄️ Supabase PostgreSQL bnbizwpwowtianfsftnh.supabase.co todos table · 10 columns · Free 500MB plan REST API on port 443 · PostgreSQL on 5432 PostgreSQL connector · port 5432 auto-refresh token 📊 Looker Studio Dashboard lookerstudio.google.com Pie charts · Bar charts · Scorecards · Tables Auto-refresh every 15 minutes · Shareable link LEGEND User request / Auth flow Data flow (tasks CRUD) Background / silent process Google Cloud Platform (GCP) + Firebase Ecosystem

Future Architecture (Phase 6–7)

🔮 Target Architecture — Cloud Run + Cloud SQL (After Billing Approval)
🌐 Firebase Hosting (Frontend) API call 🐳 Cloud Run Python Flask REST API Serverless · Scales to zero Docker container · us-central1 SQL queries 🗃️ Cloud SQL PostgreSQL (GCP Managed) Auto-backup · HA · VPC us-central1 · Private IP 🔐 Firebase Auth Google OAuth 2.0 JWT verify 📊 Looker Studio Dashboard · Auto-refresh 15min Key Improvements in Phase 6–7: ✦ Backend API layer (Cloud Run) — Frontend no longer talks to DB directly ✦ JWT token validation on every API request — true production security ✦ Cloud SQL — managed backups, high availability, VPC private networking

Request Data Flow

1
User opens the app URL

Browser loads index.html from Firebase Hosting — served globally via Google's CDN. Page load <500ms worldwide. HTTPS enforced, free SSL certificate.

2
Google OAuth 2.0 login

Firebase SDK opens a Google popup. User selects their Gmail account. Google verifies identity and returns an ID Token (valid 1 hour) and a Refresh Token (never expires). Firebase SDK auto-refreshes silently.

3
App loads user's tasks

JavaScript calls GET /rest/v1/todos?user_email=eq.{email} on Supabase REST API using the publishable key. Tasks are returned as JSON and rendered in the table.

4
CRUD operations

Add/Done/Delete actions call Supabase REST endpoints (POST / PATCH / DELETE). Data is committed to PostgreSQL instantly. Stats cards update in real time.

5
Looker Studio reads live data

Looker Studio maintains a persistent PostgreSQL connection (port 5432) to Supabase. Dashboard auto-refreshes every 15 minutes. Charts and scorecards reflect latest task data.

Technology Stack

Every technology used in the Task Management Application — what it is, why it was chosen, and where it's used.

TechnologyTypeWhat it isWhere usedWhy chosen
HTML / CSS / JSFrontendCore web technologiesindex.htmlUniversal browser support, no build step
Firebase SDK v9FrontendJavaScript library for Firebase servicesindex.html via CDNOfficial SDK, free, easy integration
Google OAuth 2.0AuthIndustry-standard authorization protocolGoogle Sign-In flowNo password system needed, enterprise standard
JWT (JSON Web Token)AuthEncrypted token proving user identityAll API requestsStateless auth, works with any backend
PostgreSQLDatabasePowerful open-source relational databaseSupabase + Cloud SQL (future)ACID, SQL, scales to enterprise
SupabaseDatabaseOpen-source Firebase alternative with PGCurrent DB layerFree PostgreSQL + REST API out of the box
Python FlaskBackendLightweight Python web frameworkCloud Run API (Phase 6)Simple, fast, ideal for REST APIs
DockerDevOpsContainer platform — package app + depsCloud Run deploymentRequired by Cloud Run, ensures consistency
Node.jsToolingJavaScript runtime for CLI toolsFirebase CLIRequired runtime for firebase-tools
Google Looker StudioAnalyticsFree BI and dashboard tool by GoogleReporting layerFree, connects to any DB, no coding
DM Sans + DM MonoUIPremium web fontsApp UI typographyClean, professional enterprise look

GCP vs Firebase — Key Differences

DimensionGCP (Google Cloud Platform)Firebase
ScopeFull cloud platform with 200+ servicesApp developer tools (subset of GCP)
ComplexityComplex — needs DevOps/SRE knowledgeSimple — works with just JavaScript
Key ServicesCloud Run, Cloud SQL, GKE, BigQueryHosting, Auth, Realtime DB, Storage
Best ForEnterprise production systemsRapid prototyping and small apps
Console URLconsole.cloud.google.comconsole.firebase.google.com
BillingRequired for most servicesGenerous free tier (Spark plan)
Project LinkSame project — just a different viewSame project — just a different view
⚠️
Critical LearningBoth consoles point to the same GCP project. GCP shows the project number as 599715420588 while Firebase uses the ID my-todo-app-4dc76. Always use the Firebase ID when running Firebase CLI commands!

Phase 1 — GCP + Firebase Setup ✓ Done

Setting up the GCP project, linking Firebase, understanding the two consoles, and configuring all initial project settings.

What is GCP?

Google Cloud Platform (GCP) is Google's suite of cloud computing services — think of it as renting powerful computers from Google. Instead of buying and maintaining physical servers, you use Google's global infrastructure and pay only for what you consume.

💡
Simple AnalogyGCP is a huge building full of the world's most powerful computers. You rent space in that building for your app — no buying hardware, no maintenance, no electricity bills.

What is Firebase?

Firebase is a developer platform built on top of GCP. It gives you ready-made building blocks — login, database, hosting, storage — without needing to configure complex infrastructure. One Firebase project = one GCP project.

💡
Simple AnalogyGCP is a full hardware/software toolbox with hundreds of specialized tools. Firebase is a pre-selected starter kit — the most commonly needed tools are already taken out and ready to use.

Project Identifiers

FieldValueWhere Used
Project Namemy-todo-appHuman-readable display name
Firebase Project IDmy-todo-app-4dc76Firebase CLI, Hosting URL, Realtime DB
GCP Project Number599715420588GCP Console, IAM, API references
Regionus-central1Cloud Run, Cloud SQL deployment region
Default App ID1:599715420588:web:4c79c01c6d149a8cf64209Firebase SDK configuration
🚨
Common Mistake — Two Different ID FormatsGCP Console displays my-todo-app-490515 (project-name + number) but Firebase uses my-todo-app-4dc76 (project-name + random suffix). Using the wrong one in firebase deploy causes 404 errors. Always use the Firebase ID.

Phase 2 — Firebase Hosting ✓ Done

Deploy the frontend application to the internet using Firebase Hosting — free, fast, globally distributed, HTTPS-enforced static hosting.

What is Firebase Hosting?

Firebase Hosting is a production-grade static web hosting service. It distributes your files (HTML/CSS/JS) across Google's global CDN — so users in India, USA, and Europe all get fast load times from nearby servers. HTTPS is enforced automatically with a free SSL certificate.

💡
Simple AnalogyFirebase Hosting is like India Post with instant global delivery. You write a letter (HTML file), put it in an envelope (public/ folder), and post it (firebase deploy). Firebase delivers it to anyone worldwide in milliseconds via their CDN.

Installation & Setup

bashStep 1 — Install Firebase CLI
# Install Node.js first from nodejs.org, then run:
npm install -g firebase-tools

# Verify installation
firebase --version    # Should print: 13.x.x

# Login to your Google account
firebase login        # Opens browser for Google auth

Deployment Steps

1
Navigate to your project
bash
cd C:\Users\Lenovo\my-todo-app
2
Initialize Firebase Hosting
bash
firebase init hosting --project my-todo-app-4dc76
# Answer the prompts:
# ? What do you want to use as your public directory? → public
# ? Configure as a single-page app?                 → N
# ? Set up automatic builds with GitHub?            → N
# ? File public/index.html already exists. Overwrite? → N
3
Deploy to production
bash
firebase deploy
# Output:
# ✔ Deploy complete!
# Project Console: https://console.firebase.google.com/...
# Hosting URL: https://my-todo-app-4dc76.web.app
🌐
Live URLApp is deployed at https://my-todo-app-4dc76.web.app — accessible worldwide, HTTPS enforced.

Phase 3 — Authentication ✓ Done

Enterprise Google OAuth 2.0 login implemented via Firebase Authentication — token-based, stateless, and industry-standard federated identity.

What is Authentication?

Authentication means proving who you are to a system before it grants access. In traditional apps this was username + password. Modern enterprise apps use federated identity — delegating verification to a trusted provider like Google.

🏢
Real Office AnalogyEntering a corporate office — you show your company ID at the gate. Security checks it once and gives you a visitor badge (token). You show the badge to enter each floor without being checked again. Badge expires at end of day (token TTL = 1 hour).

OAuth 2.0 Flow — Step by Step

🔐 Google OAuth 2.0 Authentication Flow
👤 USER 🔥 FIREBASE AUTH 🔍 GOOGLE 📱 OUR APP ① clicks Sign In ② opens popup ③ OAuth request ④ selects Gmail account ⑤ verified ✓ ⑥ ID Token + User Object ⑦ auto-refresh every 55min ID Token (1hr) uid · email · name photoURL · exp

Token Types

TokenExpiryPurposeAuto-refreshed?
ID Token1 hour (3600s)Proves identity — contains uid, email, name, photo✅ Yes — by Firebase SDK
Refresh TokenNever expiresUsed by SDK to silently get new ID tokensN/A (it IS the refresher)
Access Token1 hourCalls Google APIs on behalf of user✅ Yes — by Firebase SDK
🔒
Why Does the Token Expire?Security by design. If an attacker steals your ID token, it becomes useless within 1 hour. The Refresh Token is stored securely by Firebase SDK and never exposed to JavaScript — even if XSS attacks occur, the refresh token is safe.

Firebase SDK Configuration

javascriptFirebase config object — index.html
const firebaseConfig = {
  apiKey:            "AIzaSyDAQnYbn2ikrtC8YF7ABHRITkzFGhUeS9I",
  authDomain:        "my-todo-app-4dc76.firebaseapp.com",
  projectId:         "my-todo-app-4dc76",
  storageBucket:     "my-todo-app-4dc76.firebasestorage.app",
  messagingSenderId: "599715420588",
  appId:             "1:599715420588:web:4c79c01c6d149a8cf64209",
  databaseURL:       "https://my-todo-app-4dc76-default-rtdb.firebaseio.com"
};

Authentication Functions

javascriptAuth implementation
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();

// Sign in with Google popup
function signInWithGoogle() {
  auth.signInWithPopup(provider)
    .catch(err => console.error('Login failed:', err));
}

// Sign out
function signOut() {
  auth.signOut();
}

// Reactive state listener — fires on login/logout automatically
auth.onAuthStateChanged(user => {
  if (user) {
    // User logged in — user object contains:
    console.log(user.uid);          // Unique user ID
    console.log(user.displayName);  // "Rakesh Oza"
    console.log(user.email);        // "rakesh@gmail.com"
    console.log(user.photoURL);     // Profile picture URL
    loadTasks(user.email);
  } else {
    showLoginPage();
  }
});

Phase 4 — Supabase PostgreSQL ✓ Done

Free PostgreSQL cloud database via Supabase — full SQL support, REST API, and a beautiful management dashboard. Used as a production-identical alternative to Cloud SQL while GCP billing is pending.

Why Supabase Instead of Cloud SQL?

FeatureSupabase (Used)Cloud SQL (Future)
CostFree (500 MB)~₹600–800/month minimum
Setup time5 minutes30+ minutes + billing
Requires billingNoYes — GCP billing required
PostgreSQL versionPostgreSQL 15 (full)PostgreSQL 14/15 (full)
REST API✅ Auto-generatedManual setup needed
Dashboard UIBeautiful web editorCommand line / pgAdmin
Migration effortN/A (current)Zero — same SQL syntax

Database Schema

sqlCREATE TABLE todos
CREATE TABLE todos (
  id          BIGSERIAL     PRIMARY KEY,            -- Auto-increment PK
  task        TEXT          NOT NULL,               -- Task description
  priority    TEXT          DEFAULT 'medium',       -- high / medium / low
  done        BOOLEAN       DEFAULT false,         -- Completion flag
  assigned_by TEXT,                                 -- Creator name
  assign_to   TEXT,                                 -- Assignee name
  assign_date DATE,                                 -- Assignment date
  due_date    DATE,                                 -- Deadline
  user_email  TEXT,                                 -- Owner (privacy scope)
  created_at  TIMESTAMPTZ   DEFAULT NOW()           -- Auto timestamp
);

Row Level Security (RLS) Setup

sqlPermissions — Supabase SQL Editor
-- Disable RLS (learning project — trusts all authenticated users)
ALTER TABLE todos DISABLE ROW LEVEL SECURITY;

-- Grant REST API access
GRANT ALL ON todos TO anon;
GRANT ALL ON todos TO authenticated;
GRANT USAGE, SELECT ON SEQUENCE todos_id_seq TO anon;
GRANT USAGE, SELECT ON SEQUENCE todos_id_seq TO authenticated;

SQL Operations

sqlCRUD + Reporting Queries
-- READ: All tasks for a user, sorted by urgency
SELECT * FROM todos
WHERE user_email = 'rakesh@gmail.com'
ORDER BY done ASC, due_date ASC;

-- CREATE: Add a new task
INSERT INTO todos (task, priority, assigned_by, assign_to, assign_date, due_date, user_email)
VALUES ('Employee ID generation', 'high', 'Manager', 'Rakesh', '2026-03-18', '2026-03-20', 'rakesh@gmail.com');

-- UPDATE: Mark task as done
UPDATE todos SET done = true WHERE id = 1;

-- DELETE: Remove task
DELETE FROM todos WHERE id = 1;

-- REPORT: Overdue tasks
SELECT * FROM todos
WHERE due_date < CURRENT_DATE AND done = false;

-- REPORT: Dashboard summary counts
SELECT
  COUNT(*) AS total,
  COUNT(CASE WHEN done THEN 1 END) AS completed,
  COUNT(CASE WHEN NOT done THEN 1 END) AS pending,
  COUNT(CASE WHEN due_date < CURRENT_DATE AND NOT done THEN 1 END) AS overdue
FROM todos;

Phase 5 — Looker Studio Dashboard ✓ Done

Google Looker Studio provides a free, no-code business intelligence dashboard connected directly to Supabase PostgreSQL — live charts, scorecards, and management reports with zero additional development.

💡
Simple AnalogyLooker Studio is like a magic mirror that looks directly into your database and draws beautiful charts automatically. No coding — just drag, drop, and connect.

Supabase → Looker Studio Connection

FieldValue
Connector TypePostgreSQL
Hostdb.bnbizwpwowtianfsftnh.supabase.co
Port5432
Databasepostgres
Usernamepostgres
Tabletodos
Refresh RateEvery 15 minutes (auto)

Dashboard Components

ComponentChart TypeWhat It Shows
Total TasksScorecardCOUNT(*) of all records
CompletedScorecardWHERE done = true
PendingScorecardWHERE done = false
OverdueScorecardWHERE due_date < today AND done = false
Tasks by PriorityPie ChartHigh / Medium / Low breakdown
Tasks by AssigneeBar ChartTask count per person
All TasksData TableFull list with sortable columns
Date Range FilterControlFilter all charts by date period

Phase 6 — Cloud Run ⏳ Pending Billing

Serverless Python Flask REST API deployed on Google Cloud Run — containerized with Docker, auto-scaling, zero infrastructure management.

Status — Awaiting GCP Billing ApprovalGCP billing account is under Google's verification process. Takes 1–3 business days for Indian accounts. Code is written and ready to deploy.
💡
Simple AnalogyCloud Run is like a restaurant waiter. Your frontend (customer) places a food order (API request). The waiter (Cloud Run) walks to the kitchen (database), picks up the food (data), and brings it back. When the restaurant is empty, the waiter goes home (scales to zero).

Python Flask REST API

pythonmain.py — Cloud Run Flask API
from flask import Flask, jsonify, request
from supabase import create_client
import os

app = Flask(__name__)
supabase = create_client(os.environ['SUPABASE_URL'], os.environ['SUPABASE_KEY'])

# GET — All tasks for a user
@app.route('/tasks', methods=['GET'])
def get_tasks():
    user_email = request.args.get('user_email')
    result = supabase.table('todos').select('*').eq('user_email', user_email).execute()
    return jsonify(result.data)

# POST — Add a new task
@app.route('/tasks', methods=['POST'])
def add_task():
    result = supabase.table('todos').insert(request.json).execute()
    return jsonify(result.data[0]), 201

# PATCH — Mark as done
@app.route('/tasks/<int:id>', methods=['PATCH'])
def update_task(id):
    result = supabase.table('todos').update({'done': True}).eq('id', id).execute()
    return jsonify(result.data[0])

# DELETE — Remove task
@app.route('/tasks/<int:id>', methods=['DELETE'])
def delete_task(id):
    supabase.table('todos').delete().eq('id', id).execute()
    return jsonify({'message': 'Deleted'}), 204

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

Deploy to Cloud Run

bashgcloud deploy command
gcloud run deploy my-todo-api \
  --source . \
  --region us-central1 \
  --allow-unauthenticated \
  --set-env-vars SUPABASE_URL=https://xxx.supabase.co,SUPABASE_KEY=your_key

Phase 7 — Cloud SQL PostgreSQL ⏳ Pending Billing

Migration from Supabase to Google Cloud SQL — a fully managed, enterprise-grade PostgreSQL service on GCP with automated backups, VPC private networking, and high availability.

Pending — GCP Billing RequiredCloud SQL requires a verified GCP billing account. Indian account verification takes 1–3 business days. The same todos table schema will be used — zero migration complexity.

Cloud SQL vs Supabase

FeatureSupabase (Current)Cloud SQL (Future)
Managed bySupabase (third party)Google Cloud (same ecosystem)
VPC private networkingNoYes — private IP only
Automated backupsDaily (free tier)Configurable, point-in-time recovery
High AvailabilityNo (free tier)Yes — failover replica available
Cloud Run integrationPublic HTTPSUnix socket (faster, more secure)
IAM authenticationNoYes — GCP service account auth

Connection String

pythonCloud SQL via Unix socket (Cloud Run)
DATABASE_URL = (
    "postgresql://postgres:PASSWORD@/postgres"
    "?host=/cloudsql/my-todo-app-4dc76:us-central1:INSTANCE_NAME"
)

Data Model

Complete database schema documentation for the todos table — column definitions, types, constraints, and sample data.

todos Table — Full Schema

ColumnTypeNullableDefaultDescription
idBIGSERIALNOT NULLAutoPrimary key — auto-incrementing integer
taskTEXTNOT NULLTask description (free-form text)
priorityTEXTNULL'medium'Task urgency: high / medium / low
doneBOOLEANNULLfalseCompletion status flag
assigned_byTEXTNULLName of person who created the task
assign_toTEXTNULLName of person responsible for the task
assign_dateDATENULLDate the task was assigned (YYYY-MM-DD)
due_dateDATENULLTask deadline — used for overdue detection
user_emailTEXTNULLOwner's Gmail — privacy scope key
created_atTIMESTAMPTZNULLNOW()Timestamp when task was created (timezone-aware)

Sample Data

jsonSample task record
{
  "id":          1,
  "task":        "Employee ID generation",
  "priority":    "high",
  "done":        false,
  "assigned_by": "Rakesh Oza",
  "assign_to":   "WNS-Onboarding",
  "assign_date": "2026-03-18",
  "due_date":    "2026-03-20",
  "user_email":  "ozarakesh533@gmail.com",
  "created_at":  "2026-03-18T10:30:00+00:00"
}

Security & Auth Deep Dive

Detailed breakdown of all security layers in the Task Management Application — authentication, authorization, data privacy, and planned enterprise hardening.

JWT Token Anatomy

A JWT (JSON Web Token) is a compact, URL-safe token format: header.payload.signature. Firebase issues these tokens when a user logs in with Google.

jsonJWT Payload — decoded
{
  "iss":     "https://securetoken.google.com/my-todo-app-4dc76",
  "aud":     "my-todo-app-4dc76",
  "uid":     "abc123xyz789",
  "email":   "rakesh@gmail.com",
  "name":    "Rakesh Oza",
  "picture": "https://lh3.googleusercontent.com/a/...",
  "iat":     1710000000,   // Issued At (Unix timestamp)
  "exp":     1710003600    // Expires At (iat + 3600 seconds = 1 hour)
}

Security Layers

LayerMechanismStatus
Transport SecurityHTTPS / TLS enforced by Firebase Hosting✓ Active
AuthenticationGoogle OAuth 2.0 — no passwords stored✓ Active
Token ExpiryID Token TTL = 3600s, auto-refreshed by SDK✓ Active
Data PrivacyTasks scoped by user_email in all queries✓ Active
Database RLSDisabled for learning (publishable key access)⚠ Simplified
API Auth (Phase 6)JWT verification on every Cloud Run request⏳ Pending
VPC NetworkingPrivate IP for Cloud SQL (no public exposure)⏳ Pending
⚠️
Current SimplificationThe frontend currently calls Supabase REST API directly using a publishable key. In Phase 6, all API calls will go through Cloud Run which will verify the Firebase JWT token — adding a proper authorization layer before any database access.

Key Concepts

Essential technical concepts used in this project — explained clearly with analogies for manager demos and knowledge checks.

OAuth 2.0

OAuth 2.0 is the industry-standard protocol for authorization. It lets users grant apps permission to access their account (name, email) without sharing their password. The app never sees the user's Google password — Google handles all verification.

JWT (JSON Web Token)

JWT is an open standard (RFC 7519) for securely transmitting information as a JSON object. The token is digitally signed — if anyone tampers with it, the signature becomes invalid and the token is rejected. Format: base64(header).base64(payload).signature

REST API

HTTP MethodCRUD ActionExampleSuccess Code
GETReadFetch all tasks200 OK
POSTCreateAdd a new task201 Created
PATCHUpdate (partial)Mark task done200 OK
PUTUpdate (full replace)Replace task data200 OK
DELETERemoveDelete a task204 No Content

NoSQL vs SQL

DimensionNoSQL (Firebase Realtime DB)SQL (PostgreSQL / Supabase)
Storage formatJSON tree (key-value)Tables with rows and columns
SchemaFlexible — no fixed structureStrict — columns must be defined
QueriesLimited — no JOINsFull SQL — JOINs, GROUP BY, subqueries
Real-time syncBuilt-in (WebSocket)Needs extra setup (Supabase Realtime)
ACID transactionsLimitedFull ACID support
Best forChat apps, live countersBusiness data, reporting, dashboards
ExamplesFirebase, MongoDB, DynamoDBPostgreSQL, MySQL, Oracle, SQL Server

Serverless & Cloud Run

Serverless means you write the code — Google handles the servers, OS, runtime, scaling, load balancing, and patching. Cloud Run runs your Docker container only when requests arrive. Zero requests = zero cost. 1000 requests/second = auto-scales instantly.

Docker Containers

Docker packages your application code + all dependencies + runtime into one portable "container" that runs identically everywhere — your laptop, staging, and Google's production servers all behave exactly the same way.

Troubleshooting

Real problems encountered during development — exact root cause and step-by-step solution for each. Documented for future reference and team knowledge transfer.

#ProblemRoot CauseSolution
1404 error on firebase deployWrong project ID: used 490515 instead of 4dc76Used --project my-todo-app-4dc76 flag explicitly
2Hosting not found errorFirebase Hosting not activated in consoleFirebase Console → Hosting → Get Started → Setup
3.firebaserc wrong projectOld portfolio project cached in configManually edited .firebaserc with correct project ID
4firebase use failsNot inside a Firebase-initialized directoryRan firebase init first to generate .firebaserc
5Browser shows old pageBrowser cache not invalidatedCtrl+Shift+R for hard refresh
6Auth fails on local testOpened file:// URL — Firebase Auth requires HTTP/SAlways test on deployed https:// URL
7No billing accountGoogle reviewing Indian account (1–3 days)Wait for approval email; use Supabase meanwhile
8Column exists error (Supabase)Same column added twice in SQLALTER TABLE ADD COLUMN IF NOT EXISTS
9Permission denied on SupabaseRLS blocking REST API access from frontendDisabled RLS, granted ALL to anon role
10Wrong CLI project selectedFirebase CLI remembered old portfolio projectfirebase init hosting --project my-todo-app-4dc76

Manager Q&A

Prepared answers for every question a Senior Director or Manager may ask during a project demo or review session. Click each question to expand.

🎯
Demo FlowApp URL → Sign in with Google → Add Tasks → Show Stats Cards → Filter by Overdue → Open Looker Studio → Show Live Charts → Explain Architecture
What authentication did you use and why?
We used Firebase Authentication with Google OAuth 2.0. This is industry-standard Social Login / Federated Identity. The user clicks "Sign in with Google" — Firebase sends the request to Google's authorization server, Google verifies the user's Gmail account and returns a JWT token. We did not build any username/password system — authentication is completely delegated to Google, which is the same pattern used by enterprise apps like Slack, GitHub, and Notion.
What is OAuth 2.0?
OAuth 2.0 is an open industry-standard authorization protocol (RFC 6749). It lets users grant applications limited access to their accounts without sharing their password. In our case, the user authorizes our app to read their Google profile (name, email, photo) — nothing more. Google acts as the trusted Identity Provider (IdP), and our app is the Relying Party (RP).
What is a token and what is its expiry time?
A token is a long cryptographically signed string that proves a user is authenticated. Firebase issues two tokens on login: (1) ID Token — expires in exactly 1 hour (3600 seconds), contains the user's uid, email, name; (2) Refresh Token — never expires, used by Firebase SDK to silently fetch new ID tokens in the background. Users never experience a logout unless they explicitly sign out.
Why did you use Supabase instead of Cloud SQL?
GCP billing account was under Google's verification review for Indian accounts — this takes 1–3 business days. Rather than blocking development, we used Supabase which provides free PostgreSQL identical in functionality to Cloud SQL. Same SQL syntax, same table structure, same query language. When billing is approved, migration to Cloud SQL requires zero code changes — only the connection string changes.
What is the database design?
PostgreSQL relational database with one todos table containing 10 columns. Used BIGSERIAL for auto-increment primary key, TIMESTAMPTZ for timezone-aware creation timestamps, BOOLEAN for task completion status, and TEXT for flexible string fields. Data privacy is enforced at the query level — every SELECT/INSERT filters by user_email.
How does Looker Studio get the live data?
Looker Studio connects directly to Supabase PostgreSQL using Google's native PostgreSQL connector. It connects to host db.bnbizwpwowtianfsftnh.supabase.co on port 5432 using the database credentials. The dashboard auto-refreshes every 15 minutes and can be manually refreshed. The manager can share the report URL with anyone via a shareable link — no Supabase account required to view.
What is Cloud Run and why use it?
Cloud Run is Google's serverless container execution platform. You write your backend code (Python Flask), package it in a Docker container, and Cloud Run handles everything else — servers, OS, scaling, load balancing, HTTPS certificates. It scales to zero when no requests arrive (zero cost) and scales to thousands of instances instantly under high load. You pay only per request, making it extremely cost-efficient for variable workloads.
What is Row Level Security (RLS)?
RLS is a PostgreSQL security feature that automatically restricts which database rows each database user can read or modify — enforced at the database engine level, not in application code. For this learning project, RLS was disabled and replaced with application-level email filtering for simplicity. In Phase 6, when Cloud Run provides the API layer, JWT token verification will be added, and RLS can be re-enabled with proper policies.
What is the app URL and how is it hosted?
Live URL: https://my-todo-app-4dc76.web.app — hosted on Firebase Hosting, which is Google's global CDN-backed static hosting service. HTTPS is automatically enforced with a free SSL certificate. Files are cached on Google's servers worldwide — users in India, USA, and Europe all get fast response times from nearby CDN nodes.
What did you learn from this project?
10 key learnings: (1) GCP and Firebase are the same project — two views; (2) Every service needs manual activation; (3) Firebase ID format ≠ GCP number format; (4) ID Token (1hr) + Refresh Token (forever); (5) NoSQL JSON trees vs SQL relational tables; (6) Always deploy before testing Firebase Auth; (7) Free alternatives (Supabase) for cloud SQL while billing is pending; (8) Indian GCP billing takes 1–3 days; (9) Cloud Run is serverless and scales to zero; (10) Looker Studio is free and requires no coding.

Project IDs & URLs

All important identifiers, endpoints, console links, and credentials for the Task Management Application.

🔒
Security NoticeThe Supabase publishable key shown here is safe for frontend use only (anon role). Never expose service role keys, GCP service account JSON, or database passwords in documentation or public repos.
ServiceURLPurpose
🌐 Live Appmy-todo-app-4dc76.web.appProduction application URL
🔥 Firebase Consoleconsole.firebase.google.com/project/my-todo-app-4dc76Hosting, Auth, DB management
☁️ GCP Consoleconsole.cloud.google.comCloud Run, SQL, Billing
🗄️ Supabase Dashboardsupabase.com/dashboard/project/bnbizwpwowtianfsftnhDB table editor, SQL runner
📊 Looker Studiolookerstudio.google.comDashboard & chart builder

Project Identifiers

ItemValue
Firebase Project IDmy-todo-app-4dc76
GCP Project Number599715420588
Firebase App ID1:599715420588:web:4c79c01c6d149a8cf64209
Supabase Project URLhttps://bnbizwpwowtianfsftnh.supabase.co
Supabase DB Hostdb.bnbizwpwowtianfsftnh.supabase.co
Realtime DB URLhttps://my-todo-app-4dc76-default-rtdb.firebaseio.com
Developer Emailozarakesh533@gmail.com
Project FolderC:\Users\Lenovo\my-todo-app
Regionus-central1

Key Learnings

The 10 most important insights gained while building this project — documented for knowledge transfer and future reference.

🔗 GCP + Firebase are connectedFirebase is built on top of GCP. One Firebase project = one GCP project. Two consoles, same infrastructure underneath.
⚙️ Services need manual activationNo GCP service starts automatically. Every service (Hosting, Auth, Realtime DB, Cloud Run) must be explicitly enabled before first use.
🔑 Project IDs have two formatsGCP uses number format (490515). Firebase uses ID format (4dc76). Using the wrong one in CLI commands causes 404 errors.
🎫 Tokens and their expiryID Token = 1 hour (security). Refresh Token = never expires. Firebase SDK auto-refreshes silently — users never get logged out unexpectedly.
🗂️ NoSQL vs SQL tradeoffsFirebase JSON tree = flexible, real-time, free. PostgreSQL = structured, queryable, perfect for dashboards and business reporting.
🚀 Deploy before testing authFirebase Authentication only works on HTTPS URLs. Never test auth on file:// — always deploy first and test on the https:// Firebase Hosting URL.
🆓 Free alternatives existSupabase provides production-grade free PostgreSQL — identical to Cloud SQL. Perfect when GCP billing is pending during development.
⏳ GCP billing takes 1–3 daysFor Indian accounts, Google manually reviews and verifies billing details. Plan for this delay when setting up new GCP projects.
📦 Cloud Run scales to zeroServerless means no traffic = no cost. Cloud Run automatically scales from zero to thousands of instances — pay only for actual usage.
📊 Looker Studio is free BIConnects to any PostgreSQL database and builds professional dashboards with zero coding. Drag and drop charts, auto-refreshes, and shareable links.

API Reference

Complete Supabase REST API reference used by the Task Management App frontend.

ℹ️
Base URLhttps://bnbizwpwowtianfsftnh.supabase.co/rest/v1

GET /todos — Fetch Tasks

javascriptFetch all tasks for authenticated user
const response = await fetch(
  SUPABASE_URL + '/rest/v1/todos?user_email=eq.rakesh@gmail.com&order=created_at.desc',
  { headers: { 'apikey': SUPABASE_KEY, 'Authorization': 'Bearer ' + SUPABASE_KEY } }
);
const tasks = await response.json();

POST /todos — Create Task

javascriptAdd a new task
await fetch(SUPABASE_URL + '/rest/v1/todos', {
  method: 'POST',
  headers: { 'apikey': SUPABASE_KEY, 'Content-Type': 'application/json', 'Prefer': 'return=representation' },
  body: JSON.stringify({ task: 'Design mockup', priority: 'high', due_date: '2026-03-25', user_email: 'rakesh@gmail.com', done: false })
});

PATCH /todos — Mark Done

javascript
await fetch(SUPABASE_URL + '/rest/v1/todos?id=eq.42', {
  method: 'PATCH',
  headers: { 'apikey': SUPABASE_KEY, 'Content-Type': 'application/json', 'Prefer': 'return=minimal' },
  body: JSON.stringify({ done: true })
});

DELETE /todos — Remove Task

javascript
await fetch(SUPABASE_URL + '/rest/v1/todos?id=eq.42', {
  method: 'DELETE',
  headers: { 'apikey': SUPABASE_KEY, 'Prefer': 'return=minimal' }
});

CLI Commands

All command-line commands used in the Task Management App project.

Firebase CLI

bashFirebase commands
# Setup
npm install -g firebase-tools            # Install Firebase CLI
firebase --version                       # Verify installation
firebase login                           # Authenticate with Google
firebase logout                          # Sign out

# Project management
firebase projects:list                   # List all projects
firebase use my-todo-app-4dc76          # Switch active project
firebase hosting:sites:list             # List hosting sites

# Deployment
firebase init hosting --project my-todo-app-4dc76   # Initialize hosting
firebase deploy                          # Deploy all
firebase deploy --only hosting           # Deploy hosting only
firebase deploy --debug                  # Verbose output

Google Cloud CLI (gcloud)

bashgcloud commands
# Authentication
gcloud auth login                        # Login to GCP
gcloud config set project my-todo-app-4dc76

# Cloud Run
gcloud run deploy my-todo-api \
  --source . \
  --region us-central1 \
  --allow-unauthenticated
gcloud run services list
gcloud run services delete my-todo-api --region us-central1

# Cloud SQL
gcloud sql instances list
gcloud sql connect INSTANCE --user=postgres

Frequently Asked Questions

Quick answers to common questions about the Task Management Application.

Can multiple users use the app at the same time?
Yes. Each user signs in with their own Google account and sees only their tasks (filtered by user_email). The app fully supports multi-user concurrent access. Firebase Hosting and Supabase REST API are stateless and infinitely scalable.
Is the data secure? Can other users see my tasks?
No — each user only sees their own tasks. Every database query includes WHERE user_email = 'your-email@gmail.com'. Even if someone knew your Supabase URL and key, they would need your exact email to retrieve your tasks.
What happens to my tasks if I log out?
Tasks are permanently stored in the PostgreSQL database on Supabase. Logging out only removes your session from the browser. When you log back in with the same Google account, all your tasks are still there.
Why is the total monthly cost ₹0?
Every service used falls within the free tier: Firebase Hosting (1 GB transfer free), Firebase Auth (10,000 users/month free), Supabase (500 MB PostgreSQL free), Looker Studio (free Google product). Cloud Run and Cloud SQL will add cost only after billing is approved and traffic exceeds free limits.
How do I share the Looker Studio dashboard with my manager?
In Looker Studio: Click the Share button (top right) → "Manage access" → change to "Anyone with the link can view" → Copy link. Your manager can open the dashboard in any browser without needing a Supabase or Google Cloud account.
What is the difference between Firebase Realtime Database and Supabase?
Firebase Realtime Database is a NoSQL JSON tree — great for real-time sync but no SQL queries. Supabase provides full PostgreSQL — structured rows and columns, complex queries with JOINs and GROUP BY, and direct connection to Looker Studio. We chose Supabase because our dashboard needs proper SQL aggregations like COUNT, GROUP BY priority, etc.