Try this mini Saas and generate your automated Bill 👉🏻 https://td-front.vercel.app/
This application is a task management and billing system, that integrates Google OAuth for user authentication. It allows users to perform Create, Read, Update, Delete (CRUD) operations on tasks. The system tracks these activities and utilizes them for automated billing purposes. User actions are logged, and based on these logs, invoices are generated, including detailed usage metrics. The billing process is automated through a monthly cron job, leveraging Zapier to send out invoices via email. This setup provides an end-to-end solution from task management to billing and invoicing, streamlining user engagement and the billing process.
When you click on any task you created previously
When you click on the usage button from the dropdown you get redirected to a page that consists of a Usage Matrix
When you click on the Bill button from the drop-down It redirects you to Bill page
When you click on the Generate Invoice button present at the bottom of the Bill
After clicking on the Generate Invoice button you can find an invoice email sent to your email
-
Clone the Repository
- Clone the frontend repository to your local machine.
-
Install Dependencies
- Navigate to the project directory and run
npm install
to install dependencies.
- Navigate to the project directory and run
-
Environment Configuration
- Create a
.env
file in the project root. - Set up environment variables:
REACT_APP_GOOGLE_CLIENT_ID
for your Google OAuth client ID.REACT_APP_BACKEND_URL
for the backend API endpoint.
- Create a
-
Starting the Application
- Execute
npm start
to run the application. By default, it will be hosted onhttp://localhost:3000
.
- Execute
-
Google OAuth Login
- Access the login page and sign in using Google OAuth.
- Ensure your Google client ID is set up correctly in the environment variables.
-
Usage Details
- Once logged in, the Saas product can be accessed and the dashboard provides detailed usage statistics, current bill, and invoice generation button.
-
Invoice Generation
- An invoice generation feature is available, which interacts with the backend to trigger automated billing processes through Zapier and send the invoice through email.
- For detailed API documentation and more, refer to the backend project's README.
- Ensure all external services are correctly configured for a seamless experience.
- The application is built with React.js and utilizes various libraries and APIs for full functionality.