Forem: Clint Maruti

What's Your Biggest Distraction When Coding?

Clint Maruti — Sat, 07 Dec 2019 11:22:16 +0000

Hi Guys,

I'm doing research on productivity and would love it if you'd please share some of your biggest distractions when you are coding.

Thanks.

Graph Traversal with BFS - Code (JavaScript)

Clint Maruti — Wed, 20 Nov 2019 10:27:17 +0000

Data can be stored in data structures like graphs and trees. Technically trees are graphs as we will see in the implementation below.

Graph

Graphs are used to describe a model that shows the route from one location to another. A graph consists of a set of nodes and edges. An edge is a pair of nodes that are connected. A path is used to describe traveling between nodes that share edges.

Trees
A tree, on the other hand, is a collection of nodes. There is a root node otherwise called 'Head'. The nodes can then have children nodes thus flowing in a hierarchy manner.

The most common implementation of graphs is finding a path between two nodes, finding the shortest path from one node to another and finding the shortest path that visits all nodes.

The traveling salesman problem is a great example of using a tree algorithm to solve problem.

Breadth-First Search is among the common graph or tree traversal algorithm techniques used to solve such problems.

Below is an implementation of the BFS algorithm that takes in a graph in form of an Adjacency Matrix and a root node (number) then return the length of other nodes from it. It's used to find distances between nodes on a graph, which henceforth can be used to find the shortest distance.

Here's the graphical representation of the graph:

Here's the code:

let bfs = (graph, root) => {
  let nodesLen = {};

  for(let i = 0; i < graph.length; i++){
    nodesLen[i] = Infinity; // Idicates that a node is not reachable from the start node
  }
  nodesLen[root] = 0; // The distance of the root node from the root node is set to 0

  let queue = [root] // Keep track of nodes we visit
  let current; // Keep track of the current node we are traversing

  // This loop will keep traversing nodes in the queue until we have no other node to traverse
  while(queue.length != 0){
    current  = queue.shift() // Removes the first element in the array

    let curConnected = graph[current] // We get all the nodes connected to the current node
    let neighborIdx = []
    let idx = curConnected.indexOf(1) // Gets the index of the first node connected to the current node because the number one in our array shows that the node is connected to anothe node on that index

    // If there is no node at the index of one, the index variable will be set to -1. 
    while(idx != -1){
      neighborIdx.push(idx) // So while index does not equals to -1, push our index onto our list of neighbors.
      idx = curConnected.indexOf(1, idx + 1) // This line searches for the next connected node.
    }

    // Now that we know all the nodes connected to the current node, we loop through this connected nodes, and get the distance
    for ( let j = 0; j < neighborIdx.length; j++){
      if (nodesLen[neighborIdx[j]] == Infinity){ // This line we haven't set the distance from the nodesLen[neighborIdx[j]] yet so we will set now. 
        nodesLen[neighborIdx[j]] = nodesLen[current] + 1
        queue.push(neighborIdx[j]) // We push the neighbor to the queue so the next time we go through the while loop, we will check the neighbors of that node too.
      }
    }
  }

  return nodesLen
}

let exBFSGraph = [
  [0,1,1,1,0],
  [0,0,1,0,0],
  [1,1,0,0,0],
  [0,0,0,1,0],
  [0,1,0,0,0]
]

bfs(exBFSGraph, 1)

Memoized Fibonacci Function

Clint Maruti — Fri, 15 Nov 2019 16:51:39 +0000

A better way to write the Fibonacci Algorithm that has a higher load time (good time complexity)

Stepping Through Recursive Fibonacci Function

Clint Maruti — Thu, 14 Nov 2019 13:35:23 +0000

The Fibonacci Sequence is such that each number is the sum of the previous two numbers.

Fibonacci Sequence: 1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34 . . .

This is a great use case for recursion.

We will build our Fibonacci algorithm using recursion. We will define a function that takes in a number called position as a parameter.This position will indicate which number from the Fibonacci sequence we want returned to us.

For example:
fibonacci(4) // returns 3
fibonacci(9) // returns 34

This algorithm does not require a lot of code, so we will not over complicate it.

Let's define the function fibonacci that takes in a number position .

function fibonacci(position){

}

Next, let's go-ahead to define our base case. So, we can ask ourselves, what is the situation that we immediately know one number is found at the given position in our Fibonacci sequence? There are two situations:

