Designed and developed an online faxing service focusing on a hassle-free user experience.

<p>An online fax service focusing on a hassle-free user experience.</p>

<div class="work-info">
  <div class="work-info__el"><b>Project</b>
    <p>Freelance</p>
  </div>
  <div class="work-info__el"><b>My Role</b>
    <p>Software Engineer</p>
  </div>
  <div class="work-info__el"><b>Timeline</b>
    <p>1.5 months</p>
  </div>
</div>

<h4>Overview</h4>
<h2>Background</h2>

<p style="margin-top: 2rem">
  I ended up working on this project after being approached by a mutual acquaintance with the initial concept and
  motivation for Xenfax.
  <br /><br />
  The inspiration for Xenfax came from a surprising lack of easy online faxing options. Most other options either
  required a subscription for their faxing service or provided the faxing service as a feature in a bigger and costlier
  bundle more geared towards businesses than the average user. Someone who needs to fax once in a while probably
  wouldn't want to pay for a monthly subscription or other features they will never use.
  <br /><br />
  Xenfax aimed to target this specific use case.
  <br /><br />
  After an initial discussion about the requirements, the scope, and the deadlines, I decided to
  take up the project. I had complete creative freedom to design the entire system as I saw fit.
</p>

<h2 style="margin-top: 6rem">Design Process</h2>

<p style="margin-top: 2rem;">The requirements for Xenfax were quite simple. Xenfax needed to be:</p>

<ol>
  <li>Hassle-free — A user shouldn't have to signup or provide any more information than what was necessary. The entire
    process from landing to placing an order must be completable within 5 minutes.</li>
  <li>Simple — It shouldn't require any specialized knowledge to work the UI. The entire experience needed to be smooth
    as possible.</li>
  <li>Accountability — There needed to be some way for users to track their orders in real time.</li>
  <li>Scalable — It should handle high traffic while keeping operational costs minimum during low traffic.</li>
  <li>Extensible — It must be easy to extend and add more functionality on top of the existing architecture</li>
</ol>

<p style="margin-top: 4rem;">
  I surmised that the best way to design the system was to create a architecture diagram to understand how all the
  different pieces will interact with one another. While plotting the architecture diagram, I was able to work out which
  aspects of the system needed to be logically coupled.
</p>

<img src="https://www.datocms-assets.com/92199/1675347751-1665818651-flow-diagram.png" alt="Flow Diagram" />


<h2>Initial Thinking</h2>

<p style="margin-top: 2rem;">Based on the requirements, I tried to identify the flow from the user perspective and the
  components that will have to be created to facilitate the flow. I jotted down the following details:</p>

<ul>
  <li>The user would use a form to submit the file that needs to be faxed.</li>

  <li>The form should accept the Sender Info, Receiver Info, and the File Info before making a call to cloud functions.
  </li>

  <li>The form should make a post request to the data at an endpoint <code>/api/new</code></li>

  <li>The endpoint should save the order data to firestore and save the file to the cloud storage. This would generate a
    unique id for the order.</li>

  <li>It should also calculate the invoice amount using the file, since the service is charged per page. The invoicing
    amount must be calculated on the backend.</li>

  <li>Return success state and redirect user to review page <code>/app/review</code></li>
  <li>The user can then review and proceed to payment on paypal</li>

  <li>If paypal payment is successful, a cloud function gets triggers that starts the faxing process and the user is
    redirected to the tracking page.</li>

  <li>After the order is placed, the user should also receive emails with the payment receipt and whenever there is a
    status update on the order.</li>
</ul>

<img style="margin: 5rem 0;" src="https://www.datocms-assets.com/92199/1675349513-1665813757-homepage.png"
  alt="Landing Page" />
<img src="https://www.datocms-assets.com/92199/1675349505-1665814691-orderpage.png" alt="Landing Page" />


<h4 style="margin-top: 8rem;">Prototyping</h4>
<h2>Development Process</h2>

<p style="margin-top: 2rem;">
  After figuring out how each of the components would interact with one another, the next step was to write the code.
  <br /><br />
  I chose to create the front-end using NextJS, a react framework andthe Material UI React component library. For the
  backend, I decided to use Firebase. I created a firebase funtion, each performing a specific step in the order
  process. Some of these functions are -
</p>

<ul class="actions-list">
  <li>createOrder</li>
  <li>updateOrder</li>
  <li>createPayment</li>
  <li>capturePayment</li>
  <li>trackOrder</li>
</ul>

<p>
  <br />
  Each of these functions were created so that they would be atomic in nature and with guards so that they can't be
  called
  out of order. For example, after capturePayment is called, we wouldn't want to allow updateOrder to be callable
  anymore.
  <br /><br />
  Each function invocation would also update the order status on the database. This would be useful for displaying
  tracking information to the user and also to debug if the order runs into an error.
  <br /><br />
  Apart from these functions, I also set up a pubsub schedule function to run periodically and delete any files that are
  older than 3 hours and for whom the order was fulfilled.
</p>


<h2 style="margin-top: 4rem;">Third-Party Integrations</h2>

<p style="margin-top: 2rem;">
  In order to expedite the development process, I used third-party integrations for handling certain aspects of the
  flow. I used PayPal for payments, Sendgrid for sending automated emails and Sentry for tracking errors.
</p>

<img style="margin: 5rem 0;" src="https://www.datocms-assets.com/92199/1675349519-1665820232-trackpage.png"
  alt="Tracking Page" />
<img style="padding: 0 2rem;margin-bottom: 4rem;"
  src="https://www.datocms-assets.com/92199/1675350426-1665820606-email-edited.png" alt="Landing Page" />

<p style="margin-top: 2rem;">
  Apart from these, I also used feature flags to enable/disable certain aspects of the application in the production build. At this time, I will have to omit details on the implementation of the actual faxing system as it is integral to the commercial success of Xenfax.
</p>

<h4 style="margin-top: 6rem;">Conclusion</h4>
<h2>Lessons Learned</h2>

<p style="margin-top: 2rem;">
  Building Xenfax has been a rewarding experience. While this wasn't my first time building an application of this
  complexity, it was the first where I was the only developer on the project. I decided to follow an agile process for
  this project, using a Kanban board to track my progress and releasing features iteratively allowing time for feedback
  and revisions for each aspect. I made sure to write tests, write effective documentation, and follow best practices,
  which I could've easily forgone as the only developer on the team. However, taking the time to do all these things
  ultimately saved me time in the long run and was a really productive use of my time. The most valuable lesson I
  learned is that following an agile process does not only benefit teams but can also benefit solo developers as well.
</p>

<style>
  .work-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 4rem 0;
  }

  .work-info__el {
    display: flex;
    flex-direction: column;
  }

  .work-info__el>b,
  .work-info__el>p {
    margin-bottom: .5rem;
    font-size: 1.7rem;
  }

  .actions-list {
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
    list-style-type: square;
  }

  .actions-list>li {
    margin-bottom: 1rem !important;
  }
</style>

Xenfax - Online Faxing Service