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/
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.