Launch a full frontend application template for Hotel & Booking system

Hi! I’m Alex and I’m happy to share my experience in creating a Holistic React Native Template for hotels and booking systems.

Gif how it works.

Why did I decide to develop it?

1. I am experienced in developing travel IT-products: I have been creating them for more than 10 years now.
2. I wanted to apply my knowledge and skills to the development of a product which could be useful for thousands of people all over the world.
3. I believe that React Native is one of the most promising technologies for mobile apps nowadays. So, I would like to gain experience of working with it.
4. I have never uploaded my applications on marketplaces before and I am interested in how it works.

How to start development of a booking app?

First, you have to define the end-user. Will it be an aggregator or a certain hotel? Once decided you can define which screens are needed for development.

My aim was to create a product that can be used by a developer who is going to create an app frontend for a hotel or a booking system. The frontend is a better way to create a template like that because back-end which user uses very different. It may WordPress or something different.

I provided solutions for multiple scenarios. Here they are:

1. Choosing a date and a place where you are going — division by the districts with hotels filtering — clicking on a hotel — booking a hotel — payment options — thank you page and personal account with bookings.
2. User pre-registration — choosing a hotel — choosing dates — booking.
3. Creating an app for a certain hotel — creating screens with users feedback and payment options.

The next step is preparing the project design. I did it with SketchApp. There are more than 30 screens in my project and each of them suits the hotel’s app perfectly.

Holistic React Native template for hotels and booking system

What about technology?

I decided to use external libraries as little as possible and to use more base React Native functions:

1. React native elements — are used to create UX elements inside of design more easily.
2. React native keyboard aware scroll view — are used for keyboard using solutions.
3. React native maps — are used for a screen map inside the app.
4. React native snap carousel — is used for a carousel which shows the districts of the city that have hotels. I added rating elements for the districts inside of each carousel’s item.
5. React native vector icons — are used for icons to make their design more laconic.
6. React navigation — is used for screen navigation and drawer menu.
7. React navigation tabs — are used for tabs navigation inside the hotels and their rooms.

Once the frontend is ready, the next step will be to bring the quality of the code to the level of the enterprise product. As long as I’m going to promote my app I have to make a high-quality code. That’s why I used the following libraries:

• Eslint — I used it for analyzing the quality of the code. I chose Facebook as a standard.
• Flow — I used for an accelerated code writing on JS.
• Husky — for preventing bad commits to the repo.
• Jest expo — for simplified app start and debugging to the expo.
• Prettier — to make the code pretty and easy to read.

As a result, I got a pretty cool frontend project, which can be used by any developer for creating a booking app with React Native. All you need is just to take the necessary elements and screens and to implement them to your app.

Discount available -

🎉 Don’t miss to use the 20% discount coupon code, valid till this month end

hotelapp-20d-launch-april2019–8101

Useful links

Buy template
Expo preview
Documentation

Thank you for scrolling, let’s go clapping.