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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<title>React Photos</title> | |
<script src="https://unpkg.com/@ionic/core@4.0.0-alpha.7/dist/ionic.js"></script> |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
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
Leave a Reply