BillHub - Bill Management System

BillHub is a modern web application for managing and paying utility bills, built with React and Firebase. The application provides a secure and convenient way to handle various types of bills including electricity, water, gas, internet, credit card, and tuition fees.

Live Site

BillHub Live

Key Features

• User Authentication

  • Email/Password registration and login
  • Google sign-in integration
  • Secure user profile management
  • Password validation with specific requirements

• Bill Management

  • View all bills in one place
  • Filter bills by type (electricity, water, gas, etc.)
  • Detailed bill information with due dates
  • Payment status tracking
  • Transaction history

• Payment System

  • Secure bill payment processing
  • Wallet system with balance management
  • Real-time payment status updates
  • Payment history tracking

• User Dashboard

  • Profile management
  • Balance tracking
  • Bill payment statistics
  • Transaction history view

• Responsive Design

  • Mobile-first approach
  • Modern UI with Tailwind CSS
  • Smooth animations and transitions
  • Intuitive navigation

Technologies Used

• Frontend Framework

  • React (v19.1.0)
  • React Router (v7.6.0)
  • React Icons (v5.5.0)

• State Management

  • React Context API
  • Custom hooks

• UI/Styling

  • Tailwind CSS (v4.1.5)
  • DaisyUI (v5.0.35)
  • Swiper.js (v11.2.6)

• Authentication & Backend

  • Firebase Authentication
  • Firebase Hosting

• Development Tools

  • Vite (v6.3.5)
  • ESLint (v9.25.0)

• Additional Libraries

  • SweetAlert2 (v11.21.2) for notifications

Local Development Setup

1. Clone the repository

git clone https://github.com/yourusername/bill-management.git
cd bill-management

2. Install dependencies

npm install

3. Create a .env file in the root directory and add your Firebase configuration:

VITE_apiKey=your_api_key
VITE_authDomain=your_auth_domain
VITE_projectId=your_project_id
VITE_storageBucket=your_storage_bucket
VITE_messagingSenderId=your_messaging_sender_id
VITE_appId=your_app_id

4. Start the development server

npm run dev

Build and Deployment

To build the project for production:

npm run build

To preview the production build:

npm run preview

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.