All Projects

Utility Bill Management System

Bill Wise

A role-aware utility platform for discovering public bills, managing personal records, exporting reports, and administering users and bill activity.

Full-stack Utility Management PlatformCompleted
Live SiteClient RepositoryServer Repository
Bill Wise project thumbnail
Live

Overview

What the project is

Bill Wise is a MERN utility-management application covering electricity, gas, water, and internet bills. Public users can explore available utility records, authenticated users can manage their personal bills and profile, and administrators receive dedicated tools for analytics, user status management, public bill creation, and platform-wide bill oversight.

Problem / Purpose

Why it was built

The project was built to turn recurring utility information into a structured digital workflow. Instead of keeping bills scattered across receipts and disconnected records, Bill Wise combines category discovery, personal tracking, downloadable reporting, profile management, and administrative controls in one responsive product.

Key Features

Important product capabilities

Public and User Features

  • Public utility-bill browsing with recent records, category filtering, and detailed bill views.
  • Email/password and Google authentication with profile synchronization between Firebase and MongoDB.
  • Authenticated personal bill creation, viewing, updating, and deletion.

Dashboard and Reporting

  • User dashboard for personal bill activity and utility-management actions.
  • PDF report generation for paid bill records using jsPDF and AutoTable.
  • Charts, statistics, loading states, and responsive dashboard layouts.

Admin Features

  • Admin statistics for users, active accounts, bills, and recorded revenue.
  • User management with active and blocked account states.
  • Platform-wide bill oversight with update, delete, and public-bill creation tools.

Security and Experience

  • Firebase ID-token verification for protected server endpoints.
  • Database-backed role checks for administrator-only operations.
  • Axios interceptors, private routes, admin routes, toast feedback, and light/dark theme support.

Tech Stack

Technology choices by responsibility

Frontend

React 19ViteJavaScriptReact RouterTailwind CSSDaisyUI

Backend

Node.jsExpress.js

Database

MongoDB

Authentication / Security

Firebase AuthFirebase Admin SDKAxios

Reports / Visualization

jsPDFjsPDF AutoTableRecharts

Deployment

FirebaseVercel

Architecture / How It Works

Simple system flow

Bill Wise separates a React SPA from an Express serverless API. Firebase manages client identity, the server verifies ID tokens, MongoDB stores users and bill collections, and role checks protect administrator operations.

01

Authentication and User Sync

Users sign in through Firebase, then the application synchronizes their identity and profile state with the MongoDB users collection.

02

Public Bill Discovery

The client requests recent or complete public utility records and presents category-aware browsing and detail routes.

03

Personal Bill Management

Authenticated API calls carry Firebase bearer tokens while users create, update, review, delete, and export their own bill records.

04

Administrative Oversight

Database role checks unlock statistics, user blocking, public-bill creation, and management of all user bills.

Screenshots / Visual Walkthrough

A guided look through the experience

Bill Wise visual preview

Utility Home

The public landing experience introduces bill categories, recent records, product benefits, testimonials, and supporting information.

Bill Discovery

Bill listing and detail screens organize utility types, amounts, dates, locations, and descriptions.

User Dashboard

Authenticated views bring personal bills, profile details, report exports, and account actions into one workspace.

Admin Dashboard

Admin screens combine platform statistics, charts, user status controls, and bill-management tables.

Challenges & Solutions

Engineering decisions that mattered

Challenge

Securing user and administrator operations across a separate client and server.

Solution

I verified Firebase ID tokens on protected endpoints and combined them with MongoDB role checks for administrator-only actions.

Challenge

Keeping public bills and user-owned bill records clearly separated.

Solution

I used distinct collections and route groups for public catalog data and authenticated personal records while preserving shared bill concepts in the UI.

Challenge

Supporting responsive operational dashboards with reports and analytics.

Solution

I organized dashboard features by role, used Recharts for visual summaries, and generated downloadable bill tables with jsPDF AutoTable.

What I Learned

Growth from the project

  • Bill Wise strengthened my understanding of Firebase-secured Express APIs and database-backed role authorization.
  • It improved my ability to design separate public, user, and admin workflows across a full-stack application.
  • The project also gave me practical experience with PDF reporting, dashboard visualizations, Axios interceptors, and serverless API deployment.

Final Links / CTA

Explore Bill Wise

Open the live product, review the repository, or return to the full projects archive.

Live SiteClient RepositoryServer Repository
Back to Projects