The requirements presented to me for the coding challenge were pretty sparse :

1. Create an application for managing “news” articles for a user’s stock portfolio.
2. It needs to be responsive so it displays nicely on a variety of devices.

Naturally, I had to add my own requirements :

1. The users’ stock portfolio and news needs to be persistent; a user should not have to re-create their portfolio every time they use the application.
2. Stock data for the users’ portfolio needs to be refreshed in real-time.
3. The user should be able to view historical data for a stock in a chart.

Why Components are Awesome

The cool thing about modern web frameworks is that they force you to compartmentalize your stuff into reusable widgets. So, instead of a huge monolithic Javascript file you have a bunch of self-enclosed “widgets”. Each “widget” performs a specific task and has it’s own javascript, html, css, and tests. A “widget” can be used for fetching data or displaying a particular section of markup. This a huge boon when working on large projects on a large team as it allows you to break up the work more easily.

Stock Portfolio Components

I broke up the application into 8 Components: The NavigationComponent will always be displayed in the header. Clicking on “Add Symbols” will bring up the TickerAddComponent which will allow the user to add stock symbols. Clicking on “Add News” will bring up the TickerNewsAddComponent which will allow the user to add news for a stock symbol. The TickerComponent will be displayed on the “home” page. Clicking on a stock symbol will bring up the TickerContainerComponent which hosts the TickerChartComponent, TickerDetailsComponent, and TickerNewsComponent.

Mock-up

This is a mock-up of what the Components looks like as well as their interaction.

In a hurry?

The finished source code is available on my GitHub repository.

The finished application is up-and-running on Heroku here. Be aware that it is running on a “free” development server so give it a minute or so to spool up.

Till next time!

-Scott

Next : Finding a financial web service

Previous : Challenge Accepted

---

#Angular6 #Angular #CodingChallenge #FrontEnd #Heroku #Bootstrap #AngularMaterial#Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded

The Interview Coding Challenge

I’m interviewing right now. One thing that has changed dramatically since I last interviewed is …. the dreaded “Coding Challenge”. What used to consist of a quick whiteboarding excercise has now progressed into the design and development of an entire application. The good news is that employers typically allow you to do it from the comfort of your own home and at your own pace. The bad news is that the challenges can be quite elaborate.

A Stock Portfolio using Angular 6

One of the coding challenges that I was presented with by an employer was to develop a “stock portfolio” application that would allow you to enter stock tickers and news articles. The rules were vague: I just needed to use a newer Javascript Framework ( React, Angular, Vue, etc … ) as well as a Presentation Framework ( Angular Material, Bootstrap, etc… ).

I accepted the challenge, started working on it, and then quickly realized how much cooler the stock portfolio application could be with some additional features. I coul pull in Local Storage, a Live Stock Feed, Charting! Professionally this would be taboo – a bad case of what is know as scope creep. However, being unemployed with some extra time on my hands I felt it was an opportunity to showcase something pretty cool.

In a hurry?

The finished source code is available on my GitHub repository.

The finished application is up-and-running on Heroku here. Be aware that it is running on a “free” development server so give it a minute or so to spool up.

Till next time!

-Scott

Next : Requirements, Components, and Mock-ups.

---

#Angular6 #Angular #CodingChallenge #FrontEnd #Heroku #Bootstrap #AngularMaterial#Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded