The WePod Photo Web Application enables you to get back control over your photos that are stored in your very own Solid pod. The project is the result of a partnership between IDLab and Open Summer of Code (OSOC21), an initiative of Open Knowledge Belgium.
A user can log in with their Inrupt.com account. When the user is logged in, the application logic is handled in the Home.js file.
When the user is logged in, they see an overview (grid view) of all the pictures that are stored in the /images folder of their Solid pod. The implementation of the grid view itself can be found in GridView.js.
For now, the "Albums" button leads to a page with some dummy text (see Albums.js). In the future the app could be expanded so that a Solid pod "collection" (or folder if you will) corresponds to an album. Each collection would then have a metadata.json file (read more on this in the Metadata section).
On the profile page (Profile.js), the user can find back their profile details such as their WebId, Pod URL, e-mail and the role of their Solid pod profile. This profile is read-only and can be edited by using the inrupt.com pod browser.
The contacts page (Contacts.js) shows a list of the user's contacts. When the user clicks one of their contacts, the app redirects them to the contact details page of that contact (ContactDetails.js).
The contacts are read-only in the WePod application, adding a contact can be done through Inrupt 's pod browser.
A user can add new images to the root folder of their Solid pod by clicking/tapping the three vertical dots in the top right corner of the app. The code for this functionality can be found in FileUpload.js. For each file that is being uploaded, a new entry in the metadata.json file is created.
Images are stored in the /images folder in the pod, even though this can be easily modified in the constants of the app.
In addition to uploading images, the user can also delete images by first clicking the three vertical dots mentioned previously. Then, clicking the modify button
will toggle the file selection mode. When the mode is enabled, a little trash-can icon appears in the menu-bar, and files can be clicked on to be selected or un-selected.
Clicking the trash-can icon will then delete all the selected files on the POD and update the associated metadata file.
The metadata.json file is an index file that contains entries of everything (e.g. folders or files) that is stored the /images folder of the Solid pod. Every entry of the array has the as described in the metadata.json example. The /images folder and the metadata.json file are automatically generated by the app, and will be created once again if accidentally removed from the POD. Again, their names can easily be changed in the constants file of the app.
This file could in the future be expanded to also contain the GPS coordinates where a picture was taken for example, and then be queried on all the pictures taken in country X.
Another idea for this file might be to keep track of which files correspond to an album, and having one metadata.json file per collection/album/folder.
metadata.json
[
{
"url": "https://pod.inrupt.com/<username>/path/to/image.jpg",
"shortName": "<image.jpg>",
"isFolder": false,
"imageUrl": "blob:https://url/to/blob",
"date": "<YYYY-MM-DDTHH:mm:ss.sssZ>"
},
{
"url": "https://pod.inrupt.com/<username>/path/to/image2.jpg",
"shortName": "<image2.jpg>",
"isFolder": false,
"imageUrl": "blob:https://url/to/blob2",
"date": "<YYYY-MM-DDTHH:mm:ss.sssZ>"
}
]Make sure that Git is installed.
Clone the project:
git clone https://github.com/osoc21/Reclaim-your-data.git
Note: The project was made in ReactJs with the Inrupt JavaScript client libraries. However, you might also want to check out Inrupt's Solid React SDK.
Node.js and NPM are needed to run the application locally. Make sure to have an updated version installed (Node v10 or greater, npm v6 or greater).
Once these are installed, change directory to the project directory Reclaim your data.
Here, execute:
npm install
and wait for the command to finish.
To run the application locally, execute:
npm start
This launches the application in your default web browser at the following address: localhost:3000.
Once launched, you can log in with your pod provider (only Inrupt.com is supported at this time) and access your pod.
Note: The page will automatically reload if you make edits in the code and print any lint errors to the console.
In order to deploy the application to GitHub Pages, we need a homepage entry in the package.json file like so:
{
"name": "reclaim_your_data",
"version": "0.1.0",
"private": true,
"homepage": "https://wepod.osoc.be/"
}This homepage has to be the URL on which you will deploy the application.
Install the gh-pages package:
npm install gh-pages
Add the following scripts in package.json:
{
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
}The predeploy script will be run automatically before the deploy script.
Deploy the application:
npm run deploy
Every time in the future that you make a change, simply run the deploy script.
Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch.
Optional:
You can configure a custom domain for GitHub Pages by adding a CNAME file in the public directory.
CNAME
example.com
P.s.: if you're looking to deploy to other platforms, please follow the Create React App deployment guide.