Here at Northladder, we are solving the problem of selling your electronics devices most conveniently, and our Auction Driven platform is guaranteed to provide you the best price possible for your used devices without any hassle and with the convenience of home pickup and instant cash.

We are a Dubai based Tech. Start-up and building the scalable platform for the Global Re-Commerce marketplace. Currently, we are operating in UAE, Saudi Arabia, and Iraq and expanding very rapidly to other countries.

We have a partnership with all leading retailers, OEMs in the region and helping them in all mobile trade-in activities and providing them the Tech. platform to achieve this.

So in a nutshell, our tech. platform choices need to be

1. More Scalable to launch into any new country in a quick turnaround time
2. More Modular to integrate easily with different retailers and partners
3. More Secure to safeguard our Customer and Pricing Data
4. More Reusable to deliver in a quick turnaround time

In this Part 1, we will discuss our Web Tech Stack, and how it's helping us in delivering different B2C & B2B websites with component-based architecture.

Code Repositories

Every use case and business value proposition ends up as code and as a rapidly evolving start-up, it's essential for us that all the developers should have an understanding and track of the changes that we are introducing into the system.

Also, like everyone - with the recent introduction of a mix of remote + office work culture flexibility, we want to make sure developers are well aware of the code changes and different use case mappings.

Our monorepo based code architecture and streamlined PR review process are helping us to achieve this goal.

We are using Nx extensively to structure the code as apps, libs, and reusable UI components. Nx has a build-in dependencies graph and an affected area highlight feature. We can visualize and predict the code change effect across the projects and direct our QA to test based on the impacted area.

Building the UI

The Business cases that we are solving are constantly evolving and as we are building one of the kinds of unique platforms for users, we follow the cycle of,

Repeating this cycle in quick turnaround time has given us the patterns which work with the user and most importantly which sections need improvement.

Our approach of creating a Re-usable React-based component UI library for managing different use cases has given us the flexibility to build projects as an assembly line approach.

Theming

Building a React-based Component library has a unique challenge for us, we not only need to build a UI library with Northladder Brand guidelines but also we need to deliver sites with different well-known retailers and brand guidelines. That means our UI Lib should support different theme variants.

Tailwind based utility first approach is a good fit for us, where we are not only able to target and build components, but it's also helping our full-stack engineers to contribute and manage the components with confidence.

Component Testing

Re-usability has one inherited drawback: any changes can impact the sites and it's essential for us to review, test, and push the changes to prevent any unintended impact.

Storybook with Chromatic is helping us to achieve this. All the components are tested with Storybook with all its variations, variants, RTL, and theming in isolation. This also provides us a handy synced up-to-date documentation for all our components and different platform teams can refer to this and use the component with ease and intended behavior.

Content Management

Content is a critical part of our system and we need the flexibility and modularization to be extended into our CMS system. We are using Strapi V4 as our CMS Platform. We are using GraphQL to fetch on-demand content and using this to manage our component data. All our webpages are driven through the Strapi and its component-based structure is a natural fit for our flexible component-based rendering machine.

Our Component UI libs have the direct mapping with Strapi components and the Page Layout variations are directly managed by it. This gives us the power to make site changes and perform A/B testing without the need for code releases.

Localization & i18n

As we are mostly operating in the MENA region, first-class Arabic support is quite essential for Northladder.

For accelerating the release cycle and targeting different regions, our apps are integrated directly with i18n System, where the content reviewers have the flexibility of adding the translations with the locale context in mind and can review and play around with the content and preview, release with maker-checker policy in place.

Building the Web Apps

Now, it all boils down to the last piece of our Tech Stack. Next.js and Vercel platform is Northladder's Tech choice and it's naturally fitting into our needs of having an SEO friendly and providing the flexibility to have SSG / SSR / ISR based upon our needs and use cases.

We are a performance-savvy team and we understand the importance of building components/sites on a bottom-up approach and with performance in mind. All the code changes are measured in performance scores and the team is making sure of building a mobile-first experience for users.

In our upcoming blogs, we will dive deep into each section and stay tuned for updates.