Node & Express Tutorial | Stock Ticker App, Part 1

Getting Started and Login Page

In this tutorial we will be looking at how to handle multiple API requests to collect data on a variety of different stocks. To do this we will be creating a website where the user can sign up, login, add a variety of different stock symbols, and get updates on the price when they refresh the page.

If you want to see the finished product in action you can go here.

This tutorial will be multiple parts and will be laid out as such:

1. Getting started and login page
2. Adding stock symbols to the users database and displaying those symbols
3. Hitting the APIs and displaying the data

Getting Started:

First, we need to install the Turbo 360 cli which will allow us to run our code locally and deploy it globally. You can do this by running the following commands:

sudo npm install webpack -g
sudo npm install gulp -g
sudo npm install turbo-cli -g

Also make sure you have the newest version of Node.js installed which at the time of writing this is v8.9.4

We then need to make an account on Turbo 360. Once you have made an account navigate to your dashboard and create a new app. I will be calling mine Stock-Tracker

In the following vertex screen find your app ID and copy it. You will need this to link your local repository to the deployed vertex.

Next make a local project for your Turbo Vertex. You can do this by running.

turbo new <PROJECT_NAME>

I called mine StockTracker

After doing this navigate into the StockTracker directory and run ‘npm install’ this will install the dependencies needed for our website.

Once the dependencies are finished installing paste your app ID at the end of

turbo app <APP_ID>

replacing ‘<APP_ID>’ with your app ID after doing this press enter.

This will link our local version to the deployed version so if we now do ‘turbo deploy’ our app will be deployed. Once it is completed go back to where you got your app ID and click staging to see your currently deployed website.

NOTE: You can also see a local version by running

turbo devserver

and navigating to localhost:3000 in a web browser this will be important later.

Login:

So let’s get started on our website by removing what is there right now and creating our own homepage. To do this navigate to the views directory and open index.mustache

Delete everything in your index.mustache besides the script imports at the bottom. Your index.mustache should look like this:

From here we can add a header so people know what our website is and a sign up and login form for people to join and use our website.

Here is what mine looks like:

If you navigate to the root directory of the project and run

turbo devserver 

you can launch a local instance in which you can see what your website looks like at localhost:3000. Here is mine:

With our front end up and running let’s make it so people can actually log in. Open up the routes folder and the file ‘index.js’ located within. Let’s delete everything we don’t need which will be everything but the ‘/’ route. Your file should look something like this:

Let’s add a post route for login and signup. Also let’s make a stocks route for when the user logs in or signs up. It should look something like this:

From here let’s add the logic for login and signup where if they are signing up we make a new user and if they are logging in we verify their credentials. Let’s also add a response to ‘/stocks’ so we can test it.

That will look like this:

Now if we run turbo devserver again and signup a user like so:

We should be redirected to /stocks which will show:

You can now login that user by typing that user’s credentials into the login form on the homepage.

Right now you can navigate to ‘/stocks’ without logging in and you can also login multiple users at our home url ‘/’ so let’s add a couple nice to haves being: not being able to access ‘/stocks’ without being logged in, if you are already logged in and try to access ‘/’ you will be redirected to ‘/stocks’ and if you fail a login an error message will be displayed.

Let’s start will the first two. These will be easy as all we have to check is that there is or is not an active user vertex session. It will look something like this.

Now if you run ‘turbo devserver’ and test (and tested earlier by signing up a user) you will find you are unable to navigate back to ‘/’ it will just redirect you to ‘/stocks’ this means we already have a user logged in. To fix this let’s make a route called ‘/logout’ that will log out our user.

Now if we navigate to ‘/logout’ we will have our user logged out and be redirected to ‘/’. You will also notice that you are no longer able to access ‘/stocks’ without logging in. This will come in handy later when we want to create a logout button.

Now for the error message. You may notice that if we are redirected from an error in login or signup there is a query parameter for the error. Let’s just check for that in our ‘/’ route and if it is there send it to our page. It will look like this:

Now we actually have to display this parameter. Go back to the ‘index.mustache’ file and display them like this:

Now when I try to login with a user that doesn’t exist I get:

Now that we have a way to sign up and log in a user let’s now get started on the real work of our stocks tracker, the stocks page. Navigate to the views directory and create a new file called ‘stocks.mustache’. This will be the page that is displayed for us to look at our stocks. Here is my newly created file:

Let’s add a little description so we know what this is. I am going to add a title that says “Stock Prices!”, a logout button, a form to add a stock symbol, and an unordered list where I will put my stocks later.

Here is mine with everything added.

Before you can test this you have to go back to your routes in index.js and change the JSON response to a res.render of the stocks file like this:

Now if you login your page should look like this:

This is the end of this part of the tutorial. In the next part we will start adding stock symbols to users in the datastore and displaying them in our unordered list.