Since the first two numbers in the Fibonacci sequence are always 1 and 1, if the position equals 1 it should return 1 or if it equals 2 it should return 1 still

function fibonacci(position){
   if(position < 3) return 1;
}

Now we write our recursive code:

function fibonacci(position){
   if(position < 3) return 1;
   else return fibonacci(position - 1) + fibonacci(position - 2)
}

We know that the number in the position is a result of the sum of the two previous numbers before it position -1 and position - 2. We return the result of adding our Fibonacci function using these two cases as passed in parameters of each. The function will call itself until the base case is attained then it will stop.

To see a visualization of the breakdown of how each function is called, here's a link to a video that explains it.

https://www.youtube.com/watch?v=zg-ddPbzcKM&t=319s

Now, this algorithm is not conducive because when we want to return the position of a very large number say 1500, the chain of recursion will result in what we call a stack overflow! Different browsers have limits to how large a call stack is supposed to be and if you reach that limit, the function will throw in an error stating that you've to exceed the maximum call stack limit.

This algorithm has an exponential O(2^n) time complexity because the chain of recursion grows exponentially by each call making it a bad way to solve this.

We will look at a much faster algorithm in the next one.

Happy Hacking!

Binary Search - A Simple Code

Clint Maruti — Thu, 14 Nov 2019 07:23:16 +0000

In my last post in this series, I wrote about Recursion.

Now, if you have just bumped into this post, it follows a series of posts I have been creating. I'm making this in adherence to the Feynman's Technique which is basically just to improve my comprehension level with an approach to teaching what I have learned.

So, I covered a brief intro on Binary Search and also touched on recursion which we will use in writing this algorithm.

We are going to write a function that takes in an array of numbers as its first argument and a key as its second. The function will search through the array using Binary Search and return true if the key exists or false if it doesn't.

function binarySearch(numArray, key){
   let middleIndex = Math.floor(numArray.index / 2)
   let middleElem = numArray[middleIndex]

   if(middleElm === key) return true;
   if(middleElm < key && numArray.length > 1){
      return binarySearch(numArray.splice(middleIndex, numArray.length), key)
   } else if {
      return binarySearch(numArray.splice(0, middleIndex), key)
   } else return false 
}

So, in this piece of code, we define two variables middleIndex to store the middle Index of the array and middleElem to store the middle element of the array. Simple?

Next, we go ahead and write out the base case which checks if the middle element is the same as our key and returns true ending our function since we have already located it.

We again write another "if" statement for our recursion which checks if the middle number is less than the key and also if the numbers array is greater than one. If the key is greater than the middle number, we splice the array and remain with the section above the middle number.

The splice function takes in two arguments, the index from the point you want to start slicing the array and the index where you want to end. it returns the sliced part.

Then we call the function recursively to repeat this process until the base case is reached hence completing our function.

Introduction To Recursion & The Call Stack

Clint Maruti — Wed, 13 Nov 2019 15:41:13 +0000

What is Recursion?

Recursion is when a function calls itself.

Syntax:

function func(){
   if(/*base case*/){
      return something  
   } else { // recusive case
      func()
   }
}

Example

Let's write a function that returns the factorial of a number passed in as argument.

The factorial of a number is that number multiplied by every number from itself down to one.

4! = 4 * 3 * 2 * 1 = 24
3! = 3 * 2 * 1 = 6

function factorial(num){
   if (num === 1) { // The factorial of 1 is 1 so our base case is set
      return num;
   } else {
      return num * factorial(num -1) // Recursive case 
   }
}

The best way to understand this is by going through the function step by step. To visualize, we will use a Call stack. Please click here if you don't know what a call stack is before proceeding.

TL;DR
Call Stack represents what order the functions are being called in and what variables they are being called with.

Order:

factorial(4) => 4
factorial(3) => 3
factorial(2) => 2
factorial(1) => 1 * (1-1) = 1 = base case

4 * 3 * 2 * 1 = 24

Okay, I know for those who are not acquainted with recursion may find this cumbersome. I urge you to read more about it.

But the baseline is, a recursive function will continue to call itself until the base case is fulfilled!

See you in the next one!

Binary Search - Intro

Clint Maruti — Wed, 13 Nov 2019 13:46:14 +0000

Binary search is a widely known and most implemented algorithm in different forms in Computer Science. It is a relatively essential algorithm to know because it's widely used, its popularity in interview questions and its performance.

A binary search algorithm: :

Allows a user to search for a given value inside of a list.
It runs in O(log n) time complexity - !Important.
Can be written as a recursive function

Scenario

If you have a dictionary: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z and you want to find a single word in the dictionary, you would find it by doing binary search probably by not even realizing it.

Let's say you want to find the word House in the dictionary, you would open up the dictionary to the middle, and you'd notice that you are in the "M" section. You know that "House" is before the "M" section, so you would totally forget about the second half of the book.

So you've just cut through the input size, the number of elements into half remaining with A B C D E F G H I J K L. Again you would go into the middle of this section and notice that we are now in the F section. H is after F so you would ignore the first half and remain with G H I J K L. We again cut our input size into half and land on section I, we throw away everything after I because H is before I. We go to the middle of what is left G H I and we are now in the H section and we have successfully found the word House.

By this, you can find that it's efficient because we have only performed 4 operations in an input that has 26 elements. As our input size grows, the number of operations that we will perform will not grow proportionally but it'll grow logarithimically.

If we had an input size of about 4000 elements it will only take us about 12 operations to find the element that we are looking for.

We will be coding out our binary search in a recursive form. Recursion is an incredibly important concept to understand and be able to implement it in programming.

In the next post, I'll share out about recursion before we begin coding our binary search algorithm.

See you!

Two Sum - Challenge 4

Clint Maruti — Wed, 13 Nov 2019 11:09:13 +0000

This forms up part of the building blocks in most algorithms challenges involving arrays manipulations.

Intro
This challenge involves taking two parameters, an array, and a number. The goal of this challenge is to return a pair of sub-arrays, each pair adding up to the number given. For example, if we pass [1,6,4,5,3,3] and 7 as our arguments, we should get [[6,1], [3,4], [3,4]] as our result.

Guidelines

Result should be an array of arrays.
Any number in the 'numArray' can be used in multiple pairs.

There are many ways of accomplishing this:

It can be done in 0(n^2) time complexity. This involves nested loops.
It can also be done in 0(n) time complexity as we know more performing. This utilizes a hash table. We are going to utilize this.

Let's Dive right in

As usual we will define a function twoSum that takes in two parameters numArray and sum.

function twoSum(numArray, sum){

}

Next, we will define a variable, pairs which will store our result of nested pairs of numbers from the numArray that adds up to our sum

function twoSum(numArray, sum){
   let pais = [];

}

Next, we want to loop through our numArray and gain access to every number.

function twoSum(numArray, sum){
   let pais = [];

   for(let i = 0; i < numArray.length; i++){

   }
}

We, will define the current number that we are on by:

function twoSum(numArray, sum){
   let pais = [];

   for(let i = 0; i < numArray.length; i++){
      let currNum = numArray[i]
   }
}

Now, this is where the main functionality of our function takes place. We want to use a hash table and push every number that we iterate through into that hash table. In this algorithm, we will use an array as a hash table, but you can use an object. They both achieve the same functionality.

So on every iteration, we want to check this hash table to see if the current's number counterpart is present in that table. For example, if our current number is 4, the number we are looking, to sum up to is 7. The counterpart of 4 would be 3 because 4 + 3 = 7. So we want to check our has table to check if our counterpart (3) already exists in the hash table. If the counterpart doesn't exist in the hash table, we already know that we have already iterated through that number in our array, we can, therefore, take these two numbers as a pair and push them into our pairs array. Basically that's all we have to do. So let's proceed and write:

function twoSum(numArray, sum){
   let pairs = [];
   let hashtable = [];

   for(let i = 0; i < numArray.length; i++){
      let currNum = numArray[i]
      let counterPart = sum - currNum
      if(hashTable.indexOf(counterPart) !== -1){
         pairs.push([ currNum, counterpart])
      }
      hashTable.push(currNum)
   }
   return pairs
}

And, that's it!

See you in the next one!

Happy Hacking!

Caesar Cipher - Challenge 3

Clint Maruti — Tue, 12 Nov 2019 12:13:43 +0000

This is one is an interesting one.

So, given a string, we need to re-write the string such that each character in the string is shifted to the number of times given, according to its position in the alphabet. For example, "zoo keeper" becomes "bqq mggrgt". To me sounds like some low-level encryption of some sort.

Let's dive in:

We will define a function caesarCipher that takes two parameters str and num. The function should return the ciphered string that's passed in

function caesarCipher(str, num){

}

Next, we will, of course, convert the string into lowercase for easier manipulation throughout our function. We will store our new lowercase string in a variable. Below that, we can as well define a variable array and pass in all the alphabet letters

