{"id":29013217,"url":"https://github.com/taanzzz/my-paybill-project","last_synced_at":"2026-04-12T10:38:51.912Z","repository":{"id":301162874,"uuid":"1008349003","full_name":"taanzzz/my-paybill-project","owner":"taanzzz","description":"A secure and modern React-based platform for managing and paying bills online, featuring Firebase Authentication, real-time balance updates, and a responsive design.","archived":false,"fork":false,"pushed_at":"2025-06-25T12:30:18.000Z","size":442,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-25T13:32:16.784Z","etag":null,"topics":["daisyui","firebase","nodejs","react","tailwindcss"],"latest_commit_sha":null,"homepage":"http://talented-song.surge.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taanzzz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-25T12:05:50.000Z","updated_at":"2025-06-25T12:32:30.000Z","dependencies_parsed_at":"2025-06-25T13:43:56.082Z","dependency_job_id":null,"html_url":"https://github.com/taanzzz/my-paybill-project","commit_stats":null,"previous_names":["taanzzz/my-paybill-project"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/taanzzz/my-paybill-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taanzzz%2Fmy-paybill-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taanzzz%2Fmy-paybill-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taanzzz%2Fmy-paybill-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taanzzz%2Fmy-paybill-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taanzzz","download_url":"https://codeload.github.com/taanzzz/my-paybill-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taanzzz%2Fmy-paybill-project/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261937078,"owners_count":23232852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["daisyui","firebase","nodejs","react","tailwindcss"],"created_at":"2025-06-25T19:10:27.082Z","updated_at":"2025-12-30T22:23:43.152Z","avatar_url":"https://github.com/taanzzz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💸 PayBill – Smart Online Bill Payment Platform\n\n\u003e *PayBill* is a fully responsive and modern online bill payment platform designed to provide users with a seamless and secure experience for managing, paying, and tracking their bills. This project delivers a clean user interface, robust payment functionality, and reliable authentication.\n\n![PayBill Homepage](https://i.ibb.co/hxwKNG89/Screenshot-2025-06-25-182720.png)\n\n\n**Live Site:** [http://talented-song.surge.sh/](http://talented-song.surge.sh/)\n\n\u003e **PayBill** is a secure and modern bill payment platform built with React, Firebase Authentication, and Tailwind CSS. It enables users to register, log in, view pending bills, make real-time payments, and track their payment history — all within a sleek, fully responsive interface.\n\n---\n\n## 🛠 Technologies Used\n\n- ⚛️ React.js  \n- 🔀 React Router DOM  \n- 🔐 Firebase Authentication  \n- 🎨 Tailwind CSS  \n- 🌐 React Context API  \n- 📢 React Toastify  \n- 🖼️ React Icons  \n\n---\n\n## 🚀 Features\n\n### 🔐 Authentication System\n\n- Email/Password registration and login  \n- Optional Google Sign-In  \n- Protected routes for authenticated users (e.g., My Profile, My Bills, Pay Now)\n\n---\n\n### 💳 Smart Bill Payment Flow\n\n- View a list of pending bills with organization logos  \n- Click **Pay Now** to view bill details and confirm payment  \n- Payment amount is deducted from user's profile balance in real-time  \n- Payment info is stored in-memory and reflected in the UI  \n- Confirmation messages shown on successful transactions  \n\n---\n\n### 📜 My Bills (Payment History)\n\n- View a list of all previously paid bills  \n- Accessible only to authenticated users  \n- Redirects to login if user is not authenticated  \n\n---\n\n### 👤 My Profile Page\n\n- Displays user's email, display name, and profile photo (if available)  \n- Live balance updates after each payment  \n- Organized and visually clean layout  \n\n---\n\n### 🔔 Notifications \u0026 Feedback\n\n- Smooth toast messages for actions (success, error) using **React Toastify**  \n- Modal confirmations before critical actions like payment  \n\n---\n\n### 🎨 Responsive \u0026 Clean UI\n\n- Fully responsive layout for mobile, tablet, and desktop  \n- Minimal and modern design implemented with **Tailwind CSS**  \n- Consistent and intuitive user experience across all devices  \n\n---\n\n## 📁 Project Structure\n\nThe project is organized into the following main folders and files:\n\n```\nsrc/\n├── assets/             # Logos, icons, and static assets\n├── components/         # Reusable UI components (Navbar, Modals, Cards, etc.)\n├── context/            # React Context (e.g., AuthContext)\n├── pages/              # Application pages (Home, Login, Register, Profile, Bills, PayPage)\n├── routes/             # ProtectedRoute and routing setup\n├── App.jsx             # Root component with route definitions\n├── main.jsx            # Entry point\n└── index.css           # Tailwind base styles\n```\n\n---\n\n## ⚙️ Environment Variables\n\nCreate a `.env.local` file in your project root and add your Firebase credentials:\n\n```env\nVITE_apiKey=your_firebase_api_key\nVITE_authDomain=your_project_auth_domain\nVITE_projectId=your_project_id\nVITE_storageBucket=your_storage_bucket\nVITE_messagingSenderId=your_messaging_sender_id\nVITE_appId=your_app_id\n```\n\n\u003e ⚠️ *Do not commit your actual API keys or sensitive information to version control.*\n\n---\n\n## 🧪 Local Setup Instructions\n\nTo run the project locally:\n\n### 1️⃣ Clone the Repository\n\n```bash\ngit clone https://github.com/your-username/paybill-platform.git\ncd paybill-platform\n```\n\n### 2️⃣ Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3️⃣ Start the Development Server\n\n```bash\nnpm run dev\n```\n\nVisit: [http://localhost:5173](http://localhost:5173)\n\n---\n\n## ✅ Future Improvements\n\n- Store payment data in a database (e.g., Firebase Firestore)\n- Add balance top-up functionality\n- Improve accessibility and keyboard navigation\n- Add test coverage for key components\n\n---\n\n\n\u003e 🚀 **PayBill** — A smarter way to pay your bills, faster and safer.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaanzzz%2Fmy-paybill-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaanzzz%2Fmy-paybill-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaanzzz%2Fmy-paybill-project/lists"}