Update readme

README.md

@@ -4,26 +4,43 @@
 
 ## Project Description
 
-YelpExplorer-ReactNative is a cross-platform application that shows a list of business, their details and latest reviews using [Yelp](https://www.yelp.com/)'s API.<br/>
-This is a React Native port of the [YelpExplorer-Flutter project](https://github.com/matthieucoisne/YelpExplorer-Flutter/).
+YelpExplorer is a multiplatform project that shows a list of businesses, their details and latest reviews using
+[Yelp](https://www.yelp.com/)'s API.
 
-Business List | Business Details
-:-------------------------:|:-------------------------:
-![YelpExplorer-React Native - Business List](https://github.com/matthieucoisne/YelpExplorer-ReactNative/blob/main/media/YelpExplorer-ReactNative-BusinessList.png) | ![YelpExplorer-React Native - Business Details](https://github.com/matthieucoisne/YelpExplorer-ReactNative/blob/main/media/YelpExplorer-ReactNative-BusinessDetails.png)
+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.
+
+This project is available in:<br/>
+[Compose/Kotlin](https://github.com/matthieucoisne/YelpExplorer)<br/>
+[Flutter/Dart](https://github.com/matthieucoisne/YelpExplorer-Flutter)<br/>
+[ReactNative/TypeScript](https://github.com/matthieucoisne/YelpExplorer-ReactNative)<br/>
+
+### Screenshots
+
+|                                                                           Business List                                                                            |                                                                             Business Details                                                                             |
+| :----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| ![YelpExplorer-React Native - Business List](https://github.com/matthieucoisne/YelpExplorer-ReactNative/blob/main/media/YelpExplorer-ReactNative-BusinessList.png) | ![YelpExplorer-React Native - Business Details](https://github.com/matthieucoisne/YelpExplorer-ReactNative/blob/main/media/YelpExplorer-ReactNative-BusinessDetails.png) |
 
 ## Project Characteristics
 
-* Cross-Platform project using [React Native](https://reactnative.dev/) and [TypeScript](https://www.typescriptlang.org/)
-* Continuous Integration with GitHub [Actions](https://github.com/matthieucoisne/YelpExplorer-ReactNative/actions)
-* Project management with GitHub [Project Board](https://github.com/matthieucoisne/YelpExplorer-ReactNative/projects/1)
+- Cross-Platform project using [React Native](https://reactnative.dev/) and [TypeScript](https://www.typescriptlang.org/)
+- Continuous Integration with GitHub [Actions](https://github.com/matthieucoisne/YelpExplorer-ReactNative/actions)
+- Project management with GitHub [Project Board](https://github.com/matthieucoisne/YelpExplorer-ReactNative/projects/1)
 
 ## Tech Stack
 
-* [React Native](https://reactnative.dev/) and [TypeScript](https://www.typescriptlang.org/)
-* [React Hooks](https://reactjs.org/docs/hooks-intro.html)
-* [React Navigation v6](https://reactnavigation.org/docs/getting-started)
-* [Apollo GraphQL](https://www.apollographql.com/docs/react/)
-* [Jest](https://jestjs.io/docs/tutorial-react-native)
+- [React Native](https://reactnative.dev/) and [TypeScript](https://www.typescriptlang.org/)
+- [React Hooks](https://reactjs.org/docs/hooks-intro.html)
+- [React Navigation v6](https://reactnavigation.org/docs/getting-started)
+- [Apollo GraphQL](https://www.apollographql.com/docs/react/)
+- [Jest](https://jestjs.io/docs/tutorial-react-native)
 
 ## Development Setup
 
@@ -50,20 +67,25 @@ Business List | Business Details
 
 ### Yelp API Key
 
-To retrieve data from Yelp's API, you need to obtain your own 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<br/>
-   Note: You might need to join the developer beta to use GraphQL.
 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.<br/>
+To switch between one or the other, you can change the value of `DATASOURCE` in [Constants.ts](https://github.com/matthieucoisne/YelpExplorer-ReactNative/blob/main/src/core/Constants.ts).
+
 ## Author
 
-[![Follow me](https://img.shields.io/twitter/follow/matthieucoisne?style=social)](https://twitter.com/matthieucoisne)
+[![Follow me](https://img.shields.io/twitter/follow/matthieucoisne?style=social)](https://x.com/matthieucoisne)
 
 ## License
 

src/core/Constants.ts

@@ -1,11 +1,11 @@
 export const URL_REST = 'https://api.yelp.com/v3';
 export const URL_GRAPHQL = 'https://api.yelp.com/v3/graphql';
 
-export enum DataLayer {
+export enum DataSource {
   REST,
   GRAPHQL,
 }
-export const DATA_LAYER: DataLayer = DataLayer.GRAPHQL; // Change the data layer for the one you want to use
+export const DATASOURCE: DataSource = DataSource.GRAPHQL; // Change the data source for the one you want to use
 
 const getHeaders = () => {
   const appConfig = require('../../config/app_config.json');

src/core/Inject.ts

@@ -12,11 +12,11 @@ import {graphQLClient} from './GraphQLClient';
 // TODO: Find a way to inject these dependencies: useContext? Provider? Add Lazy loading?
 /////////////////////////////////////////////////////////////////////////////////////////
 const getBusinessRepository = (): BusinessRepository => {
-  switch (Constants.DATA_LAYER) {
-    case Constants.DataLayer.REST: {
+  switch (Constants.DATASOURCE) {
+    case Constants.DataSource.REST: {
       return new BusinessRestRepository(new BusinessRestDataSourceImpl());
     }
-    case Constants.DataLayer.GRAPHQL: {
+    case Constants.DataSource.GRAPHQL: {
       return new BusinessGraphQLRepository(
         new BusinessGraphQLDataSourceImpl(graphQLClient),
       );