create account

How to contribute to utopian V2, the complete tutorial by gregory.latinier

View this thread on: hive.blogpeakd.comecency.com
· @gregory.latinier · (edited)
$283.55
How to contribute to utopian V2, the complete tutorial
Hi everyone!
I suppose our SteemFest 3 presentation piqued your curiosity. You've also discovered that we plan to release the V2 in April 2019. So how about you help us release it faster?

![Utopian updates](https://steemitimages.com/0x0/https://i.imgur.com/8uSV4cR.jpg)

# What does Utopian need?

## Am I suited for this?
If you want to help us we are looking for some experienced developers to do some tasks posted as issues on GitHub. If you're are beginner it will probably be a little difficult for you.

## What is the technology stack?
- **Database:** MongoDB
- **Backend:** NodeJS 10, Mongoose, HapiJS, Joi, Ramda, mocha, chai
- **Frontend:** NodeJS 10, Quasar Framework, jest
- **Monorepo with lerna, packages manager with yarn**
- **Development process:** Kanban, Git flow, Jira, Pull Requests

Are you up to the task? Let's find out what you can do to help us.

# Give me some work!

## Finding my first task
The first thing you need to do is check the [public project board](https://github.com/orgs/utopian-io/projects/4). Any task that is in the TODO column and not assigned is ready for development and waiting for someone. Check the different user stories available, look at the acceptance criteria and the design.
If no one does them, someone from the core team will work on them at some point but they are designed to be done by you, utopian supporters/contributors/followers. Once your work is done, you'll be able to write an article about it and get a nice utopian upvote! Take the time to read the [LICENSE](https://github.com/utopian-io/v2.utopian.io/blob/develop/LICENSE) file too ;)
You've picked one? 

## Getting approved
There is one last final step before you can actually start developing, it's being picked by me :p.
Go to the [utopian discord](https://discord.gg/CA9pqES) and DM @gregory[mod] with the following message:

> Hi, I would like to start working on the task GITHUB_ISSUE_LINK.
> A little bit about me: a short description of your experience as a developer
> and your github repo if you have one, it's really better if you have one

You will then join a dedicated discord channel and meet your fellow collaborators. **Please read the pinned messages of the channel before doing anything else.** There are a few guidelines to help you code and how the project is structured.
@icaro, @nothingismagick and me will be here to help you if you ever need it.

I'm doing this final selection step to be sure I won't spend my time doing PR reviews.

Let's get to work!

# Setup the development environment as an external contributor

I'm going to walk you through all the necessary steps so you can start working on your task.

## Getting the code
You need to install first:
- [nodejs >= 10](https://nodejs.org/)
- [lerna](https://github.com/lerna/lerna)
 - [yarn](https://yarnpkg.com)

Make sure everything is OK

```
gregory@Laptop:~$ node --version
v10.13.0
gregory@Laptop:~$ lerna --version
3.4.0
gregory@Laptop:~$ yarn --version
1.9.4
gregory@Laptop:~$ git --version
git version 2.17.1
```

Then fork the repository [v2.utopian.io](https://github.com/utopian-io/v2.utopian.io) and clone your repo into your favorite development folder.
Now if everything is have been done correctly simply run inside the root directory

```
lerna bootstrap
```

This will install every packages. Almost done? Well there are still a few things to setup.

NB: if for some reason something were wrong, you can run `yarn` separately in the api, auth and client package. 

## Configuring external services
### The API

copy the .env.example file to .env

#### The database

The first thing you need to do is setup a mongo database. You can either install one locally or use an external provider like [mLab](https://mlab.com/). This is what we are using for the development of the website. That way, all of us use the same database and we know if some features that change the models break each other code. Once you're done, you can update the .env. You should have something like this:

```
MONGODB_URI=mongodb://user:password@hostname:port/database
```

#### The GitHub authentication app

For now, utopian use GitHub as a social provider to create an account or to sign in. We will add LinkedIn and Google later too but that's another story.
Go to your [GitHub Developper account](https://github.com/settings/developers) and click on **Register a new application**. Fill the form and get your APP ID and SECRET.
- **Application name:** Utopian Personal OAuth
- **Homepage URL:** http://localhost:8081
- **Application description:** Utopian Personal OAuth
- **Authorization callback URL:** http://localhost:8081

Once you're done, you can update the .env. You should have something like this:

```
GITHUB_CLIENT_ID=92d8b2d965f0d0e7b5ba
GITHUB_CLIENT_SECRET=utopianisawesome
```

#### JWT Secret

You can type whatever you want. The application use JWT token to manage the authentication inside the app. This secret will be used to sign and verify the access and refresh tokens. But for development purposes, no need to have a strong key.

#### SteemConnect App & Encryption Key

For now, most of the tasks (and probably all them) won't need the Steem blockchain. So it's not needed for the development. But if you want to have the complete setup, you can create your SteemConnect App. This App will be used in utopian to publish content on the blockchain but not exactly like most applications are currently doing it. Further explanations will be provided later in our FAQ. 

OK you're all set for the API, let's check the Auth app.

### The Auth app

Utopian will have many services in the future and we want one central point for authentication. This app will also allow newcomers to create a free steem account. @icaro is working actively on it!

Copy the .env.example file to .env like for the API project.
You can leave the default values and add your GitHub OAuth App ID.
You should have something like this:

```
GITHUB_CLIENT_ID=92d8b2d965f0d0e7b5ba
```

### The Client App

Everything you need have been previously created. You just need to add the different keys. Your file should then look like this if you've left the default settings: 

```
UTOPIAN_API='"http://localhost:5000"'
GITHUB_CLIENT_ID='"92d8b2d965f0d0e7b5ba"'
STEEMCONNECT_CLIENT_ID='""' // Not needed for now
UTOPIAN_DOMAIN='"http://localhost:8080"'
AUTH_DOMAIN='"http://localhost:8081"'
```
Notice the single and double quotes.

And that's it for now. This tutorial might evolve as development progresses because we will need more external services.

## What's next?

As announced during the SteemFest 3, I will publish a series of tasks on GitHub on Tuesday, Nov 13th. Those tasks will concern the article module. While you will be working on this, the core team will continue its work on fundamental features needed in the app. The more we progress, the more we will be able to allow you to contribute on all the other modules.

If you want a head start, don't wait for Tuesday and start reading the [amazing documentation of the Quasar framework](https://quasar-framework.org/guide/). 

Good luck to all of you, and I hope you help us release Utopian V2 before April 2019 :D!
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 272 others
properties (23)
authorgregory.latinier
permlinkhow-to-contribute-to-utopian-v2-the-complete-tutorial
categoryutopian-io
json_metadata{"tags":["utopian-io","tutorial","development","contributors"],"users":["gregory","icaro","nothingismagick"],"links":["https://github.com/orgs/utopian-io/projects/4","https://github.com/utopian-io/v2.utopian.io/blob/develop/LICENSE","https://discord.gg/CA9pqES","https://nodejs.org/","https://github.com/lerna/lerna","https://yarnpkg.com","https://github.com/utopian-io/v2.utopian.io","https://mlab.com/","https://github.com/settings/developers","http://localhost:8081","https://quasar-framework.org/guide/"],"app":"steemit/0.1","format":"markdown","image":["https://steemitimages.com/0x0/https://i.imgur.com/8uSV4cR.jpg"]}
created2018-11-08 21:34:30
last_update2018-11-23 15:00:27
depth0
children4
last_payout2018-11-15 21:34:30
cashout_time1969-12-31 23:59:59
total_payout_value213.302 HBD
curator_payout_value70.249 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7,172
author_reputation34,278,323,818,021
root_title"How to contribute to utopian V2, the complete tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id74,939,025
net_rshares271,949,252,127,239
author_curate_reward""
vote details (336)
@elear ·
$0.02
Thanks Gregory. I wanted to add that Utopian will offer interesting bounties to incentivise contributors from our community and beyond to join the development of the platform. I am 100% sure with the support of the community Utopian is going to be here sooner than what we anticipated.

Great job!
👍  ,
properties (23)
authorelear
permlinkre-gregorylatinier-how-to-contribute-to-utopian-v2-the-complete-tutorial-20181110t195037205z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-11-10 19:50:39
last_update2018-11-10 19:50:39
depth1
children0
last_payout2018-11-17 19:50:39
cashout_time1969-12-31 23:59:59
total_payout_value0.018 HBD
curator_payout_value0.005 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length297
author_reputation59,749,428,580,040
root_title"How to contribute to utopian V2, the complete tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,052,562
net_rshares30,507,805,053
author_curate_reward""
vote details (2)
@jmiller05 ·
$0.15
re-gregorylatinier-how-to-contribute-to-utopian-v2-the-complete-tutorial-20181112t152107666z
This post has received a 20.00% upvote from @jmiller05! 
👍  , , ,
properties (23)
authorjmiller05
permlinkre-gregorylatinier-how-to-contribute-to-utopian-v2-the-complete-tutorial-20181112t152107666z
categoryutopian-io
json_metadata{"app":"communitybot/1.1.0"}
created2018-11-12 15:21:09
last_update2018-11-12 15:21:09
depth1
children1
last_payout2018-11-19 15:21:09
cashout_time1969-12-31 23:59:59
total_payout_value0.114 HBD
curator_payout_value0.036 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length57
author_reputation623,662,337,100
root_title"How to contribute to utopian V2, the complete tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,157,839
net_rshares174,225,551,156
author_curate_reward""
vote details (4)
@oceanwhale ·
re-jmiller05-re-gregorylatinier-how-to-contribute-to-utopian-v2-the-complete-tutorial-20181112t152107666z-20181115t230241535z
You got a 4.21% upvote from @oceanwhale courtesy of @sweetpee! Earn 100% earning payout by delegating SP to <a href="/@oceanwhale">@oceanwhale</a>. Visit <a title="This link will take you away from steemit.com" href="http://www.oceanwhalebot.com" rel="noopener">www.OceanWhaleBot.com</a> for details!
properties (22)
authoroceanwhale
permlinkre-jmiller05-re-gregorylatinier-how-to-contribute-to-utopian-v2-the-complete-tutorial-20181112t152107666z-20181115t230241535z
categoryutopian-io
json_metadata{"app":"postpromoter/2.1.1"}
created2018-11-15 23:02:42
last_update2018-11-15 23:02:42
depth2
children0
last_payout2018-11-22 23:02:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length302
author_reputation3,006,463,059,607
root_title"How to contribute to utopian V2, the complete tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,359,931
net_rshares0
@knowledges ·
Cool stuff. Honestly, I really want to see the project website up and running before April. I'll share this across many dev channels that I know.
👍  
properties (23)
authorknowledges
permlinkre-gregorylatinier-how-to-contribute-to-utopian-v2-the-complete-tutorial-20181110t204908631z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-11-10 20:49:12
last_update2018-11-10 20:49:12
depth1
children0
last_payout2018-11-17 20:49:12
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length145
author_reputation98,021,227,622,369
root_title"How to contribute to utopian V2, the complete tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,054,703
net_rshares2,732,628,980
author_curate_reward""
vote details (1)