CityGo allows users to find vacation routes for any city. It is integrated with Google Maps to allow users to navigate the trip on their device.

• The frontend of this application uses Angular, Angular Material, and Tailwind.
• The backend uses Node.js and PostgreSQL for storing the trips. To view the backend implementation, see this repo.
• APIs used:
  • Google Maps: For place info and navigating trips
  • Unsplashed: For images of trip places
  • Data.gov: The backend parses a .csv file containing every US city, and stores it in the database.
    • This prevents excessive calls to the Google Maps API when using city data.

The home page displays the most popular trips.

 
Use the search bar to filter trips by city

 
The website displays a shimmer effect when loading data

• This is done by checking if an input property is null

It also comes with a dark mode toggle

• This is done by using the Tailwind tw-colors plugin, which lets you use one class for multiple theme palettes.

 
The website is responsive, and uses a mobile-first design.

• The navbar links are placed in a hamburger-style menu

View the details of a trip in the overview page.

• A preview of the destinations can be viewed in the image carousel at the top.

Towards the bottom, you can view the trip itinerary in Google Maps.

Finally, by clicking "Start Trip" you can begin navigating the itinerary on your mobile device.

• The button uses a Google Maps "deep link" containing the trip itinerary.
• When clicked on, it opens the Google Maps app on your device.

Users can create a trip by filling out a form.

• The trip creation DTO is parsed by the backend to add addresses and images to the trip using the Google Maps and Unsplashed APIs.

The destinations can be reordered by dragging and dropping.

A custom rating input component is used for the duration and price fields.

• It is accessible, allowing you to change the value by using the arrow keys on a keyboard.