SmartPay is a responsive and visually appealing bill management web application that helps users manage, track, and pay their bills with ease. Built with React and Firebase, SmartPay offers a secure and intuitive experience for users to stay on top of their financial responsibilities.
https://smartpay-c50a8.web.app/
SmartPay aims to simplify the way users handle their bills by offering features like bill tracking, due date reminders, and payment status management—all within a clean interface.
- 🔐 User authentication with Firebase
- 🧭 Protected routes for authenticated users
- 🖼️ Responsive
- 🔔 Toast notifications for real-time feedback
- 🖼️ Interactive UI components with Swiper and DaisyUI
- 🔄 Smooth navigation using React Router
tailwindcssfirebasereactreact-domreact-iconsreact-routerreact-toastifyswiper
Follow these instructions to get SmartPay up and running on your local machine for development and testing purposes.
Before you begin, ensure you have the following installed:
- Node.js: (LTS version recommended)
- npm (Node Package Manager): Comes bundled with Node.js.
- A Firebase Project: You'll need an active Firebase project to connect your local application to its services (Authentication, etc.).
- Clone the repository:
git clone https://github.com/mrarifat21/SmartPay.git
cd smartpay- Install dependencies:
npm install
- Configure Firebase Environment Variables:
VITE_apiKey=AIzaSyCy_uLkW-xDBurj7miTa7tZsKFv5FDfU2o
VITE_authDomain=smartpay-c50a8.firebaseapp.com
VITE_projectId=smartpay-c50a8
VITE_storageBucket=smartpay-c50a8.firebasestorage.app
VITE_messagingSenderId=563980149232
VITE_appId=1:563980149232:web:cd2dfab27cbefbe41c7d3
Important: Replace these placeholder values with your own Firebase project's configuration to ensure your local instance connects correctly.
- Start the development server:
npm run dev