Untitled

Overall Navigation Architecture (Recommended Implementation)

Use go_router with StatefulShellRoute.indexedStack for the community shell (preserves scroll position, form state, and tab data when switching tabs or communities).
Global Home is outside the shell.
Header always shows a Community Selector Dropdown (shows current community name + member count + next milestone). Tapping it opens a modal list of joined communities for instant switch.

Bottom Navigation Icons (inside community only):
Feed (book icon) | Groups (users icon) | Channels (megaphone) | Study Hub (folder/book) | Live (mic/video)

Subscription Guard: A Riverpod provider (subscriptionProvider) that wraps interactive elements. Free users see read-only views + gentle paywall overlays.

Total Screens & Breakdown (~38 screens including modals/sheets)

1. Auth & Global Entry (6 screens)

• LoginPage: Phone number input + “Send OTP” button. Clean centered card.
• OtpPage: 6-digit input (auto-focus fields), resend timer, “Verify” button.
• OnboardingPage (optional): Select primary exam (suggests first community), prep stage (early/revision/final — used only for recommendations, not restriction).
• GlobalHomePage (/home or /communities):
  Wireframe: Top AppBar with logo + Notification Bell.
  Main content: Scrollable list of joined community cards (large image/banner of exam, name, “X active today”, “Next quiz in 2 days”, “Join more” button at bottom).
  If zero communities: Big centered illustration + “Browse Communities” + “Start Free Trial”.
  FAB: None.
  Pull-to-refresh to reload list.
• SubscriptionPlansPage: Horizontal plan cards (Monthly ₹599, Quarterly ₹1,677, Half-yearly ₹2,994). Features comparison table. “Start 7-Day Free Trial” prominent. Razorpay checkout button.
• ProfilePage: User info, badges/streaks display, subscription status card, logout.

2. Shared / Reusable Components (build once, use everywhere)

• CommunitySelectorDropdown (AppBar widget): Shows current community; tap → bottom sheet list of joined communities with search.
• SubscriptionOverlay / PaywallSheet: Semi-transparent modal with “Unlock full access” + benefits + Subscribe button. Triggered on any write action for free users.
• OfflineBanner: Top yellow bar “You are offline. Core study features still work.” (toggle in settings).
• MediaUploaderComponent: Bottom sheet for image/video/audio/PDF selection (used in post creation).
• PollQuizComponent (unified): Reusable widget for creating/answering polls, quizzes, daily puzzles. Includes options (A/B/C/D or multiple), timer for puzzles, auto-grade, streak update, badge award.
• PostCard: Title, content preview (text/image/video), vote buttons (up/down with count), comment count, type badge (discussion/poll/quiz).
• CommentThread: Indented nested replies with like/reply.
• BadgeWidget & StreakCounter: Flame/icon + number (displayed in profile and feed).
• FolderTreeView: Expandable list for study materials (Subject → Topic → Sub-topic → Year).
• CalendarWidget: List + mini calendar view (events with color coding).
• LiveSessionCard: Host, agenda, participants, “Join” button.

3. Per-Community Screens (Bottom Navigation Tabs)

Tab 1: Feed (Social + Interactive Content)

• CommunityFeedPage: Infinite scroll list of posts (pull-to-refresh, pagination). Shows mixed user posts + admin posts (identical UI). Includes polls/quizzes/puzzles inline.
  Wireframe: AppBar with community name + selector. Search bar at top. Filter chips (All / Polls / Quizzes / Puzzles). List of PostCards. FAB (paid only): “+ New Post” → opens CreatePostBottomSheet.
• CreatePostBottomSheet: Title, rich text/content, media upload, post type selector (Discussion / Poll/Quiz — reuses PollQuizComponent for options). “Post” button (gated for paid).
• PostDetailPage: Full post content (video/audio player, images), vote section, full threaded comments with reply input. Share button.
• PollQuizAnswerSheet (modal from feed or post): Uses unified PollQuizComponent. Shows result + explanation after submit. Updates streak/badge.

Tab 2: Groups

• GroupsListPage: Horizontal “Main Group” card (prominent) + vertical list of other groups (name, member count, last activity). Join/Leave buttons (paid interaction gated).
  Wireframe: Search bar. “Request New Group” button → opens simple text input + “Post as Poll” (posts a normal poll in Main Group).
