The requirements presented to me for the coding challenge were pretty sparse :
- Create an application for managing “news” articles for a user’s stock portfolio.
- It needs to be responsive so it displays nicely on a variety of devices.
Naturally, I had to add my own requirements :
- 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.
- Stock data for the users’ portfolio needs to be refreshed in real-time.
- The user should be able to view historical data for a stock in a chart.
Why Components are Awesome
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.
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!
Next : Finding a financial web service
Previous : Challenge Accepted
#Angular6 #Angular #CodingChallenge #FrontEnd #Heroku #Bootstrap #AngularMaterial#Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded
2 thoughts on “A Stock Portfolio using Angular 6 : Requirements, Components, and Mock-ups”