Services

Search

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

SPA Hotel Website with Room Booking

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.

Development 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.

Want to create a hotel site that can make a bright impression on the guest?

We will do everything that is required for this: from prototyping, structure and design to SEO optimization, SMM and advertising. Contact us to discuss the details of the project today!

Privacy Policy

    Array
(
    [0] => WP_Post Object
        (
            [ID] => 8381
            [post_author] => 10
            [post_date] => 2021-09-08 16:37:30
            [post_date_gmt] => 2021-09-08 13:37:30
            [post_content] => 
            [post_title] => Mykola Povstyanko
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] => 
            [post_name] => nikolaj-povstyanko
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2022-11-02 11:23:02
            [post_modified_gmt] => 2022-11-02 08:23:02
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => https://wnauts.com/?post_type=team&p=8381
            [menu_order] => 0
            [post_type] => team
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

    [1] => WP_Post Object
        (
            [ID] => 8348
            [post_author] => 10
            [post_date] => 2021-09-08 13:40:37
            [post_date_gmt] => 2021-09-08 10:40:37
            [post_content] => 
            [post_title] => Oleksandr Morozov
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] => 
            [post_name] => aleksandr-morozov
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2022-09-19 13:19:26
            [post_modified_gmt] => 2022-09-19 10:19:26
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => https://wnauts.com/?post_type=team&p=8348
            [menu_order] => 0
            [post_type] => team
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

    [2] => WP_Post Object
        (
            [ID] => 13465
            [post_author] => 10
            [post_date] => 2022-05-30 12:16:07
            [post_date_gmt] => 2022-05-30 09:16:07
            [post_content] => 
            [post_title] => Alona Kushnir
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] => 
            [post_name] => alona-kushnir
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2022-11-02 11:11:37
            [post_modified_gmt] => 2022-11-02 08:11:37
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => https://wnauts.com/?post_type=team&p=13465
            [menu_order] => 0
            [post_type] => team
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

)

Worked on the case