BillingSystem 🏡💡

Welcome to BillingSystem, an innovative platform designed to streamline the billing process for house owners and simplify payments for tenants. Built with React JS, TailwindCSS, and Firebase, BillingSystem offers a seamless experience for creating PDF billing statements complete with QR codes for easy payment processing. 😎📄✨

Usage 🚀

For a live demo, visit https://billingsystemcal.netlify.app. Follow the installation instructions below for local usage.

Screen.Recording.2024-02-18.at.5.34.14.PM.mov

About BillingSystem 📖

BillingSystem is developed to tackle the manual and cumbersome billing processes faced by landlords and property managers. With features like auto PDF generation for billing statements and user profile management, the platform ensures a hassle-free billing experience.

Features 🔥

• Auto PDF Generation: Effortlessly create billing statements in PDF format, ready to be shared with tenants. 📄➡️💸
• User Profile Management: Save user profiles with essential details like name, phone number, and bank QR code. 👤💼
• Anonymous Billing Calculations: Allow users to calculate bills without an account, promoting ease of access and convenience. 🧮🕵️‍♂️
• Personalized Experience: For a more personalized billing experience, users can create an account, complete their profile, and enjoy customized billing statements. 🎨🖌

Getting Started 🌟

Prerequisites

Before installing BillingSystem, ensure you have the following software installed:

• Node.js 🟢
• npm (Node Package Manager) 📦

Installation

To get BillingSystem up and running on your local machine, follow these steps:

# Clone the repository 🐑
git clone https://github.com/Hean-Chhinling/BillingSystem.git

# Navigate to the project directory 📁
cd BillingSystem

# Install the required dependencies 🛠
npm install

# Install all the external library dependencies 📚
bash install_dependencies.sh

# Start the development server 🚀 (Launching your spaceship)
npm start

The BillingSystem should now be running on http://localhost:3000 🎉.

Configuring Firebase

Create a .env file in the root directory of your project and add your Firebase configuration keys as follows:

REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id
REACT_APP_FIREBASE_DATABASE_URL=your_database_url
REACT_APP_FIREBASE_REALTIME_DATABASE=your_realtime_database_url

Contributing 🤝

Join our league of extraordinary contributors! Here’s how. Here's how you can contribute:

• Fork the repository and create your branch from master. 🍴
• Make your changes and test them. 🛠🧪
• Submit a pull request with a clear description of your changes. 📬

Please refer to the CONTRIBUTING.md file for more details on submitting pull requests.

License 📄

BillingSystem is licensed under the MIT License. See the LICENSE file for more details.

Contact 📞

Hean Chhinling - [email protected] (Pigeon mail works too, but this is faster.)

Phone: +36208089360

Project Link: https://github.com/Hean-Chhinling/BillingSystem