Backchannel

Dec 15, 2022

Backchannel – Development Highlights

Stack: React, JavaScript, TypeScript, Tailwind CSS, Nest.js, Prisma, PostgreSQL, SendGrid, Auth0

My Role

I joined the Backchannel project as a frontend developer, but my responsibilities extended beyond the frontend. Throughout my involvement, I had the opportunity to tackle a wide range of development tasks, including frontend and backend work.

Notably, I played a pivotal role in building an email notification service using Nest.js and SendGrid, enhancing user engagement and communication. Additionally, I contributed to our Stripe payments service, ensuring seamless and secure payment processing.

Project Description

Backchannel is a cutting-edge legal settlement application designed to facilitate the resolution of monetary disputes outside of the courtroom. It empowers lawyers and law firms to engage in a transparent and efficient blind bidding process to reach mutually beneficial agreements.

Highlights

As a developer on the Backchannel project, I had the opportunity to contribute to several critical aspects of the application. Here are some of the key development tasks I undertook during the project, along with additional insights into each.

Modal Component

One of the core features of the Backchannel project that I created during this project was the creation of a versatile Modal component. This component played a crucial role in various aspects of the application, including:

  • Matter Creation: The Modal component was used to create new legal settlement instances called "matters." Its flexibility allowed us to adapt it for different purposes, such as changing and defaulting payment methods, agreeing to matter bidding deadlines, and confirming bidding amounts. This versatility saved development time and ensured a consistent user experience.

  • Bidding Functionality: The Modal component was integral to the bidding process. It provided a user-friendly interface for lawyers and law firms to submit their blind bids. This functionality required intricate integration with the backend systems to ensure the confidentiality and integrity of the bidding process. The Modal's design made it easy for users to input their bids and view bid statuses, enhancing the overall usability of the application.

  • User Account Settings: Within the realm of user account management, the Modal component was employed for various settings adjustments. This included tasks like updating personal information, managing notification preferences, and reviewing account security settings. The component's adaptability allowed us to create a unified and intuitive experience across different settings, simplifying the user's interaction with the platform's diverse functionalities.

These enhancements to the Modal component were not only technical achievements but also critical in improving the user experience and efficiency of the Backchannel application. They demonstrate the component's robustness and our commitment to creating a user-centric application.

Checkout Form

Creating a seamless and secure checkout process was paramount for the success of the project. The Checkout Form supported credit and debit cards and posed several interesting challenges, including:

  • Stripe Integration: Integrating Stripe for payment processing required careful consideration of security. We implemented an API "middle layer" on the frontend to securely fetch payments from our backend Stripe service. This architecture ensured that sensitive payment information remained protected.

  • Styling and Form Validation: We utilized Stripe's "Appearance API" to match the styling of the form elements with the rest of the application, built in React and Tailwind CSS. Implementing form validation was challenging, but it significantly improved the user experience by ensuring that each part of the form was validated before enabling the submit button.

  • Handling Payment Failures: To provide a smooth user experience, we implemented robust error handling using try-catch-await statements. This allowed us to handle payment failures and errors gracefully, preventing disruptions and enhancing reliability.

Email Notifications

Effective communication with users was vital, and I played a pivotal role in implementing email notifications using SendGrid. These notifications enhanced user engagement by:

  • Personalized Content: We personalized email content based on user actions and preferences. For example, new users received welcome emails, matter creators and participants received notifications related to matters and bids, and users were informed of approaching matter deadlines. This personalization made each email relevant and engaging.

  • Dynamic Templates: Creating dynamic templates in SendGrid allowed us to tailor email content to specific actions and events in the application. This flexibility ensured that users received timely and contextually relevant information.

Auth0 Emails

Customizing Auth0 email templates aligned seamlessly with the project's branding and user experience goals. The process involved:

  • Design Integration: We took the designer's templates as a basis for each SendGrid template, ensuring a cohesive look and feel across all email communications.

  • Variable Handling: The challenge lay in testing and ensuring that variables, such as user names, matter names, and matter deadlines, were correctly passed and rendered in the emails. We also ensured that fallback variables worked as expected, providing a fail-safe user experience.

User Settings

The user settings section was designed to improve user convenience and control, and it included two notable functionalities:

  • Set Default Payment: This feature allowed users to designate a default payment method, streamlining the process of creating new matters and reducing the need to select or enter a payment method each time.

  • Remove Saved Payment Method: Recognizing that Backchannel is used by law firms, we provided the option for users to manage their saved payment methods. This level of control is crucial for organizations that need to manage payment accessibility for their employees.

Summary

In addition to these contributions, our team continued to enhance the user experience by adding more features, such as additional email notifications, user account settings, and clear success/failure messages throughout the application.

These development highlights showcase the depth and breadth of my contributions to the Backchannel project, and I'm excited to see how these features enhance the user experience once the application is launched.