TRIP BOOKING APP

 

🔥 Live

Click to see live demos:

• Trip Booking App - admin
• Trip Booking App - client

 

🔍 Overview

What is Trip Booking App?

In short, Trip Booking App is a tool that allows both users to order trips and manage the offer of available trips by the administrator (using fake-json-server).

Trip Booking App features

Client site

• add trips to the basket
• preview of the basket (updated cost and list of added trips)
• remove trips from the basket (after confirmation - modal window)
• place an order - after completing the form (the order is added to the database - API launched using JSON Server)
• data entered by client are validated

Admin site

• panel for managing trips saved in the database (API launched using JSON Server)
  • adding new trip
  • removing trip
  • editing saved trips
• data entered by admin are validated

 

👨‍💻 Built with

 

⚙️ Run Locally

The project uses node, npm and JSON server, follow the steps below to run it locally.

• Clone the project using

  git clone

• Go to the project directory and install dependencies

  npm i

• Start developers mode

  npm start

• Trip Booking App is ready to go:

  • client site

    http://localhost:8080/index.html

  • admin site

    http://localhost:8080/admin.html

  • data (database)

    • existing trips

      https://fake-server-trip-booking.herokuapp.com/excursions

    • orders placed

      https://fake-server-trip-booking.herokuapp.com/orders

 

🤔 Solutions provided in the project

• local API launched using JSON Server
• CRUD functionality
• API operations in a separate ExcursionsAPI.js file - functions for creating, reading, updating and deleting data using fetch()

    _fetch(additionalPath, options) {
        const path = this.url + additionalPath;
        return fetch(path, options)
            .then(resp => {
                if (resp.ok) { return resp.json() }
                return Promise.reject(resp);
            });
    }

• slider that allows to change displayed trip (in a separate Slider.js file)
• all form fields are validated according to the rules saved in the DataValidator.js file (e.g. using regular expresions)
• error information is displayed to the user (e.g. about invalid e-mail address), separate InfoHandler.js file
• JS modlues and ES6 Syntax (arrow functions, classes)
• Trip Booking App styling
  • RWD
  • pure CSS with the use of variables (the ability to quickly change, for example, colors)

 

🔗 Useful resources

• json-server
• The Modern JavaScript Tutorial
• Deploying Fake Server & Datebase

 

🥷 Author

Coded by Szymon Suchanowski.

Feel free to contact me:

• LinkedIn
• GitHub

 

🙏 Special thanks

Special thanks to my Mentor - devmentor.pl for providing me with the task and code review.