function caesarCipher(str, num){
   let lowerCaseStr = str.toLowerCase()
   let alphabets = 'abcdefghijklmnopqrstuvwxyz'.split('')
}

Let's go through some constraints before we go any further:

In cases, where the number passed, is greater than the length of letters in our alphabet, we will loop through our alphabet until we land at the correct position where the loop ends.
Wherein, when the number passed is less, we will loop backwards through the alphabet

Let's proceed

We define an empty variable to store our ciphered string

function caesarCipher(str, num){
   let lowerCaseStr = str.toLowerCase()
   let alphabets = 'abcdefghijklmnopqrstuvwxyz'.split('')
   let newString = ''
}

Next, we loop through our string and locate the index of every character of our string in the alphabet so that we can shift it and determine the new character.

function caesarCipher(str, num){
   let lowerCaseStr = str.toLowerCase()
   let alphabets = 'abcdefghijklmnopqrstuvwxyz'.split('')
   let newString = ''

   for(let i = 0; i < lowerCaseStr.length; i++){
      let currentLetter = lowerCaseStr[i]

      let currentindex = alphabet.indexOf(currentLetter) 
   }
}

So, we also want to pass the empty spaces to our newString. We do this by defining a condition statement that determines if the currentLetter is equals to an empty string and adding it to the newString

function caesarCipher(str, num){
   let lowerCaseStr = str.toLowerCase()
   let alphabets = 'abcdefghijklmnopqrstuvwxyz'.split('')
   let newString = ''

   for(let i = 0; i < lowerCaseStr.length; i++){
      let currentLetter = lowerCaseStr[i]

      if(currentLetter === ' '){
         newString += curentLetter;
         continue; // This tells the loop statement to continue iterating
      }
      let currentindex = alphabet.indexOf(currentLetter) 
   }
}

We will define another variable and set it to the new index after adding the number passed in. While at it, we will set our constraints.

function caesarCipher(str, num){
   let lowerCaseStr = str.toLowerCase()
   let alphabets = 'abcdefghijklmnopqrstuvwxyz'.split('')
   let newString = ''

   for(let i = 0; i < lowerCaseStr.length; i++){
      let currentLetter = lowerCaseStr[i]

      if(currentLetter === ' '){
         newString += curentLetter;
         continue; // This tells the loop statement to continue iterating
      }
      let currentIndex = alphabet.indexOf(currentLetter)
      let newIndex = currentIndex + num
      if(newIndex > 25) newIndex = newIndex - 26 
      if(newIndex < 0) newIndex = newIndex + 26
      if(str[i] === str[i].toUpperCase()){
         newString += alphabet[newIndex].toUpperCase()
      }
   }
}

We also want to retain the Uppercase letter in our string on the ciphered string. To do this, we check if the character of our original string is equal to an uppercase character of our converted string inside the function. If true, we pass the character to our newString variable and convert it to upper-case.

function caesarCipher(str, num){
   let lowerCaseStr = str.toLowerCase()
   let alphabets = 'abcdefghijklmnopqrstuvwxyz'.split('')
   let newString = ''

   for(let i = 0; i < lowerCaseStr.length; i++){
      let currentLetter = lowerCaseStr[i]

      if(currentLetter === ' '){
         newString += curentLetter;
         continue; // This tells the loop statement to continue iterating
      }
      let currentIndex = alphabet.indexOf(currentLetter)
      let newIndex = currentIndex + num
      if(newIndex > 25) newIndex = newIndex - 26 
      if(newIndex < 0) newIndex = newIndex + 26
      if(str[i] === str[i].toUpperCase()){
         newString += alphabet[newIndex].toUpperCase()
      } else 
         newString += alphabet[newIndex].toUpperCase()
   }
}

There we have it! I know it's a bit complex but you've understood the concept.

See you in the next one.

Happy Hacking!

Palindrome - Challenge 2 (Basic)

Clint Maruti — Tue, 12 Nov 2019 10:35:11 +0000

Okay here's the second post to my guide to understanding the basics of Data Structures and Algorithms with JavaScript series by solving common challenges. On this one, we look at: The infamous Palindrome Challenge.

Question:
Find out if the given string is a palindrome. A palindrome is a string or word that can be read the same in normal and reverse. For example "Madam I'm Adam", "Race Car".

Let's Tackle

We will create a function isPalindrome that takes in a string as an argument and returns true if the string is a Palindrome and false if it's not.

