Skip to content

React + Node + MongoDB app to generate an itinerary given a starting point and a destination.

Notifications You must be signed in to change notification settings

cbaggini/itinerary-generator-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

84 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Quality Gate Status

Road trip itinerary generator

React app to generate a road trip itinerary given a starting point and a destination.

Table of Contents

About The Project

This React app lets the user choose a start and an end point for their trip, as well as selecting various parameters regarding their trip (type of attractions they'd like to visit, how much they're prepared to deviate from the original route). The app will then return a map of the route with the suggested attractions and some basic information regarding the itinerary (total distance and time, list of suggested attractions).

Demo at https://itinerary-generator.netlify.app/

The back end for this application is made with Node.js and Express; the code is at https://github.com/cbaggini/itinerary-generator-node and the deployed API can be found at https://itinerary-generator-node.nw.r.appspot.com/

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

Node >= 14.15.1

An OpenRouteService API key (get one here)

An OpenTripMap API key (get one here)

Installation

  1. Clone the repo
git clone https://github.com/cbaggini/itinerary-generator-react.git
  1. Install the necessary Node packages
npm install
  1. Start the local development app.
npm start

Usage

Search view

Here the user can select where they'd like their trip to start and end, as well as how many kilometers they want to deviate from the most direct route (between 1 and 30) and one or more types of attractions they'd like to visit. alt text

Results view

Here the user is shown a map of the calculated itinerary with the suggested attractions shown as red circle markers and origin and destination shown as blue markers. The route between the starting point, all suggested attractions and the destination is also shown (blue line). The green buffer represent the search area used to look for attractions.

Above the map, the user can see some basic information about the trip, as well as the list of suggested places to visit.

alt text

Clicking on a marker will show a popup with a photo and information about the attraction.

alt text

About

React + Node + MongoDB app to generate an itinerary given a starting point and a destination.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published