Camps React Native Application

React Native Application using Apollo Client, built with CI.

The goal of this React Native Application is to display all the campings around Paris with their information details and comments on IOS and Android.

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

Getting Started

Prerequisites

To install and run the Application you need to have NodeJS, Android SDK and XCode.

Installation

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

https://github.com/christophe-chausseray/camps-react-native-app.git
cd camps-react-native-app
cp .env.dist .env
yarn start --reset-cache

Open another terminal and run :

yarn android //if you want to run on Android Device

or

yarn ios //if you to run on IOS Device

Your application should succesfully runs on an emulator or on Device (see this documentation to run on device).

If you need more information about how to setup your development environment to work on Android or IOS device, I let you read this official documentation.

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 :

GOOGLE_MAP_API_KEY=secret
CAMPS_API_HOST=http://localhost:3000

Feature

• Display camping markers on a google map
• Open a tooltip when pressing a camping marker
• Display the camping information view when pressing the title tooltip
• Display the list of comments for the camping
• Add a new comment for the camping

Built with

• React Native CLI
• Google Maps Platform
• Apollo Client
• React Native Testing Library

Tests

This App is tested with React Native Testing Library and using Apollo Mocked provider 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