All projects

Big trip

A modern service for real travelers. It allows you to create and calculate expenses by route point. View route point statistics in graphs.The service helps you plan your travel route in detail, calculate travel costs, and get information about attractions. The minimalist interface eliminates distractions and keeps you focused on planning your trip.

Project description

Description of functionality

After downloading from the server, route points are grouped by day (date) and sorted by default in ascending order. Sorting by date and price is available, as well as three filters: 'All points', 'Future', and 'Past'.

The total cost of the route is automatically recalculated and displayed in the header.

The start/end points and start/end dates of the route are also displayed in the header.

When editing or adding a waypoint, only one form can be open at a time. Other forms are closed, and unsaved data is discarded. The Add/Remove 'Favorites' button works immediately, without the need to save.

Statistics are generated using the Chart.js library. General information is available: route point totals, number of times transport was used, and time spent at stops along the route (restaurants, airports, etc.).

General information about the project:

  • Planning a Travel Itinerary: Adding Waypoints to Your Route
  • Viewing individual points
  • Calculating the route cost
  • Adding suggestions for each route point
  • View the route in different versions
  • External libraries: 'Chart.JS' - for displaying statistics, Flatpickr - selecting dates in the forms for adding/editing a route point.
  • The project used: MVC, Observer, Adapter patterns.
  • The project is configured to build JavaScript modules using Webpack.

Project build

The finished project is created in the - "dist" folder.

  • Before building and running the project, install dependencies with the command: npm i
  • Build production (ready for hosting): npm run build
  • Run the project locally in Dev mode: npm start