Billr

Get paid without the chase

Comment

Inspiration

Billr was inspired by the recognition of how troublesome invoicing can be for many freelancers, small business owners, and service providers. Professionals frequently spend hours invoicing and tracking payments, using multiple tools and apps, to manage their billing. One story that inspired us was a friend - a graphic designer - who lost an important client's payment because their invoices were too disorganized and they could not prove the work had been done. We realized that we live in a world where no one should have to choose between their creative work and getting paid. We wanted to develop a tool that made invoicing so easy that it felt like sending a text message - without sacrificing quality security. Billr was built to empower creators, not overwhelm them.

What it does

Billr is a modern, cloud-based invoicing platform that simplifies the billing process for professionals. Users can easily invoice clients in minutes with AI invoicing templates, and simply drag and drop items to customize the invoice. Billr's integration with Stripe allows for instant updates when a real-time payment is processed. Billr functions as a lightweight CRM, allowing users to centralize customer records and automate follow-ups. Billr can even automate recurring invoices, track payments, view analytics, and mobile and desktop access. Some notable features include: one-click payment links, collaboration in real-time on invoices, access to prior data offline, professional branding options, and overall Billr is well-rounded for managing your financial workflows.

How we built it

With Billr we looked to build a serverless-first architecture to provide maximum scalability and limit the overhead of managing infrastructure. We used an app architecture that relied on React TypeScript, Vite and Tailwind CSS on the front end and then custom React Hooks to handle application state, but we used Firebase Functions and Firestore for syncing data, Firebase Authentication and Firebase Hosting on the back end. For payment processing we used Stripe which is a PCI compliant service provider, and for emails and notifications we opted for Resend API as well as EmailJS - both super quick to integrate. We used GitHub Actions for CI/CD, ESLint and Prettier for code quality standards, and Firebase Emulators for local testing. All of this allowed to provide a solid user experience that is responsive, fast and reliable.

Challenges we ran into

We faced many challenges, including writing secure and efficient Firestore security rules for a multi-tenant multi-user app with collaborative features, exploring user-device data access and ways to prevent data leaks meant traversing the various dimensions of potential access with a hierarchical model and extensive testing with Firebase emulators. Configuring TypeScript to work consistently across Vite and Firebase SDKs was initially problematic, requiring an effort to work through the inconsistent type errors. Configuring our authentication state across components caused UI flicker and duplicated re-renders, which we resolved with an explicitly designed, robust AuthContext, and sophisticated routing that arrived with the latest versions of React Router. Finally, the challenge of real-time, optimistic UI updates for an invoice made for significant variability in the state, leading to the development of a few common custom hooks to manage invoice state with reliable ability to rollback conflicts. Integrating two email services (Resend and EmailJS), and ensuring their templates were completely dynamic was a challenge and even more difficult until we could simply abstract a coherent service with delivery tracking. On the UI standpoint, we wrangled complete configuration of a responsive dashboard with dynamic components and Tailwind utilities with bespoke breakpoints. Managing environment configuration complexity across dev, staging, and prod was also troublesome, but our automated build scripts point to configuration files so we created a complex secure configuration system.

Accomplishments that we're proud of

Our major technical accomplishments include developing a fully functional, end-to-end invoice processing system in React, TypeScript, and Firebase. The system includes core components such as customer management, recurring invoices, and automated email notifications. The structure is fully serverless, utilizing Firestore to provide real-time data synchronization, Firebase Functions to manage the backend logic, Authentication governing the creation and security of user access, and Hosting for the fast, global deployment of the front-end app. We established a custom React hook system to handle complex state management of core functionality and data flow, and enable all changes to be represented in all open user sessions through real-time data synchronization of the different levels of data, such as invoices, customers, and interaction with the overall system. We established a multi-provider authentication system allowing persistent state and protected routes. On the UI/UX side, we developed an intuitive responsive dashboard that clearly expresses where invoices, payments, and customers are located. Creating invoices is made simple with guided flows, real-time invoice preview, and smart auto-complete feature. Customers are managed with history of interaction and payment patterns. Automated email communication is sent timely to invoice recipients and reminders. Additionally, a powerful recurring invoice automation system was built and customizable branding for professional documents can be modified, with advanced animations and interactive, responsive components.

What we learned

We learned a significant amount about serverless architecture and the advantages of using the low-maintenance, scalable offering that is Firebase. TypeScript was a phenomenal advantage to us mostly because of how many errors it helped prevent and how it made the refactoring process easier even though there was an overhead element at first. The real-time collaborative features themselves proved to be way more complex than originally thought, which is a good lesson in thinking differently about state and data flow. By starting with mobile-first designs we were able to have a meaningful impact across the device experience. Lastly, through user feedback we discovered that simplicity, reliability, and embedding into existing workflows matters most to users—sometimes more than the number of features we offer.

What's next for Billr

We've added short-term goals for AI features (like invoice categorization, payment predictions, and automated content generation) and connections to other accounting software (such as QuickBooks and Xero), calendar automation, and bank account connections. In terms of collaboration, we want to add team accounts and workspaces, client portals, and approval workflows. Our long-term goals include going global with multi-currency support, localization, and regional options for payments. We hope to build business intelligence software like cash flow forecasting and tax optimization. Finally, we hope to improve security by using blockchain verification, fraud detection, and a zero-knowledge architecture, while innovating with receipts as AR, voice controls, cryptocurrencies payment, and climate-friendly reports.

Built With

Share this project:

Updates