The Online Mobile Recharge Web Application is an innovative full-stack solution designed to simplify and modernize the mobile recharge experience. Built using React for the front-end, Spring Boot for the backend, and PostgreSQL (Neon DB) for persistent data storage, this platform offers users a secure and intuitive way to recharge prepaid mobile services anytime, anywhere.The project focuses on enhancing convenience, transaction security, and usability while ensuring the system remains scalable for future integration with multiple telecom providers and payment gateways.
Key Features
User Authentication and Profile Management:
Implemented secure registration and login using JWT-based authentication, enabling users to manage their accounts and view recharge history effortlessly.
Recharge Functionality:
Users can browse telecom operators, select plans, and perform instant recharges using integrated APIs. Dynamic validation ensures error-free transactions.
Payment Gateway Integration:
Integrated with Razorpay to handle secure payments and maintain transaction reliability through backend verification.
Admin Dashboard:
A powerful admin panel for managing users, plans, and transactions with full CRUD capabilities and real-time database connectivity.
Responsive UI/UX:
Built with React + TailwindCSS, providing a smooth, mobile-first experience with optimized performance across devices.
RESTful APIs with Spring Boot:
Designed modular APIs to manage users, transactions, and recharge plans, ensuring clean code architecture and maintainability.
PostgreSQL (Neon DB) Integration:
Leveraged cloud-based PostgreSQL (Neon DB) for secure, scalable, and high-performance data management.
Error Handling & Notifications:
Implemented real-time error handling, form validations, and success notifications to enhance the user journey.
Technologies Used
Frontend: React, TailwindCSS, Axios, React Router
Backend: Spring Boot, Java 17, Spring Security, JWT Authentication
Database: PostgreSQL (Neon Cloud DB)
Build & Deployment: Maven, Docker, Netlify
Payment Gateway: Razorpay
Architecture Overview
The project follows a three-tier architecture:
Frontend (React) — Handles the user interface, routing, and API communication.
Database (PostgreSQL) — Stores user data, recharge history, and plan metadata in a normalized schema.
The communication between the frontend and backend uses JSON-based REST endpoints secured via HTTPS and JWT.
Challenges and Learnings
Building this application involved overcoming challenges related to secure payment integration, state management, and real-time transaction feedback. Ensuring consistent data synchronization between the client and Neon DB required careful API design and error handling.A key learning was implementing JWT-based role management, enabling clear separation between user and admin access. Additionally, optimizing API response times and database queries significantly improved application responsiveness.
Outcome
The final system delivers a fast, reliable, and user-centric recharge experience.
Reduced manual processing time by 60%.
Achieved secure transaction flow with encrypted communication and JWT-based validation.
Scalable backend capable of handling thousands of concurrent users.
The project showcases full-stack proficiency, secure API design, and cloud database integration — reflecting strong expertise in React + Spring Boot development and end-to-end deployment practices.
