React Frontend: Login, Subscriptions & Real-time Crypto Alerts

Welcome to the exciting world of building a dynamic React SPA frontend that empowers users to take control of their cryptocurrency investments through seamless authentication, intuitive subscription management, and real-time alerts powered by SignalR. This article dives deep into the frontend development process, outlining the essential user stories, acceptance criteria, and sub-tasks required to create a robust and user-friendly application. Get ready to build a powerful tool that keeps users informed and ahead of the market!

User Story: Your All-in-One Crypto Monitoring Dashboard

Imagine a user, let's call her Alex. Alex is passionate about cryptocurrency but finds it challenging to keep up with the volatile market. She wants a simple yet powerful way to monitor her favorite digital assets and be instantly notified of significant price movements. That's where our React SPA frontend comes in! Our primary user story is: As a user, I want to log in via Keycloak, create price drop subscriptions, and see alerts in real-time on my dashboard, so that I can monitor cryptocurrency prices and receive immediate notifications when drops occur. This user story encapsulates the core functionality and the ultimate value proposition for our users. It's about providing them with the tools to stay informed and make timely decisions in the fast-paced crypto world. By integrating with Keycloak for secure authentication, allowing granular subscription creation, and delivering instant alerts via SignalR, we're building a comprehensive solution that addresses Alex's needs and enhances her trading experience.

This user-centric approach guides our development, ensuring that every feature we build directly contributes to empowering the user. From the moment Alex logs in, she should feel in control and confident that the application is working for her. The ability to set up specific price drop thresholds for different cryptocurrencies means she can focus on what matters most to her, without being overwhelmed by constant market noise. And when an alert fires, it needs to be immediate and clear, allowing her to react swiftly. This entire flow, from secure login to actionable alerts, is designed to provide a seamless and valuable experience for every cryptocurrency enthusiast.

Acceptance Criteria: A Detailed Blueprint for Success

To ensure we deliver a top-notch React SPA frontend, we've defined a comprehensive set of acceptance criteria. These criteria act as a detailed blueprint, outlining the expected behavior of our application and serving as the foundation for our testing strategy. Let's break down these crucial scenarios:

Scenario 1: Seamless Keycloak Login

Our journey begins with secure and effortless authentication. Given I visit the React SPA, When I click "Login", Then I am redirected to Keycloak, authenticate, and return to the app with an access token stored securely. This PKCE flow is paramount for protecting user credentials and ensuring a smooth onboarding process. We'll be leveraging Keycloak's robust security features to handle user authentication, providing a trusted and familiar login experience.

Scenario 2: Persistent User Sessions

We understand that users expect their sessions to be maintained. Given I am logged in, When I reload the page, Then I remain logged in (token is read from localStorage or sessionStorage). This ensures a non-disruptive user experience, allowing users to seamlessly continue their work without needing to re-authenticate every time they refresh the page. Securely storing the token in localStorage or sessionStorage is key here.

Scenario 3: Clean Logout

Security and good practice dictate a clean logout process. Given I am logged in, When I click "Logout", Then the token is cleared and I am redirected to the login screen. This ensures that user sessions are properly terminated, enhancing the overall security of the application.

Scenario 4: Intuitive Subscription Creation UI

Empowering users to customize their alerts is vital. Given I am logged in, When I navigate to the Subscriptions page, Then I see a form with fields: Symbol (text), DropPercentThreshold (number), WebhookUrl (optional text). This form will be designed for clarity and ease of use, making it simple for users to define their specific alert conditions.

Scenario 5: Submitting New Subscriptions

Once the form is filled, submitting a subscription should be straightforward. Given I fill the subscription form with valid inputs, When I click "Create Subscription", Then a POST request is sent to /api/v1/subscriptions via the BFF; success shows a confirmation message. This action triggers the backend to set up the new alert, and the user receives immediate feedback.

Scenario 6: Viewing Existing Subscriptions

Users need to easily see and manage their active subscriptions. Given I am logged in, When I load the Subscriptions page, Then I see a table of my subscriptions with Symbol, Threshold, CreatedAt, and Edit/Delete buttons. This table provides a clear overview of all configured alerts.

Scenario 7: Editing and Deleting Subscriptions

Flexibility is key. Given I click "Edit" or "Delete" on a subscription, When I confirm the action, Then a PUT or DELETE request is sent to the BFF; the list updates after success. This allows users to modify or remove subscriptions as their needs evolve.

Scenario 8: Establishing SignalR Connection

For real-time alerts, a robust connection is essential. Given I am logged in and the page is loaded, When the SignalR hub connects, Then a persistent connection is established to /hubs/alerts. This connection forms the backbone of our real-time notification system.

Scenario 9: Real-time Alert Display

The core of our real-time functionality. Given I am connected to the SignalR hub and watching a subscribed symbol, When a price drop triggers an alert, Then the alert appears on the dashboard in real-time (within 1 second). This lightning-fast delivery ensures users never miss a critical market movement.

Scenario 10: End-to-End Test Validation

Comprehensive testing is non-negotiable. Given I run the E2E test suite (docker-compose + app + Playwright), When I login, create a subscription, trigger a simulated price drop, Then within 10 seconds, the alert appears on the dashboard. This end-to-end validation ensures the entire system works harmoniously from frontend to backend and back.

Scenario 11: Responsive UI Across Devices

Accessibility is paramount. Given I view the app on different screen sizes, When I test the UI, Then all forms and alerts are readable and interactive on mobile (< 768px) and desktop (> 1024px). Our React SPA frontend will be designed with responsiveness at its core, providing an optimal experience regardless of the device.

Scenario 12: Protecting Sensitive Routes

Ensuring only authenticated users access certain features is crucial. Given I do not have a valid token, When I try to access /subscriptions or /dashboard, Then I am redirected to the login page. This safeguards user data and maintains application integrity.

Sub-tasks: Breaking Down the Development

To systematically build our React SPA frontend, we've broken down the project into manageable sub-tasks:

• T6.1.1: Implement Keycloak PKCE login flow with token storage and session management: This involves setting up the authentication flow, handling token acquisition and secure storage, and ensuring session persistence across reloads and clean logout.
• T6.1.2: Build subscription creation/edit/delete UI with form validation: Focuses on creating an intuitive user interface for managing subscriptions, including robust client-side validation for all input fields.
• T6.1.3: Implement SignalR client integration with connection management and alert display: This task covers establishing and maintaining the SignalR connection, handling incoming alert messages, and dynamically updating the UI to display real-time alerts.
• T6.1.4: E2E test (Playwright): login → create subscription → trigger alert → assert in UI within 10s: This critical task ensures the entire user flow, from authentication to alert reception, functions correctly and within performance expectations.

Definition of Done: Ensuring Quality and Completeness

Our