SpikeChart - Stocks Data, MVC/SPA, Angular 6
View/manage latest stocks on chart.js
SpikeChart - Stocks Data, MVC/SPA, Angular 6
View/manage latest stocks on chart.js
![[1] SpikeChart - Stocks Data, MVC/SPA, Angular 6, View/manage latest stocks on chart.js](/projects/spike-chart-stocks/spikechart-stocks-featured.png)
![[1] SpikeChart - Stocks Data, MVC/SPA, Angular 6, View/manage latest stocks on chart.js](/projects/spike-chart-stocks/spikechart-stocks-1.png)
![[2] SpikeChart - Stocks Data, MVC/SPA, Angular 6, View/manage latest stocks on chart.js](/projects/spike-chart-stocks/spikechart-stocks-2.png)
![[2] SpikeChart - Stocks Data, MVC/SPA, Angular 6, View/manage latest stocks on chart.js](/projects/spike-chart-stocks/spikechart-stocks-3.png)
![[3] SpikeChart - Stocks Data, MVC/SPA, Angular 6, View/manage latest stocks on chart.js](/projects/spike-chart-stocks/spikechart-stocks-4.png)
![[3] SpikeChart - Stocks Data, MVC/SPA, Angular 6, View/manage latest stocks on chart.js](/projects/spike-chart-stocks/spikechart-stocks-5.png)
![[4] SpikeChart - Stocks Data, MVC/SPA, Angular 6, View/manage latest stocks on chart.js](/projects/spike-chart-stocks/spikechart-stocks-6.png)
![[4] SpikeChart - Stocks Data, MVC/SPA, Angular 6, View/manage latest stocks on chart.js](/projects/spike-chart-stocks/spikechart-stocks-7.png)
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
Webpack is a powerful module bundler used for JavaScript applications. It helps optimize the delivery of code by bundling modules, assets, and resources. Why use it? Webpack provides code-splitting, asset optimization, and powerful plugins to improve the development workflow. Best practices include setting up proper configurations for loaders and plugins. Webpack was first developed in 2012.
Javascript
JavaScript is a high-level, dynamic programming language used to create interactive web applications. Why use it? JavaScript is essential for adding interactivity, controlling multimedia, and handling events on web pages. Best practices include using ES6+ features like arrow functions, promises, and async/await. JavaScript was first developed in 1995.
Rx.js
RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using Observables. Why use it? RxJS helps manage asynchronous data streams with powerful operators, making it easier to handle events, HTTP requests, and more. Best practices include using operators like map, mergeMap, and debounce for cleaner code. RxJS was first released in 2011.
Lodash
Lodash is a JavaScript utility library that provides modular, performance-optimized functions for common programming tasks. Why use it? Lodash simplifies complex operations like deep cloning, data manipulation, and iteration, improving code readability and maintainability. Best practices include using the appropriate Lodash methods to reduce boilerplate code. Lodash was first released in 2012.
Typescript
TypeScript is a superset of JavaScript that adds static types to the language. Why use it? TypeScript improves code quality by enabling type checking, autocompletion, and error detection during development. Best practices include using strict typing and leveraging TypeScript's powerful interfaces and generics. TypeScript was first released in 2012.
Angular playground
Angular Playground is a development environment for building and testing Angular components in isolation. Why use it? Angular Playground helps speed up development by allowing developers to test components without the need for a complete app. Best practices include creating reusable components and testing across various scenarios. Angular Playground was introduced in 2018.
Proxy
A proxy server acts as an intermediary between a client and a server, providing benefits like security, load balancing, and caching. Why use it? Proxies help improve performance and security by hiding the client’s real IP address and offloading server-side tasks. Best practices include using reverse proxies for load balancing and securing sensitive data. Proxies have been in use since the early days of the internet.
Node.js
Node.js is a JavaScript runtime built on Chrome's V8 engine for building server-side applications. Why use it? Node.js offers fast performance and scalability, making it ideal for real-time applications and APIs. Best practices include using async/await, modularizing code, and using event-driven programming. Node.js was first released in 2009.
Moment.js
Moment.js is a JavaScript library for parsing, manipulating, and formatting dates and times. Why use it? Moment.js simplifies date and time operations, including timezone support and date formatting. Best practices include using it for working with dates in applications that require time-sensitive operations. Moment.js was first released in 2011.
Chart.js
Chart.js is a JavaScript library for creating simple yet flexible charts. Why use it? Chart.js makes it easy to visualize data with a variety of chart types and smooth animations. Best practices include using Chart.js for lightweight visualizations and customizing chart elements. Chart.js was first released in 2013.
Restful api
RESTful API is an architectural style for designing networked applications using HTTP. Why use it? It simplifies communication between clients and servers using stateless, scalable, and flexible endpoints. Best practices include following REST principles like resource-based URIs and proper use of HTTP methods. RESTful APIs have been in use since the early 2000s.
Serviceworker
A Service Worker is a script that runs in the background of a web browser, enabling features like offline capabilities and push notifications. Why use it? Service Workers allow websites to function offline, improve performance, and enable real-time updates. Best practices include handling updates and caching efficiently. Service Workers were introduced in 2015.
Webworker
Web Workers allow JavaScript to run in the background, off the main thread, to avoid blocking UI updates. Why use it? Web Workers improve performance by handling CPU-intensive tasks without affecting the user interface. Best practices include managing communication between the worker and the main thread. Web Workers were first introduced in 2009.
Mock-back-end
A mock back-end is a simulated server used to test front-end applications without needing a real back-end. Why use it? Mock back-ends help developers focus on UI and functionality before integrating with real APIs. Best practices include using mock services for unit testing and prototyping. Mock back-ends became popular with the rise of front-end development frameworks.
Fake-back-end
A fake back-end is a temporary solution used to simulate the behavior of a real back-end system during development. Why use it? Fake back-ends allow for faster development by mimicking server responses and reducing the need for actual back-end integration. Best practices include using tools like JSON Server to quickly set up a fake back-end. Fake back-ends are common in early stages of front-end development.
Resolvers
Resolvers are functions in GraphQL that handle data fetching for queries and mutations. Why use it? Resolvers map GraphQL operations to backend data sources, ensuring efficient data retrieval. Best practices include handling errors gracefully and keeping resolvers modular. Resolvers have been a core part of GraphQL since its introduction in 2015.
Authentication
Authentication is the process of verifying the identity of a user or system. Why use it? Authentication ensures that only authorized users can access specific resources, improving security. Best practices include using multi-factor authentication (MFA) and storing passwords securely. Authentication has been essential in computing since the early days of digital security.
Ux/ui
UX/UI design focuses on the user experience and interface design for digital products. Why use it? UX/UI design ensures that products are user-friendly, accessible, and visually appealing. Best practices include user testing, maintaining design consistency, and focusing on responsive design. UX/UI design has been a key focus of web development since the early 2000s.
Agile development
Agile development is a software development methodology that emphasizes flexibility, collaboration, and iterative progress. Why use it? Agile enables teams to adapt to changes quickly, deliver working software early, and respond to customer feedback. Best practices include continuous testing and regular sprint reviews. Agile originated in 2001.
Materials.io
Material Design is a design language developed by Google, providing guidelines for creating visually appealing and user-friendly interfaces. Why use it? Materials.io helps create consistent, intuitive, and aesthetically pleasing user experiences across platforms. Best practices include following Material Design principles for layout, color, and typography. Materials.io was launched by Google in 2014.
Newsapi.org
NewsAPI is a simple HTTP REST API for searching and retrieving live articles from all over the web. Why use it? NewsAPI provides a simple interface for integrating real-time news data into applications, useful for news aggregation and media apps. Best practices include filtering news sources and limiting the number of requests. NewsAPI was launched in 2015.
Es6
ES6 (ECMAScript 2015) is the sixth edition of the ECMAScript standard, introducing new features like classes, modules, and arrow functions to JavaScript. Why use it? ES6 makes JavaScript code cleaner, more modular, and easier to manage. Best practices include using let/const over var and taking advantage of modern JavaScript features. ES6 was finalized in 2015.
Spa
SPA (Single-Page Application) is a web app that interacts with the user by dynamically rewriting the current page. Why use it? SPAs provide a smoother, more seamless user experience with fast page loads and minimal server interactions. Best practices include using client-side routing and lazy loading. SPAs became popular in the late 2000s.
Mvc
MVC (Model-View-Controller) is an architectural pattern for designing web applications. Why use it? MVC separates data, user interface, and user input, making applications easier to manage and scale. Best practices include separating concerns, using routers for navigation, and leveraging templates for views. MVC has been in use since the 1970s.
Git
Git is a distributed version control system that helps manage source code changes. Why use it? Git allows for collaboration on projects, tracking changes, and efficient branching. Best practices include committing early and often, and using branching strategies like Gitflow. Git was first developed in 2005.
Scss
SCSS (Sassy CSS) is a CSS preprocessor that extends CSS with features like variables, nested rules, and mixins. Why use it? SCSS improves CSS by making it more maintainable and reusable. Best practices include organizing styles in partials, nesting selectors logically, and using mixins for reusable code. SCSS was first released in 2006.
Production environments
A production environment is where the final, live version of an application or service is deployed. Why use it? Production environments are essential for end-users to access the fully functional version of an app. Best practices include ensuring scalability, security, and performance in the production environment. Production environments have been a fundamental part of software deployment since the 1990s.
Devops azure pipeline
Azure DevOps Pipelines is a cloud service that automates the building, testing, and deployment of applications. Why use it? It integrates with Azure services and supports multi-platform environments, improving continuous integration and deployment. Best practices include automating testing and deployment pipelines for faster delivery. Azure Pipelines was introduced in 2018.
Heroku
Heroku is a cloud platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Why use it? Heroku simplifies deployment and management of apps, with support for multiple programming languages and easy integrations. Best practices include using Heroku’s built-in monitoring tools for performance insights. Heroku was founded in 2007.
Responsive
Responsive web design ensures that web pages look good on all device sizes. Why use it? It improves user experience across desktop, tablet, and mobile devices. Best practices include using flexible grid layouts, responsive images, and media queries. Responsive design became a standard practice in 2010.
Regex
Regex (regular expressions) is a powerful tool for searching and manipulating text based on patterns. Why use it? Regex allows for efficient text validation, data extraction, and replacement operations. Best practices include using specific patterns to avoid inefficiencies and testing expressions with tools like Regex101. Regex has been a part of computing since the 1960s.
Guards
In web development, guards are functions that protect routes or access points in applications. Why use it? Guards ensure that only authorized users can access certain parts of an application, improving security. Best practices include using guards in authentication and authorization checks. Guards have been commonly used in modern web frameworks like Angular and React.
Jenkins
Jenkins is an open-source automation server used for continuous integration and continuous delivery (CI/CD). Why use it? Jenkins automates tasks like building, testing, and deploying software, improving development workflow. Best practices include using pipelines for automated builds and integrating with version control systems. Jenkins was first released in 2011.
Swagger/postman
Swagger and Postman are tools for testing and documenting RESTful APIs. Why use them? Swagger allows for automatic generation of API documentation, while Postman helps developers test API requests and responses. Best practices include using these tools for consistent API testing and validation. Swagger was first released in 2011, and Postman in 2014.
Bootstrap
Bootstrap is a popular open-source front-end framework for building responsive websites and applications. Why use it? Bootstrap includes pre-designed UI components, grid systems, and CSS styles, making it easier to build consistent, mobile-first websites. Best practices include customizing the framework to fit your design needs and using the grid system effectively. Bootstrap was first released in 2011.
Express.js
Express.js is a fast and minimalist web application framework for Node.js. Why use it? Express simplifies routing, middleware, and server setup, making it ideal for building APIs and web applications. Best practices include using middleware for handling errors and request validation. Express.js was first released in 2010.