ReelsApp Development Guide

#FlutterFlow Project 1. flutterflow.com par login/signup karein → Create New Project 2. Name: ReelsApp → Template: Blank → Create 3. Left menu → Settings → General ◦ App Name: ReelsApp ◦ Orientation: Portrait ✅ ◦ Platform: Android + iOS 4. Save karein #Firebase Connect (Videos store karne ke liye) 1. firebase.google.com → Free account banayein → Create Project 2. Project name: ReelsApp-Firebase → Enable Google Analytics: No → Create 3. Left sidebar → Build → Storage → Get Started → Next → Done 4. Rules tab par jaake ye paste karein → Publish: rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if true; } } } 5. Left sidebar → Project Settings → Niche "Your apps" → Android icon par click ◦ Android package name daalein: com.yourname.reelsapp → Register App 6. google-services.json download karein → FlutterFlow par: Settings → Integrations → Firebase → Upload JSON → Paste karein → Connect ✅

#Layout Structure - Video Player (Full) - Right Side Buttons (Like, Comment, Save, Share) - Bottom Info (Username, Caption, Music) - Bottom Nav Bar (Home, Upload, Me) #Har Element ki Settings • Video Player: Center mein rakhein → Width: 100%, Height: 100% → Fit: Cover • Right Side Buttons: Column widget mein rakhein, spacing: 20 → Align: Right + Center • Bottom Info: Username + Caption + Music icon → Align: Bottom Left, Padding: 16 • Bottom Nav Bar: Fixed at bottom → 3 Icons: Home (active), Add/Upload, Profile • Background color: #000000 ✅

#Layout - Video Preview - Choose Video Button - Add Text Field (Caption) - UPLOAD Button #Actions • Choose Video Button: Action → Pick Video → Source: Gallery • Upload Button: Action → Upload File → Destination: Firebase Storage → Path: videos/ → After upload: Show Snackbar "Uploaded ✅" + Navigate to Home

#Layout - Profile Image - Username & @handle - Stats (12 Videos • 2.4K Likes) - Grid: My Uploaded Videos

1. Bottom Navigation ke Upload icon par → Navigate to Upload Screen 2. Bottom Navigation ke Profile icon par → Navigate to Profile Screen 3. Top right Run button → Web preview mein test karein ✅ #Pehle Milestones (Isse Puri Karein Pehle) □ FlutterFlow account banaya + project created □ Firebase project + storage se