July-27-2021: The work for adding dfinity backend is being done in "dfinityupload" branch
July-10-2021: Integrated Dfinity's Internet Identity
Note: Project is still in alpha phase and not production ready. We aim to release beta version by end of August 2021.
BOX Photos is a react-native(expo)+typescript application to replace Google Photos/Apple Photos, and give freedom in hosting your photos on any platform, either centralized servers like Amazon or Microsoft, or decentralized solutions like IPFS-based "box". It is optimized for decentralized IPFS platforms. Your can easily use it with a "box" to host your files and photos with the same experience you had using Google Photos, however, with full privacy.
IPFS + BOX Photos = Awesome!
Google photos is a great service with great benefits however, there are major setbacks with it:
1- It is not free anymore
2- It does not respect our privacy
We developed this project with the smoothness and features of popular gallery apps in mind to enable anyone jump on and start using it right away. Furthermore, it can connect to "box", a decentralized node based on IPFS instead of centralized cloud networks. We are also working on enabling it to connect to centralized cloud networks, however, with web3.0 privacy, do you still want to use web2.0? more information at the BOX website
Checkout full demo video at: https://youtu.be/wDxaC1HF5PQ
Or checkout individual features below:
This application needs NodeJs to run. You can download and install NodeJs from the below link on any platform if you do not have it already. Download NodeJS
you can also check if you already have NodeJs installed by running the following two commands in terminal window
node -v npm -v
you can also check whether you already have NodeJs installed by running the following command in terminal window
Now you need to install expo-cli. If you want to know more about expo check their website. Expo
npm install --global expo-cli
Optional: if you prefer yarn you can install yarn.
npm install --global yarn
You can clone the project by running the command below to your terminal:
for https cloning:
git clone https://github.com/functionland/photos.git
you can install the requirements with command:
or (do not use both)
You can run the application in expo-cli using the below command. It gives you a QR code which you can use on your phone(in expo GO application) to open and test the application on your phone(both iOS and Android). Or you can build the android or iOS installation files.
For now we have two pages in the app:
├── App.tsx ├── babel.config.js ├── components │ ├── AllPhotos.tsx │ ├── FloatingFilters.tsx │ ├── Header.tsx │ ├── Highlights.tsx │ ├── Media.tsx │ ├── PhotosChunk.tsx │ ├── PhotosContainer.tsx │ ├── PinchZoom.tsx │ ├── RenderPhotos.tsx │ ├── SingleMedia.tsx │ ├── StoryHolder.tsx │ └── ThumbScroll.tsx ├── index.js ├── metro.config.js ├── navigation │ └── AppNavigation.tsx ├── package.json ├── package-lock.json ├── pages │ ├── HomePage.tsx │ └── PermissionError.tsx ├── store │ ├── actions.ts │ ├── reducer.ts │ └── store.ts ├── __tests__ │ └── App-test.tsx ├── tsconfig.json ├── types │ └── interfaces.ts └── utils ├── APICalls.ts ├── constants.ts ├── functions.ts ├── LayoutUtil.ts └── permissions.ts
The components are as what follows:
Purpose: this component is responsible for getting the photos and videos from storage and feed the AllPhotos component with storage photos.
Purpose: This component is responsible for all the animations for switching between different column modes, and actions we want to do when animations done.
Purpose: This component is wrapped the three RenderPhotos components and is responsible for lazy load the photos and feed the render photos with proper data.
Purpose: This component includes with the number of PhotosChunk components and one FlatList that wrapped all the PhotosChunk components that we want to show the user. It is responsible to show the Photos(main) page of hte application.
Purpose: This component is responsible to show each block/Thumbnails in the gallery.
Purpose: This component is responsible to show and position the "year" titles when fingers are placed on thumb scroll.
Purpose: This component is responsible to show the top header of the application. It is used in the top Navigationbar.
Purpose: This component is responsible to show the story thumbnails and text on top of Photos page.
Purpose: This component is responsible to display photo or video when opened in full page. It is the component used in SingleMedia.
Purpose: This component is responsible to show modal with the content when image or video is opened in full page. It uses Media to show the photo or video.
Purpose: This component is responsible to show each story/highlight in full screen when thumbnail is clicked on.
Purpose: This component is responsible to show the thumb scroll icon in the right of screen when scrolling.
graph TD; App --> AppNavigation --> PermissionError AppNavigation --> Header AppNavigation --> HomePage --> PhotosContainer --> AllPhotos --> RenderPhotos PhotosContainer --> PinchZoom AllPhotos --> StoryHolder --> StoryContainer --> StoryComponent AllPhotos --> SingleMedia --> Media RenderPhotos --> PhotosChunk & ThumbScroll & Highlights & FloatingFilters
Just pick any issue from the issues tab or create your own and do a pull request! Please use yarn instead of npm if you are a contributor to be aligned with other contributors. You can ask questions and get in touch with the rest of contributors and community in the Discussion here We appreciate all the help you can do, even if it is renaming one variable to a better name.