🎯 About This Workshop

Ready to build apps that update across all devices instantly? This hands-on workshop teaches you how to create real-time, collaborative applications using Flutter and Firebase Firestore the exact stack that powers production-grade hackathon MVPs.

You'll build a fully functional "Idea Board" from scratch a live collaborative app where everyone's submissions appear in real-time across all connected devices. Experience the magic of Firebase Streams firsthand as the entire room syncs together!

This workshop bridges the gap between static UI mockups and full-stack architecture. You'll go from designing responsive frontends to implementing live, asynchronous backends all in one session. Walk away with a production-ready boilerplate you can use for your KitaHack 2026 project.

👥 Who Should Attend?

This workshop is perfect for:

1. KitaHack 2026 Participants who want to ship MVPs fast with cross-platform capability

2. Students & Developers looking to move beyond static UIs into real-time systems

3. Beginners to Intermediate coders who understand basic programming but want to learn cloud-connected architecture

4. Anyone who wants to build apps that work on mobile AND web from a single codebase!

Prerequisites: A laptop with the following pre-installed:

• Flutter SDK (latest stable version)

• Visual Studio Code or Android Studio

• Git

• Familiarity with Object-Oriented Programming (OOP) concepts — classes, functions, objects

• Basic understanding of programming logic

⚠️ Important: A pre-configured GitHub repository with all dependencies (firebase_core, cloud_firestore, provider) will be provided to eliminate setup delays. Installation guide coming soon!

📚 What You'll Learn

By the end of this workshop, you will:

✅ Understand Flutter's "Everything is a Widget" philosophy and build responsive UIs

✅ Set up Firebase Firestore using the FlutterFire CLI (fast-track config!)

✅ Master real-time data streams — build features that sync across all devices instantly

✅ Implement scalable state management with Provider and ChangeNotifier

✅ Handle async operations (Future, await, Streams) without UI lag

✅ Walk away with a production-ready CRUD boilerplate for your hackathon MVP!

⏱️ Workshop Agenda

• 1:00 PM - 1:35 PM Foundations & UI"Everything is a Widget" concept, Scaffold, AppBar, FloatingActionButton, Widget Tree (Column, Row, ListView.builder)

• 1:35 PM - 2:00 PM Cloud Connection Flutter Fire CLI setup, NoSQL data models (Collections vs Documents), Security rules for dev-mode

• 2:00 PM - 2:45 PM Async & Streams 🛠️Async Dart (Future & await), Real-time Stream Builder with Firestore, Live mass-sync event!

• 2:45 PM - 3:30 PM Responsive Layouts & State 🛠️Provider & Change Notifier, Live Dark Mode toggle demo, App-wide reactivity

• 3:30 PM - 4:00 PM Recap & Q&A Key takeaways, Cheat sheet distribution, Open Q&A

🛠️ Technologies Covered

• Flutter — Cross-platform UI framework

• Firebase Firestore — Real-time NoSQL database

• Provider — State management solution

• Async Dart — Futures, Streams, and await patterns

• FlutterFire CLI — Firebase integration tooling

📱 Stay Connected

Join our WhatsApp group for pre-workshop installation support, reminders, and updates:

👉 https://chat.whatsapp.com/FMiQY2Glc8SAJKEgTueARV

📝 Registration

Spaces for physical attendance are limited! Register now to secure your spot.

Whether you're building a collaborative tool, a social app, or any solution that needs live data sync — this workshop gives you the professional workflow to ship real-time applications under hackathon pressure. Let's build something that syncs!

📧 Questions?

For inquiries, reach out through any of our social media handles or the WhatsApp group!