en

The Czechovych Roastery – knows real coffee

Go to website
  • Site type: online store
  • Terms: 28 days
  • Status: Completed
  • Made: Web dev

01 Client

The Czechovych Roastery is where green beans are transformed into the world's most delicious sip of coffee. They work with the best coffee roasting and brewing equipment available on the market.

02 Goals and objectives

Expand the site from a landing page to an online store
  1. The new site should be created in the same style as the existing one.
  2. In the coffee shop, you need to implement the categories: filter roasted, espresso roasted, drip coffee and capsules
  3. In the equipment store, create categories: coffee grinders, filters, pourovers, coffee makers, scales
  4. On the "about us" page, provide information and allow you to leave text and graphic information.
  5. On the "our coffee shop" page, allow adding photos, contacts and menus to each of the coffee shops
  6. Create a personal user account with the ability to authorize via email or Facebook
  7. Implement the ability to purchase products through a cart.
  8. For each coffee product, provide the ability to add wholesale prices, type of grinding and package weight.
  9. In the cart, allow you to choose payment (upon receipt, payment by card, online payment), and delivery (pickup from the coffee shop, courier delivery Nova Poshta and pick up from Nova Poshta)

03 Decision

To achieve the set goals, we had to work with a considerable number of third-party services. These services include working with APIs: Facebook, Google Map, Nova Poshta, and LiqPay. How everything was implemented is described below.

Website design

We didn't have to work on architecture, planning, and design, as the client came with clear specifications for the pages he wanted to see on the site and how they would be filled in. We just created a prototype, wrote the specifications, and handed over all the material to the layout designer for work.

Colors

Colors

Fonts

Playfair Display SemiBold
Playfair Display Regular
Yeseva One Regular
Photos of some sections
Site photo The Czechovych Roastery - 1
Site photo The Czechovych Roastery - 2
Site photo The Czechovych Roastery - 3
Site photo The Czechovych Roastery - 4
Photo of the proposed design
To be honest, we tried to convince the customer about the site design and change the color palette and fonts, but we didn't succeed. In general, we proposed the appearance of the pages in the style shown in the photo below.
Site photo The Czechovych Roastery - 1
Site photo The Czechovych Roastery - 2
Site photo The Czechovych Roastery - 3
Site photo The Czechovych Roastery - 4

Website development

In general, the site has implemented a wide range of functionality in terms of product modification. To do this, we have made it possible to bind the type of grinding and weight to certain products. In addition, these criteria have made it possible to set different prices and change the appearance of the packaging depending on the selected weight. A wholesale purchasing system has also been developed for the product. A number of works have been carried out with the API of third-party services

Roman Melnychuk

Google Map Api

Used on the site to style the map to match the site design and to create your own marker designations. The site administration provided the ability to create new designations in case of business expansion and opening new coffee shops. Google Map API was also used when working with the Nova Poshta API

Nova Poshta API

A lot of work has been done with this API.
From the user's side, its work is noticeable when making a purchase through the site's cart. When the user chooses the delivery method via Nova Poshta, it becomes available for him to choose the region and branch for delivery. He can do this in two ways: the first from the drop-down list (which also has a search option) or by searching for the desired branch on Google Maps. Depending on the selected region and branch, the delivery cost is calculated according to Nova Poshta's tariffs.
From the administrator's side, work with the API is noticeable in the site's administrative panel. It allows you to set basic settings for integration with Nova Poshta, create online invoices for orders, adjust recipient data, sender data, and also change payment options, delivery type, weight, volume, and a number of other settings

LiqPay API

Used for making online payments when placing an order through the shopping cart. Additionally, a payment link is sent to the user's email address, which he specified when ordering. In addition, the site's administrative panel provides settings for working with payments: it is possible to choose the currency in which payments will be received, the payment method (card, LiqPay wallet, invoice, etc.), set a redirect to the page (upon successful payment and upon unsuccessful payment), and it is possible to change other technical settings for integration

Facebook API

Thanks to working with the Facebook API, we have made it possible to register/authorize on the site by logging into the user's personal Facebook account and transferring available data from Facebook (last name and first name) to the user's personal account on the site.

Back-end

The peculiarity of this project was: working with Nova Poshta data, LiqPay and developing a custom customer account. As well as developing custom solutions for the client and business tasks.
Dmytro Kosyk

Working with the admin

The admin was tasked with editing all information on orders, product modifications, and other details. This was needed so that the manager could edit all the necessary information without involving programmers.

Wholesale prices

For wholesale customers, the possibility of adding goods to the cart at wholesale prices was provided. All order data is transmitted to the admin panel and to the manager by email.

Product modifications

The ability to select product modifications has been implemented: grinding type and packaging weight. The ability to select individual modifications for products in the admin panel has also been created.

Buyer's personal account

For convenience, a personal account has been developed where the client can: edit, delete, view, and repeat their orders.

Order management

All orders are sent to the manager by email and to the admin panel, where there is the possibility of fully editing order data. There is also the possibility of editing information about the online store's customers.

04 Technologies and tools

jQuery
Modx Revolution
Gulp
Figma
MySQL
PHP
LESS
Telegram API

05 Result

The result was an online store with an average level of complexity in terms of functionality. The site was tested on various devices and systems. Bugs that were found during testing were fixed. Our team completed all the tasks assigned to us and transferred access to the site's administrative panel to the client. We also created a document with a detailed description for administering and filling the site with content and new products

Roman Melnychuk

06 Client's words about the project

Review author: Andrij Davydov
Andrij Davydov

Founder

07 Project team

Project management

Roman Melnychuk

Marketing

Design

Development

Content

Other projects

Do you want effective solutions from us?

When ordering two or more services, we have discount system