Application developed using react-native with expo framework. Deployed into S3 after doing a build deployment with expo-web, so the native "Hover" is not implemented since this is a mobile solution without introducing patches for that. React-native 0.63(Latest) introduced pressable(https://reactnative.dev/docs/pressable) so I could implement a very cool effect in mobile, but expo didnt support yet.
Test the live APP
Version Web(Hover effect is not really implemented since is coming from mobile) https://master.d2g2xns4gnscbk.amplifyapp.com/
Mobile version: Loom video: https://www.loom.com/share/ecee52d537054b18aa3d5a999fb0a96e
Test in Devices
Test in Android device: you can go to https://expo.io/@esuarez/rainbox on your laptop and scan the QR code or do the next step(Expo app) Test in Ios: you need to download the app "Expo" on your device and open https://expo.io/@esuarez/rainbox,then click on "Open project using Expo".
I wanted to do a multiplatform solution to show a mobile and web app, so I decided to use react-native with expo, so I could have the opportunity to do a fast MVP in both platforms.
React native, supported by styled-components, and for the backend I decided to use serverless approach using AWS amplify with Apigateway and lambda functions.
To test the app I decided to use Jest.
In mobile we cant implement hover effect so I decided to implement it after the button was pressed and removed after 1 second.
To manage the palette of colors I fill an array appending hexadecimals randomly generated on a lambda function dispatched after call Api Gateway. I assume always we are returning back. I could send the number by parameter and if the number is not send I could return by default 5.
Steps to build and run your application in development
Requisites: node.js and npm. We need to be sure we have installed aws cli ,amplify cli and expo-cli in our machine and aws profile credentials(https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) Xcode -> To use the IOS simulator Android studio -> To use the Android simulator
Git clone the project: https://github.com/esuarezz/rainbox
yarn install, you need an IAM account with amplify role permissions and a profile in your computer
Amplify init to get the amplify setup
npm start to run the APP, then you can select IOS,android or web.
Deployment is automatically fetched with S3 in dev environment when master is pushed, you can find extra information about the config provided in amplify.yml
Test: npm run test, the service we are using to call apigateway being mocked
This app is using a serverless architecture approach.
After pressing the button, a service is dispatch to call apigateway - xxxx/colors - this is fetching automatically the function we deployed in lambda to generate the random colors and then getting back to lambda and returning to the device that is rendering the results.
This is not an authenticated app so Cognito/Iam.... are not on the scope
MIT © Elio