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:
- Amazon S3
- Amazon CloudFront
- Webpack / Mix
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.
- 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.
The following screenshot illustrates the homepage design of the application for desktop users. You can visit the production website at www.topshipping.co
The application features a complete CMS system, which supports:
- 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.
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.
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.
To view the live application and try the features, please visit www.topshipping.co.