Travel Agency website

A sample SPA/SSR application built with reactive framework Vue 3 powered by Nuxt ecosystem. Figma Golobe design was used as an example. This project may be useful for anyone who is interested in developing modern websites.

travel-agency-demo.mov

Features

• Single-Page application with Server-Side Rendering
• Authentication via third-party OAuth providers
• Support different databases
• Localization to multiple languages
• OpenGraph images for SEO - prerendered or generated on-the-fly for dynamic entities
• Acsys CMS - out-of-the-box CMS integration with drafts/preview mode support
• HTML pages & images caching, configurable cache refresh policies on changes (e.g. via CMS)
• UI: adaptive layout, light/dark theme support, input/selected values validation & prompting
• Personal account with email confirmation registration flow, reviews, photos uploading, favourites & booking history
• PDF generation for ticket/booking documents
• Advanced error handling: error page / popup notification / HTML error stub on problematic component depending on source and severity of error as well as additional logging on server-side and on client-side (via REST endpoint)

Installation

Project requires Node.js v20+ to be installed. (it should also run on Node v18 but was not tested in that configuration)

Without CMS (default)

Install the dependencies and run server.

cd ./src
npm install
npm run quickstart

This will start the website with minimum external services configuration: emailing disabled, no CAPTCHA, only local OAuth provider e.t.c. SQLite database will be created locally. Open browser and type http://localhost:3000. First-time page visit will take a couple of minutes to start the server because of initial database data seeding

With Acsys CMS

You will need to download Acsys sources, enable CMS in project config and then proceed with quickstart build as described previously. The following script can be used:

git clone https://github.com/acsysio/acsys.git ./externals/acsys
cd ./externals/acsys
npm install
cd ./../../src

# Now edit .env file and uncomment #CMS=acsys first line

npm install
npm run quickstart

After server is started CMS will be available at http://localhost:9000, admin login and password should be already pre-filled. Almost any type of entities are available for editing, but some operations may be restricted or won't take any effect for a couple of auto-generated entities or fields whose modifications should trigger non-trivial app logic. NOTE: by default SSR caches rendered html page markup in Nitro cache, so changes made in CMS won't be immediately reflected in browser even when reloading with browser-side caching disabled. 10 minute-interval refresh task is running in background on server. Not to wait for 10 minutes you should either disable caching in project config here or call POST /api/purge-cache API endpoint

Setting up development environment

Development mode provides many useful things among which are hot module reload and rich and more meaningful stack traces. It also assumes reduced optimization and performance penalty for diagnostics overhead. This demo project is also configured differently when running in development environment. Here are required steps:

• Setup MariaDB database. To be sure, that all development scripts & migrations are compatible and won't fail at build stage use MariaDB Server version 10.6.18, protocol 10. If you decide to use another database, you will probably have to adjust *.SQL migration scripts to match syntax specific to that database.
  • Install and run MariaDB instance
  • Copy and edit in some text editor SQL statements from src/scripts/mysql-db-config.sql. You will need to replace IDENTIFIED BY '***' with password of new golobe user which will be used to connect to the database. NOTE, this script will reset MariaDB server's time zone to UTC
  • Login as root user and run SQL statements
  • Update DATABASE_URL in src/.env with connection string DATABASE_URL=mysql://golobe:YOUR_PASSWORD@localhost/golobe. Connection via Unix sockets should also work, e.g. DATABASE_URL="mysql://golobe:YOUR_PASSWORD@localhost/golobe?socket=/var/run/mysqld/mysqld.sock" (check where precicely mysqld.sock file is located on your distributive)
• Obtain GitHub & Google OAuth providers secrets and paste them into OAUTH_GITHUB_CLIENT_ID, OAUTH_GITHUB_CLIENT_SECRET, OAUTH_GOOGLE_CLIENT_ID, OAUTH_GOOGLE_CLIENT_SECRET. These are disabled in quickstart configuration, so you may also disable them from code as well for development environment and proceed without OAuth client registrations
• Setup SMTP server. Nodemailer client is used for sending registration & account-related emails, so Nodemailer server app will work.
  • Fill SMTP_USERNAME and SMTP_PASSWORD in src/.env for client to authenticate itself
  • Specify SMTP server connection parameters in src/appconfig.ts email section
• Configure reCAPTCHA v3 as described. You will be able to fill GOOGLE_RECAPTCHA_SECRETKEY and VITE_GOOGLE_RECAPTCHA_PUBLICKEY in src/.env
• Configure maps provider. Vue Yandex Maps is supported out-of-the box. You need to obtain Api key and paste it in VITE_YANDEX_MAPS_API_KEY in src/.env. You may also disable maps manually by setting respective section in src/appconfig.ts to false

After infrastructure is ready, execute the following lines:

cd ./src
npm install
npm run backend-prisma:migrate-reset
npm run backend-prisma:generate-client
npm run dev

Architecture

Tech

Project uses a number of open source projects to work properly:

• Nuxt - highly customizable web application server which provides easy integration with third-party solutions & plugins. E.g. some of used modules are:
  • i18n - for localization
  • Nuxt Auth - for authentication & authorization
  • Unlighthouse - for performing site quality scan using Google Lighthouse
  • Nuxt SEO - the complete SEO solution for Nuxt
  • Nuxt Swiper - integration with Swiper.js - mobile touch slider with hardware accelerated transitions and amazing native behavior
• Vue 3 - progressive, incrementally-adoptable JavaScript framework for building UI on the web
• Vite - Next generation frontend tooling. It's fast!
• node.js - evented I/O for the backend
• Prisma
• ORM solution to support different databases
• Pinia - intuitive, type safe and flexible Store for Vue
• Nodemailer - for sending emails
• Playwright - for Web Testing and Automation
• Winston - for logging
• Nuxt OgImage - for generating OpenGraph images for entities on-the-fly using Satori
• Vue Yandex Maps - for marking hotel locations on interactive world map
• PDFKit - A JavaScript PDF generation library for Node and the browser
• Other third-party UI components:
  • CropperJS - for uploading photos
  • VCalendar - An elegant calendar and date picker plugin for Vuejs
  • Vue Final Modal - for managing modal windows
  • Floating Vue - for popups & drop downs
  • Vue Toastification - for notifications
  • Vuelidate - for user input validation
  • TipTap - The headless rich text editor, was used for creating user reviews
  • vue3-perfect-scrollbar - A minimalistic yet powerful Vue.js wrapper for Perfect Scrollbar

License

MIT