function isPalindrome(string){

}

Next, we will convert the string into a lower case to make it easier for comparison

function isPalindrome(string){
  string = string.toLowerCase()
}

We will define a variable and set it to a list of alphabetical letters from a - z. Now, this will help us filter through our string to remove any special characters like comas. We want to only compare letters and not characters. Note, we don't want to use regex

function isPalindrome(string){
  string = string.toLowerCase()
  let validCharacters = 'abcdefghijklmnopqrstuvwxyz'.split('')
}

Next, we define a variable and set it to an empty array. We then push the valid characters from our strings to the array.

function isPalindrome(string){
  string = string.toLowerCase()
  charactersArray = string.split('')
  let validCharacters = 'abcdefghijklmnopqrstuvwxyz'.split('')

  let lettersArr = []

  charactersArray.forEach(char => {
     if(validCharacters.indexOf(char) > -1) lettersArr.push(char)
  })
}

Next, we will join the lettersArr into a string and compare it to its reverse and return true if they match or false if they don't.

function isPalindrome(string){
  string = string.toLowerCase()
  charactersArray = string.split('')
  let validCharacters = 'abcdefghijklmnopqrstuvwxyz'.split('')

  let lettersArr = []

  charactersArray.forEach(char => {
     if(validCharacters.indexOf(char) > -1) lettersArr.push(char)
  })

  if(lettersArr.join('') === lettersArr.reverse().join('')) return true;
     else return false;
}

And, there we have it. Simple isn't it!

See you at the next one!

Happy Hacking!!

The Harmless Ransome Note - Challenge 1

Clint Maruti — Tue, 12 Nov 2019 09:38:03 +0000

So here I find myself once again in my Software Engineering journey phase - The Job Hunt.

Arguably the most dreaded phase a Junior Software Engineer may find themselves in or even some Seniors out there may be one or two who find themselves having to remind themselves of some concepts of Algorithms and Time Complexity just to nail that interview.

For me, the company that I have been working for decided to downsize its employees because there were just too many and the company's financial status couldn't accommodate them. Now, mind you, the criteria they used for downsizing wasn't in any way based on the productivity of the individual. In fact, we (I was one of them) were the best and most talented. It's just that, how the company works, there weren't enough placement for devs to the available partners at the time.

Embarking on my road to finding another Software Engineer job, I will be starting a series of every algorithm I have faced and conquered. I'm starting from the basics. I am doing this so as to improve my comprehension level, with an approach to teaching what I have learned. Feynman's Technique.

In this first post, I will explain The Harmless Ransom Note Algorithm Challenge. Feel free to pinpoint few mistakes or point me to a good path. I am open to learning more and more.

A Harmless Ransom Note challenge entails comparing two strings. You have to find whether you can make up the first string with words present in the second string. In a more detailed form, Let's say you have a magazine article. You want to create a sentence from the words of the article. If there are no words in the article that can match up your sentence, then the program returns false and vice versa. Hope it makes sense.

To tackle this, we start by creating a function harmlessRansomNote that takes two arguments, a noteText and magazineText.

function harmlessRansomNote(noteText, magazineText){

}

Next, we convert both texts into an array of words using the split method.

function harmlessRansomNote(noteText, magazineText){
   let noteArray = noteText.split(' ')
   let magazineArray = magazineText.split(' ')
}

But wait, before we go any further, what we are doing is comparing two string against each other. But how are we going to do that? So this is how. We are going to use a hash table algorithm to accomplish this. This is going to keep track of every word and how many times its been used. We will create an empty magazine object to keep track of every word in it.

function harmlessRansomNote(noteText, magazineText){
   let noteArray = noteText.split('')
   let magazineArray = magazineText.split('')
   let magazineObj = {}
}

The goal of this is to have every word that is present be presented like this {this: 1}. This will just show how many times this word is present in that array of words.

function harmlessRansomNote(noteText, magazineText){
   let noteArray = noteText.split('')
   let magazineArray = magazineText.split('')
   let magazineObj = {}

   magazineArray.forEach(word => {
      if(!magazineObj[word]) magazineObj[word] = 0;
         magazineObj[word]++
   }
}

Okay, now we have each word with the frequency of its occurrence represented in our hash table.
Next, we will now compare the words in our noteArray to our magazineArray in the hash table and if the word exists, we will subtract the frequency of occurrence of the word.

function harmlessRansomNote(noteText, magazineText){
   let noteArray = noteText.split('')
   let magazineArray = magazineText.split('')
   let magazineObj = {}

   magazineArray.forEach(word => {
      if(!magazineObj[word]) magazineObj[word] = 0;
         magazineObj[word]++
   })

   noteArray.forEach(word =>{
      if(magazineObj[word]) 
         magazine[word]--
   }) 
}

We will define a variable NoteIsPossible setting it to true. We will update this variable to false if there are no words in the magazineObj that match the word in the noteArray hence proving that it's not possible to make a note from the magazine text. I hope it's clear.

function harmlessRansomNote(noteText, magazineText){
   let noteArray = noteText.split('')
   let magazineArray = magazineText.split('')
   let magazineObj = {}

   magazineArray.forEach(word => {
      if(!magazineObj[word]) magazineObj[word] = 0;
         magazineObj[word]++
   })

   let isNotePossible = true

   noteArray.forEach(word =>{
      if(magazineObj[word]) {}
         magazineObj[word]--
      if(magazineObj[word] < 0) {
        isNotePossible = false
      }  else {
        isNotePossible = true
      }
   }) 

   console.log(isNotePossible)
}

Using the array function indexOf(), if the word is not in the magazineArr it returns -1. So to determine if the word is not present we check if the current word is less than 0 index in the array and thus updating our isNotePossible variable.

See you in the next one,

Happy hacking!

Authenticate React App With Stormpath - Part Two

Clint Maruti — Thu, 17 Oct 2019 09:36:30 +0000

This is a continuation of Authenticate React App With Stormpath.

On this final piece, we'll set up our pages. Let's dive right in:-

Main Page

Let's first set up our Router which will define how our navigation structure in the app. We'll do this by first creating a shared route. This will act as our main page i.e. all routes under this page will share the same main component (header). Insert this code inside the <Router> tag in app.js.

<Router history={browserHistory}>
  <Route path='/' component={MasterPage}>
  </Route>
</Router>

We have referenced MasterPage, something that doesn't exist yet. Let's go ahead and create it in a new directore pages, inside our src folder.

$ mkdir pages
$ cd pages

Create a new file named masterPage.js and add this code:

import React from 'react';
import { Link } from 'react-router';
import { LoginLink } from 'react-stormpath';
import DocumentTitle from 'react-document-title';

import Header from './Header';

export default class is extends React.Component {
  render() {
    return (
      <DocumentTitle title='My React App'>
        <div className='MasterPage'>
          <Header />
          { this.props.children }
        </div>
      </DocumentTitle>
    );
  }
}

As you can see, we don't have a Header component yet, so let's go and create a new file named Header.js in the same directory with the following content.

import React from 'react';
import { Link } from 'react-router';
import { LoginLink, LogoutLink, Authenticated, NotAuthenticated } from 'react-stormpath';

export default class Header extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-default navbar-static-top">
        <div className="container">
          <div id="navbar-collapse" className="collapse navbar-collapse">
            <ul className="nav navbar-nav">
              <li><Link to="/">Home</Link></li>
            </ul>
            <ul className="nav navbar-nav navbar-right">
            </ul>
          </div>
        </div>
      </nav>
    );
  }
}

Index Page

In our MainPage notice the property this.props.children. This will contain the components of the child routes that our router match. So if we had a route that looked like:

<Route path='/' component={MasterPage}>
  <Route path='/hello' component={HelloPage} />
</Route>

And we tried to access /hello. The this.props.children array would be populated with a HelloPage component and for that reason, that component would be rendered on our master page.

Now imagine the scenario where you try to access /. Without any this.props.children, this would only render your master page but with empty content. This is where IndexRoute comes into play. With an IndexRoute you can specify the component that should be rendered when you hit the path of the master page route (in our case /).

But before we add our IndexRoute to our router, let's create a new file in our pages directory named IndexPage.js and add the following to it.

import { Link } from 'react-router';
import React, { PropTypes } from 'react';
import { LoginLink } from 'react-stormpath';

export default class IndexPage extends React.Component {
  render() {
    return (
      <div className="container">
        <h2 className="text-center">Welcome!</h2>
        <hr />
        <div className="jumbotron">
          <p>
            <strong>To my React application!</strong>
          </p>
          <p>Ready to begin? Try these Stormpath features that are included in this example:</p>
          <ol className="lead">
            <li><Link to="/register">Registration</Link></li>
            <li><LoginLink /></li>
            <li><Link to="/profile">Custom Profile Data</Link></li>
          </ol>
        </div>
      </div>
    );
  }
}

