awenine/trip-viewer

A basic app that consumes from a location API and displays map details

Trip Viewer

A basic app for searching a location API and displaying map data for each location. A deployed version of this app is available here: Trip-Viewer

Technology

This project makes use of:

• Create React App
• Typescript
• React Router
• Leaflet
• React Leaflet
• OpenStreetMap
• Emotion
• React Testing Library

Set up

After cloning the repository, run: npm install To link to the API, you will need to create a .env file and input the API link, which returns from 2 routes locations by name and details of a location by ID. The .env file should be named as follows:

REACT_APP_FETCH_URL="base API URL string here"

An example.env file is included for reference.

Notes

• Some issues arose with the pragma for compiling Emotion's css-in-jsx and the version of React used (17), the pragma /** @jsxImportSource @emotion/react */ is used on components that use Emotion (differeing from what is suggested in the Emotion documentation), as suggested in this link here.
• a throttle function is used on the search bar to limit calls to the API while typing, from this library: https://www.npmjs.com/package/throttle-debounce
• A custom map marker SVG is in the assets folder and can be easily swapped for any SVG or PNG file.
• Space has been left for imagery on the location cards (which is not provided by the API)

TODO & Further Features

• More extensive testing and mocking of the API calls
• Create style themes for use with Emotion via CSS variables (ie colour palette, component library)
• Provided an appropriate route in the API that allows for searching by location/coordinates, show other nearby locations within the Details Page map of a location.
• Allow saving of locations to "favourites" list