Project Screenshot

Kopi-d Co.

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

  • Analysis

    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.

  • Our solutions

    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

Results

Duration:
April 2016 - May 2016
Team:
Backend - 1 Frontend - 1 PM - 1
Designed the UI/UX

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 mobile friendly user interface.

Developed the backend

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.

Developed the frontend

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 behavioral factors.

Implemented features

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 live, 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

Поскольку рендеринг на стороне сервера имеет решающее значение для оптимизации поисковых систем и, следовательно, для продвижения Kopi-d, мы позаботились о том, чтобы весь важный контент возвращался уже отрисованным с сервера, а в дальнейшем подключалась динамическая часть старницы.

Мы разработали удобный интерфейс для управления всеми заказами и учетом всех пользователей. Наша серверная сторона автоматически отправляет запросы на сервис доставки для определения актуального статуса заказа. Пользователь может в режиме реального времени отслеживать статус заказа на нашем сайте

Technology Stack

HTML5 icon
HTML5
CSS3
Javascript icon
Javascript
Node icon
NodeJS
PostreSQL icon
MongoDB
Nginx icon
Nginx
Paypal icon
Paypal
Rest API
Rest API