status: busy

SpikeChart - Stocks Data, MVC/SPA, Angular 6

View/manage latest stocks on chart.js

Overview

The SpikeChart application allows users to view and manage stock data through dynamic charts built with Chart.js. The app integrates a real-time API search feature to fetch the latest stock data, displaying minimum, average, and maximum values on the charts. A sidebar provides users with the latest news, and news items can be viewed in a popup modal. Users can also post the latest feeds, rate them, and search for specific stock data with full or partial matches.

Features

  • Charting: Real-time stock data visualization using Chart.js.
  • News Feed: Latest stock-related news displayed in the sidebar, with popup modal view.
  • Search: Search functionality with full and partial match capabilities.
  • User Contributions: Users can post new feeds with their ratings.
  • Mock Back-end: Due to client privacy, live data is simulated through a mock back-end.

Tech Summary

  • Frontend: Angular 6, TypeScript, RxJS, Chart.js
  • Backend: Microsoft Azure, Swagger, Mock Back-end for client
  • DevOps: Jenkins, Bitbucket, Azure Pipelines
  • Testing & Linting: Angular CLI, Service Worker, Webpack, Mocking, API Integration

Outcome

The SpikeChart application provided a fully-featured stock tracking platform for users, with a robust front-end built using Angular 6 and a back-end mocked via a node.js server. The project successfully demonstrated real-time data visualization and efficient user interaction with stock data.

Technologies:

webpack
javascript
rx.js
lodash
typescript
angular playground
proxy
node.js
moment.js
chart.js
restful api
serviceworker
webworker
mock-back-end
fake-back-end
resolvers
authentication
ux/ui
agile development
materials.io
newsapi.org
es6
spa
mvc
git
scss
production environments
devops azure pipeline
heroku
responsive
regex
guards
jenkins
swagger/postman
bootstrap
express.js

Categories:

FeaturedMVCAngularFront-End

View Demo