It is a super fast and lightweight, SEO-optimized online store. The main products of the store are devices for fast charging smartphones and other accessories, as well as beacons and stations for smart homes.
The story behind Kopi-d Co.
Kopi-d is a company developing the design and manufacture of mobile accessories, as well as beacons and stations for smart homes. The company was founded in 2008 and it has been successfully operating up to the present moment. The company’s manager Sam AU contacted us and asked to increase the share of his company’s online sales and develop a fast and lightweight online store
One of the reasons online stores have grown over during the years is the experience that businesses can provide to their customers. Modern companies are adding new features and services for online shoppers in order to provide them with the same support and maintenance they would have during a personal shopping experience. So the task was just to add some new features and capabilities for a more comfortable and convenient choice of products.
We have developed a convenient and fast online store that allows a person to purchase unique kopi-d products without leaving home at any continent. One of the advantages of the developed solution is the speed of work, a convenient admin interface for tracking orders and automatic calculation of the delivery price depending on the buyer's address
There are three user roles in the application: clients, moderators and super-administrators. We defined mockups and wifi frames for each of these roles and then used this information to create detailed interface layouts. An important aspect of the work was a mobile-friendly user interface.
We chose the REST API for the backend because this architecture is flexible, simple, and extensible. We provided a clear admin interface so that our moderator can manage the content of the site in just a few clicks. These changes to the backend become available to users immediately without a server delay. The administrator can easily change the headings, texts, images, icons and color schemes in a couple of clicks. We used Redis RAM caching to speed up the response time of the API and the order completion process. A flexible module was developed to calculate automatically the delivery price depending on the country, user address and the selected delivery service.
This project was quite little, and we had a strict deadline, at least for the client’s part of the application. Therefore, we decided to create an ultralight, fast and SEO-optimized frontend part of the store. For the technology stack, we decided to use native JS as it is enormously fast and light. As a result, we have even less than 30 Kbytes of all JS, CSS and HTML code for our online store that works without page reloads (in the style of a single-page application), which has a very positive effect on behavioural factors.
As soon as the customer completes the order and provides information, he will be able to make payment through PayPal. Customers can pay using Payflow Pro, the open and secure PayPal gateway for PayPal payments and credit / debit cards.
We calculate shipping costs based on the customer’s zip code automatically. Therefore, we use a third-party API and implemented our preliminary calculation module to make the order process as quick and convenient for our customers as possible.
Initially, we decided to use SMS messaging using the Twilio service. It was extremely important to use a proven service, Twilio had to ensure a stable delivery speed. But after our project went life, we saw that many messages were not delivered to some numbers and even to some telecommunication providers (some of the providers in China). We tried to solve this problem by contacting Twilio technical support, adding the alphanumeric identifiers of the senders, which are necessary for SMS messages, but nothing helped. Then we switched to another SMS delivery service. We chose SMSAla based on reviews and prices. And it worked well for Chinese users
We have created layouts. This allowed us to take advantage of our client’s vision and get a clearer idea of how the final result should look and how the website should function, especially the admin interface.
If visitors have questions, they can easily contact us. After the visitor sends a request on the site in the admin panel, a request is generated, and a notification is sent by e-mail
Since server-side rendering is crucial for optimizing search engines and, therefore, for promoting Kopi-d, we made sure that all the important content was returned already rendered from the server, and later the dynamic part of the page was connected.
We have developed a convenient interface for managing all orders and accounting for all users. Our server-side automatically sends requests for the delivery service to determine the current status of the order. The user can monitor the status of the order in real-time on our website.