Scrapi

Isomorphic application for the UK car scrapping company
Headless Drupal with React.js

Key tasks of the application development:

  • Set up Amazon Web Services,
  • Set up GitLab CI for app deployment, 
  • Design the site architecture,
  • Create a REST API backend,
  • Integrate third-party services on the website to retrieve data about the car using its license plate number, search for the address, send emails, etc.,
  • Set up email marketing through the Sendinblue service,
  • Integrate the website with the CRM,
  • Build an isomorphic application with Next.js,
  • Test the website,
  • Provide post-go-live support and implement new functionality in the future.

About the client

Scrapi is a UK-based car scrapping service. The user can fill out a form on the website, get an instant quote, and specify the address and date of collection. After that, company employees will arrive, pick up the old vehicle, and pay the calculated price.
 

How a scrapping service works
How a scrapping service works

Key task

The client asked us to develop an isomorphic app with Next.js from scratch. The app was to have a RESTful server and Drupal content management and be integrated with auxiliary services. The application should be successfully recognized by search engines, and its admin panel should be a convenient tool for site managers.

Solution

Isomorphic application

Originally, Scrapi was an SPA built from JavaScript files downloaded to the user's device in advance. It worked fast but was poorly indexed by search engines. To maintain its speed and keep SEO performance steady, the service interface was partially server-rendered using the Next.js framework based on React.js technology. Such applications are called isomorphic.

The role of Drupal

In this project, Drupal CMS is used to store data. As part of the headless Drupal approach, this CMS can connect to other applications and services through an API. Scrapi is an example of a Drupal database application whose interface is based not on a Drupal theme or profile but on the Next.js framework.
 

Server side rendering with React

Abandoned form email

To reduce the number of abandoned forms, we assigned a short link to the form after each completed step. The link is then emailed to the user. When they click it, it takes them right back to the step they left off.

Preparing the website for high loads

The client feared that the website would crash under a high influx of real users or if intruders launched a DDOS attack. We already had a proven and reliable technology stack for such a situation:

  1. Hosting: Amazon Web Services;
  2. CMS: Drupal 8;
  3. Caching: Memcached, Varnish;
  4. Backend: REST API using the Drupal Contenta CMS distribution.

How business structure is reflected in the site architecture

Service customers can see scrap metal prices that vary from UK region to UK region. For this purpose, we configured the import of price data from a .csv file. The price change graph is plotted by the Recharts library.
 

Scrapi

We integrated APIs of various services on the website for identifying junk cars by their plate number, searching for the client's address by zip code, etc. In case the service accepts two cars with identical plate numbers, we set a boundary condition in the form of an additional check of the car's VIN. 

Management of client lists in the CRM and the automatic launch of email campaigns works via the Sendinblue service: it has a simpler API and a more favorable price compared to its competitors.

Сonclusion

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

All case studies

Profile picture for user romanovsky

Dmitry Romanovsky

Team Lead
Profile picture for user bulatnikov

Vlad Bulatnikov

Team Lead
Profile picture for user shmakov

Alexander Shmakov

Back-end Developer

Drop us a line

Your email isn’t going to end up in the inbox abyss, never replied.
At ADCI Solutions, we care about each inquiry

Next case study

Sound & Science: Digital Histories

Drupal 8 website development and content migration for the research institute