Live Session Page

🚀 Zipp Learning — The Future of Instant Expertise

“The future of learning isn’t asynchronous. It’s alive.”

🌟 Inspiration

The inspiration of this project is to meet a need for the future of work.
As the professional landscape changes, we want to build a platform that empowers users with instantaneous connections for insight into a field — anytime, anywhere.

We asked ourselves:

What if connecting to an instructor was as easy as catching a ride on Uber?

That idea became Zipp Learning — a platform where students can instantly find certified professionals who have set themselves as LIVE, ready to teach, mentor, or guide.

Zipp Learning bridges the gap between formal education and real-time mentorship, bringing together those who want to learn and those who love to teach.

🧠 What We Learned

Throughout development, our team learned how to unite technical design, user empathy, and scalable architecture into a single, cohesive product.

🧩 How to use Flutter and Hive to simulate an offline-first backend that behaves like a real networked system.
🎨 How to translate Figma wireframes and style guides into production-ready UI components with Material 3 consistency.
⚙️ How to architect flexible code — making it easy to later connect Hive with a true backend (like Supabase or PocketBase).
💡 How to design for immediacy — creating the feeling of “instant connection” even before implementing full real-time APIs.

We didn’t just learn a framework — we learned how to prototype the future of live learning.

🏗️ How We Built It

Zipp Learning was designed as a local-first demo to showcase a real-time learning ecosystem — without relying on the cloud.

🔧 Tech Stack

Layer	Technology	Description
Frontend	Flutter (Material 3)	Responsive, cross-platform UI for Students and Instructors
Local Backend	Hive	Lightweight local database simulating live instructor sessions
UI Theme	Custom “Zipp Theme”	Clean, modern design with brand-consistent colors and shadows
Design Tools	Figma	Original concept art and page prototypes
Planned Backend	Supabase / PocketBase	Real-time multi-user data sync and authentication

🧩 Architecture Overview

lib/
├── models/         # Data models (Instructor, Profession, Role)
├── pages/          # RoleShell, MeetingPage, StudentView, InstructorConsole
├── theme/          # ZippTheme (colors, typography, Material3 overrides)
└── widgets/        # Reusable UI components (buttons, tags, headers, cards)

Students view all instructors currently marked as “LIVE” and in the field/subject specified in search.
Instructors can toggle their LIVE status and host a meeting using the new Meeting Page (inspired by the UI sketch).
Admins can reset and seed demo data locally.

Every update in Hive instantly reflects across the UI through Flutter’s ValueListenableBuilder, simulating the behavior of a live database.

💻 Core Features

🎥 Meeting Interface — a video-style session page with “Go Live,” tags, student list, and control slider.
🔴 Real-Time LIVE Status — instructors toggle availability just like drivers going online in Uber.
🧭 Role-Based Navigation — switch between Student, Instructor, or Admin with persistent local storage.
🎨 Zipp UI Components — custom pill buttons, shadows, and bold typographic style matching our brand.
⚡ Instant Responsiveness — all state changes (LIVE toggles, new tags, filters) update instantly via Hive listeners.

🧩 Challenges We Faced

Building a platform that feels live without a real backend challenged every part of our design thinking.

State Management: simulating network-like reactivity using Hive required careful box listening and widget rebuilding.
Design Consistency: matching Figma’s sketch-style shadows and pill components inside Material 3’s new design system.
Version Differences: adapting to Flutter 3.22’s updates (like CardThemeData) while keeping backward compatibility.
Connecting Supabase: integrating Supabase with Flutter presented significant challenges, particularly around authentication flow, dependency setup, and handling async data streams securely.
User Experience: creating a clear separation between roles and pages while maintaining a consistent brand flow.

These challenges taught us how to prototype interactively, making complex ideas tangible without needing full infrastructure.

💬 Reflection

Zipp Learning started as an idea — to merge the flexibility of gig platforms with the purpose of education.
But it became something more: a vision for an ecosystem where mentorship is as fluid as technology itself.