Now let's add our IndexRoute. Open up app.js and inside the tag <Route path='/' component={MasterPage}> add your IndexRoute so that it looks like the following:

<Route path='/' component={MasterPage}>
  <IndexRoute component={IndexPage} />
</Route>

Login Page

We now have an application that shows a header with a default page. But we don't have any place to login yet. So let's create a new file named LoginPage.js and add some content to it:

import React from 'react';
import DocumentTitle from 'react-document-title';
import { LoginForm } from 'react-stormpath';

export default class LoginPage extends React.Component {
  render() {
    return (
      <DocumentTitle title={`Login`}>
        <div className="container">
          <div className="row">
            <div className="col-xs-12">
              <h3>Login</h3>
              <hr />
            </div>
          </div>
          <LoginForm />
        </div>
      </DocumentTitle>
    );
  }
}

Notice the LoginForm component. This is all we have to add in order for us to have a fully working form in which people can sign up from.

But before we can use it, we need to open up app.js and add a route for the page in our router. So inside the tag <Route path='/' component={MasterPage}> add the following:

<LoginRoute path='/login' component={LoginPage} />

In order to be able to access the login page, we need to add this to our menu. So go ahead and open up Header.js and inside the element <ul className="nav navbar-nav navbar-right"> add the following:

<NotAuthenticated>
  <li>
    <LoginLink />
  </li>
</NotAuthenticated>

As you can see we're using the NotAuthenticated component. With this we'll only show a LoginLink when the user isn't logged in yet.

Registration Page

Now, let's add a page where people can sign up. We'll call it RegistrationPage. So create a new file named RegistrationPage.js and put the following content in it:

import React from 'react';
import DocumentTitle from 'react-document-title';
import { RegistrationForm } from 'react-stormpath';

export default class RegistrationPage extends React.Component {
  render() {
    return (
      <DocumentTitle title={`Registration`}>
        <div className="container">
          <div className="row">
            <div className="col-xs-12">
              <h3>Registration</h3>
              <hr />
            </div>
          </div>
          <RegistrationForm />
        </div>
      </DocumentTitle>
    );
  }
}

Notice that we used the RegistrationForm component. As you might have guessed, this will render a Stormpath registration form. And once you've signed up it will point users to the login page where they'll be able to login.

In order to access this page. We need to add a route. So go ahead and open up app.js and inside the tag <Route path='/' component={MasterPage}> add:

<Route path='/register' component={RegistrationPage} />

We now have a route, but people won't be able to find the page unless we link to it, so open up Header.js and add the following right before the closing tag (</ul>) of <ul className="nav navbar-nav navbar-right">:

<NotAuthenticated>
  <li>
    <Link to="/register">Create Account</Link>
  </li>
</NotAuthenticated>

Notice the use of the NotAuthenticated component. With this we'll only show the /register link when the user isn't logged in.

Profile Page

Once a user is logged in, we want to be able to show them some personalized content (their user data). So create a new file named ProfilePage.js and put the following code in it:

import React from 'react';
import DocumentTitle from 'react-document-title';
import { UserProfileForm } from 'react-stormpath';

export default class ProfilePage extends React.Component {
  render() {
    return (
      <DocumentTitle title={`My Profile`}>
      <div className="container">
          <div className="row">
            <div className="col-xs-12">
              <h3>My Profile</h3>
              <hr />
            </div>
          </div>
          <div className="row">
            <div className="col-xs-12">
              <UserProfileForm />
            </div>
          </div>
        </div>
      </DocumentTitle>
    );
  }
}

Notice that we use the UserProfileForm. This is a simple helper form that allows you to edit the most basic user fields.

Though, in order to actually modify the user profile, we need to change a few things in our server. So open up server.js, add var bodyParser = require('body-parser'); to the top of the file and then add the following route underneath app.use(stormpath.init(app, ...));:

app.post('/me', bodyParser.json(), stormpath.loginRequired, function (req, res) {
  function writeError(message) {
    res.status(400);
    res.json({ message: message, status: 400 });
    res.end();
  }

  function saveAccount () {
    req.user.givenName = req.body.givenName;
    req.user.surname = req.body.surname;
    req.user.email = req.body.email;

    req.user.save(function (err) {
      if (err) {
        return writeError(err.userMessage || err.message);
      }
      res.end();
    });
  }

  if (req.body.password) {
    var application = req.app.get('stormpathApplication');

    application.authenticateAccount({
      username: req.user.username,
      password: req.body.existingPassword
    }, function (err) {
      if (err) {
        return writeError('The existing password that you entered was incorrect.');
      }

      req.user.password = req.body.password;

      saveAccount();
    });
  } else {
    saveAccount();
  }
});

