cbaggini / itinerary-generator-react

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

Home Page:https://itinerary-generator.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

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


Languages

Language:JavaScript 72.7%Language:CSS 24.1%Language:HTML 3.2%