Building a decentralized Photos app on Blockstack with React

Introduction

I’m back with a new interesting project for you all to follow!

I have decided to jump on the #100DaysOfCode challenge (http://www.100daysofcode.com/) with the purpose to learn a few new stuff by working about an hour a day on it for 100 days and see where it ends up.

The plan is to build a photos app, much like Google Photos or Apple’s iCloud Photos etc.
The difference will be that my photo app will store the users photos in a decentralized blockchain called Blockstack! The app itself will of course be open source and it will be downloadable to your computer for starters and in the future perhaps on your mobile devices. Then the only way your photos can be hacked is if someone hacks your computer or figures out your Blockstack private key and you get the benefit of no “evil” company storing and analyzing or whatever they do with them..

The app will be built in ReactJS and Ionic Framework 4, with ElectronJS to turn the web app into a runnable desktop application.
I picked these technologies since I have not worked that much with them (except Ionic) and it will be interesting to learn more about them during these 100 days of coding.

I have already started the project 3 days ago and in that time I have managed to get a React starter project up and running and playing nice with the Ionic components and I created a working sign in process with the BlockstackJS library.
So let’s take a quick look at how I did that technically.

Day 0: Getting React project up and running with Ionic 4.

I started with installing the ‘create-react-app’ npm package and created the boilerplate project with that.

npm install -g create-react-app
create-react-app react-photos

The first thing I noticed was that an React starter project is much smaller and cleaner compared to the Angular starter project.

Next thing I did was editing the file ‘public/index.html’ updating the title and including the Ionic JavaScript library. I first tried using it from the npm package but did not make it work yet, might try to fix that later on.


<title>React Photos</title>
<script src="https://unpkg.com/@ionic/core@4.0.0-alpha.7/dist/ionic.js"></script>

view raw

header.html

hosted with ❤ by GitHub

I added the @ionic/core as a dev dependency so that I will get auto complete in VSCode when I start writing ‘<ion-…’.

Then I tested updating the ‘src/App.js’ render() template with some Ionic elements, like this:


<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>React Photos</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>Welcome to React Photos!</h1>
</ion-content>
</ion-app>

view raw

ion-react.html

hosted with ❤ by GitHub

It looked alright when I fired it up with the ‘npm start’ command. Oh Yeah!

You can have a look at my progress on the project on the GitHub link below and stay tuned for my post about Day 1 (second day) of this journey.

Project at Github: https://github.com/nerdic-coder/block-photos

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: