I think these are pancakes…? Maybe it’s naan…

My First Full-Stack App: Wolfstreet

An MVP Project — Demo At the Bottom

36 hours of little sleep and no showering. Briskly eating meals and pounding down some espressos and Red Bull. I am now the proud creator of a full-stack app. On the brisk fall morning of Monday, October 17th, we were launched into a Hackathon-like MVP project phase until Tuesday night. We were tasked with scoping out a minimal viable product to challenge ourselves with everything we had learned so far at Hack Reactor. Seeing as how I just learned Angular a couple days ago, I thought it’d be best to create an Angular web app. L-O-L…

Here is my cute little logo

So what exactly does your app do?

To be honest, not that much. We were tasked with a mock press-release for our product before working on our apps so let me give you an excerpt from what I wrote:

Transform from a sheep to a wolf as you take on the markets of Wall Street.
Have you ever struggled to follow your investments? What are market caps and highs and lows? What are volatility measures and alpha ratings? And what are those darn third party ratings have to do with anything?
Now you have a personal market dashboard to help you follow the markets and turn you into a part time trader!
-Get easy access to stocks you follow
 -Figure out markets and monitor your positions
 -Watch companies you might want to invest in
 -Get personal recommendations on top gains and biggest losers
 -Have a market dashboard on your browser that you can use to monitor positions all day long
 -Informative graphics and live updates
I will make you into Rick Ross

I kind of cracked up reading the press release I wrote, but I do think I hit a lot of the main points I wanted to create in my app.

But this was the more technical scope I worked through:

  • Create a personalized stock portfolio / dashboard system
  • Get the market data from a third-party API
  • Create a sleek product with responsive visualizations
  • Boot up a server to route requests from the front-end
  • Save stock data and persist it into a database

It is ridiculous to think how many man hours go into creating fantastic products. I realized that despite all the hours I logged the past couple days grinding away, I barely scratched the surface. Software never is in it’s final form, it just comes out with new developments and enhancements.

“Software is never complete, it is only released.”

Okay, I’m getting too philosophical now. No more.

What technologies did you use?

I used the MEAN stack, which stands for MongoDB, ExpressJS, AngularJS, and Node.js. I used Mongoose as the ORM for MongoDB (which you all should to avoid what Javascript developers so endearingly know as callback hell) as well as Q to promisify Mongoose’s queries and Angular’s native $q promise module. For visualizations I’ve been wanting to explore dynamic rendering and interactive charts so I dabbled with both Highcharts (found an unofficial Angular module for it) and Angular-Chart JS.

If this sounds like gibberish to you, it all was gibberish to me as well 36 hours ago. I used Angular/Google Material styling and design concepts for basic styling and so my divs wouldn’t all destroy each other. It’s super clean to use and lots of ways to get started.

Where did you get your market data?

I connected to the Markit Data Api to get my third party finance data. I really wanted to use the Google Finance API, but it’s deprecated now and there’s no good documentation. Also, the data wasn’t as neatly organized as Markit. Yahoo Finance API was a complete wasteland so I didn’t even bother.

Markit also primarily defaults to sending XML and not JSON. I do have to say figuring out how to use their API was a bit of a struggle initially. You also have to turn on CORS in order to send $http requests through Angular to their API. A lot of hours were spent figuring out the complexities of HTTP requests…

What were the hardest parts?

  1. I had literally just learned Angular a couple days before starting this project so I think that was pretty tough as Angular is very opinionated and wants done in a particular way. There’s also an avalanche of native features available, but amazing documentation. I’m a huge fan of Angular and love the two way data binding that allows for dynamic rendering.
  2. But, it was also tough getting started from scratch. I had to create and structure a bunch of files and directories from scratch and figure out installing all the different dependencies. I may have to get my hands dirty with some more React apps in the future. Especially, with Create-React-App, which super simplifies all the things you need — dependencies, basic server, etc.
  3. I’m definitely weaker on back-end concepts so getting an ExpressJS up and running was the hardest part. Once I got it up and running, I was having issues with routing, figuring out, what middleware needs to be used, etc. Needless to say, it was a great struggle, but great learning experience for me.
  4. No sleep and the stress was pretty tough. I wanted to bang my head against the wall a bunch of times. There’s only so much Red Bull in the world that can help you through.

I am attempting to deploy to the magic box known as Heroku, but might just deploy on Digital Ocean instead as I am having some technical difficulties. You’ll just all have to wait to become Wolves of Wallstreet and in the meanwhile enjoy this gif demo of the app.

…or visit my github and contribute to my project: Wolfstreet