SIMS PPOB

Description

SIMS PPOB (Payment Point Online Bank) is a web application built as part of a technical test for a Front-End React.js Programmer position. It showcases features such as user account management, balance top-ups, and transaction processing for utility and mobile payments.

My Role

I developed this project independently. My responsibilities included translating provided UI designs into responsive components, integrating APIs, managing global state, and implementing the entire user flow from authentication to transaction history.

• 🔹 Translated UI mockups into responsive layouts using Tailwind CSS and Lucide icons.
• 🔹 Integrated all API endpoints: authentication, user profile, balance top-up, transactions, etc.
• 🔹 Managed global state using Redux Toolkit.
• 🔹 Implemented form validation and feedback handling for API responses.

Tech Stack

1. 🔹 React (with Vite) for frontend development.
2. 🔹 Redux Toolkit for global state management.
3. 🔹 Tailwind CSS for styling and responsiveness.
4. 🔹 Lucide React for icons.
5. 🔹 React Router DOM for client-side routing.
6. 🔹 DiceBear Avatars for default profile pictures.
7. 🔹 TypeScript and ESLint for type safety and code quality.

Main Features

1. 🔹 User registration and login system.
2. 🔹 View and update profile information and photo.
3. 🔹 Balance top-up functionality with updated UI.
4. 🔹 PPOB payments (electricity, mobile, etc.).
5. 🔹 Transaction history display with full details.
6. 🔹 User feedback for success and error states.

This project demonstrates my ability to build fully functional React applications under time constraints. It reflects my experience in state management, API integration, and turning designs into interactive UI components.

1. 🔹 Deployed live at sims-ppob-nabil.vercel.app.
2. 🔹 Source code available on GitHub.