This will allow the form to change both the given name, surname, email and password of user. If you have additional fields that you wish to edit, then simply customize the UserProfileForm form and add the fields that you wish to edit in the route above.

Now, in order for us to access this page from the menu, open up Header.js and right below <li><Link to="/">Home</Link></li> add:

<Authenticated>
  <li>
    <Link to="/profile">Profile</Link>
  </li>
</Authenticated>

With this, using the Authenticated "https://github.com/stormpath/stormpath-sdk-react/blob/master/docs/api.md#authenticated) component, when we have a user session we'll render a link to the /profile page and allow our users to view their user profile.

In order for us to be able to access the page, we must as with the other pages add it to the router. Open up app.js and inside the tag <Route path='/' component={MasterPage}> add:

<AuthenticatedRoute path='/profile' component={ProfilePage} />

Notice that we're using AuthenticatedRoute. This is a route that can only be accessed if there is an authenticated user session. If there's no session, then the user will automatically be redirected to the path of the LoginLink.

Home Route

Now when we've setup most of our routing. Let's look at a special route called the HomeRoute. This route itself doesn't do anything. But acts as a "marker", to indicate where to redirect to when logging in and logging out.

So in order to specify where we want to end up when we log out, open up app.js and change the:

<Route path='/' component={MasterPage}>
  ...
</Route>

into:

<HomeRoute path='/' component={MasterPage}>
  ...
</HomeRoute>

Now when logging out, the Stormpath SDK will know that it should redirect to the '/' path. Now, to specify where to redirect when logging out, change the AuthenticatedRoute that we created in the previous step:

<AuthenticatedRoute path='/profile' component={ProfilePage} />

So that it looks like:

<AuthenticatedRoute>
  <HomeRoute path='/profile' component={ProfilePage} />
</AuthenticatedRoute>

Notice how the AuthenticatedRoute wraps the HomeRoute. This is used to indicate the authenticated route that we want to redirect to after login.

Logout

Finally, once our users have signed up and logged in. We want to give them the option to logout. Fortunately, adding this is really simple.

So open up Header.js and inside <ul className="nav navbar-nav navbar-right"> add this code to the end:

<Authenticated>
  <li>
    <LogoutLink />
  </li>
</Authenticated>

Notice the LogoutLink component. Once this is clicked, the user session will be automatically destroyed and the user will be redirected to the unauthenticated HomeRoute.

User State in Components

Access user state in your components by requesting the authenticated and user context types:

class ContextExample extends React.Component {
  static contextTypes = {
    authenticated: React.PropTypes.bool,
    user: React.PropTypes.object
  };

  render() {
    if (!this.context.authenticated) {
      return (
        <div>
          You need to <LoginLink />.
        </div>
      );
    }

    return (
      <div>
        Welcome {this.context.user.username}!
      </div>
    );
  }
}

Import Components

To be able to reference our pages we need to import them. And in order to make importing easy, we'll put them all together in an index.js file so we only have to import it once. So let's create a new file named index.js in our pages directory and export all of our pages from it, as shown below:

export MasterPage from './MasterPage'
export IndexPage from './IndexPage'
export LoginPage from './LoginPage'
export RegistrationPage from './RegistrationPage'
export ProfilePage from './ProfilePage'

With this, we'll only have to do one import in order to have access to all of our pages.

So let's do that. Open up app.js file and at the top of the file, add the following import statement:

import { MasterPage, IndexPage, LoginPage, RegistrationPage, ProfilePage } from './pages';

Run The Project

Now we have an application where our users can sign up, login, and show their user data. So let's try it out!

As before, start our server by running the following:

$ node server.js

And if everything is running successfully you should be able to see this message:

Listening at http://localhost:3000

So, open up http://localhost:3000 in your browser and try it out!

Wrapping Up

As you have seen in this tutorial, React is a really powerful tool and when used together with ES6, JSX and Stormpath, building apps suddenly becomes fun again.

If you have questions regarding the Stormpath React SDK, be sure to check out its API documentation.

Happy Hacking!