• GroupDetailPage (navigated from list): Scoped feed inside the group (same as CommunityFeedPage but filtered by group_id). Uses same PostCard and CreatePostBottomSheet (posts stay inside group).

Tab 3: Channels

• ChannelsHomePage (or split into two sub-tabs via top TabBar):
  • AnnouncementsPage (Telegram-channel style):
    Wireframe: List of admin announcements (channel avatar on left, like Telegram). Each item shows title/content/media, timestamp, reply count. Tap opens threaded view. Users can reply/tag (but cannot create new announcements).
    Supports video/audio/image. Pull-to-refresh. No FAB.
  • CommunityFeedPage (reused or duplicate): Same as Feed tab but focused on channel-style posts (admin + user). Polls/quizzes appear here too.
• AnnouncementDetailPage: Full view with threaded replies (reply input at bottom, tagging supported via @username).

Tab 4: Study Hub

• StudyHubHomePage: Segmented control or top tabs: Roadmap | Calendar | Materials.
  Quick stats: “Your progress 67%”, “Streak: 12 days”.
• OfficialRoadmapPage: Expandable tree/list of topics (Basic → Advanced). Progress bars per module. Tap topic → linked materials or mark complete sheet. Auto-import button for My Roadmap.
• MyRoadmapPage: User-created version. Same tree UI + “Import from Official” + manual add nodes. Progress auto-updates from quizzes/self-mark.
• AdminCalendarView (read-only for users): List of upcoming events (exams, quizzes, live sessions) with dates.
• MyCalendarPage: Personal timetable. Add/edit events (no admin flashcards). Drag-drop or simple form.
• StudyMaterialsLibraryPage: Search bar + filter chips (Subject/Year/Type). Expandable FolderTreeView (Subject > Topic > Sub-topic > Year). Each item shows title, version, “Updated on”, download button (offline cached for paid).
  Tap → MaterialViewerPage (PDF/image/video viewer with version history list).
• ProgressMarkingSheet (modal): List topics, self-mark “Done” — requires linked quiz/puzzle completion validation before allowing mark.

Tab 5: Live

• LiveSessionsListPage: List of ongoing/community sessions (card with name, agenda, host, current participants, “Join” button — gated for paid).
  Wireframe: “No live sessions” illustration when empty. Filter: All / My Joined.
• CreateLiveSessionSheet (paid only): Name, Agenda (text), toggle for screen share. “Start Session” button.
• VoiceRoomPage (existing from your codebase + enhancements): Voice chat UI + prominent “Share Screen” button (uses flutter_webrtc video track). Agenda banner at top. Participant list. Mute/leave controls. Recording indicator if enabled.

Additional / Modal Screens

• NotificationsPage: List of admin-action notifications only (new quiz, roadmap update, live started, etc.). Mark read.
• BadgesStreaksPage (accessible from profile): Grid of earned badges + streak calendar.
• OfflineSettingsPage: Toggle offline mode + manage downloaded materials.
• CommunityBrowsePage (from Global Home): Discover all available communities (search by exam name). Join button (free).

Key Design & UX Guidelines

• Free User Experience: Read everything, browse, join communities/groups. Cannot post, reply in feed/announcements, join live, download materials, mark progress, create polls/quizzes.
• Paid Enhancements: Full interaction + offline downloads + analytics glimpse on Study Hub.
• Telegram Announcements Style: Use ListTile with leading channel avatar, trailing reply count. Threaded replies in detail view with indentation.
• Unified Poll/Quiz Component: One clean widget handling creation (options list, correct answer for quizzes) and answering (radio buttons, submit, result reveal). Daily puzzles auto-use this.
• Offline First: Roadmaps, calendars, downloaded materials, saved posts, and progress marking work fully offline (use Isar/Hive). Show cached data with sync indicator.
• Performance: Lazy loading, pagination on feeds, cached images (cached_network_image).
• Accessibility: Large touch targets, high contrast, readable fonts for study content.

This gives you a complete, focused, non-noob mobile experience that feels like a premium group-study app (Telegram simplicity + structured learning + live collaboration).

Next?
Reply with “Give 2” for the full API structure (endpoints, common utils, libs, middleware for subscription & roles).
Or “Give 3” for the separate Admin + Super Admin web backend/app details.
Or ask for code skeletons (e.g., go_router config, subscription provider, or PollQuizComponent structure).

We can iterate on any screen if you want more detailed widget breakdown. This is now production-ready in specification. Let’s build it strong! 🚀