aPeso

Our product design process began with a series of collaborative workshops focused on requirements gathering, problem definition and solution architecture. These sessions included key client stakeholders from various departments to ensure alignment and gather diverse perspectives.

During these workshops, we brainstormed and sketched initial ideas and laid the foundation for the platform’s user experience. Based on these sketches, we developed detailed wireframes, which served as the blueprint for the interface, ensuring every functionality was thoughtfully planned and visually represented.

From the outset, we understood that aPeso’s users would be Adjarabet’s employees. This insight gave us a clear understanding of their needs and digital habits and allowed us to create a user-friendly design tailored to their expectations.

Guided by the wireframes, our design team crafted the platform’s UI with a focus on clarity and functionality. We worked in synchronized one-week sprints, ensuring each module or functionality was designed, validated, and ready for development by the end of the sprint.

To maintain a smooth workflow, our design and development sprints were fully aligned. Once a UI component was finalized, it transitioned to the development team as a ready-to-implement asset. Additionally, we conducted hand-off phases with both the client and the tech team, where designs underwent thorough validation before being officially handed over.

For the front-end, we built the application using Nuxt 3 and Vue 3, which gave us the flexibility of Server-Side Rendering (SSR) and Static Site Generation (SSG) for better performance. We designed the interface with Quasar UI and Tailwind CSS, ensuring a clean and responsive layout. To manage state and handle data efficiently, we used @tanstack/vue-query, which made data fetching, caching, and synchronization easier.

We relied on Moment and Moment-Timezone to handle date and time logic, and for localization, we integrated @nuxtjs/i18n to support multiple languages. To keep the codebase clean and consistent, we used ESLint, Prettier, and Commitizen. For testing, we used Vitest and @vue/test-utils to ensure everything was working reliably and that refactoring could be done smoothly.

Throughout the development, we followed a pull request workflow with automated checks for linting, testing, and style, which made sure our frontend code was not only scalable but also maintainable in the long run.

Our backend service was built using Laravel 11. We applied the Actions pattern with invokable controllers to decouple functionalities and adhere to single-responsibility principles, resulting in better and faster development, safer refactoring, and easier debugging. We also implemented TDD (Test-Driven Development) with integration, feature, and unit tests.

For our database layer, we used PostgreSQL, which was also used during test executions on every pull request to ensure consistency with production environments.

In addition to the internal REST API used by our application, we developed a public API for the payment gateway, enabling external shops to integrate the Apeso payment method.

Our development process was managed via pull requests, which included code reviews and automated tests, as well as styling checks performed on each submission.

For documentation, we used Scribe; for testing, Pest; and for styling, Pint.