Optio Banner Management System
This project was my first experience with Angular, and it involved the development of a banner management system for the banking sector and related industries. The system was designed to streamline communication and marketing between banks and their clients through mobile and internet banking platforms.
- Angular: This project was implemented using Angular, marking my first venture into this front-end framework.
- Ngrx: For state management, I utilized Ngrx to effectively manage the application's state.
- Angular Material: I employed Angular Material for UI components, making the user interface visually appealing and user-friendly.
Learning the intricacies of Angular's coding patterns was a new and exciting journey for me. Fortunately, my prior knowledge of technologies like Nest.js and PHP's Blade template system provided me with a solid foundation, making it easier to grasp Angular's structure and concepts quickly.
In particular, my familiarity with the Redux pattern, which Ngrx is based on, proved to be a valuable asset. It allowed me to navigate the state management in Angular with ease, further accelerating my learning curve.
This amalgamation of past experiences and new learning opportunities not only expedited my adaptation to Angular but also allowed me to contribute effectively to the project, leveraging a well-rounded skill set.
This project comprises three core components: filters, tables, and a drawer form. Additionally, there's a single-page form that provides a comprehensive view of all relevant information for a specific document.
One notable feature is the persistence of the filters, which remains intact even after refreshing the page. The filters consist of four distinct categories, complemented by a search bar for precise data retrieval. Furthermore, a pagination feature has been integrated into the project to facilitate seamless navigation through the displayed information.
This comprehensive setup ensures a user-friendly and efficient experience, allowing users to interact with and manage the data effectively.
I created a listing page to display the banners using data retrieved from the Optio Banners API. This page allows users to view banner information, including the image, title, status, zone, start and end dates, and labels. Users can also apply filtering and sorting to the banner list and search for specific banners using text.
For adding and editing banners, you can change single table value by clicking on it or you can open up the project and change multiple values at once
The form includes dropdowns for selecting zones and labels, with possible values loaded from the Optio Reference Data API.
This project interacts with the Optio Banners API using CRUD operations, which are as follows:
- Find: To search for multiple banner records.
- Find-One: To retrieve a single banner record.
- Save: To create or update a banner record.
- Delete: To remove a banner record.
This project allowed me to gain hands-on experience with Angular, Ngrx, and Angular Material while addressing a real-world challenge faced by the banking sector. It was a valuable learning opportunity that honed my skills in front-end development.