The Scrapi case study by ADCI Solutions

6 min readDec 21, 2020

Isomorphic web application for the UK car scrapping company

About the client

Does the term “sustainability” tell you something? As the Future Learn says,

The term sustainability is broadly used to indicate programs, initiatives, and actions aimed at the preservation of a particular resource.

Our client Scrapi holds one of the pillars of sustainability — Environmental Protection. It collects and recycles used and old cars. A user just needs to send a request on a website and the next moment the ballpark compensation for this car is calculated.

Then Scrapi’s employees stop by, take the car and give the calculated compensation.

The company is operating in the UK only but we hope that’s not an excuse to abandon used and old cars anywhere else.

About the project

The main action in the user scenario is to fill out the form to dispose of the old car by scrapping. Anyone who sells goods or services through the website knows it’s not a mere nothing.

The Scrapi’s form engages users and provides the possibility to save the form at any stage of filling out and get back to it later — through the browser history or a short link in an email. What email are we talking about?

If users abandon the form having written their personal information (hey, we ask for consent — no private data breaches!), they are automatically enrolled in the newsletter and receive the reminder with the short link back to the form. Complete it whenever you want!

So, how does all of this work? How does the system know the cost of scrapping your car?

While the form is being filled out, the website requests the data about the car using the inserted vehicle registration number. With this information, the website calculates the amount of money the car owner can get after scrapping. If users agree to scrape the car for such a cost, the notification is sent to the CRM system accordingly and the Scrapi manager receives an email notification (and we hope — some joy because of the new deal).

The service pages are backed up by the content pages that describe the metal price dynamics, the average cost of scrapping different car brands, industry news, and so on.

The user experience is customized depending on the user’s location. At the same moment, there are pages with content relevant to all the regions.

The technical part

ADCI Solutions team worked on the website architecture, back end, front end.

What exactly did we do?

Amazon Web Hosting set up;
GitLab CI set up (for deployment);
Architecture;
REST API back end;
Integration with third-party services for the following: receiving the information about the car with the help of its registration number, address search, mailing;
Email newsletter set up via Sendinblue;
CRM integration;
Isomorphic front-end application built with Next.js;
Testing;
Post-release support, update, and new features development.

Business challenge

In this headless Drupal project, we had to solve a couple of problems.

First of all, we had to get the pages of the application rendered by search engines properly. A little teaser: we used a server-side rendering approach and successfully reached this goal.

Secondly, we had to provide website managers with a convenient tool for building pages on their own. Drupal has fulfilled this requirement.

Solution

Back end

Here is the thing: Drupal gets an equal number of love sighs from business owners and sad looks from custom coding fans. But at the end of the day, it’s all about business and profit in the commercial area. What are the distinct features of the Drupal CMS?

A ready-made architecture for custom functionality is based on services and plugins — it allows developers to focus on business logic rather than on the core of the entire system.
Drupal 8 Core is based on the popular Symfony components, so it is easier to figure it out for developers with experience working with PHP frameworks: the basic concepts more or less are the same.
The ready-made admin dashboard goes out-of-the-box, it’s possible to customize the data structure from the admin panel without dealing with low-level SQL queries or working with ORM.
The possibility to change the configuration of the CMS in the admin panel.
There is a system for import/export of active configurations from the database to .yml files and vice versa.
Drupal allows you to transfer changes made in the admin panel (settings of the CMS, modules, data) between environments (development, test, production).
Headless Drupal and the API-first approach support.

All of the above significantly speeds up development time, lowers the cost. When the project becomes bigger, business logic can be transferred into separate microservices, and Drupal can serve the role of service for work with website content.

This is why we keep offering and our clients keep accepting our solution — Drupal. They need to check their idea — we need to offer a cost-saving solution. We find this quite related to the concept of sustainability: no extra resources should be spent in vain.

Scrapi is made on Drupal 8. In a nutshell, Scrapi consists of the following:

Caching system based on Varnish and Memcached;
The Contenta CMS distribution used for building REST API;
The possibility to build custom pages out of ready-made blocks — paragraphs (Drupal solution);
Meta tags to make the website user-friendly;
Data import: there are prices for the metal in different regions being imported from external resources;
Integration with different APIs: the vehicle recognition by its registration number, the search of addresses, the Sendinblue API integration for CRM contacts management, and automatic email campaigns launch;
Complex business logic being tested in many conditions: for example, the car with a particular vehicle registration number could have been already scrapped (someone could have entered the wrong number). In this case, we have to check the car’s VIN to recognize what vehicle we have here.

Front end

The front end of Scrapi is rather unique — but our goal was ambitious as well. In a nutshell, Scrapi:

is an isomorphic web application
uses the Next.js server-side rendering

Such applications show a page rendered on the server side in advance to a user, and only then those apps include the page being shown into the life cycle of React on the client side.

This approach is a sure-fire way to provide the user with a quicker and more user-friendly interface, the quick switching between pages without reloading the page.

What is the client’s benefit then? We will write only three magic letters — SEO. Isn’t this what your marketing director or Chief Marketing Officer has been talking about all the time? As Scrapi is a SPA (Single Page Application — read What’s the difference between single-page application and multi-page application), the search engine cannot index SPA properly; in our case, search engines get a rendered page much earlier than all JS scripts are fully executed.

Instead of conclusion

The work on Scrapi is going on and on: we always support the projects we built if the client agrees. If you’re interested in building a headless Drupal application that can run modern front-end frameworks for a seamless user experience — contact ADCI Solutions.