Vibe Coding: Build Apps Script Web Apps with Google Sheets & Firebase

Run your first AI-built web app in under an hour.

1. What vibe coding is (and what it is not) Preview
2. Why Apps Script: free, no server, no hosting bill
3. Google Sheets or Firebase: choosing your database
4. Setup: Google account, Sheets, the Apps Script editor and an AI assistant
5. The build loop used in every lesson: describe, generate, run, check, fix
6. Your first AI build: from one prompt to a live web page

Sheets designed like real database tables, ready to power an app.

1. Thinking in tables: one header row, one record per row
2. IDs, ISO dates and data types that never break
3. Linking sheets: customers, products and orders
4. Data validation, dropdowns and protected ranges
5. Formulas you still need: XLOOKUP, FILTER, QUERY, ARRAYFORMULA
6. When formulas stop scaling, and why the app does the math
7. Sheet limits, speed and planning for growth

Read and adjust the code the AI writes, without fear.

1. Variables, strings, numbers and dates
2. Arrays and objects: the shape of every record
3. Functions, arrow functions and return values
4. Conditions, loops and early returns
5. map, filter and reduce
6. JSON: how data moves between sheet, server and screen
7. Reading AI-written code line by line

Automate a spreadsheet and know where every error shows up.

1. The editor, project files and the Executions log
2. SpreadsheetApp: open, read and write
3. getValues and setValues in bulk: the one speed rule
4. Custom menus, dialogs and sidebars
5. Triggers: onOpen, onEdit and time-driven
6. Quotas, the 6-minute limit and how to stay under them
7. Script Properties: settings and secrets kept out of the code

Get working code from the AI on the first or second try.

1. Writing a requirements.md the AI can follow
2. A rules file: teach the AI your standards once
3. Planning the build in phases
4. Giving the AI the right context: files, errors and screenshots
5. Small, surgical edits vs full rewrites
6. Reviewing a change before you accept it
7. Spotting made-up functions and silent bugs

A live web app with its own link that reads and writes your sheet.

1. HtmlService and doGet: a script becomes a website
2. The 4-file project: Code.gs, index, CSS and JavaScript
3. Templates and include(): one page, no reloads
4. google.script.run: calling the server from the page
5. Success, error and loading states
6. Deploying: versions, access settings and the /exec link
7. Updating a live app without breaking it

A modern single-page interface on top of Apps Script.

1. React 18 from a CDN: no npm, no build
2. Pinned CDN versions and the Babel blank-screen fix
3. Components, props and state
4. useEffect: loading data from the server
5. Sidebar navigation and pages with state
6. Client-side caching so every page opens instantly

Secure login with roles, so each user sees only what they should.

1. The Users sheet: accounts, roles and active status
2. Login with session tokens
3. Checking the token on every server call
4. Roles and permissions: a page-by-action matrix
5. Signup, forgot password and email reset links
6. Activity log: who did what, and when

Add, edit and delete screens that are fast, safe and multi-user.

1. Add and edit forms in modals
2. Validation in the browser and on the server
3. LockService: two users, no overwritten data
4. JSON rows: compact, fast storage for daily records
5. Searchable dropdowns linked to other sheets
6. Uploading files and photos to Google Drive
7. Soft delete and edit history

The same app on Firebase, for more users, live data and bigger records.

1. Creating a Firebase project and a service account
2. Firestore basics: collections, documents and queries
3. Connecting Apps Script to Firestore with the REST API
4. Add, edit and delete records in Firestore
5. Live updates: real-time screens with Firestore in the browser
6. Firebase Authentication: Google and email login
7. Firebase Storage for files and photos
8. Security rules: who can read and write what
9. Moving an app from Google Sheets to Firebase

Admin screens your client will actually use every day.

1. Tabulator tables: sort, filter and paginate
2. Search, filters and a column picker
3. Row selection and bulk actions
4. CSV import with a template and validation
5. CSV, PDF and print exports
6. Dashboard KPI cards and Chart.js charts
7. A4 invoices and thermal receipts

An app that looks like a product, on desktop and on a phone.

1. A theme with CSS variables, light and dark
2. Mobile first: designing at 390px
3. Feedback: a top loading bar for reads, an overlay for saves
4. Skeleton screens, toasts and empty states
5. Icons, spacing and the details clients notice
6. Welcome tour and multi-language support

Apps that send, schedule and connect on their own.

1. Branded emails with MailApp and HTML templates
2. PDFs from Google Docs templates
3. Scheduled reports and reminders
4. Google Forms, Calendar and Drive automation
5. Adding AI features with the Gemini, OpenAI or Claude API
6. Webhooks and external APIs with UrlFetchApp and doPost
7. WhatsApp click-to-chat links and alerts

Fast with thousands of rows, safe with real users.

1. CacheService: repeat reads in milliseconds
2. Fast search: Map indexes and TextFinder
3. Never trust the browser: server-side permission checks
4. Escaping output to stop XSS
5. Keeping the spreadsheet private
6. Backups, archiving and staying under the cell limit

Fix any error with evidence instead of guessing.

1. Browser DevTools: console and network
2. Reading Apps Script errors and stack traces
3. The blank screen: causes and fixes
4. Apps Script traps: syntax, dates and time zones
5. Writing an evidence-based debugging prompt
6. Testing every role before you ship

Your app on a real domain, shared safely, with a clean handover.

1. Sharing, permissions and the Google verification screen
2. Your own domain with Firebase Hosting
3. The doPost API: a hosted front end talking to Apps Script
4. Saving every version to GitHub
5. Handover: demo data, user guide and training video

Four complete business apps for your portfolio.

1. Project 1 · Attendance system: QR check-in and location
2. Project 1 · Attendance system: reports and working hours
3. Project 2 · Inventory and POS: products, stock and sales
4. Project 2 · Inventory and POS: receipts and low-stock alerts
5. Project 3 · Invoicing: customers, invoices and payments
6. Project 3 · Invoicing: PDF, email and statements
7. Project 4 · CRM on Firebase: leads, pipeline stages and follow-ups
8. Project 4 · CRM on Firebase: live dashboard, reminders and team roles

Turn these skills into paid client work.

1. Where clients for Sheets apps come from
2. Turning a client brief into requirements
3. Quoting, milestones and advance payments
4. Support, changes and long-term clients
5. Building a portfolio and selling templates