Luck is what happens when preparation meets opportunity.
By education, Nikolai is an engineer in computerized control and automation systems.
More than 3 years experience in IT
Previously, he worked in the department of process automation with MS SQL databases at the «ArcelorMittal Kryvyi Rih» mining and smelting enterprise. He held the positions of «Developer of information management systems» and «Leading engineer».
Nicholas has worked on:
blackroom-escape.de – frontend development on Vue.js; creating a constructor page, implementing internationalization, adding search and ticketing options; development of a review page with the ability to filter and sort. Used technologies: Nuxt.js, i18n, interaction with REST API.
undersunhotel.com.ua – frontend development on Vue.js; creating a page constructor, introducing internationalization and a booking module, adding animations. Used technologies: Nuxt.js, i18n, GSAP, interaction with REST API.
fluxcortex.com – frontend development on Vue.js; creation, editing and deletion of application data, implementation of registration, authorization; visualization of statistical data in the form of graphs with various filters, adding the ability to export data, implementing functionality for voice playback. Used technologies: Vue.js (3rd version), Vue-router, Vuex, chart.js, interaction with REST API.
Stack
-
CSS
-
HTML 5
-
Sass
-
JavaScript
-
Git
-
Vue.js
-
Next.js
- An interface for creating, editing and deleting data for a specific game — it can be either the characters themselves, or their voices or entire dialogues;
- Visualization of statistical data — the transformation of a large amount of information into understandable and minimalistic graphs;
- Export — the ability to conveniently upload a large amount of data;
and much more.
The web application is intended for internal use, so SEO optimization and search robots, in our opinion, are not needed here. For the same reason, we also abandoned server-side rendering (SSR).
As a tool for implementing the frontend part, we used the Vue.js framework (namely, its 3rd version). The back-end part of the service was provided by the customer, so our developers were able to concentrate on front-end development, writing individual modules, components, and connecting the API.
Development process
First of all, we implemented user authorization based on access and refresh tokens. For this, Axios Interceptors, which check the token before executing the request, and Vue Router hooks, which check just before moving to another page, suited best . If the verification fails, the user will be returned back to the login page.
To visualize the data, we implemented a table with pagination, filters and sorting capabilities. Thanks to this, it is easier for the user to find the information they need in alphabetical order, by creation time and ID.
In addition, we implemented the ability to edit each record by going to a separate page or directly through the fields in the table. You can create and edit data both in the context of the selected filter, and at your own discretion.
Everyone loves minimalistically designed statistics, so we used a bar chart. The data dynamically changes when the date changes or any of the filters are switched.
The «Voice API» deserves special attention. It reproduces the written text with the voices of different characters. Thanks to this, for each of the created characters (an entry in the table), you can select a unique voice from the list, listen to it for a given phrase, or write your own text.
The main problem that we encountered when working with the «Voice API» is the delay. Because of this, the text entered from scratch was not transmitted immediately, as Temporal Games wanted. To solve this problem, we wrote middleware that checked the status of the server's response and waited for the end of the generation of the audio track.
Another interesting task that we faced during development is the implementation of data export. The thing is that the selection is data for each individual day, which are grouped monthly. Therefore, to increase convenience, we decided to add a new feature — placing data for the day in separate JSON files. After a month, they are archived and made available for download as a single zip file.
The result
While working with Temporal Games, we not only improved our own skills, but also enjoyed solving non-standard problems. As a result, we managed to create a classic single-page application (SPA) with extensive functionality and the possibility of further scaling. At the same time, customers received not only an attractive, but also a convenient product, written on the latest version of one of the most relevant Java Script frameworks of our time.
[post_title] => SPA Application on Vue.js for Data Management [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => spa-application-on-vue-js-for-data-management [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:41 [post_modified_gmt] => 2023-04-17 12:06:41 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=10378 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [1] => WP_Post Object ( [ID] => 10532 [post_author] => 10 [post_date] => 2021-01-17 13:50:03 [post_date_gmt] => 2021-01-17 10:50:03 [post_content] =>About the project
«Undersun» is a five-star spa hotel located on the Black Sea coast in the village of Gribovka. This area is distinguished by an ecologically clean five-kilometer zone with wide sandy beaches, boarding houses and recreation centers. The hotel provides a wide range of services: restaurant, free parking, seasonal outdoor pool, bar, room service, sauna and much more.
«Undersun» promoted and provided services through Internet booking systems such as «Booking», «HotelsCombined» and a lot of Ukrainian services. But working with them imposed a number of restrictions, so the owners of the spa hotel decided to create their own website to promote the brand.
Our task was to create an attractive, adaptive website with the possibility of booking rooms and demonstrating the services provided.
https://wnauts.com/wp-content/uploads/2021/01/undersun-video.mp4Development process
Before starting work on the site, we deployed an environment for further development and set up the server, taking into account the technology stack used. The fact is that Laravel and Nuxt.js are useful, but rather capricious tools. Therefore, it is important to choose the right environment for them and set it up correctly.
Back-end development on Laravel
For the development of the «internal» component, we decided to use Laravel, a popular and adaptive framework that is best suited for solving light and medium tasks. At the same time, it is easily scalable and finalized, so at any time you can correct existing errors and quickly customize the site at the request of the client.
Laravel is a PHP programming language framework. Thanks to it, coders and designers do not need to reinvent the wheel every time to create a web application. Instead, they can focus on the really important tasks. Laravel allows you to create both simple and complex sites, implementing the desired functionality. No wonder the slogan of the project says that this is a tool for «artisans».
For the administrative panel, we chose Laravel Nova, which supports the necessary functions out of the box and significantly speeds up development for programmers.
Nova is a beautifully designed and extremely user-friendly admin panel for Laravel. Its main feature is the ability to create, view, edit and delete resources in the database. In addition, the developer can work with lenses, create filters, prioritize tasks, and use SQL search. Therefore, the words of the creators of Nova that their product will make you the most productive worker in the galaxy are not empty words.
In the site administrator panel, we implemented:
- Adding content with translation into three languages;
- Adding multiple «room» entities;
- Saving images and videos;
- Work with images in a separate section of admin panels;
- Implementing builders for editing with Flexible Content. Thanks to this, the administrator can create blocks with any set of fields and swap them.
In addition, we used the REST API, with which you can «give» all the content in a convenient json format.
01
/ 05
Front-end development with Vue.js
The main goal of the project is to attract customers with the subsequent booking of rooms, so the site must be indexed by search engines. The Nuxt.js framework is best suited for this. It is based on the more well-known Vue.js and allows us to achieve our goal through Server Side Rendering (SSR). Thanks to this, already from the start, the site supports the necessary functionality for SEO promotion in search engines.
Tourism is an international hobby, which interests more and more people from different parts of the world every year. For this reason, we decided to implement multilingualism using i18n and add Ukrainian, Russian and English versions of the site.
Note that this is not a standard auto-translation - the content is filled in separately for each language and has unique URLs.
Among the interesting tasks during development, we note the addition of a large number of effects and animations. We have implemented the vast majority of them using the GSAP library.
Here are some examples of animations implemented on the site:
- Scroll Trigger — the appearance of blocks when the scroll on the page reaches a certain position.
- Split Text — the appearance of text character by character.
- Timeline + Scroll Trigger + smooth scroll — parallax effect.
In addition, we have implemented a rather interesting transition animation between slides, which supports several effects at once. To create it, we used the Hover Effects library, based on Three.js.
As the name implies, it works on hover, so we had to refine and adapt it for an element with automatic slide change after a specified period of time (autoplay).
We have also integrated a booking module that allows you to view the availability of rooms by date and leave a request for a specific time.
The result
As a result, we got a stylish and fully adaptable site with many interesting effects. A minimalist and user-friendly booking page should be singled out, where everyone can get a brief description, a list of services and benefits, photos, price and possibility of booking.
[post_title] => SPA Hotel Website with Room Booking [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-with-room-booking [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:07:00 [post_modified_gmt] => 2023-04-17 12:07:00 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=10532 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => WP_Post Object ( [ID] => 9447 [post_author] => 10 [post_date] => 2022-01-03 11:24:27 [post_date_gmt] => 2022-01-03 08:24:27 [post_content] =>About the project
Golden Key is an official partner of Russian Railways and also our client. This service provides the opportunity to purchase certificates for visiting business lounges of the new format at railways stations.
Now many passengers prefer to spend time in comfort while waiting for a train. To this end, Russian Railways equips special halls of increased comfort, and partners help to gain access to them. Golden Key is just one of these unique partners.
Business lounge of the new format is not just a 3-hour comfortable stay, but also a relaxation and work area, a delicious buffet, soft drinks, coffee and tea, access to Wi-Fi and charging stations. To get into any of these lounges of the partner network, you don't need to get an expensive in service bank card - now you can use a one-time Golden Key certificate to travel in comfort - regardless of the ticket class or even without it at all.
https://wnauts.com/wp-content/uploads/2022/01/golden-key-video.mp4The objective
We were given the task of developing a Landing Page for the Golden Key service, the functionality of selling certificates and the mechanics of their verification at the entrance to the knowledge base. At the initial stage, the site is focused only on the possibility of visiting the business lounge, but in the future the company plans to scale up services, to introduce additional services for passengers. This must be taken into account during development
Golden Key is an official partner of Russian Railways, and our client. This service provides an opportunity to purchase certificates for visiting new-format business lounges at Russian Railways stations.
Now many passengers prefer to spend time in comfort, waiting for the train. For this purpose, Russian Railways equip special halls of increased comfort, and partners help to get access to them. Golden Key is just one of these unique partners.
A new format business lounge is not just a 3-hour comfortable stay, but also recreation and work areas, a delicious buffet, soft drinks, coffee and tea, Wi-Fi access and charging stations. To get into any of these lounges of the partner network, it is not necessary to get an expensive bank card - now you can use a one-time Golden Key certificate to travel in comfort, regardless of the ticket class and even without it at all.
Solution
The Webnauts team has done a lot of work, involving developers, designers, copywriters, analysts and SEO specialists to make the idea a reality. We have created a whole Golden Key ecosystem, which includes not only a website, but also a mobile application, and a business lounge administrator interface with a backend. We will talk about each of these parts of our work in the future in this and other cases.
Landing Page Design
The main element of the Golden Key system is a website, or rather a landing page, the design of which we paid maximum attention to.
Of course, we used a color scheme that would match the name of the service in gold tones. All the main elements, buttons and symbols are made in this color.
The classic big slider at the top of the site contains images of all Golden Key business lounges. Photos are also selected in the appropriate color scheme.
Special attention is paid to branded icons in minimalistic style, which simplify the perception of information.
Logo development
We took into account the indisputable fact that logos with the company name are the most common. It is such logos that make up to 70% of all modern logos, such as Samsung, Coca Cola, Nike and others. Such logos have a dual function, because they contain not only symbols, but also the name, which with the help of the logo will be easier to remember. We have created a solid base for the development of the corporate identity of the brand, using the name and corporate colors of the Golden Key company in the logo.
Informative commercial texts
All landing page blocks are accompanied by texts developed by our copywriters, taking into account the analysis of competitors and competitive advantages. These are simple but compelling text blocks with the most essential information.
Integration with Google maps
We used the dark theme of Google Maps for this project, so that the layout of the business lounges on the map of the Russian Federation looked like an integral part of the overall design solution of the site.
Buying Certificates
Right on the landing page, each client can buy a certificate in accordance with a simple purchase scheme. This procedure is described in the «How to get access» section and contains only 3 steps.
The process of purchasing a certificate is intuitive: a minimum of data is required from the user (e-mail and full name). You can also buy a non-personalized certificate that you can give to friends or colleagues. We have integrated payment using YooKassa, with which the purchase can be paid for by all popular methods.
After payment, all you need to do is to save the certificate to your smartphone or print it in order to present it to the hall administrator at the right time. A copy of the certificate is also sent to your email, so it will not be difficult to find it at the right time.
01
/ 04
Personal account
Individuals have the opportunity to enter their personal account. To register on the site, only an email address is needed: a password for entering is sent to it.
In your personal account, you can view already purchased certificates and the status of their redemption, as well as change your personal login information.
In the future, here, in the user's personal account, other functions and options will be added.
Software part
We have implemented the backend on the Laravel framework. It is one of the best PHP frameworks for developing commercial web applications and has the following advantages:
- Security.
- High performance.
- Authentication.
- Open source and large community.
- Database migrations.
- MVC architecture.
- Object Oriented Libraries.
- Boxed unit tests.
- Large library of promising applications.
- Friendly code.
- Multilingual.
- Integration with mail service.
- Configured error handlers.
- Postponed tasks.
- Development speed.
The last of these points allows you to implement any project much faster. But other advantages are also worthy of attention, so we use this framework to solve such problems.
Golden Key Ecosystem
As part of the development of the entire system, we also did:
- Interface for administrators of business lounges.
- A convenient mobile application for passenger self-service in business lounges (duplicating the ability to purchase certificates, both on the website and with all the necessary information).
- Account and functionality for corporate clients.
- Professional account of the system administrator, including separate accounts for accountants, etc.
We will return to each of the listed tasks in cases and portfolios on our website.
Summary
Our team did a great job, putting almost maximum effort into creating a whole system of Golden Key products, the central figure of which was a website in the Landing Page style. We have developed not only a reliable and secure system, but also a corporate design, logo, high-quality text content and a convenient product purchase system.
[post_title] => Landing Page for the Official Representative of the Railways [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => development-landing-page-golden-key [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:59 [post_modified_gmt] => 2023-04-17 12:06:59 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=9447 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [3] => WP_Post Object ( [ID] => 10878 [post_author] => 10 [post_date] => 2022-04-17 14:19:23 [post_date_gmt] => 2022-04-17 11:19:23 [post_content] =>About the project
The Webnauts team took on an interesting Black Room project from a client from the German city of Karlsruhe. The scope of the customer's activity is the organization of intellectual leisure, namely the provision of themed quest rooms for collective games, in which there is a joint solving of puzzles and overcoming difficulties.
At the time when our team took the project to work, the customer already had five categories of quests and eight rooms completely ready for the game. And the number of Black Room guests by this time amounted to more than 1025 people.
The objective
We were required to create a website, the main purpose of which is to attract customers with the subsequent sale of tickets / gift vouchers and, as a result, online booking of quest rooms. The target audience of the project is residents and guests of Germany who want to have fun and spend their free time entertainingly.
To do this, we had to develop an architecture, build a website according to the provided layout, implement an administrative panel and integrate payment systems for online payment.
What have we done?
To develop a website for booking quest rooms, we chose a not quite standard technology stack. To work on the back-end, we decided to use WordPress and the WooCommerce plugin.
WordPress is one of the most popular content management systems in the world. With its help, developers can create websites of any complexity with minimal time. It is easy to set up for clients, so you do not need to have special knowledge to edit and contribute content. Thanks to this simplicity and responsiveness, almost 30% of all sites on the Internet use this CMS.
We decided to implement the front-end on the «reactive» Vue.js framework, which interacts with the back-end part via the REST API.
Vue.js is a JavaScript framework for creating UI and fully responsive websites and single page web applications. Although it is a library, thanks to the ecosystem of various components, it can be scaled into a complete and flexible framework that can be easily integrated with other projects.
On the one hand, this combination provides the convenience of managing and administering the site, with support for the “admin panel” interface familiar to the client, and on the other hand, the impressive performance and quality of the front-end component on Vue.js.
And now let’s talk about everything in more detail.
Front-end development with Vue.js
At the initial stage, we had a series of joint discussions with the client, during which we planned all our further work. We also approved a certain stack of technologies that we had to use in the process of creating the site.
The next step was coding. We made it in full accordance with the rendered design layout and adapted it to all the most common devices and displays of various widths.
In order to achieve the goal of the project and attract customers with the subsequent sale of tickets and vouchers, we had to work on ensuring that web pages were indexed by search robots. To do this, we had to guarantee high-quality rendering of the page on the server side. For this purpose, we used the high-level Nuxt.js framework with SSR technology.
Nuxt.js is a framework for building Vue.js apps. It is designed to simplify the development of one-page services and sites. This is achieved due to the speed of optimization, the modularity of the architecture and the convenience of developers working with the framework. Nuxt.js generates the static version of the site itself and transfers the pages into separate JavaScript files that contain only the code needed to run.
Back-end development on WordPress
Since the customer was well acquainted with the WordPress CMS, the entire back-end component was built on this content management system. We implemented the future functionality of the site not directly through the CMS, but using the API. Thus, we were able to implement more complex ideas, such as purchasing vouchers on the site.
Thanks to this, site visitors have the opportunity to purchase a voucher for a fixed amount of 25, 50, 100 or 150 euros, or for any other amount that the user can enter manually.
Implementing a WooCommerce Booking System
In order for everyone to be able to pre-book their favorite quest room on the site, we used the WooCommerce booking system and the WooCommerce Bookings plugin during development. This is one of the most popular platforms that has allowed us to implement a way to book leisure activities. It makes it possible to choose the date and time of visiting the quest room, set the number of participants, and it displays the final amount "for payment". Additionally, the system automatically reduces the cost of participation in the quest for players in groups of three to seven people.
We also used additional features from WooCommerce Bookings:
- The confirmation is intended to allow the member to review and clarify all the details before finalizing the room reservation.
- Automatic reminder of the upcoming visit to the quest to minimize the number of rejections and collect all the participants in the game in time.
Role differentiation and a new notification system
In the process of work, we have created the ability to differentiate the roles of employees. This is necessary so that managers have access to the administration of only the quest rooms assigned to them, and not to all rooms at the same time.
The next step was the implementation of notifications about booking quest rooms through the Telegram messenger. Prior to this, all such messages came to the manager's email. By connecting this instant messaging service, we ensured that employees were quickly informed about the event.
Payment systems integration
The next considerable layer of work on the back-end part is the implementation of services that, in our opinion, cover all payment methods as much as possible:
- PayPal is the largest debit electronic payment system. Today it is popular in different regions of the world and provides contactless payments in twenty-five types of currencies.
- Stripe is an international secure online payment system. It allows you to accept payments from both individuals and companies, while the commissions remain quite acceptable.
Thus, visitors have the opportunity to pay for the cost of the quest on the site both with the help of payment cards and through the Apple Pay and Google Pay mobile payment systems.
And, of course, we implemented booking when paying on the spot.
Development features
Since the website for booking quest rooms in Germany had to be available in English and German versions, the next task that we successfully completed was multilingualism. To implement interface translation, we used the i18n library — it was the one which provided a comprehensive solution for product localization and further scaling.
We moved static texts for each language version into separate JSON files. Getting all dynamic content is configured through the interaction of information objects with the API. Such generation is carried out when passing the selected language in the request parameters.
01
/ 02
Implementation of the process of booking quest rooms
The process of booking quest rooms deserves special attention. It is based on the principle of sequential passage of several stages:
- City selection.
- Location selection.
- Quest selection.
- Selecting date and time.
- Selecting the number of players.
- User data entry.
- Completion of payment.
At the same time, we wanted to provide a convenient user interaction with an extremely clear and simple interface, so that the collection of data based on the choice of the visitor goes as correctly and accurately as possible.
We divided the whole process into three screens. Each screen consists of two steps that appear one after the other when filled in sequentially. For example, it could be making a certain selection or entering data into a field.
As you progress through the stages of the booking, at the top of the page, each completed step is displayed dynamically as so-called «progress of filling out the form».
At the same time, dynamic tips appear at the bottom of the form, where you can see the actions that have already been performed by the user. When you complete the two current steps, you will be able to proceed to the next screen.
The stage where the process of choosing the number of players and the date of visiting the quest rooms is implemented is divided into three blocks:
- at the top of the form there is a dynamic counter that calculates the total cost when entering the number of participants;
- immediately below it is a graph that, in accordance with the dates, displays the available time for booking;
- on the right — brief information about the quest.
At the final stage, visitors can choose a convenient way to pay for the quest. Next to it, we have created a special field for entering a promotional code. If it is available and activated, the total cost is automatically recalculated, and participants are provided with a discounted price.
Summary
Thanks to the professional and well-coordinated work of our developers, the customer received a functional and fully adaptive website in English and German with full functionality for ordering, paying and booking escape rooms. The resource allows from any device to:
- view quest rooms available for order;
- find out detailed information about each quest;
- receive information about ongoing events;
easily and quickly book a quest room; - contact the organization to host your own event.
Worked on
-
SPA Application on Vue.js for Data Management
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
SPA Hotel Website with Room Booking
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Landing Page for the Official Representative of the Railways
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
Website for Quest Rooms on WordPress with Booking
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
