imported old tutorials repositories into dedicated folder /tutorials

tutorials/devportal-tutorials-js/.eslintrc

+{
+  "parser": "babel-eslint",
+  "extends": ["eslint:recommended"],
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "rules": {
+    "no-unused-vars": 1,
+    "no-redeclare": 1,
+    "no-console": 0
+  }
+}
\ No newline at end of file

tutorials/devportal-tutorials-js/.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# webpack bundles
+bundle.js
+bundle.js.map

tutorials/devportal-tutorials-js/.prettierrc

+{
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "es5"
+}
\ No newline at end of file

tutorials/devportal-tutorials-js/LICENSE

+MIT License
+
+Copyright (c) 2018 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

tutorials/devportal-tutorials-js/README.md

+# devportal-tutorials-js
+
+_Javascript Tutorials for the Developer Portal_
+
+These examples/tutorials will familiarize you with the basics of operating on the steem blockchain.
+
+Each tutorial is located in its own folder, and has a README.md with an outline of the basic concepts
+and operations it intends to teach. Some of the tutorials use the production blockchain, others use a [testnet](#Production-Blockchain-vs.-Testnet).
+
+The tutorials build on each other. It's suggested you go through them in-order.
+
+## Tutorial List
+
+1.  [Blog Feed](tutorials/01_blog_feed) - Pull the list of a user's posts from the blockchain.
+1.  [Steemconnect](tutorials/02_steemconnect) - Getting started with setting up Steemconnect.
+1.  [Client-side signing](tutorials/03_client_signing) - Generate, sign, verify and broadcast transactions via client-side without Steemconnect.
+1.  [Get posts with filters](tutorials/04_get_posts) - How to query for posts with specific filters & tags.
+1.  [Get post details](tutorials/05_get_post_details) - How to get details of each post.
+1.  [Get voters list on content](tutorials/06_get_voters_list_on_post) - How to get voters info on post/comment.
+1.  [Get post comments](tutorials/07_get_post_comments) - How to fetch all comments made on particular post.
+1.  [Get account replies](tutorials/08_get_account_replies) - How to get list of latest comments made on content of particular account.
+1.  [Get account comments](tutorials/09_get_account_comments) - How to get list of comments made by particular account.
+1.  [Submit post](tutorials/10_submit_post) - How properly format and submit post.
+1.  [Submit comment](tutorials/11_submit_comment_reply) - How to submit reply to particular post.
+1.  [Edit content](tutorials/12_edit_content_patching) - How to properly patch edited content and submit edits.
+1.  [Stream blockchain](tutorials/13_stream_blockchain_transactions) - How to stream blockchain transactions as they accepted by network.
+1.  [Reblog/Resteem a post](tutorials/14_reblogging_post) - How to reblog/resteem a post
+1.  [Search accounts](tutorials/15_search_accounts) - Search for user accounts by partial username.
+1.  [Search for tags](tutorials/16_search_tags) - Search for trending tags.
+1.  [Vote on content](tutorials/17_vote_on_content) - Create a weighted up or down vote on a comment/post.
+1.  [Follow a user](tutorials/18_follow_a_user) - Follow and unfollow a user / author.
+1.  [Get follower & following list](tutorials/19_get_follower_and_following_list) - Get the followers of a user/author & the authors that user is following.
+1.  [Account reputation](tutorials/20_account_reputation) - Learn how to interpret account reputation.
+1.  [Transfer STEEM & SBD](tutorials/21_transfer_steem_and_sbd) - Transfer both STEEM and SBD from one account to another.
+1.  [Witness listing & voting](tutorials/22_witness_listing_and_voting) - Create a list of available witnesses as well as vote for and remove your vote for a witness.
+1.  [Claim rewards](tutorials/23_claim_rewards) - Learn how to claim rewards from unclaimed reward balance using Steemconnect as well as client signing method.
+1.  [Power up](tutorials/24_power_up_steem) - Power up an account's Steem using either Steemconnect or a client-side signing.
+1.  [Power down](tutorials/25_power_down) - Perform a power down on all or part of an account's VESTS using either Steemconnect or client-side signing.
+1.  [Create account](tutorials/26_create_account) - Create Steem account using Steemconnect as well as with client-side signing.
+1.  [Delegate steem power](tutorials/27_delegate_power) - Delegate power to other users using Steemconnect or Client-side signing.
+1.  [Set withdraw route](tutorials/28_set_withdraw_route) - Set routes to an account's power downs or withdraws.
+1.  [Get delegations by user](tutorials/29_get_delegations_by_user) - View the vesting delegations made by a user as well as the delegations that are expiring.
+1.  [Grant posting permission](tutorials/30_grant_posting_permission) - How to grant and revoke posting permission to another user.
+
+## To Run one of the tutorials
+
+Use the command line/terminal for the following instructions
+
+1.  clone this repo
+
+    `git clone git@github.com:steemit/devportal-tutorials-js.git`
+
+1.  cd into the tutorial you wish to run
+
+    ex: `cd tutorials/01_blog_feed`
+
+1.  Use npm or yarn to install dependencies
+
+    ex: `npm i`
+
+1.  Run the tutorial
+
+    `npm run dev-server` or `npm run start`
+
+1.  After a few moments, the server should be running at
+    [http://localhost:3000/](http://localhost:3000/)
+
+## Production Blockchain vs. Testnet
+
+These tutorials favor use of the production Steem blockchain. However, some produce content that would be spammy. And
+spam on a blockchain, like everything else on a blockchain, is forever. Eww.
+
+So for those tutorials we use a [testnet](https://testnet.steem.vc/) setup and maintained by user
+[@almost-digital](https://steemit.com/@almost-digital). You can see its current status, and learn how to easily create
+accounts and connect to it at [https://testnet.steem.vc/](https://testnet.steem.vc/). And depending on the day, you can
+even use an outdated version of [condenser](https://github.com/steemit/condenser) to crawl it at
+[https://condenser.steem.vc/](https://condenser.steem.vc/)
+
+Credentials for demo accounts on the testnet are in [tutorials/configuration.js](tutorials/configuration.js)`.
+Because this information is public, someone may have changed the keys of these accounts. If this has happened,
+you can either wait until the testnet reboots, or create an account or two of your own.
+_[It's super easy](https://testnet.steem.vc/#account-creation)_
+
+## Contributing
+
+If you're interested in contributing a tutorial to this repo. Please have a look at
+[the guidelines](./tutorials/tutorial_structure.md) for the text portion of the tutorial..

tutorials/devportal-tutorials-js/package.json

+{
+    "scripts": {
+        "lint":
+            "eslint -c .eslintrc —ext .js --ignore-path .gitignore --fix ./tutorials/",
+        "fmt": "prettier --write ./tutorials/*/*",
+        "precommit": "lint-staged"
+    },
+    "lint-staged": {
+        "*.{png,jpeg,jpg,gif,svg}": ["imagemin-lint-staged", "git add"],
+        "*.{js,json,css,md,lock}": ["prettier --write", "git add"]
+    },
+    "devDependencies": {
+        "babel-eslint": "^8.0.3",
+        "babel-jest": "^21.2.0",
+        "babel-preset-react-native": "^4.0.0",
+        "eslint": "^4.12.1",
+        "eslint-config-airbnb-base": "^12.1.0",
+        "eslint-plugin-babel": "^4.1.2",
+        "eslint-plugin-import": "^2.10.0",
+        "husky": "^0.14.3",
+        "imagemin-lint-staged": "^0.3.0",
+        "lint-staged": "^7.1.0",
+        "prettier": "1.11.1"
+    }
+}

tutorials/devportal-tutorials-js/tutorials/00_getting_started/README.md

+# Getting Started
+
+Prepare your development environment to use Javascript with the Steem blockchain.
+
+For Javascript tutorials, we will use the opensource library [dsteem](https://github.com/steemit/dsteem).
+
+### Node.js
+
+To get the most out of these tutorials, you should be familiar with [Node.js](https://nodejs.org/en/), [ES6](https://babeljs.io/learn-es2015/) aka [es2015](http://www.ecma-international.org/ecma-262/6.0/), the DOM, and modern Javascript programming practices.
+You can still learn a lot of these if they aren't in your base skill-set; it'll be much easier if they are.
+
+### Your Dev Environment
+
+These tutorials require [Node.js 8.7+](https://nodejs.org/en/download/). [Yarn](https://yarnpkg.com/en/) is nice, but not required. Runnable versions of the tutorials are located [in this github repo](https://github.com/steemit/devportal-tutorials-js).
+If you haven't chosen an editor, you can use [Atom](https://atom.io/), [Sublime](https://www.sublimetext.com/), [Intellij](https://www.jetbrains.com/idea/), [Vi](https://en.wikipedia.org/wiki/Vi), etc.
+
+If you want to keep multiple versions of Node on your system try [Node Version Manager](https://github.com/creationix/nvm).
+
+### Running a typical Tutorial
+
+Let's say you wanted to run the very [first tutorial](../01_blog_feed), `01_blog_feed`. Here's how you'd do it:
+
+1.  From Bash:
+
+    ```bash
+    git clone https://github.com/steemit/devportal-tutorials-js.git
+
+    cd devportal-tutorials-js/tutorials/01_blog_feed
+    npm i
+    npm run dev-server
+    ```
+
+1.  open http://localhost:3000/ in your web browser
+
+```
+### Github
+
+If you'd rather clone projects in a windowed environment rather than the terminal, consider [Github Desktop](https://desktop.github.com/).
+```

tutorials/devportal-tutorials-js/tutorials/01_blog_feed/README.md

+# Blog Feed
+
+_By the end of this tutorial you should know how to fetch most recent five posts from particular user on Steem._
+
+This tutorial pulls a list of the most recent five user's posts from the blockchain and displays them in simple list. Also some notes about usage of `client.database.getDiscussions` API.
+
+## Intro
+
+Tutorial is demonstrates the typical process of fetching account blog posts. It is quite useful if you want to embedd your blog posts on your website these tutorial will help you achieve that goal as well. This tutorial will explain and show you how to access the **Steem** blockchain using the [dsteem](https://github.com/jnordberg/dsteem) library to build a basic blog list of posts filtered by a _tag_
+
+## Steps
+
+1.  [**Configure connection**](#Configure-connection) Configuration of dsteem to use proper connection and network
+1.  [**Query format**](#Query-format) Simple query format to help use fetch data
+1.  [**Fetch data and format**](#Fetch-data-and-format) Fetch data and display in proper interface
+
+---
+
+#### 1. Configure connection<a name="Configure-connection"></a>
+
+In order to connect to the live Steem network, all we have to do is provide connection url to a server that runs on the network. `dsteem` by default set up to use live network but it has flexibility to adjust connection to any other testnet or custom networks, more on that in future tutorials.
+
+In first couple lines we require package and define connection server:
+
+```
+const { Client } = require('dsteem');
+
+const client = new Client('https://api.steemit.com');
+```
+
+#### 2. Query format<a name="Query-format"></a>
+
+*   You can add a tag to filter the blog posts that you receive from the server, since we are aiming to fetch blog posts of particular user, we will define username as tag.
+*   You can also limit the number of results you would like to receive from the query
+
+```javascript
+var query = {
+    tag: 'steemitblog', // This tag is used to filter the results by a specific post tag
+    limit: 5, // This limit allows us to limit the overall results returned to 5
+};
+```
+
+#### 3. Fetch data and format<a name="Fetch-data-and-format"></a>
+
+`client.database.getDiscussions` function is used for fetching discussions or posts. The first argument to this function determines which equivalent of the appbase `condenser_api.get_discussions_by_*` api calls it's going to use.  Below is example of query and keyword **'blog'** indicates `condenser_api.get_discussions_by_blog` and somewhat counter-intuitively _query.tag_ indicates the account from which we want to get posts.
+
+```
+    client.database
+        .getDiscussions('blog', query)
+        .then(result => {
+            var posts = [];
+            result.forEach(post => {
+                const json = JSON.parse(post.json_metadata);
+                const image = json.image ? json.image[0] : '';
+                const title = post.title;
+                const author = post.author;
+                const created = new Date(post.created).toDateString();
+                posts.push(
+                    `<div class="list-group-item"><h4 class="list-group-item-heading">${title}</h4><p>by ${author}</p><center><img src="${image}" class="img-responsive center-block" style="max-width: 450px"/></center><p class="list-group-item-text text-right text-nowrap">${created}</p></div>`
+                );
+            });
+
+            document.getElementById('postList').innerHTML = posts.join('');
+        })
+        .catch(err => {
+            alert('Error occured' + err);
+        });
+```
+
+The result returned form the service is a `JSON` object with the following properties:
+
+```json
+[
+    {
+        "id": 37338948,
+        "author": "steemitblog",
+        "permlink": "join-team-steemit-at-tokenfest",
+        "category": "steemit",
+        "parent_author": "",
+        "parent_permlink": "steemit",
+        "title": "Join Team Steemit at TokenFest!",
+        "body":
+            "<a href=\"https://tokenfest.adria.digital\"><img src=\"https://i.imgur.com/fOScDIW.png\"/></a>\n\nHello Steemians! If you’d like to meet Team Steemit live-in-person, or are just interested in attending what promises to be a great blockchain conference, join us at <a href=\"https://tokenfest.adria.digital/\">TokenFest</a> in San Francisco from March 15th to 16th. \n\nSteemit CEO, Ned Scott, will be participating in a fireside chat alongside Steemit’s CTO, Harry Schmidt, as well as the creator of Utopian.io, Diego Pucci. Steemit will also be hosting the opening party on Thursday night and we’d certainly love to meet as many of you as possible IRL, so head on over to https://tokenfest.adria.digital/ and get your tickets while you can. \n\n*Team Steemit*",
+        "json_metadata":
+            "{\"tags\":[\"steemit\",\"tokenfest\",\"conference\"],\"image\":[\"https://i.imgur.com/fOScDIW.png\"],\"links\":[\"https://tokenfest.adria.digital\",\"https://tokenfest.adria.digital/\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
+        "last_update": "2018-03-07T23:22:54",
+        "created": "2018-03-07T20:56:36",
+        "active": "2018-03-13T01:40:21",
+        "last_payout": "1970-01-01T00:00:00",
+        "depth": 0,
+        "children": 29,
+        "net_rshares": "11453442114933",
+        "abs_rshares": "11454054795840",
+        "vote_rshares": "11454054795840",
+        "children_abs_rshares": "13568695606090",
+        "cashout_time": "2018-03-14T20:56:36",
+        "max_cashout_time": "1969-12-31T23:59:59",
+        "total_vote_weight": 3462435,
+        "reward_weight": 10000,
+        "total_payout_value": "0.000 SBD",
+        "curator_payout_value": "0.000 SBD",
+        "author_rewards": 0,
+        "net_votes": 77,
+        "root_comment": 37338948,
+        "max_accepted_payout": "0.000 SBD",
+        "percent_steem_dollars": 10000,
+        "allow_replies": true,
+        "allow_votes": true,
+        "allow_curation_rewards": true,
+        "beneficiaries": [],
+        "url": "/steemit/@steemitblog/join-team-steemit-at-tokenfest",
+        "root_title": "Join Team Steemit at TokenFest!",
+        "pending_payout_value": "46.436 SBD",
+        "total_pending_payout_value": "0.000 STEEM",
+        "active_votes": [
+            {
+                "voter": "steemitblog",
+                "weight": 0,
+                "rshares": "1870813909383",
+                "percent": 10000,
+                "reputation": "128210130644387",
+                "time": "2018-03-07T20:56:36"
+            },
+            {
+                "voter": "kevinwong",
+                "weight": 526653,
+                "rshares": "2208942520687",
+                "percent": 5000,
+                "reputation": "374133832002581",
+                "time": "2018-03-08T04:27:00"
+            }
+        ],
+        "replies": [],
+        "author_reputation": "128210130644387",
+        "promoted": "0.000 SBD",
+        "body_length": 754,
+        "reblogged_by": []
+    }
+]
+```
+
+From this result we have access to everything associated to the post including additional metadata which is a `JSON` string that must be decoded to use. This `JSON` object has additional information and properties for the post including a reference to the image uploaded. And we are displaying this data in meaningful user interface. _Note: it is truncated to one element, but you would get five posts in array_
+
+That's all there is to it.
+
+### To Run the tutorial
+
+1.  clone this repo
+1.  `cd tutorials/01_blog_feed`
+1.  `npm i`
+1.  `npm run dev-server` or `npm run start`
+1.  After a few moments, the server should be running at [http://localhost:3000/](http://localhost:3000/)

tutorials/devportal-tutorials-js/tutorials/01_blog_feed/index.js

+const Koa = require('koa');
+const app = new Koa();
+const serve = require('koa-static');
+app.use(serve('./public'));
+
+app.listen(3000);
+
+console.log('listening on port 3000');

tutorials/devportal-tutorials-js/tutorials/01_blog_feed/package.json

+{
+    "name": "01_blog_feed",
+    "version": "0.0.1",
+    "description": "Pull the list of a user's posts from steem",
+    "main": "server.js",
+    "scripts": {
+        "start": "webpack && node ./index.js",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "dev-server":
+            "./node_modules/.bin/webpack-dev-server --mode development --content-base ./public --port 3000"
+    },
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "bootstrap": "^4.1.3",
+        "dsteem": "^0.10.1",
+        "koa": "^2.5.3",
+        "koa-static": "^5.0.0",
+        "webpack-serve": "^2.0.2"
+    },
+    "devDependencies": {
+        "css-loader": "^1.0.0",
+        "extract-text-webpack-plugin": "^3.0.2",
+        "node-sass": "^4.9.3",
+        "sass-loader": "^7.1.0",
+        "style-loader": "^0.23.1",
+        "webpack": "^4.20.2",
+        "webpack-cli": "^3.1.2",
+        "webpack-dev-server": "^3.1.9"
+    }
+}

tutorials/devportal-tutorials-js/tutorials/01_blog_feed/public/app.js

+import { Client } from 'dsteem';
+
+const client = new Client('https://api.steemit.com');
+
+function fetchBlog() {
+    const query = {
+        tag: 'steemitblog',
+        limit: 5,
+    };
+    client.database
+        .getDiscussions('blog', query)
+        .then(result => {
+            var posts = [];
+            result.forEach(post => {
+                const json = JSON.parse(post.json_metadata);
+                const image = json.image ? json.image[0] : '';
+                const title = post.title;
+                const author = post.author;
+                const created = new Date(post.created).toDateString();
+                posts.push(
+                    `<div class="list-group-item"><h4 class="list-group-item-heading">${title}</h4><p>by ${author}</p><center><img src="${image}" class="img-responsive center-block" style="max-width: 450px"/></center><p class="list-group-item-text text-right text-nowrap">${created}</p></div>`
+                );
+            });
+
+            document.getElementById('postList').innerHTML = posts.join('');
+        })
+        .catch(err => {
+            alert('Error occured' + err);
+        });
+}
+
+window.onload = fetchBlog();

tutorials/devportal-tutorials-js/tutorials/01_blog_feed/public/app.scss

+@import "~bootstrap/dist/css/bootstrap";

tutorials/devportal-tutorials-js/tutorials/01_blog_feed/public/index.html

+<html>
+<head><title>User blog</title>
+    <script src="bundle.js"></script>
+</head>
+<body>
+<div class="container">
+    <h2>Welcome to my blog!</h2>
+    <div class="list-group" id="postList"></div>
+</body>
+</html>
\ No newline at end of file

tutorials/devportal-tutorials-js/tutorials/01_blog_feed/webpack.config.js

+var path = require('path');
+module.exports = {
+    entry: ['./public/app.js', './public/app.scss'],
+    output: {
+        path: path.resolve(__dirname, 'public'),
+        filename: 'bundle.js',
+    },
+    devtool: 'source-map',
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: [
+                    {
+                        loader: 'style-loader', // creates style nodes from JS strings
+                    },
+                    {
+                        loader: 'css-loader', // translates CSS into CommonJS
+                    },
+                    {
+                        loader: 'sass-loader', // compiles Sass to CSS
+                    },
+                ],
+            },
+        ],
+    },
+};

tutorials/devportal-tutorials-js/tutorials/02_steemconnect/README.md

+# Steemconnect
+
+_Understand the basics of using Steemconnect with your Steem application._
+
+In this tutorial we will setup Steemconnect for demo application and step by step show the process of setting up dedicated account for your app to use Steemconnect Dashboard and setup backend of your application to use Steemconnect authorization properly.
+
+## Intro
+
+The application in this tutorial asks the user to grant an access to `demo-app` and get token from Steemconnect. Once permission is granted, `demo-app` can get details of user via an api call that requires access token.
+Purpose is to allow any application request permission from user and perform action via access token.
+
+Some other calls that require an access token (or login) are:
+
+*   Vote
+*   Comment
+*   Post
+*   Follow
+*   Reblog
+
+Learn more about [Steemconnect operations here](https://github.com/steemit/steemconnect-sdk)
+
+## Steps
+
+1.  [**Steemconnect Dashboard**](#sc-dashboard) Create account for application and set up dashboard
+1.  [**Initialize Steemconnect**](#init-sc) Initialize SDK in your application code
+1.  [**Login URL**](#login-url) Form login url for user
+1.  [**Request token**](#request-token) Request token with login url
+1.  [**Set token**](#set-token) Set or save token for future requests
+1.  [**Get user data**](#get-user) Get user details with token
+1.  [**Logout**](#logout) Logout user and clear token
+
+#### 1. Steemconnect Dashboard<a name="sc-dashboard"></a>
+
+Steemconnect is unified authentification system built on top of Steem built in collaboration of Busy.org and Steemit Inc.
+Layer to ensure easy access and setup for all application developers as well as secure way for users to interact with Steem apps.
+
+Setting up Steemconnect in your app is straight-forward process and never been this easy.
+
+Here are the steps that helps you to setup new app:
+
+1a. Visit [Steemconnect Dashboard](https://steemconnect.com/dashboard) and login with your Steem credentials
+
+![steemconnect_login](./images/steemconnect_login.png)
+
+1b. You will see Applications and Developers section, in Developers section click on `My Apps`
+
+![steemconnect_dashboard](./images/steemconnect_dashboard.png)
+
+![steemconnect_new_app](./images/steemconnect_new_app.png)
+
+1c. Create New App using Steemconnect, which will help you create new Steem account for your application. Let's call it `demo-app` for this tutorial purpose.
+
+![steemconnect_account_create](./images/steemconnect_account_create.png)
+
+Account creation fee will be deducted from your balance, make sure you have enough funds to complete account creation.
+
+Next step is to login with account which has enough balance to pay for account creation fee.
+
+![steemconnect_signin](./images/steemconnect_signin.png)
+
+1d. Give your app name, description, icon image link, website (if available) and Redirect URI(s)
+
+![steemconnect_myapps](./images/steemconnect_myapps.png)
+
+Application name and description should give users clear understanding what permissions it requires and what is the purpose of the app.
+
+App Icon field should be publicly accessible and available link to your logo or icon.
+
+Website field is homepage for the application if exist.
+
+Redirect URI(s) will be used within your application to forward user after authentification is successful. You can specify multiple callback URLs with each new line. Callback in Steemconnect SDK should match exactly one of URI(s) specified on this page. Due to security reasons if redirect URI(s) used in SDK is other than you specified, it will not work.
+This is typical backend web development, we hope you know how to set up your backend/app to handle callback URLs.
+
+*   Disclaimer: All images/screenshots of user interface may change as Steemconnect evolves
+
+#### 2. Initialize Steemconnect<a name="init-sc"></a>
+
+Once you have setup account for new application, you can setup application with Steemconnect authentification and API processes.
+To do that, you will need to install `sc2-sdk` nodejs package with `npm i sc2-sdk`.
+Within application you can initialize Steemconnect
+
+> `app` - is account name for application that we have created in Step I.3, `callbackURL` - is Redirect URI that we have defined in Step I.4, `scope` - permissions application is requiring/asking from users
+
+Now that `sc2-sdk` is initialized we can start authentication and perform simple operations with Steemconnect.
+
+#### 3. Login URL<a name="login-url"></a>
+
+> `getLoginURL` function you see on the right side, returns login URL which will redirect user to sign in with Steem connect screen. Successfull login will redirect user to Redirect URI or `callbackURL`. Result of successful login will return `access_token`, `expires_in` and `username` information, which application will start utilizing.
+
+#### 4. Request token<a name="request-token"></a>
+
+> Application can request returned link into popup screen or relevant screen you have developed. Popup screen will ask user to identify themselves with their username and password. Once login is successful, you will have Results
+
+#### 5. Set token<a name="set-token"></a>
+
+> Returned data has `access_token` - which will be used in future api calls, `expires_in` - how long access token is valid in seconds and `username` of logged in user.
+
+> After getting `access_token`, we can set token for future Steemconnect API requests.
+
+#### 6. Get user data<a name="get-user"></a>
+
+> Users info can be checked with `me` which will return object
+> `account` - current state of account and its details on Steem blockchain, `name` - username, `scope` - permissions allowed with current login, `user` - username, `user_metadata` - additional information user has setup.
+
+#### 7. Logout<a name="logout"></a>
+
+> In order to logout, you can use `revokeToken` function from sc2-sdk.
+
+**That's all there is to it.**
+
+### To Run the tutorial
+
+1.  clone this repo
+1.  `cd tutorials/02_steemconnect`
+1.  `npm i`
+1.  `npm run dev-server` or `npm run start`
+1.  After a few moments, the server should be running at [http://localhost:3000/](http://localhost:3000/)