Camps React Application

React Application using Apollo Client, built with CI.

The goal of this React Application is to display all the campings around Paris with their information details and comments. You can have access to the Application here christophe-chausseray.github.io/camps-react-app/

Getting Started • Feature • Built With • Build • Tests • CI and Deployment • License

Getting Started

Prerequisites

To install and run the Application you need to have NodeJS.

Installation

Clone the project, make the installation and run the application:

https://github.com/christophe-chausseray/camps-react-app.git
cd camps-react-app
make install
yarn start

Your application should succesfully runs locally.

You can now access to your local Camps application on http://localhost:3000/ to use the application.

P.S : As the application using Google Maps API you should update the environment variable REACT_APP_GOOGLE_MAP_API_KEY in your .env file :

REACT_APP_GOOGLE_MAP_API_KEY=secret
REACT_APP_CAMPS_API_HOST=http://localhost:3000

Feature

Display camping markers on a google map

Display the camping information in the sidebar on the left of the screen when clicking on the marker

Display the list of comments for the camping in the sidebar

Add a new comment for the camping

P.S : You should see only 2 markers on the map. That's normal ! It's because the application using MSW locally and for the test environment. So, the server side is mocked locally by MSW and return only 2 campings.

Built with

• Create React App
• Google Maps Platform
• Apollo Client
• MSW
• React Testing Library
• Cypress

Build

If you want to build your application in production environment, you need to run :

yarn build

Tests

This App is tested with React Testing Library and Cypress. It's using as well MSW for mocking the API queries in test environment.

Those tests can be run with :

yarn test

CI and Deployment

This project handles the CI and deployment with Github Actions on Github Pages.

The build and deploy workflows can be found in the .github/workflows/ directory.

The CI build will be run on the branch following the pattern feature/** or fix/**. It will execute the linter and the test to check if the code is following the coding style of the application and if it doesn't break anything.

License

MIT

Christophe Chausseray  ·  Linkedin