Never be afraid to change something in your life. Sometimes it is helpful. Sometimes it is necessary, and sometimes it is damn nice.
You could see Anton’s work on:
staj.co – bback-end development, integration with Google API, Facebook API and cloud storage on AWS. Application of Websockets technology with server implementation on Node.js
bloggermall.com.ua — back-end development, improving site performance by rewriting it using the Laravel framework. For this, a new database structure was designed, integration with the Facebook API was performed, chat was transferred to Websockets technology, integration with Telegram , a neural network for determining the quality of the audience, and services for sending SMS messages was performed.
defiprod.staj.fun — back-end development on Node.js and the Express framework, implementation of a smart contract in the Ride language.
Stack
-
HTML 5
-
CSS
-
JavaScript
-
JQuery
-
Vue.js
-
Nuxt.js
-
Node.js
-
PHP
-
Laravel
-
Git
01
/ 06
Using convenient filters, you can select bloggers with the necessary budget, number of subscribers and engagement rate. The platform also allows you to set filters for the required target audience by interests, age, gender and geolocation. By setting up each filter, the customer will be able to find the perfect candidate for their advertising campaign.
Blogger profile and dynamic analytics
By going to the page of a particular blogger, the advertiser can get acquainted with their indicators and detailed audience analytics. Analytics are dynamic and updated in real time. The service provides real data on the number of subscribers, their geolocation, gender, age, audience engagement rate, as well as the number of likes and comments under publications.
01
/ 03
To get this amount of up-to-date data, we have developed a special application for integration with Facebook Business Manager. Information about the blogger's page is passed to the service via the API: thanks to this, we can display data that cannot be obtained by simply parsing the page. This approach makes the analytics more accurate and deep.
For the analytics to work correctly and display the latest posts, the bloggers links their Instagram accounts to the profiles in their personal accounts.
Non-standard integration with UApay
On the blogger's page, you can also get acquainted with their pricing policy and order the necessary service. The platform acts as a guarantor of the security of the transaction: it reserves and holds the agreed sum of money until the performer places the advertisement.
To implement this functionality, we implemented a non-standard integration with UApay:
- Upon receipt of money, the payment is split into two parts: the blogger's funds (90%) and the exchange's funds (10%).
- The funds are not immediately transferred to the recipients, but are held for the period of the task.
- If the blogger does the work and the customer accepts it, the funds go to the corresponding accounts of the blogger and the exchange.
- If the task is not completed or the work is not accepted, the funds are returned to the payer's account.
The payment process is fully automated and requires no intervention. The exception is when the application is referred to arbitration.
Blogger's personal account
After the advertiser has made a preliminary payment, the order is displayed in the blogger's personal account. Here, the blogger can contact the advertiser through the messenger built into the platform: this is the main way to communicate with the customer, the space for agreeing on the terms of reference and discussing all the details of the transaction. For each order, a separate chat is created, in which you can track the chronology of work, request an additional payment, or confirm the completion of work.
A list of all advertising campaigns is displayed in the personal account (as well as in the advertiser's account). Convenient filtering at the top of the list helps to separate current orders from completed or awaiting confirmation.
After agreeing on all the details and placing the advertising integration, the blogger confirms the completion of the task. If the customer mutually confirmed the completion, then the money goes to the blogger’s account, from where they can be withdrawn to any bank card.
Switching from Wordpress to Laravel
The Bloggermall project was originally launched on the WordPress platform. This was done in order to quickly enter the market and test the business idea. The new project turned out to be attractive and the site went up. However, along with this, technical difficulties began to arise:
- the growth of visitors had a negative impact on the performance of the site;
- there was a need for new elements, the implementation of which is limited by the Wordpress platform.
With a significant increase in the number of users, the loading of the page with the list of bloggers moved into the red zone according to Google PageSpeed. After the analysis, it was revealed that the reason is the inefficient architecture of the database. As a result, it was decided to switch to the Laravel framework. Its use allows you to create a more efficient database structure, and also removes restrictions in the development of the project to add new modules. It was also decided to switch to a more progressive DBMS — PostgreSQL.
A list of all advertising campaigns is displayed in the personal account (as well as in the advertiser's account). Convenient filtering at the top of the list helps to separate current orders from completed or awaiting confirmation.
The implementation of the changes we planned looked like this:
- The frontend part of the application has been radically changed. Now the personal account is written on the VueJs framework. This allowed us to fully apply the Websockets technology. For this, a separate module was developed on the server, which included NodeJs and Redis — the link between Laravel and NodeJs. As a result, the chat has become more functional online.
- All integrations with other services were re-written — Facebook, Instagram, Instagram story parser, sms mailing service, email mailing service, telegram bot notifications, E-sputnik, Google Sheets, payment aggregator.
- A scheme with a task queue was implemented, which assumes the exact execution of a task at a given moment and the distribution of load flows without involving additional server resources.
- As an addition to the functionality, integration with the neural network service was added. This makes it possible to analyze the blogger's audience and an additional section of the site — the blog.
As a result of all our actions, we received:
- green zone for the speed of loading all pages of the site that are in search engines;
- the search for bloggers has become more convenient due to the high speed of server response;
- site managers have a great opportunity to create all kinds of tasks for writing new modules.
Summary
BloggerMall is an example of a convenient and secure service that connects the artist and the customer. It stands out not only for its bright design, but also for its wide functionality for searching for suitable contractors, discussing technical specifications and making secure transactions.
Content
- About the project
- Layout and navigation
- Cross-browser compatibility
- Adaptability
- Functionality
- Multilingualism
- The result
About the project
Our new client, City Inn Lviv Smart, is a modern hotel with many amenities: free parking, a conference room, a fitness center, and a restaurant. But without a spectacular website. Together with the designers working on the project, we developed a fast, functional website with custom animations and a user-friendly management system.
Layout, navigation, and animation
If you look at the design, you'll see that the site is full of images. But when you use it, you won't notice that it affects the speed. That's because we used the Vue 3 reactive JavaScript framework with a number of additional technologies to develop the interface:
- Vuex — for managing the status of all website components;
- Vue Router — for creating application routes;
- Axios — for asynchronous data requests from the server side of the website;
- SwiperVue — for the implementation of touch sliders on the website:
Preloader
To keep users on devices with slow internet connections informed of the site loading process, we have added a preloader - a progress bar that moves until all content is fully loaded for viewing.
Home page
The first screen
A bright photo cover for the entire screen, logo, burger menu, STA button, language switch, links to the company's services and contacts — all implemented in full accordance with the client's minimalist and stylish design layout.
A little bit of animation from our front-end developer — and the user not only gets a nice picture, but also a pleasant experience when interacting with the site. And we will tell you more about it.
Custom scrollbar
When clicking on the burger menu or scrolling vertically through the site, you will appreciate the smooth scrolling and smooth appearance of the drop-down menu. This effect is made possible by the Smooth Scrollbar JavaScript plugin:
Footer with custom map
The hotel location map was implemented using the Google Maps API in full accordance with the client's design:
https://wnauts.com/wp-content/uploads/2025/09/custom-scrollbar.mp4https://wnauts.com/wp-content/uploads/2025/09/footer-with-custom-map.mp4Additional pages
To transition between pages, we used Vue Router hooks and implemented the appear/disappear effect by wrapping the page elements in the Transition Vue component:
https://wnauts.com/wp-content/uploads/2025/09/additional-pages.-appear-and-disappear-effect.mp4On the Smart Offer page, we implemented sticky 3D rotating cards:
https://wnauts.com/wp-content/uploads/2025/09/3d-rotating-cards.mp4At the client's request, we also added the ability to switch slides by clicking on an image to move it forwards or backwards:
https://wnauts.com/wp-content/uploads/2025/09/switch-slides-by-clicking-on-an-image.mp4Cross-browser compatibility
When developing modern interactive websites, we always take into account their compatibility with different browsers: Google Chrome, Mozilla, Safari, etc.
To ensure that the site is displayed correctly in outdated browsers that do not support the ECMAScript 6+ standard, we have installed the Babel package. This is a technology that automatically converts JavaScript code written in newer versions of ECMAScript into code that old browsers can understand.
For cross-browser compatibility, we also used Autoprefixer, a post-processor for optimal processing of current CSS prefixes. This technology is recommended by Google and used by giants such as Twitter and Alibaba.
Adaptability
The website is perfectly displayed on smartphones, tablets, laptops, and computers. To achieve this result, we had to do our best and solve several non-trivial tasks.
For example, we faced the problem of incorrect display of images in the mobile browser Safari on iPhone iOS 14. Starting from version 14, apple smartphones support the WebP image format, and older versions do not recognize these files as images.
To solve this problem, we added the Detect.js package to the project, which easily detects any browser version. And if it's Safari Mobile 14 or earlier, it will automatically load the site's images in JPG or PNG format.
Typically, mobile animation differs from desktop animation because smartphones don't have a cursor, which means they don't have a hover effect. However, our client did not want to deprive the mobile version of the site of interactivity and set the task to animate all sliders in a non-standard way. Despite the significant differences between the sliders in the mobile and desktop versions, we had to bring the logic of their work into a single look, which was very difficult. But we did it!
https://wnauts.com/wp-content/uploads/2025/09/mobile-animation.mp4Functionality
The abundance of images always affects the page loading speed. We optimized the site from the server side using the modern PHP framework Laravel, which works according to the MVC (Model — View — Controller) scheme. This system divides the site management into 3 main parts:
- The model is responsible for the system's contact with the database and formally describes each entity of the information system. It is the model that provides the controller with the necessary information.
- View is the appearance of a website.
- Controller is a tool that processes user requests and generates the response or action they need. Typically, a controller collects the necessary information using models and then combines the collected data set with a view template. The controller sends this entire design to the user, and the user sees the website page.
Website admin panel
We chose Laravel Nova for the administration panel, which allows you to easily and conveniently manage the site. This module allows you to create handlers for the connection of the admin panel with the models of the information system, i.e. it provides the client with convenient tools for creating, editing and deleting content on the site:
To optimize the performance of the site, it is more appropriate to use the .webp image format. That is why we installed and configured the Nova Media Field module, which converts all images on the site into the required format. Content managers will appreciate it, because this technology makes the process of site management even more convenient and pleasant.
Multilingualism
The administration panel of the site turned out to be not only fast and convenient, but also multilingual. To achieve this, we installed the Nova Translatable package and configured all admin panel fields in several languages. Now you can switch between languages with the help of buttons, so the content manager can fill out the site in Ukrainian and English with just a few clicks:
The result
The story of creating a website for a hotel in Lviv has come to an end. This is not the first experience of website development in the hospitality industry, but no less exciting: with its own challenges and non-standard solutions. In this project, we bypassed the design stage and started implementing an interactive interface and a convenient custom administration panel based on the client's ready-made layouts. As a result, the hotel's website is responsive, multilingual and adaptive, and the mobile version is as good as the desktop version in terms of animation effects.
[post_title] => Website of City Inn Lviv Smart hotel [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-of-city-inn-lviv-smart-hotel [to_ping] => [pinged] => [post_modified] => 2025-09-29 18:57:25 [post_modified_gmt] => 2025-09-29 15:57:25 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=21125 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )Worked on
-
Development of the Platform for Instagram Bloggers and Influencers
-
Team:
5
-
Cases:
0
-
Reviews:
0
-
-
Website of City Inn Lviv Smart hotel
-
Team:
3
-
Cases:
0
-
Reviews:
0
-