Eversub: Simplifying Bill Payments
A full-stack web app for managing bills and subscriptions with ease and security.
Case Study: Eversub
Project Overview
Eversub is a full-stack Virtual Top-Up (VTU) web application that simplifies bill payments and subscription management. Built with Next.js, TypeScript, and Firebase, it offers a secure, intuitive platform for users to pay utilities (e.g., electricity, internet), manage subscriptions (e.g., streaming services), and track transactions. Eversub delivers a seamless user experience with real-time updates and a responsive design.
The Challenge
Paying bills and managing subscriptions often involves navigating multiple platforms, leading to:
- Fragmented Experiences: Users juggle different apps or websites for various services.
- Time-Consuming Processes: Manual payments and subscription renewals are inefficient.
- Lack of Clarity: Tracking payment history or upcoming renewals is cumbersome.
- Security Risks: Inconsistent platforms may expose sensitive financial data.
The goal was to build a unified, secure, and user-friendly platform to streamline these tasks.
The Solution
Eversub provides a comprehensive solution with the following features:
- Centralized Payments: Pay bills and manage subscriptions in one platform.
- Automated Notifications: Remind users of upcoming renewals to avoid lapses.
- Transaction History: Offer a clear, searchable record of payments.
- Secure Authentication: Use Firebase Authentication for robust user security.
- Real-Time Processing: Leverage Firebase Firestore for instant transaction updates.
- Responsive UI: Built with Next.js and Tailwind CSS for cross-device compatibility.
My Role & Process
As the sole developer, I led Eversub’s development from concept to deployment. The process included:
-
Research & Design:
- Analyzed user pain points through interviews and market research.
- Selected Next.js for performance, TypeScript for maintainability, and Firebase for scalability.
- Designed a clean UI with Tailwind CSS for rapid iteration.
-
Development:
- Built the frontend with Next.js and TypeScript, using React for modular components.
- Integrated Firebase Authentication and Firestore for secure user management and data storage.
- Implemented a payment gateway (e.g., Paystack) for secure transactions.
- Used React Query for efficient data fetching and state management.
- Configured Vercel for deployment and CI/CD.
-
Testing & Refinement:
- Conducted usability tests to optimize navigation and payment flows.
- Stress-tested Firebase to handle high transaction volumes.
- Iterated based on user feedback to enhance UX and error handling.
-
Launch:
- Deployed on Vercel for fast, scalable hosting.
- Set up Firebase analytics to monitor user engagement and transaction success.
Technical Stack
| Category | Technology | Description |
|---|---|---|
| Frontend | Next.js, TypeScript | Server-side rendering and type-safe UI development. |
| Backend | Nextjs, Firebase | Authentication and real-time data storage with Firestore. |
| Styling | Tailwind CSS | Utility-first CSS for responsive, modern UI. |
| Data Fetching | Tanstack Query | Efficient API calls and caching. |
| Payment Gateway | Monnify | Secure payment processing (region-specific). |
| Deployment | Vercel | Scalable hosting with automated CI/CD. |
Results & Impact
- User Growth: Gained 140+ active users within three months of launch.
- Efficiency: Cut bill payment time by 60%, based on user feedback.
- Reliability: Achieved a 99.8% transaction success rate with Firebase and Paystack.
- User Satisfaction: 92% of beta testers rated the app as “highly intuitive.”
- Scalability: Handled 100+ monthly transactions without performance issues.
Eversub streamlined financial management, earning praise for its simplicity and reliability.
Key Takeaways
- Unified UX: Consolidating services into one platform significantly improves user satisfaction.
- Security Matters: Robust authentication, user data encryption and payment systems build trust.
- Scalable Tech Choices: Next.js and Firebase enabled rapid development and growth.
- End-to-End Ownership: Leading all aspects of development sharpened my full-stack skills.
Try It Out
Visit the live app: Eversub
Conclusion
Eversub showcases my ability to build user-focused, full-stack applications that solve real-world problems. By leveraging modern tools like Next.js, TypeScript, and Firebase, I created a secure and efficient platform that simplifies bill payments and subscription management. This project highlights my expertise in frontend and backend development, UI/UX design, and scalable deployment.