loading

TopShipping

Complete CRM & CMS solution based on Laravel 9, PHP 8.1 and ECMAScript10.

Jack Johansson
Jack Johansson

Freelance web developer

September 17, 2021

Custom CRM / CMS Solution

TopShipping is a Customer relationship management and content management system developed for the TopShipping s.à.r.l. Every aspect of the project ( excluding UI design and partial HTMLs ) was developed by me as the sole developer of the project. The main purpose of the system is to allow customers to request detailed freight quotes, which will be handled by inquiry agents and replied to. TopShipping was build from scratch, starting from the UX/UI design. It features a complete CMS system, custom dashboard, inquiry system, ticket system, agents' dashboard, caching, and more. This project was built on top of the latest versions of the following stack:

  • Laravel 9
  • PHP 8.1
  • ECMAScript 10
  • MySQL 8.0.23
  • Laravel Nova

On top of the said stack, the following technologies were used as a part of development or production:

  • Redis
  • Amazon S3
  • Amazon CloudFront
  • Cloudinary
  • Schema.org
  • Sentry
  • Sass
  • Webpack / Mix
  • Figma

TopShipping is developed based on CI/CD, and is improved on a regular basis. The project was developed using as few extra libraries / dependencies as possible ( only 2 ). Cutting edge technologies of the above stacks were implemented and used during the development process, such as:

  • PHP 8.1 and its features. The code is written using strict typehints and return types, enumerations, readonly class properties ( whenever required ), and more. The goal was to write a robust and fail-proof code. The code follows the PSR-4 standards and is composer-compatible.
  • Laravel 9. Almost every feature provided by Laravel was used during the process. This includes but not limited to Queues, Jobs, Events & Listeners, Mails & Notifications, File management, Access policy, Custom guards, Custom blade engine, Blade templates and components, Dependency injections, Request validations and authorizations, Sanctum, Custom console commands, Database seeders & factories and more. The app is fully internationalized and will be available in as many locales as required, once the translation strings are provided.
  • ECMAScript 10 ( Vanilla JavaScript ) was used to develop the front-end. No libraries such as jQuery or framework was used as a part of development. The front-end scripts use the latest JavaScript features such as module system, promises and exceptions.
  • No application can perform efficiently without a properly designed database. This is why extensive time was spent to design a reliable and efficient database pattern using MySQL 8.0.23, that can also be ported to other engines such as PgSQL. The database was normalized using the 6 normalization rules. Features such as foreign keys and triggers were used to ensure data integrity and efficiency.
  • Redis and tagged caches were used to reduce the database queries to zero. Yes, there are no queries to the database unless something has changed in it. Every query is cached and tagged using hashes, and only that specific cache is cleared once something is updated. This eliminates the query time and the achieved TTFB for the application was only 22ms.
  • Static assets are served using Amazon CloudFront. The only request handled by the server is the request to the HTML source. Images are also converted to responsive images, and served via the Cloudinary service.
  • Schema.org is implemented in depth to improve the application's rank on search engines.
  • HTML templates are developed separately using Sass as a style engine and JavaScript modules. These assets will be complied, copied and automatically pushed to Amazon S3 and Amazon CloudFront using Webpack / Mix by running a single command line.

The following screenshot illustrates the homepage design of the application for desktop users. You can visit the production website at www.topshipping.co

TopShipping Homepage

Homepage screen for desktop users

The application features a complete CMS system, which supports:

  • Articles
  • Categories
  • Tags
  • Archive
  • Search
  • Static pages

It's worth mentioning again, that all the contents are efficiently cached and only cleared automatically once there has been a change in the contents. The content managing is done via Laravel Nova.

TopShipping Blog Index

The index screen on the blog

Each customer, whether logged in or not, can send a request to get a quote by the inquiry agents. Quotes are validated both via front-end and back-end. Once a quote is submitted, if the customer is a guest, an account will be automatically created for them and their credentials will be sent via mail in the background. They will also be notified about any activity on their quotes and tickets, including a response to the conversation. Agents can view, respond and update tickets as required.

TopShipping Quote Form

Detailed and stepped quote form

The customer dashboard features various sections such as quotes, personal information, tickets, newsletter, settings, and more. Every request to the back-end is done via AJAX. If the request is successful, then actions are taken place and users are notified of the result via a toast message.

TopShipping User Profile

Illustration of user profile, quote section

To view the live application and try the features, please visit www.topshipping.co.

Jack Johansson
Jack Johansson

Freelance web developer

September 17, 2021