- npm install
- npm run dev
Objective: Develop a React (TypeScript) application that interfaces with Finnhub Stock APIs to display real-time stock information.
- A user interface for stock selection via a dropdown menu. An input field to set up price alerts for individual stocks.
Display widgets that present the stock's current value and its percentage change. Visual indicators that change color based on the stock's performance relative to the alert price: red for below and green for above.
A graphical component plotting the value of monitored stocks in USD. Advanced Implementation for PWA: Transition the application to a Progressive Web App for enhanced performance and offline capabilities. Manage WebSocket connections in the background, storing data in local storage for quick retrieval. Integrate web push notifications to alert users when stock prices drop below set thresholds.
https://skill-test-73oy.vercel.app/
https://docs.google.com/document/d/1hgz3zVLlDJvAIqfJoYcVSG4anyppYF2CzP2Adu2DE2o/edit?usp=sharing
Folder Structure
The project follows a feature-centric modular structure that facilitates scalability and maintenance.
src: Contains all the source code of the application.
api: Functions for communication with WebSockets and the Finnhub API, managing real-time data subscriptions.
assets: Static resources such as images and global styles.
components: Reusable React components.
cards: Specific components for displaying stock information cards (TopCards).
form: Components related to user forms.
graph: Components for data visualization, such as stock charts (StockChart).
context: React contexts for managing global application state.
firebase: Configuration and utilities for Firebase integration in the application.
interfaces: TypeScript definitions for typing throughout the application.
pages: Page components that use other components to form complete screens.
style: Style sheets for the application.
Core Components
LeftForm: Acts as the input form for stock data subscriptions. Uses context to manage global state and persists data in localStorage.
TopCards: Displays key information of subscribed stocks. Performs calculations and manages local state.
StockChart: Visualizes historical and current stock data in a chart format.
State and Data
Global state is managed through the React Context API, providing centralized and reactive access to form data throughout the application. Local persistence is achieved using localStorage, ensuring user state is maintained between sessions. Real-Time Communication
WebSockets are used for real-time bidirectional communication with the Finnhub API, allowing dynamic subscriptions and unsubscriptions to stock market data. Types and Interfaces
TypeScript is used to define types and ensure code consistency and safety. Interfaces define data structures for API responses, form data, and stock data, facilitating integration and error handling. Styles
Styles are managed at the component level for encapsulation and are complemented by global stylesheets for application-wide consistency. Notifications
The project integrates Firebase for sending notifications, alerting users to significant changes in stock prices. Security and Environment
Environment variables and security configurations are managed through .env files and Firebase configuration, ensuring that credentials and API keys are not exposed in the source code.
In this project, we have applied a variety of design patterns to achieve an efficient and maintainable code structure:
-
Module Pattern: Each folder within
src
acts as a module, encapsulating related functionalities such as components, API connections, and state management. This promotes high cohesion and low coupling among the various parts of the project. -
Observer Pattern: WebSockets are utilized to implement the Observer Pattern, enabling our components to subscribe to and react to real-time stock market data. The component state is updated in response to new data streams.
-
Container/Presentational Components Pattern: Components that handle state and logic (
LeftForm
) are separated from those dedicated to presentation (TopCards
,StockChart
). This division enhances the reusability and testability of the presentational components and ensures a more predictable state management. -
Context API Pattern: React's Context API is used to manage global state across the application, eliminating the need for prop drilling. This simplifies data flow and enhances component performance by reducing unnecessary renders.
-
Singleton Pattern: A unique setup for Firebase and WebSocket ensures a single instance of each, essential for preventing multiple unwanted instances and streamlining connection management.
-
State Pattern: React's state hooks enable components to alter their behavior in response to internal state changes, showcasing the State Pattern in managing component lifecycles and rendering logic.
These patterns are intentionally utilized to enhance the clarity of the codebase, the scalability of the application, and its maintainability over time.