{"id":31581276,"url":"https://github.com/devdhruvx/mygallery","last_synced_at":"2026-05-06T02:34:02.052Z","repository":{"id":317703488,"uuid":"1068477685","full_name":"DevDhruvX/MyGallery","owner":"DevDhruvX","description":"Modern React Native photo organization app with advanced folder management, cloud backup, and cross-platform support. Built with Expo and Supabase.","archived":false,"fork":false,"pushed_at":"2025-10-02T14:32:26.000Z","size":1653,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-02T15:24:54.934Z","etag":null,"topics":["cloud-backup","cloud-backup-software","cross-platform","expo","photo-organization","react-native","supabase"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevDhruvX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-02T12:53:20.000Z","updated_at":"2025-10-02T14:32:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"62cb99c9-009f-4796-9ee1-03bfdd300799","html_url":"https://github.com/DevDhruvX/MyGallery","commit_stats":null,"previous_names":["devdhruvx/mygallery"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/DevDhruvX/MyGallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevDhruvX%2FMyGallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevDhruvX%2FMyGallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevDhruvX%2FMyGallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevDhruvX%2FMyGallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevDhruvX","download_url":"https://codeload.github.com/DevDhruvX/MyGallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevDhruvX%2FMyGallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278526240,"owners_count":26001326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloud-backup","cloud-backup-software","cross-platform","expo","photo-organization","react-native","supabase"],"created_at":"2025-10-05T21:55:45.269Z","updated_at":"2025-10-05T21:55:50.258Z","avatar_url":"https://github.com/DevDhruvX.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MyGallery - Advanced Photo Organization App\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/icon.png?v=2.0\" alt=\"MyGallery Logo\" width=\"120\" height=\"120\"\u003e\n  \n  [![React Native](https://img.shields.io/badge/React%20Native-0.73-blue.svg)](https://reactnative.dev/)\n  [![Expo](https://img.shields.io/badge/Expo-SDK%2050-black.svg)](https://expo.io/)\n  [![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)\n  [![Supabase](https://img.shields.io/badge/Supabase-Backend-green.svg)](https://supabase.com/)\n  \n  [![GitHub issues](https://img.shields.io/github/issues/DevDhruvX/MyGallery)](https://github.com/DevDhruvX/MyGallery/issues)\n  [![GitHub stars](https://img.shields.io/github/stars/DevDhruvX/MyGallery)](https://github.com/DevDhruvX/MyGallery/stargazers)\n  [![GitHub license](https://img.shields.io/github/license/DevDhruvX/MyGallery)](https://github.com/DevDhruvX/MyGallery/blob/main/LICENSE)\n  [![GitHub release](https://img.shields.io/github/v/release/DevDhruvX/MyGallery)](https://github.com/DevDhruvX/MyGallery/releases)\n\u003c/div\u003e\n\nA modern, feature-rich React Native gallery app with advanced photo organization, cloud backup, and seamless cross-platform experience. Built with Expo and Supabase for production-ready deployment.\n\n## 🌟 Key Features\n\n### 📸 **Photo Management**\n\n- **Camera Integration**: Take photos directly within the app\n- **Gallery Import**: Import existing photos from device gallery\n- **Smart Organization**: Intuitive photo management and viewing\n- **Full-Screen Viewer**: Immersive photo viewing experience\n\n### 📁 **Advanced Folder System**\n\n- **Custom Folders**: Create folders with custom names, colors, and icons\n- **Drag \u0026 Drop**: Move photos between folders effortlessly\n- **Smart Filtering**: View photos by folder or show all unorganized photos\n- **Visual Hierarchy**: Color-coded folders with meaningful icons\n\n### ☁️ **Cloud Backup \u0026 Sync**\n\n- **Hybrid Storage**: Local-first with cloud backup using Supabase\n- **Real-time Sync**: Automatic synchronization across devices\n- **Offline Support**: Full functionality without internet connection\n- **Recycle Bin**: Restore accidentally deleted photos\n\n### 🎨 **Modern User Experience**\n\n- **Responsive Design**: Optimized for all screen sizes\n- **Dark/Light Themes**: Automatic theme switching\n- **Smooth Animations**: 60fps performance throughout\n- **Search Functionality**: Find photos by captions instantly\n\n### 🔐 **Security \u0026 Privacy**\n\n- **User Authentication**: Secure login with Supabase Auth\n- **Data Encryption**: Secure data transmission and storage\n- **Privacy Controls**: Your photos, your control\n- **Environment-based Configuration**: Secure API key management\n\n## 🚀 Quick Start Guide\n\n### Prerequisites\n\n- **Node.js** (v18 or higher)\n- **Expo CLI**: `npm install -g @expo/cli`\n- **Supabase Account**: [Create free account](https://supabase.com)\n- **Development Environment**: iOS Simulator, Android Emulator, or Expo Go app\n\n### Installation\n\n1. **Clone the repository**\n\n```bash\ngit clone https://github.com/yourusername/MyGallery.git\ncd MyGallery\n```\n\n2. **Install dependencies**\n\n```bash\nnpm install\n```\n\n3. **Environment Setup**\n\n```bash\ncp .env.example .env\n```\n\n4. **Configure Supabase**\n   - Create a new project in [Supabase Dashboard](https://app.supabase.com)\n   - Copy your project URL and anon key to `.env`:\n\n```env\nEXPO_PUBLIC_SUPABASE_URL=your_supabase_project_url\nEXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key\nEXPO_PUBLIC_ENV=development\n```\n\n5. **Database Setup**\n\n   - Go to SQL Editor in Supabase Dashboard\n   - Create the required tables (see [Database Schema](#database-schema))\n\n6. **Start Development Server**\n\n```bash\nnpx expo start\n```\n\n## 📱 Platform-Specific Setup\n\n### 🤖 Android\n\n```bash\n# Install Android Studio and set up emulator\n# Then run:\nnpx expo start --android\n```\n\n### 🍎 iOS\n\n```bash\n# Install Xcode (macOS only)\n# Then run:\nnpx expo start --ios\n```\n\n### 🌐 Web\n\n```bash\nnpx expo start --web\n```\n\n### 📲 Physical Device\n\n1. Install **Expo Go** from App Store/Play Store\n2. Scan QR code from `npx expo start`\n\n## 🏗️ Architecture \u0026 Design Choices\n\n### **Tech Stack Rationale**\n\n| Technology              | Why Chosen                                          | Trade-offs                          |\n| ----------------------- | --------------------------------------------------- | ----------------------------------- |\n| **React Native + Expo** | Rapid development, cross-platform, great ecosystem  | Limited native modules, bundle size |\n| **Supabase**            | Full-stack solution, real-time features, PostgreSQL | Vendor lock-in, learning curve      |\n| **TypeScript**          | Type safety, better developer experience            | Additional compilation step         |\n| **React Navigation**    | Industry standard, flexible routing                 | Complex deep linking setup          |\n| **AsyncStorage**        | Simple, fast local storage                          | Limited storage capacity            |\n\n### **Design Patterns**\n\n#### **Hybrid Storage Strategy**\n\n```\nLocal Storage (Primary) → Cloud Backup (Secondary)\n- Immediate response for users\n- Offline-first functionality\n- Background sync when online\n```\n\n#### **Component Architecture**\n\n```\nScreens/ → Business Logic\nComponents/ → Reusable UI Elements\nUtils/ → Shared Services\nContext/ → Global State Management\n```\n\n#### **Folder System Design**\n\n- **Local-first**: Folders stored locally for instant access\n- **Visual Customization**: 10 colors × 15 icons = 150 combinations\n- **Smart Organization**: \"All Photos\" view for unorganized content\n\n## ⚖️ Trade-offs \u0026 Limitations\n\n### **Current Limitations**\n\n1. **Storage Limits**: Dependent on device storage and Supabase limits\n2. **Offline Sync**: Large files may delay sync when back online\n3. **Platform Differences**: Some features may vary between iOS/Android\n4. **File Formats**: Currently supports common image formats (JPG, PNG)\n\n### **Design Trade-offs**\n\n1. **Performance vs Features**: Chose smooth UX over advanced editing features\n2. **Simplicity vs Customization**: Limited folder customization for ease of use\n3. **Security vs Convenience**: Automatic login vs manual authentication\n4. **Bundle Size vs Functionality**: Included essential features only\n\n## 🎁 Bonus Features Implemented\n\n### ✨ **Advanced Features**\n\n- [x] **Smart Folder Management**: Visual folder creation with colors/icons\n- [x] **Hybrid Cloud Sync**: Best of local and cloud storage\n- [x] **Responsive UI**: Works perfectly on tablets and phones\n- [x] **Theme System**: Automatic dark/light mode switching\n- [x] **Search \u0026 Filter**: Real-time photo search capabilities\n- [x] **Recycle Bin**: Photo recovery system\n- [x] **Production Ready**: Environment-based configuration\n\n### 🚀 **Performance Optimizations**\n\n- [x] **Image Caching**: Efficient memory management\n- [x] **Lazy Loading**: Load images on demand\n- [x] **Background Sync**: Non-blocking cloud operations\n- [x] **Smooth Animations**: 60fps throughout the app\n\n## 📱 Build for Production\n\n### **EAS Build (Recommended)**\n\n```bash\n# Install EAS CLI\nnpm install -g @expo/eas-cli\n\n# Login to Expo\neas login\n\n# Configure project\neas build:configure\n\n# Build for Android\neas build --platform android\n\n# Build for iOS\neas build --platform ios\n```\n\n### **Classic Build**\n\n```bash\n# Android APK\nnpx expo build:android --type apk\n\n# iOS Archive\nnpx expo build:ios\n\n# Web Bundle\nnpx expo export:web\n```\n\n## 🗄️ Database Schema\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view SQL schema\u003c/summary\u003e\n\n```sql\n-- Gallery Items Table\nCREATE TABLE gallery_items (\n  id BIGSERIAL PRIMARY KEY,\n  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,\n  image_url TEXT NOT NULL,\n  caption TEXT,\n  folder_id TEXT,\n  is_deleted_locally BOOLEAN DEFAULT FALSE,\n  is_permanently_deleted BOOLEAN DEFAULT FALSE,\n  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),\n  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()\n);\n\n-- Row Level Security\nALTER TABLE gallery_items ENABLE ROW LEVEL SECURITY;\n\nCREATE POLICY \"Users can only access their own items\" ON gallery_items\n  FOR ALL USING (auth.uid() = user_id);\n```\n\n\u003c/details\u003e\n\n## 🧪 Testing\n\n```bash\n# Run tests\nnpm test\n\n# Type checking\nnpx tsc --noEmit\n\n# Linting\nnpx eslint . --ext .ts,.tsx\n```\n\n## 📂 Project Structure\n\n```\nMyGallery/\n├── app/                      # App router (Expo Router)\n├── assets/                   # Images, fonts, static files\n├── components/               # Reusable UI components\n│   ├── CreateFolderModal.tsx\n│   ├── FolderGrid.tsx\n│   └── ...\n├── constants/                # App constants, themes\n├── context/                  # React Context providers\n├── navigation/               # Navigation configuration\n├── screens/                  # App screens\n│   ├── ModernGalleryScreen.tsx\n│   ├── ProfileScreen.tsx\n│   └── ...\n├── utils/                    # Utilities, services\n│   ├── folderStorage.ts\n│   ├── backupStorageService.ts\n│   └── ...\n├── .env.example             # Environment template\n├── app.json                 # Expo configuration\n└── package.json             # Dependencies\n```\n\n## 🎯 Assignment Submission - AbleSpace\n\nThis project was developed as part of the **React Native Developer Assignment** for AbleSpace. Below are the specific requirements addressed:\n\n### 📋 **Assignment Requirements Compliance**\n\n#### ✅ **Authentication**\n\n- **Google Login**: Implemented with expo-auth-session (configuration ready)\n- **Cross-platform**: Works seamlessly on iOS, Android, and Web\n- **Profile Display**: User profile picture and name displayed in gallery header\n- **Session Management**: Persistent authentication with Supabase\n\n#### ✅ **Image Gallery**\n\n- **Native Image Picker**: Camera and gallery support on all platforms\n- **Grid Layout**: Responsive image gallery with captions\n- **Cross-platform Media**: Consistent experience across iOS, Android, Web\n- **Real-time Updates**: Live gallery updates without refresh\n\n#### ✅ **Voice Captions**\n\n- **Voice Input**: Web Speech API for web, simulation for mobile\n- **Text Fallback**: Manual text input always available\n- **Cross-platform**: Voice features work on iOS, Android, and Web\n- **Text-to-Speech**: Caption playback using expo-speech\n\n#### ✅ **Data Persistence**\n\n- **Local Storage**: AsyncStorage for offline functionality\n- **Cloud Sync**: Supabase backend integration\n- **Hybrid Approach**: Local-first with cloud backup\n- **Offline Support**: Full functionality without internet\n\n#### ✅ **Sharing \u0026 Cross-platform**\n\n- **Native Share**: Platform-specific sharing (expo-sharing)\n- **Web Compatibility**: Navigator.share API with clipboard fallback\n- **Caption Sharing**: Share images with captions\n- **Universal Support**: Works on mobile and web platforms\n\n#### ✅ **UI \u0026 UX**\n\n- **Modern Design**: Clean, minimal interface with smooth animations\n- **Responsive Layout**: Adapts to all screen sizes and orientations\n- **React Navigation**: Smooth tab and stack navigation\n- **Dark Mode**: Complete theme switching functionality\n\n### 🏗️ **Design Choices**\n\n#### **Technology Stack**\n\n- **React Native + Expo**: Chosen for true cross-platform development with native performance\n- **TypeScript**: Ensures type safety and better developer experience\n- **Supabase**: Provides authentication, database, and storage in one platform\n- **expo-image-picker**: Native camera/gallery access across platforms\n- **expo-sharing**: Platform-specific sharing capabilities\n\n#### **Architecture Decisions**\n\n- **Hybrid Storage**: Local-first approach ensures offline functionality with cloud backup\n- **Component Modularity**: Reusable components for better maintainability\n- **Theme System**: Centralized theming for consistent UI across light/dark modes\n- **Responsive Design**: Flexible layouts that work on phones, tablets, and web\n\n#### **UI/UX Philosophy**\n\n- **User-First**: Prioritized ease of use and intuitive navigation\n- **Performance**: 60fps animations and optimized image loading\n- **Accessibility**: Proper contrast ratios and touch targets\n- **Modern Aesthetics**: Clean design following current mobile UI trends\n\n### ⚖️ **Trade-offs \u0026 Limitations**\n\n#### **Current Trade-offs**\n\n- **Voice Input**: Mobile uses simulation instead of real speech recognition (can be upgraded with @react-native-voice/voice)\n- **Google OAuth**: Requires manual setup of OAuth client IDs for production use\n- **File Size**: Large images may impact performance on older devices\n- **Network Dependency**: Some features require internet for cloud sync\n\n#### **Technical Limitations**\n\n- **Platform Differences**: iOS and Android have slight variations in image picker behavior\n- **Web Constraints**: Browser limitations for certain native features\n- **Storage Limits**: Local storage constraints on mobile devices\n- **Supabase Quotas**: Free tier limitations for storage and API calls\n\n#### **Known Issues**\n\n- Large image uploads may timeout on slow connections\n- iOS simulator performance may differ from real device\n- Voice input simulation could be replaced with real implementation\n\n### 🎁 **Bonus Features Implemented**\n\nBeyond the assignment requirements, this app includes several bonus features:\n\n#### ✅ **Advanced Organization**\n\n- **Folder System**: Create custom folders with names, colors, and icons\n- **Drag \u0026 Drop**: Move photos between folders effortlessly\n- **Smart Filtering**: Filter by folder or show unorganized photos\n\n#### ✅ **Enhanced User Experience**\n\n- **Dark Mode Toggle**: Complete light/dark theme switching\n- **Search Functionality**: Find photos by captions instantly\n- **Full-Screen Viewer**: Immersive photo viewing with zoom\n- **Smooth Animations**: Professional-grade transitions and feedback\n\n#### ✅ **Robust Storage System**\n\n- **Offline Support**: Full functionality without internet connection\n- **Cloud Backup**: Automatic synchronization with Supabase\n- **Recycle Bin**: Restore accidentally deleted photos\n- **Data Recovery**: Backup and restore functionality\n\n#### ✅ **Production Features**\n\n- **Environment Configuration**: Separate dev/prod configurations\n- **Error Handling**: Comprehensive error management\n- **Security**: Secure API key management and data encryption\n- **Performance**: Optimized loading and caching\n\n### 🚀 **Live Demo**\n\n- **GitHub Repository**: [https://github.com/DevDhruvX/MyGallery](https://github.com/DevDhruvX/MyGallery)\n- **Web Demo**: Deploy to Vercel/Netlify for live testing\n- **Cross-platform**: Test on iOS Simulator, Android Emulator, and Web Browser\n\n### 📱 **Platform Testing**\n\nThis app has been tested and verified on:\n\n- ✅ **iOS**: iPhone simulators and real devices\n- ✅ **Android**: Android emulators and real devices\n- ✅ **Web**: Chrome, Safari, Firefox browsers\n- ✅ **Responsive**: Various screen sizes and orientations\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our contributing guidelines:\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature-name`\n3. Commit changes: `git commit -m 'Add feature'`\n4. Push to branch: `git push origin feature-name`\n5. Submit a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🐛 Known Issues \u0026 Roadmap\n\n### **Known Issues**\n\n- Large image uploads may timeout on slow connections\n- iOS simulator may have performance differences from real device\n\n### **Future Enhancements**\n\n- [ ] Video support\n- [ ] Advanced photo editing\n- [ ] Social sharing features\n- [ ] AI-powered photo tagging\n- [ ] Multi-device real-time sync\n\n## 📞 Support\n\n- **Issues**: [GitHub Issues](https://github.com/yourusername/MyGallery/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/yourusername/MyGallery/discussions)\n- **Documentation**: [Wiki](https://github.com/yourusername/MyGallery/wiki)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eMade with ❤️ using React Native and Expo\u003c/strong\u003e\n  \u003cbr\u003e\n  \u003cem\u003eA modern solution for photo organization and cloud backup\u003c/em\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevdhruvx%2Fmygallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevdhruvx%2Fmygallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevdhruvx%2Fmygallery/lists"}