Published on October 12, 2020
Building A Side-Project · JusFlo
4 min read
JusFlo is a modern Cashflow forecasting SaaS application for small businesses, freelancers and startups.
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).
When you are building side-projects, it’s important to choose a tech stack you already know.
Here is the overview of the setup.
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
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.
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.
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
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
helmetwas a quick way to add necessary headers
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 😄.
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
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.