A travel destination log. City and tourist attraction data is provided by the Geoapify Places API and converted to GraphQL with Apollo Server and Apollo Client.

https://shiny-gecko-cc92d2.netlify.app/

• Geoapify

• Node
• apollo-server
• axios
• dotenv
• graphql

• React
• TypeScript
• MUI
• graphql
• Apollo Client
• Mapbox
• react-router-dom
• lodash.clonedeep

• eslint-config-lucas-silbernagel

• SonarCloud

In order to run this application locally, you must have node installed on your computer. To check if you already have it installed, enter node -v in your terminal. If you do not have node, you can install it here: https://nodejs.org/en/

Once you have confirmed that node is installed, cd into a folder on your computer and run the following command to clone the repository:

git clone https://github.com/LucasSilbernagel/bt-dt.git

Then cd into the root folder and open it in your code editor. For Visual Studio Code:

cd bt-dt code .

To install all of the required dependencies, run npm run installDeps.

Get an API key from Geoapify.

In the root folder of the app, create a new file called .env and save your API key in it with a key of GEOAPIFY_KEY. The file should now look something like this:

GEOAPIFY_KEY = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

There should be no quotation marks or brackets in this file.

A custom ESLint configuration has been added to the root folder of the app rather than the client folder. As a result, conflicts can occur between the custom ESLint configuration and the ESLint configuration built into create-react-app. In order for the app to run and build smoothly, create a .env file in the client folder and add the following variables:

SKIP_PREFLIGHT_CHECK = true

DISABLE_ESLINT_PLUGIN = true

The application map is built with Mapbox. Get an API key from Mapbox and add it to the .env file in the client folder, with a key of REACT_APP_MAPBOX_TOKEN (REACT_APP_MAPBOX_TOKEN = your_mapbox_api_key).

Finally, add the following to the .env file in the client folder to connect the React front end to the Apollo server:

REACT_APP_SERVER_URL = http://localhost:4000

To start up the app, make sure you are in the root folder and then run npm run dev in your terminal. This should start both the app's server and the front end in a single terminal window, and launch the app in a new browser tab. You are now running the app locally!

Unit tests are written with Jest and react-testing-library.

Use npm run test:unit to run all unit tests, or cd into the client folder and use npm test -- SomeFileToRun to run a specific test file.

End-to-end tests are written with Cypress.

Use npm run test:e2e to launch the Cypress test runner.

Components are visually documented with Storybook.

Use npm run storybook to launch Storybook.