Description

This is my implementation of the MrQ Lindar Challenge. I've tried my best to replicate my implementation as close as possible to the one shown in the instructions, keeping in mind the most efficient approach. I've attempted to implement all suggestions provided, including the Race Condition fix, Utilizing Redux for persisting the active state of the card, and reducing the initial bundle size with Suspense and React.lazy

Types of changes

1. Fully Replicated the Card Including the Glow States, Active/InActive States, The trend indicators, and Shake Animations
2. Utilized Custom Hooks for the Shake & Flash Logic
3. for the Active State, The card gets a black box-shadow with a 2% increase and the inactive cards get another 2% decrease, The shake animation is triggered upon a 25% price change, and the Red/Green Flash is triggered on whether the price goes up or down
4. Used a Granular Approach when restructuring the SymbolCard.
   • SymbolCard.tsx (Main Smart Card)
   • SymbolCardHeader.tsx
   • SymbolCardPrice.tsx
   • SymbolCardInfo.tsx
   • SymbolCardTrendIcon.tsx
5. Replicated the Scroll behaviour
6. Replicated the card Container utilizing grid
7. Fixed the +Info functionality
8. The performance amount, the stock price and the market cap have all been formatted as shown in the videos utilizing a helper function.
9. Utilized Redux the fix the persistence of the active state of the card
10. Fully Responsive Web App as shown in the instruction videos.
11. Improved Initial Loading time using Suspense and React.lazy
12. Fixed Race Condition Issue to improve what data is shown more accurately
13. Adhered to the standard Component Structure & Utilized BEM Methodology For CSS Classes
14. When Animations run, only the affected parts of the components is updated, keeping re-rendering to an absolute minimum
15. Price Chart Retains the width of 400px. With the dashboard changing at 1024px (Performance Graph disappears, as well as price chart appearing on top rather than to the right), at 1280px There is also a change in the size of the cards to replicate the dashboard even further.

A more detailed explanation on certain problems and results can be found here:

frontend/notes.md

How has this been tested?

This has been tested on local environment on Windows and on MacOS.
Responsiveness has been tested rigorously on different viewports

Screenshots

Desktop:

Mobile:

Checklist:

• My code is tested on Mac And Windows Operating Systems
• My code is Responsive across all different viewports
• My code aheres to all the requirements listed in the README File available