YelpExplorer-ReactNative

Project Description

YelpExplorer is a multiplatform project that shows a list of businesses, their details and latest reviews using Yelp's API.

I originally created this project to learn about GraphQL but since Yelp is also serving its data with a REST API, I thought it would be a great opportunity to showcase the power of Clean Architecture when it comes to being able to swap one data layer for another without having to modify the domain and presentation layers.

I then thought it would be a great experience to port the Android project to Flutter and ReactNative to learn more about all the different technologies that exist to build multiplatform applications.

Note

While Clean Architecture is known and used by the Android and the Flutter community, it is not much the case for ReactNative... but at least the ReactNative variant of this project demonstrates that it is possible to adopt it. For a simpler architecture, please check this branch.

This project is available in:
Compose/Kotlin
Flutter/Dart
ReactNative/TypeScript

Screenshots

Business List	Business Details

Project Characteristics

• Cross-Platform project using React Native and TypeScript
• Continuous Integration with GitHub Actions
• Project management with GitHub Project Board

Tech Stack

• React Native and TypeScript
• React Hooks
• React Navigation v6
• Apollo GraphQL
• Jest

Development Setup

How to run the project

1. Setup your dev environement: https://reactnative.dev/docs/environment-setup

2. Clone this project using Git or download the source code.

3. Install the dependencies:

   > npm install
   > cd ios
   > pod install
   

4. Start the Metro server:

   > npm start
   

5. Run the app:

   > npm run ios
   

Yelp API Key

If you want to run this project on an device or an emulator, you need to obtain your own API key from Yelp and provide it to the app.

1. Request your API key: https://www.yelp.com/developers/documentation/v3/authentication
   
2. Create a config folder located in this project's root folder. Then, create a app_config.json file in that config folder and add your API key like this:

   {
     "api_key": "YOUR_API_KEY"
   }
   

REST vs GraphQL

This project allows you to either use the GraphQL API or the REST API to retrieve data.
To switch between one or the other, you can change the value of DATASOURCE in Constants.ts.

Author

License

Copyright 2021-Present Matthieu Coisne

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.