Building A Side-Project · JusFlo

JusFlo is a modern Cashflow forecasting SaaS application for small businesses, freelancers and startups.

Quick backstory

I started building JusFlo back in Mid-July with @HariOfSpades as we identified a gap in the existing solutions. We had discussions with a few contacts in the accounting industry and start-ups to understand their workflow (Initial validation) before we actually started building it.

What to build

Since it’s going to be a data-intensive piece of software which needs to be consumed quickly and easy to use, we opted it to be a web application. In that case, the app can be used from anywhere and on any machine.

The responsibility of making it easy to use is upto the design (Hari wore his designer hat so that I can focus on development - me being the frontend guy).

The Stack

When you are building side-projects, it’s important to choose a tech stack you already know.

According to this, I stuck with what I am good at. JavaScript

Here is the overview of the setup.

Diving deeper

For our use case, these are the important things that I considered before deciding on this setup:

• UI should be fast, even with loading a lot of data
• Computation is going to be time consuming
• Ability to conditionally change data and preview Cashflow
• Data visualizations are important

App UI

I have been using NextJS for many projects lately and I am super happy with the developer experience it offers. Along with it, I did not want to handle stuff like routing setup, code-splitting/loading optimizations, ssr etc.

The idea was that the tech should enable us to quickly develop our MVP and test it with a larger set of users.

Material

We decided to go with material since it was a quite mature design system and so the out-of-the-box components cover most of the use cases. In addition to it, SSR was a bliss.

The components needed customization to match the designs, but since it came with CSS-in-JS support with styled(), it was quick too.

material-table was used along with components from material-ui because we needed a lot of customization in the way data was shown to the users.

Helpers

Other libraries include the following:

• formik, for forms management
• date-fns, for date parsing and calculation (Client and Server)
• react-chartjs-2, for data visualizations
• react-query, for data fetching
• yup, for schema validations

Server

Since it was an express server, all routes to /api had custom implementation while other routes were handled by the NextJS build output.

• OAuth with Google login (initially) is done using passport
• helmet was a quick way to add necessary headers

Prisma

I decided to go with Postgres since I have used it earlier for a project with Hasura. But I was not quite proficient with ORMs. It was years ago that I tried one.

So I had to explore options on that front. Since the entire code is going to be on TypeScript, I went with TypeORM initially. But soon I realized that I was writing a lot of boilerplate code for database communication.

And then the light bulb moment.

I came across Prisma 2 and was quite impressed. By introspecting the existing database, I was able to quickly migrate to prisma. Within an hour, I was able to cut down more than half the code for DB access. Less code always means less issues 😄.

Site UI

The site is also part of the next app as it shares the same design philosophy. In addition to the other packages, the following were also used.

• framer-motion, for animations
• react-visibility-sensor, helper for triggering animations on view
• airtable, for storing list of subscribers
• react-lottie, for loading lottie files

To Conclude

I have been developing JusFlo during my free hours on weekends, and so far I am happy with the progress we have made with the app.

With this setup, the one annoying thing I am facing is the time for restarting the express server with nodemon. tsc is just a bit slow when we compile so many packages. If you have any ideas on this, I would like to hear (DM me on Twitter).

Once the initial MVP is done, I am planning to publish this setup as a template. I am sure it will be useful for me as well, for my future projects.

In the mean time, checkout JusFlo.