{"id":13588697,"url":"https://github.com/functionland/fx-fotos","last_synced_at":"2025-04-14T11:19:32.848Z","repository":{"id":37106411,"uuid":"328214167","full_name":"functionland/fx-fotos","owner":"functionland","description":"\"Fx Fotos\" is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like \"box\", \"Dfinity\", \"Filecoin\" and \"Crust\".","archived":false,"fork":false,"pushed_at":"2024-11-10T05:57:47.000Z","size":292333,"stargazers_count":680,"open_issues_count":75,"forks_count":75,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-04-14T11:19:22.835Z","etag":null,"topics":["android-app","apple-photos","blockchain-technology","decentralized-application","expo","expo-cli","gallery","gallery-app","google-photos","image-viewer","ios-app","ipfs","javascript-applications","photo","photos","react-native","react-native-app","reactnative","typescript-react","videos"],"latest_commit_sha":null,"homepage":"https://t.me/functionland","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/functionland.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-09T17:54:44.000Z","updated_at":"2025-03-19T23:51:01.000Z","dependencies_parsed_at":"2024-03-25T20:33:23.753Z","dependency_job_id":"948e2147-754f-471a-9ae6-04f43e0eb241","html_url":"https://github.com/functionland/fx-fotos","commit_stats":{"total_commits":844,"total_committers":13,"mean_commits":64.92307692307692,"dds":0.5995260663507109,"last_synced_commit":"ff99562591b8382cc39190b6fcd1058ebbe36594"},"previous_names":["functionland/photos"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/functionland%2Ffx-fotos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/functionland%2Ffx-fotos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/functionland%2Ffx-fotos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/functionland%2Ffx-fotos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/functionland","download_url":"https://codeload.github.com/functionland/fx-fotos/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248868767,"owners_count":21174758,"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","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":["android-app","apple-photos","blockchain-technology","decentralized-application","expo","expo-cli","gallery","gallery-app","google-photos","image-viewer","ios-app","ipfs","javascript-applications","photo","photos","react-native","react-native-app","reactnative","typescript-react","videos"],"created_at":"2024-08-01T15:06:52.374Z","updated_at":"2025-04-14T11:19:32.828Z","avatar_url":"https://github.com/functionland.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Others"],"sub_categories":[],"readme":"![](https://github.com/functionland/photos/blob/main/assets/images/logo.png)\n\n**Google Play:** https://play.google.com/store/apps/details?id=land.fx.fotos\n\n**App Store:** https://apps.apple.com/ca/app/fx-fotos/id1640008383\n\n# Latest 2 Updates\n\n**November-10-2022:** Application was approved by App store.\n\n**October-26-2022:** Application was approved by Google Play.\n\n\n# Discussions\n\nThis project is part of a bigger project to disrupt the subscription industry.\nJoin the channel and group to participate in the discussion.\nhttps://t.me/functionland\n\n# BOX Photos development guide\n\nNote: Project is still in alpha phase and not production ready. We aim to\nrelease beta version by end of August 2021.\n\n[Intro Blog](https://dev.to/fx/google-photos-open-source-alternative-with-react-native-80c)\n\n## Project Description\n\n![](https://github.com/functionland/photos/blob/main_old/assets/images/Photos-integrations.png)\n\nPhotos is a react-native(expo)+typescript application to replace Google\nPhotos/Apple Photos, and give freedom in hosting your photos on any platform,\neither centralized servers like Amazon or Microsoft, or decentralized solutions\nsuch as Dfinity or IPFS-based \"box\". It is optimized for decentralized\nplatforms, but is backend agnostic. Your can easily use it with the IPFS-based\n\"box\" or \"Dfinity\" to host your files and photos with the same experience you\nhad using Google Photos, however, with full privacy.\n\n## Why?\n\nDecentralized Backend(IPFS, Dfinity, Crust, Filecoin) + Photos = Awesome!\n\nGoogle photos is a great service with great benefits however, there are major\nsetbacks with it:\n\n1- It is not free anymore\n\n2- It does not respect our privacy\n\nWe developed this project with the smoothness and features of popular gallery\napps in mind to enable anyone jump on and start using it right away.\nFurthermore, it can connect to \"box\", a decentralized node based on **IPFS** and\n**Crust**, or **Dfinity** instead of centralized cloud networks. We are also\nworking on enabling it to connect to centralized cloud networks, however, with\nweb3.0 privacy, do you still want to use web2.0? more information is available\nin the box repo.\n\n## demo\n\nCheckout full demo video at: https://youtu.be/wDxaC1HF5PQ\n\nOr checkout individual features below:\n\n- Pinch/zoom to switch between modes:\n- ![https://youtu.be/ioK0zkew--w](https://github.com/functionland/photos/blob/main_old/assets/demo/BOX_Photos_pinchzoom_to_switch_between_modes.gif)\n- Opening a single image in fullscreen mode:\n- ![https://youtu.be/jPVqxPoNH9M](https://github.com/functionland/photos/blob/main_old/assets/demo/Single%20image%20modal%20scroll%20and%20zoom.gif)\n- Header animation(hide on scroll down and show on scroll up):\n- ![https://youtu.be/qjfiukClHqQ](https://github.com/functionland/photos/blob/main_old/assets/demo/Header%20hide%20on%20scroll%20down%20and%20show%20on%20scroll%20up.gif)\n- Highlights/Story:\n- ![https://youtu.be/yEOnDtT3cX0](https://github.com/functionland/photos/blob/main_old/assets/demo/Highlights.gif)\n- Fast scroll/Thumb scroll feature:\n- ![https://youtu.be/QsDzOGyj9cM](https://github.com/functionland/photos/blob/main_old/assets/demo/Fast%20scroll_thumb%20scroll.gif))\n- Image Edit feature\n- ![https://youtu.be/SDyCdE_aUso](https://github.com/functionland/photos/blob/0c52d3a1d73f3bfe045d939eef324270b1cd7f73/assets/demo/imageEdit.gif)\n- Image select feature\n- ![https://youtu.be/3IXIoBLGY_4](https://github.com/functionland/photos/blob/cc57d970dc50598c7949831a64c5d8647a85ef81/assets/demo/select.gif)\n\n## table of content\n\n- [Install npm, git and expo-cli](#Installing-Pre-requisites)\n- [Clone the project](#clone-the-project)\n- [Install requirements](#install-requirements)\n- [Run](#run)\n- [Packages](#packages)\n- [Pages structure](#pages-structure)\n- [Components structure](#components-structure)\n- [Components description](#components-descripction)\n\n### Installing Pre-requisites\n\n- NodeJS/NPM\n\nThis application needs NodeJs to run. You can download and install NodeJs from\nthe below link on any platform if you do not have it already.\n[Download NodeJS](https://nodejs.org/en/)\n\nyou can also check if you already have NodeJs installed by running the following\ntwo commands in terminal window\n\n```\nnode -v\nnpm -v\n```\n\n- Git: You can use git to easily download the files from github into your\n  computer (or if you prefer you can download files manually from this github\n  repository in step 1 of cloning the application)\n  [Download Git-Scm](https://git-scm.com/downloads)\n\nyou can also check whether you already have NodeJs installed by running the\nfollowing command in terminal window\n\n```\ngit --version\n```\n\nNow you need to install expo-cli. If you want to know more about expo check\ntheir website. [Expo](https://docs.expo.io/)\n\n```\nnpm install --global expo-cli\n```\n\nOptional: if you prefer yarn you can install yarn.\n\n```\nnpm install --global yarn\n```\n\n## Clone the project\n\nYou can clone the project by running the command below to your terminal:\n\nfor https cloning:\n\n```bash\ngit clone https://github.com/functionland/photos.git\n```\n\n```bash\ncd photos\n```\n\n## EPERM issue\n\nOn Windows, you may get an EPERM error when running. This is a known bug and you may need to follow workaround 2 in this article: https://bitstopixels.blogspot.com/2017/04/react-native-windows-10-eperm-operation.html\n\n## Install requirements\n\nYou can install dependencies with `yarn` by running:\n\n```bash\nyarn\n```\n\n## Run\n\nThen you can start the debug server using the command below:\n\n```bash\nyarn run start\n```\n\nAt last but not least, for installing the debug version and starting the\ndevelopment process on the emulator or a real device you should run commands\nbelow: \u003cbr\u003e\n\n#### IOS\n\n```\nyarn run ios\n```\n\n#### Android\n\n```\nyarn run android\n```\n\n## Packages\n\n- We used **expo Media Library** for getting the data from user's phone.\n- We used a modified version of **expo-video-player** to play videos. It is\n  available in our repo.\n- We used a modified version of **react-native-stories-view** for the story\n  style view on top of gallery, which is available in our repo.\n- We used **RecyclerListView** from FlipKart, as the scrollView for the photos.\n- We used **react-native-reanimated** for animations.\n- We used **Recoil** for state management.\n- We used **react-native-gesture-handler** for gesture handling.\n- We used **@react-navigation/bottom-tabs** and **@react-navigation/native** for\n  navigation.\n\n## Pages structure\n\nFor now we have two pages in the app:\n\n- The HomePage that is the main page for showing the media files.\n- The PermissionError page that is the page we show when there is permission\n  error from user's phone.\n- We are working on creating the \"Library\" and \"Search\" pages.\n\n## Components structure\n\n```├── app.json\n├── App.tsx\n├── babel.config.js\n├── components\n│   ├── AllPhotos.tsx\n│   ├── FloatingFilters.tsx\n│   ├── Header.tsx\n│   ├── Highlights.tsx\n│   ├── Media.tsx\n│   ├── PhotosChunk.tsx\n│   ├── PhotosContainer.tsx\n│   ├── PinchZoom.tsx\n│   ├── RenderPhotos.tsx\n│   ├── SingleMedia.tsx\n│   ├── StoryHolder.tsx\n│   └── ThumbScroll.tsx\n├── index.js\n\n├── metro.config.js\n├── navigation\n│   └── AppNavigation.tsx\n├── package.json\n├── package-lock.json\n├── pages\n│   ├── HomePage.tsx\n│   └── PermissionError.tsx\n├── store\n│   ├── actions.ts\n│   ├── reducer.ts\n│   └── store.ts\n├── __tests__\n│   └── App-test.tsx\n├── tsconfig.json\n├── types\n│   └── interfaces.ts\n└── utils\n    ├── APICalls.ts\n    ├── constants.ts\n    ├── functions.ts\n    ├── LayoutUtil.ts\n    └── permissions.ts\n\n```\n\n## Components description\n\nThe components are as what follows:\n\n### PhotosContainer\n\n**Purpose:** this component is responsible for getting the photos and videos\nfrom storage and feed the AllPhotos component with storage photos.\n\n- this component include the PinchZoom component and AllPhotos component\n\n### PinchZoom\n\n**Purpose:** This component is responsible for all the animations for switching\nbetween different column modes, and actions we want to do when animations done.\n\n- This component is wrapped around the AllPhotos component.\n- The component uses GestureHandlers to respond to pinch and pan gestures\n\n### AllPhotos\n\n**Purpose:** This component is wrapped the three RenderPhotos components and is\nresponsible for lazy load the photos and feed the render photos with proper\ndata.\n\n- The three different kind of RenderPhotos is the month view with 4 columns of\n  photos, the day view with 3 columns of photos and the day view with 2 columns\n  of photos.\n\n### RenderPhotos\n\n**Purpose:** This component includes with the number of PhotosChunk components\nand one FlatList that wrapped all the PhotosChunk components that we want to\nshow the user. It is responsible to show the Photos(main) page of hte\napplication.\n\n- This component also renders date headers.\n- It uses RecyclerListView to show the scrollable grid of photos\n\n### PhotosChunk:\n\n**Purpose:** This component is responsible to show each block/Thumbnails in the\ngallery.\n\n### FloatingFilters:\n\n**Purpose:** This component is responsible to show and position the \"year\"\ntitles when fingers are placed on thumb scroll.\n\n### Header:\n\n**Purpose:** This component is responsible to show the top header of the\napplication. It is used in the top Navigationbar.\n\n### Highlights:\n\n**Purpose:** This component is responsible to show the story thumbnails and text\non top of Photos page.\n\n### Media:\n\n**Purpose:** This component is responsible to display photo or video when opened\nin full page. It is the component used in SingleMedia.\n\n### SingleMedia:\n\n**Purpose:** This component is responsible to show modal with the content when\nimage or video is opened in full page. It uses Media to show the photo or video.\n\n### StoryHolder:\n\n**Purpose:** This component is responsible to show each story/highlight in full\nscreen when thumbnail is clicked on.\n\n### ThumbScroll:\n\n**Purpose:** This component is responsible to show the thumb scroll icon in the\nright of screen when scrolling.\n\n## Components diagram\n\n```mermaid\ngraph TD;\nApp --\u003e AppNavigation --\u003e PermissionError\nAppNavigation --\u003e Header\nAppNavigation --\u003e HomePage --\u003e PhotosContainer --\u003e AllPhotos --\u003e RenderPhotos\nPhotosContainer --\u003e PinchZoom\nAllPhotos --\u003e StoryHolder --\u003e StoryContainer --\u003e StoryComponent\nAllPhotos --\u003e SingleMedia --\u003e Media\nRenderPhotos --\u003e PhotosChunk \u0026 ThumbScroll \u0026 Highlights \u0026 FloatingFilters\n```\n\n## How to contribute?\n\nJust pick any issue from the issues tab or create your own and do a pull\nrequest! Please use yarn instead of npm if you are a contributor to be aligned\nwith other contributors. You can ask questions and get in touch with the rest of\ncontributors and community in the\n[Discussion here](https://github.com/functionland/photos/discussions/58) **We\nappreciate all the help you can do, even if it is renaming one variable to a\nbetter name.**\n\n## Road map\n\n- [x] Pinch/zoom to switch between 3 modes\n- [x] Open each image/video in a Single image modal and scroll between images\n- [x] Show highlights\n- [x] Fast scroll/thumb scroll\n- [x] Select and unselect each image to delete/edit/share\n- [x] Connect with Dfinity\n- [x] Auto-upload photos to backend\n- [x] Automatic Migration tool from Google Photos\n- [x] Connect with BOX (as a self-owned IPFS solution)\n- [ ] Connect with Filecoin\n- [ ] Connect with AWS\n- [ ] Search page to search by date/tags\n- [ ] Library page to show images by folder/Album\n- [ ] AI features to do on-device analysis for face recognition/object\n      recognition\n\n## Related Publications and News\n\n- https://filecoin.io/blog/posts/249k-for-17-projects-from-dorahacks-filecoin-grant-hackathon/\n- https://dev.to/fx/google-photos-open-source-alternative-with-react-native-80c\n- https://hackernoon.com/were-building-an-open-source-google-photos-alternative-with-react-native-zw4537pa\n- https://crustnetwork.medium.com/crust-network-and-functionland-partnering-up-on-web3-developer-tools-309e41074fc5\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunctionland%2Ffx-fotos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunctionland%2Ffx-fotos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunctionland%2Ffx-fotos/lists"}