About the Event: Are you tired of spending hours configuring databases, setting up authentication servers, and dealing with painful deployment pipelines just to get a hackathon project running? It’s time to go serverless.

Join GDG on Campus on Friday, June 19, 2026, for an intensive, 100% hands-on workshop where we will build and deploy a production-ready, full-stack collaborative application from scratch. Instead of watching slides, you will be coding side-by-side with our core team to learn how modern tech companies build real-time web applications.

By utilizing Google's Firebase ecosystem, we will completely bypass traditional backend bottlenecks. You will learn how to implement secure user authentication, stream database changes instantly across multiple screens, and push your final code live to the web.

Event Details:

• Date: Friday, June 19, 2026

• Time: 12:00 PM – 02:30 PM IST

• Format: 100% Hands-on Technical Workshop

What You Will Learn & Build:

• Google Authentication: Implement seamless, secure "Sign-In with Google" functionality using Firebase Auth.

• Real-Time Data Streaming: Connect your frontend to Google Firestore and use live listeners (onSnapshot) to watch data update instantly across users without page refreshes.

• Modern UI Layouts: Structure a clean, high-performance user interface using React and Tailwind CSS.

• Production Cloud Hosting: Deploy your completed full-stack application live to production servers in a single command using Firebase Hosting.

Detailed Technical Agenda

• 12:00 PM - 12:15 PM | Attendance & Environment Setup Check

  • Verifying venue Wi-Fi connectivity, ensuring local environments are ready, and distributing the starter GitHub repository link for the React + Tailwind template.

• 12:15 PM - 12:35 PM | Google Firebase Console Onboarding

  • Guided walkthrough creating a new project in the Firebase Console, initializing a Cloud Firestore database in test mode, and securely configuring local environment keys (.env).

• 12:35 PM - 01:05 PM | Milestone 1: Implementing Google Authentication

  • Hands-on Code-Along: Installing the Firebase SDK dependencies, coding the authentication pipeline to enable "Sign-In with Google" popups, and managing user session states within the UI.

• 01:05 PM - 01:45 PM | Milestone 2: Real-Time Database Architecture

  • Hands-on Code-Along: Structuring a multi-user collaborative layout and coding frontend components to hook into Firestore using live onSnapshot() data listeners to stream instant cross-screen updates.

• 01:45 PM - 02:10 PM | UI Customization & Feature Extension Challenge

  • An interactive 25-minute rapid prototyping session where students apply responsive design constraints with Tailwind CSS and customize the dashboard with unique user indicator elements.

• 02:10 PM - 02:25 PM | Milestone 3: One-Click Production Deployment

  • Installing Firebase CLI tools, running production build commands, and executing firebase deploy live from the terminal to launch the projects on a global CDN.

• 02:25 PM - 02:30 PM | Wrap-up, Swag Distribution & Group Photo

  • Distributing the approved participant badges/stickers, collecting quick feedback, and capturing the final chapter group photograph.

Prerequisites for Attendees

To get the most out of this hands-on session, please bring a fully charged laptop with the following pre-installed:

1. Node.js (LTS Version) & npm

2. Visual Studio Code (or your preferred code editor)

3. A modern web browser and an active Google Account to access the Firebase Console.

No prior backend experience is required—we will guide you through the architecture step-by-step!