Frontend projects by Meet Patel explained

NOVEMBER 2025 • 10 MIN READ

A portfolio is more than just pretty pictures; it's proof of competence. In this post, I want to peel back the layers of my two most complex projects—FinDash and ShareX—and explain the architectural decisions that govern them.

Project 1: FinDash (Financial Dashboard)

The Goal: Create a dashboard that visualizes high-frequency trading data without freezing the browser.

Architecture: The Observer Pattern

In a typical React app, you might fetch data in a `useEffect` hook. For real-time finance, that's too slow. I implemented an Observer pattern where a centralized `MarketStore` class manages the WebSocket connection.

Components subscribe to specific tickers. When a price update arrives for "AAPL," the store only notifies components listening to "AAPL." This prevents a global re-render of the entire dashboard, which is critical when tracking 50+ assets simultaneously.

Visuals: D3.js Integration

I used D3.js for the heavy math (scales, axes generation) but let React handle the DOM. This hybrid approach allows us to use React's declarative nature for layout while utilizing D3's powerful algorithms for data binding.

Project 2: ShareX (File Sharing)

The Goal: Secure, peer-to-peer file transfer with zero friction.

Architecture: Finite State Machines (FSM)

File uploads are complex. You have states like `IDLE`, `CONNECTING`, `UPLOADING`, `PAUSED`, `COMPLETED`, `ERROR`. Using simple boolean flags (`isLoading`, `isError`) quickly leads to "impossible states" (e.g., being in `ERROR` and `UPLOADING` simultaneously).

I used a Finite State Machine (XState concepts) to manage the transfer lifecycle. The UI simply renders based on the `current_state`. This eliminates entire classes of bugs related to race conditions.

Security: Ephemeral Encryption

Files are encrypted on the client side before they even touch the relay server. The decryption key is part of the "share link" URL hash, which is never sent to the server. This means even I, as the developer, cannot see what users are sharing.

Common patterns across my work

Atomic Design: I break interfaces down into Atoms (buttons, inputs), Molecules (search bars), and Organisms (headers). This makes the codebase dry and consistent.
Custom Hooks: Logic is always extracted from UI. You will rarely see complex `useEffect` logic inside a JSX component in my code. It interacts via `useAuth`, `useSocket`, or `useAnimation`.

These projects represent my belief that good frontend engineering is about more than just matching a Figma design—it's about building robust, scalable software that lives in the browser.