← Back to Home
Architecture Documentation
Technical architecture guide for the MR BunkManager application
System Architecture Overview
┌─────────────────────────────────────────────────────────────────────┐
│ MR BUNKMANAGER │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ PRESENTATION LAYER │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────────┐ │ │
│ │ │ Screens │ │ Components │ │ Navigation (Expo) │ │ │
│ │ │ (app/*) │ │ (src/*) │ │ Router v4 │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ STATE LAYER (Zustand) │ │
│ │ ┌──────────┐ ┌───────────┐ ┌───────────┐ ┌──────────────┐ │ │
│ │ │authStore │ │notesStore │ │groupsStore│ │ themeStore │ │ │
│ │ └──────────┘ └───────────┘ └───────────┘ └──────────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ SERVICE LAYER │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────┐ │ │
│ │ │ authService │ │firestoreServ │ │ notificationService │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────────────┘ │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────┐ │ │
│ │ │ notesService │ │ groupsService│ │ socialService │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ DATA LAYER │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ ┌──────────────┐ │ │
│ │ │ Firebase Auth │ │ Firestore DB │ │ AsyncStorage │ │ │
│ │ └─────────────────┘ └─────────────────┘ └──────────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────┘Layer Architecture
Detailed breakdown of each application layer
1. Presentation Layer
Navigation Structure (Expo Router v4)
app/
├── _layout.tsx # Root layout with providers
├── index.tsx # Entry point (redirects based on auth)
├── (auth)/ # Auth group (unauthenticated)
│ ├── login.tsx
│ ├── signup.tsx
│ └── forgot-password.tsx
├── (onboarding)/ # Onboarding flow
│ └── index.tsx
├── (tabs)/ # Main app tabs (authenticated)
│ ├── index.tsx # Dashboard
│ ├── timetable.tsx
│ ├── attendance.tsx
│ ├── groups.tsx
│ └── profile.tsx
├── note/[id].tsx # Dynamic route: Note detail
├── user/[id].tsx # Dynamic route: User profile
└── create-note.tsxComponent Hierarchy
Components/
├── Layout Components
│ ├── NetworkMonitor # Global connectivity status
│ └── ThemeSwitcher # Theme toggle button
│
├── Feature Components
│ ├── ChatBot # AI assistant modal
│ ├── VoiceBot # Voice interaction
│ └── DonutChart # Attendance visualization
│
├── Notes Components
│ ├── NoteCard # Note display card
│ ├── NoteEditor # Rich content editor
│ └── CommentSection # Comments UI
│
└── Groups Components
├── GroupCard # Group preview card
├── GroupChatScreen # Full chat interface
└── MessageBubble # Chat message2. State Management Layer
Zustand-based state management with clear separation of concerns.
Store Responsibilities
| Store | State | Purpose |
|---|---|---|
authStore | user, isLoading | Firebase auth state, session |
notesStore | interactions | Note like/save state cache |
groupsStore | currentGroup, messages | Active group chat state |
themeStore | theme | Light/dark/system theme |
networkStore | isConnected | Connectivity monitoring |
State Flow
User Action → Store Action → Service Call → Firebase → Store Update → UI Re-render
│ │
└────────────── Optimistic Update (UI) ◄─────────────────┘3. Service Layer
Authentication Services
authService.ts
├── signUp(email, password, displayName)
├── signIn(email, password)
├── signInWithGoogle()
├── signOut()
└── resetPassword(email)Data Services
firestoreService.ts
├── User Profile CRUD
├── Timetable Management
└── Subject Attendance Tracking
notesService.ts
├── Note CRUD Operations
├── Feed Generation
└── Search & Filtering
groupsService.ts
├── Group CRUD
├── Member Management
└── Real-time MessagingInfrastructure Services
cacheService.ts
├── AsyncStorage Operations
└── User Data Cache
offlineQueueService.ts
├── Queue Operations
└── Process When Online
notificationService.ts
├── Register Push Token
└── Handle Incoming4. Data Layer - Firestore Schema
Firestore Database
│
├── users/{userId}
│ ├── displayName, email, photoURL
│ ├── college, course, department
│ ├── minimumAttendance (default: 75)
│ │
│ ├── timetable/{entryId}
│ │ └── day, subject, startTime, endTime, type
│ │
│ ├── subjects/{subjectId}
│ │ └── name, attended, total, type
│ │
│ └── following/{followingId}
│
├── notes/{noteId}
│ ├── title, description, content
│ ├── contentType, fileUrl, fileName
│ ├── authorId, authorName
│ ├── likesCount, commentsCount, savesCount
│ │
│ ├── likes/{userId}
│ ├── comments/{commentId}
│ └── saves/{userId}
│
├── groups/{groupId}
│ ├── name, description, category
│ ├── isPrivate, memberCount
│ │
│ ├── members/{userId}
│ └── messages/{messageId}
│
└── pushTokens/{tokenId}
└── userId, token, tokenType, activeOffline Architecture
Offline-first strategy with queue-based sync
Offline-First Strategy
┌─────────────────────────────────────────────────────────────────┐
│ OFFLINE-FIRST ARCHITECTURE │
├─────────────────────────────────────────────────────────────────┤
│ │
│ User Action Network Status │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────────────────────────────────┐ │
│ │ NETWORK STORE │ │
│ │ isConnected: boolean │ │
│ └──────────────────┬───────────────────────┘ │
│ │ │
│ ┌────────────┴────────────┐ │
│ ▼ ▼ │
│ ┌───────────┐ ┌───────────────┐ │
│ │ ONLINE │ │ OFFLINE │ │
│ └─────┬─────┘ └───────┬───────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌───────────────┐ ┌─────────────────┐ │
│ │ Execute Now │ │ Queue Operation │ │
│ │ Firestore/API │ │ AsyncStorage │ │
│ └───────────────┘ └────────┬────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ When Online: │ │
│ │ Process Queue │ │
│ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────┘Timetable Management
Two methods: Manual entry and OCR extraction
Timetable Setup Options
USER CHOOSES METHOD
│
┌───────────────┴───────────────┐
▼ ▼
┌───────────────┐ ┌───────────────┐
│ MANUAL ENTRY │ │ OCR EXTRACTION│
│ (Default) │ │ (Optional) │
└───────┬───────┘ └───────┬───────┘
│ │
▼ ▼
Add entries one Upload timetable
by one with UI: image (camera/
- Day selection gallery/file)
- Subject name │
- Time picker ▼
- Type (lecture/ ┌─────────────────┐
lab/tutorial) │ OCR SERVICE │
- Faculty (opt) │ (OCR.space) │
- Room (opt) └────────┬────────┘
│ │
│ ▼
│ Extract raw text
│ from image
│ │
│ ▼
│ ┌─────────────────┐
│ │ AI PARSER │
│ │ (Groq/Llama 4) │
│ └────────┬────────┘
│ │
│ ▼
│ Parse to structured
│ TimetableEntry[]
│ │
└──────────────┬───────────────┘
▼
┌─────────────────────────────────┐
│ MANUAL ENTRY SCREEN │
│ (Review, Edit, Add, Delete) │
│ - All entries editable │
│ - Add more entries manually │
│ - Delete unwanted entries │
└───────────────┬─────────────────┘
│
▼
┌─────────────────────────────────┐
│ SAVE TO FIRESTORE │
│ - Save timetable entries │
│ - Auto-create subjects for │
│ attendance tracking │
└─────────────────────────────────┘OCR Extraction Pipeline (Detail)
User selects image (camera/gallery)
│
▼
┌─────────────────────────────────────────┐
│ OCR SERVICE │
│ ┌─────────────────────────────────┐ │
│ │ Platform Detection │ │
│ │ - Web: File input (base64) │ │
│ │ - Native: ImagePicker + File │ │
│ └─────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────┐ │
│ │ Image Processing │ │
│ │ - Convert to base64 │ │
│ │ - Detect MIME type │ │
│ │ - Format for API │ │
│ └─────────────────────────────────┘ │
└──────────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ OCR.space API │
│ Engine: 2 (advanced recognition) │
│ Table Detection: Enabled │
│ Auto Scale: Enabled │
│ Formats: JPG, PNG, GIF, WebP, BMP, TIFF│
└──────────────────┬──────────────────────┘
│
▼
Extracted Text (OCR Result)
│
▼
┌─────────────────────────────────────────┐
│ TIMETABLE PARSER SERVICE │
│ ┌─────────────────────────────────┐ │
│ │ AI Prompt Engineering │ │
│ │ - System prompt for parsing │ │
│ │ - JSON output format │ │
│ │ - Day normalization (Mon→Monday)│ │
│ │ - Time normalization (HH:MM) │ │
│ └─────────────────────────────────┘ │
└──────────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ GROQ API │
│ Model: Llama 4 Maverick │
│ Temperature: 0.1 (structured output) │
│ Max Tokens: 4096 │
└──────────────────┬──────────────────────┘
│
▼
Structured TimetableEntry[]
{day, subject, subjectCode,
startTime, endTime, type,
faculty, room}
│
▼
┌─────────────────────────────────────────┐
│ MANUAL ENTRY SCREEN │
│ - Pre-filled with extracted entries │
│ - User can review and edit │
│ - Add more entries manually │
│ - Delete incorrect entries │
│ - Save when satisfied │
└─────────────────────────────────────────┘AI Integration
Chat service architecture with Groq API
AI Chat Architecture
User Input (text/voice/image)
│
▼
┌─────────────────────────────────────────┐
│ CHAT SERVICE │
│ ┌─────────────────────────────────┐ │
│ │ Build Context │ │
│ │ - Attendance data │ │
│ │ - Timetable info │ │
│ │ - User preferences │ │
│ └─────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────┐ │
│ │ Format Message │ │
│ │ - System prompt (BunkBot) │ │
│ │ - Context injection │ │
│ └─────────────────────────────────┘ │
└──────────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ GROQ API │
│ Model: Llama 4 Maverick (scout) │
│ Temperature: 0.7 | Max Tokens: 2048 │
└──────────────────┬──────────────────────┘
│
▼
Response to UserPush Notification Flow
FCM-based notification system
Notification Triggers
| Trigger | Endpoint | Schedule |
|---|---|---|
| Daily Reminder | /send-daily-reminders | 8:00 AM IST |
| Class Reminder (30min) | /send-class-reminders | Before class |
| Class Reminder (10min) | /send-class-reminders | Before class |
| Group Activity | /notify-group-members | Real-time |
| New Note | /notify-followers | On upload |
File Upload Architecture
Storage strategy for different content types
Storage Strategy
| Content Type | Storage | Reason |
|---|---|---|
| Note PDFs | Google Drive | Permanent, large files |
| Note Images | Google Drive | Permanent, thumbnails |
| Profile Photos | Catbox.moe | Simple, CORS-friendly |
| Group Photos | Catbox.moe | Simple, fast |
| Chat Files | Google Drive | Permanent, trackable |
Security Architecture
Authentication and authorization patterns
Authentication Flow
Login Screen
│
├──► Email/Password → Firebase signInWithEmailAndPassword
│
└──► Google Sign-In → GoogleSignIn.signIn() → Firebase signInWithCredential
│
▼
Firebase Auth State Observer
│
▼
authStore.setUser(user)
│
▼
┌─────────────────────────────────────────┐
│ Route Guard (_layout.tsx) │
│ │
│ if (!user) → redirect to /login │
│ if (!emailVerified) → /email-verify │
│ if (!onboarded) → /onboarding │
│ else → /(tabs) │
└─────────────────────────────────────────┘Directory Structure
Project organization reference
MR_BunkManager/
├── app/ # Expo Router screens
├── src/
│ ├── hooks/ # Custom React hooks
│ │ └── useResponsive.ts # Responsive design utilities
│ ├── components/ # Reusable UI components
│ │ ├── notes/ # Notes feature components
│ │ └── groups/ # Groups feature components
│ ├── screens/ # Complex screen implementations
│ ├── services/ # Business logic & API
│ ├── store/ # Zustand state stores
│ ├── types/ # TypeScript definitions
│ └── config/ # App configuration
├── backend/ # Express notification server
│ ├── src/
│ ├── api/ # Vercel serverless
│ └── cron-service/
├── assets/ # Static assets
├── docs/ # Documentation
└── app.config.js # Expo configurationDevelopment Team
The people who built MR BunkManager
Mithun Gowda B
Core Developer
Main Dev, Full-Stack, Architecture
Nevil Dsouza
Team Leader
Core Development, Testing
Naren V
Developer
UI/UX Design
Manas Habbu
Developer
Documentation, Design
Manasvi R
Developer
Documentation, Presentation
Lavanya
Developer
Documentation, Presentation
Version Information
Current technology versions
React Native
0.81
Expo SDK
54
Zustand
5.x
Expo Router
4.x
RN Paper
5.x
Node.js
18+