Travila - Modern Travel & Tour Booking NextJS Template

DOCUMENTATION

• Doc version: 1.0.0
• Created: 13 June 2024
• Last update: 13 June 2024

OVERVIEW

Travila is a Modern Travel & Tour Booking React NextJS Template. It is perfect for travel businesses of all kinds. Travila boasts a unique and intuitive search function, ideal for tour operators, adventure companies, and holiday booking websites alike, hotel booking, plane ticket booking, car rental, properties rental. It’s easy and quick to launch a professional and cost-effective travel website.

This template includes Figma design file, save up to $19, making it easy to customize and develop this template to your liking.

Travila is built with the latest Nextjs 14 (`app` directory) , Typescript, and Bootstrap 5.3.x.

Rest assured, Travila is rigorously tested for responsiveness and compatibility across all major browsers and devices, including Firefox, Chrome, Internet Explorer, and Safari.

We have a dedicated Support Center for all of your support needs. It includes our Documentation and Ticket system for any questions you have. We usually get back to you within 12-24 hours.

We are continuing to work hard to develop this item, more homepages and more great features will be added. You only need to buy 1 time and get lifetime updates.

Main Features

• Built with NextJs 14.x (`app` directory),Typescript, React v.18.x
• Bootstrap Framework: Rapidly build modern websites without ever leaving your HTML.
• 10 Homepages, 10 Tours Pages, 09 Activities Pages, 06 Destinations Layouts, 10 Hotels pages, 09 Rental pages, 03 ticket pages, 05 Blog pages and Many inner pages
• Figma design included: A great gift from us, you can quickly continue developing this template.
• Detailed documentation: Extensive documentation plus great video guides on how to setup and customize Trucking will make your customizations super easy and fast!
• Responsive & retina ready:Look of your website on mobile devices is very important these days. So we made sure Travila looks great both on mobile, desktop and retina screens!
• Crossbrowser compatibility:Travila looks great among all major browsers including IE9+.
• Free Lifetime Updates and User Support:Each purchase of the Theme guarantees you lifetime access to future theme updates at no extra cost. You also get six months of user support with the option of extending this period should you wish.
• Creative Design: Travila is a bold template that organizing content to follow natural eyes, striking balance between beautiful and visual hierarchy.
• 100% Fully Responsive: The template passed Mobile-Friendly Test – by Google. We also tested carefully the template on almost devices: PC, Laptop, tablet, and phone. All elements are 100% responsive and ready for all devices.
• Pixel Perfect Design
• Google Map React
• Popup-Video
• Color & Fonts is easily changed
• W3C Validated Code

What You Get

1. All React / NextJS component files
2. All plugins & libraries
3. Figma design file
4. Documentation

Note

- All images are just used for Preview Purpose Only. They are not part of the template and maybe NOT included in the final purchase files.
- This is not a WordPress theme, It is a NextJS template

Change log

                                    VERSION 1.0.0
                                    - First release.
                                 

STRUCTURE

Folder Structure

App Structure

layout.tsx Structure

Dependencies

package.json

                                    "dependencies": {
                                        "@headlessui/react": "^2.0.3",
                                        "next": "14.1.3",
                                        "react": "^18",
                                        "react-bootstrap": "^2.10.2",
                                        "react-datepicker": "^6.9.0",
                                        "react-dom": "^18",
                                        "react-modal-video": "^2.0.2",
                                        "react-perfect-scrollbar": "^1.5.8",
                                        "react-slick": "^0.30.2",
                                        "react-slider": "^2.0.6",
                                        "sass": "^1.77.0",
                                        "slick-carousel": "^1.8.1",
                                        "swiper": "^11.1.3",
                                        "wowjs": "^1.1.3"
                                      },
                                      "devDependencies": {
                                        "@types/node": "^20",
                                        "@types/react": "^18",
                                        "@types/react-datepicker": "^6.2.0",
                                        "@types/react-dom": "^18",
                                        "@types/react-modal-video": "^1.2.3",
                                        "@types/react-slick": "^0.23.13",
                                        "@types/react-slider": "^1.3.6",
                                        "eslint": "^8",
                                        "eslint-config-next": "14.1.3",
                                        "typescript": "^5"
                                      }
                                

Routing

The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application

A React component called Link is provided to do this client-side route transition.

In the example above we have multiple links, each one maps a path (href) to a known page:

• / → app/page.txs
• /about → app/about/page.tsx

Any in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using Static Generation. The corresponding data for server-rendered routes is not prefetched.

Development

How to start this project:

• Step 1: Extract the zip file you downloaded from ThemeForest.
• Step 2: Open Folder 1.Travila_nextjs_template with a code editor (such as VS code )
• Step 3: Run the command: npm install
• Step 4: Then, run the command: npm run dev
• Step 5: If you need to edit SCSS, run the command: npm run sass

Your project will be opened at: http://localhost:3000

Deployment

Push your NextJS app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.

Then, follow these steps:

• Sign up to Vercel (no credit card is required).
• After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
• Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
• After importing, it’ll deploy your Next.js app and provide you with a deployment URL
• To get more help on the deployment checkout

Learn more: https://nextjs.org/docs/pages/building-your-application/deploying

UPDATE

Important Note:

- Backup your website and template folders completely to make sure you have a restore point in case of any complications.

Update using FTP

1. Download the latest version of the template to your device.
2. Connect to your hosting via FTP software
3. Upload the template folder you unzipped to your site folder
4. You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.

SOURCES & CREDITS

THANK YOU

Thank you so much for using this template.

- AliThemes Team -