https://github.com/rashidmakki/mycart
a shopping app integrated with firebase , redux for state management and stripe api for payment.
https://github.com/rashidmakki/mycart
firebase mycart payment payment-api react react-native react-native-app redux redux-sagas shopping stripe
Last synced: 4 months ago
JSON representation
a shopping app integrated with firebase , redux for state management and stripe api for payment.
- Host: GitHub
- URL: https://github.com/rashidmakki/mycart
- Owner: rashidmakki
- License: mit
- Created: 2020-11-06T11:50:04.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-19T18:15:13.000Z (about 5 years ago)
- Last Synced: 2026-01-03T14:39:25.501Z (7 months ago)
- Topics: firebase, mycart, payment, payment-api, react, react-native, react-native-app, redux, redux-sagas, shopping, stripe
- Language: JavaScript
- Homepage:
- Size: 7.7 MB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mycart
a react-native shopping app integrated with firebase , redux for state management and stripe api for payment.
## To run this app successfully please follow the steps:
I have developed this app using react-native cli, haven't used expo cli.
This app can only run on `Android` for now as `firebase Integration` ,`unimodules Installation` and `configuration of react-native-splash-screen` has not been done on `IOS` yet.
To run this app on `IOS` configures all the packages given in step 2.
## Step 1:
git clone https://github.com/rashidmakki/mycart.git
## Step 2:
#### [Integrate firebase with your app ](https://rnfirebase.io/#installation)
Already Configured for `Android`.Only download your `google-services.json` file after creating a new Android Project from [firebase](firebase.google.com) and place it at `android/app/` .
For `IOS` you have to configure it on your own for now.
#### [Install Unimodules](https://docs.expo.io/bare/installing-unimodules/)
Already Configured for `Android`.
For `IOS` you have to configure it on your own for now.
#### [Installation of react-native-splash-screen](https://github.com/crazycodeboy/react-native-splash-screen)
Already Configured for `Android`.
For `IOS` you have to configure it on your own for now.
#### [Expo-stripe-Payment](https://docs.expo.io/versions/latest/sdk/payments/)
Already Configured for `Android`.
For `IOS` you have to configure it on your own for now.
*Note: If you have installed all the above packages and configured it on the both `Android` and `Ios` then you are free to use app on both the platform.*
## Step 3:
Place you webClientId at `./screens/stackComponent.js`.You can find your webClientId at [firebase](https://firebase.google.com/) in Authentication Section.
If You are new then signup on Firebase to get the webClientId.
```js
async componentDidMount() {
await GoogleSignin.configure({
webClientId:'Client_Id', // client ID of type WEB for your server(needed to verify user ID and offline access)
offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER
forceCodeForRefreshToken: true, // [Android] related to `serverAuthCode`, read the docs link below *.
accountName: '', // [Android] specifies an account name on the device that should be used
});
}
```
## Step 4:
Place Your Publishable Key at `./components/stripeButton.js`.You can find your Publishable Key at [Stripe](https://stripe.com).If You are new then signup on Stripe to get the Publishable Key.
```js
await Stripe.setOptionsAsync({
publishableKey: 'Your Publishable Key' // Your key
});
```
## Step 5:
To make a transaction successful you have to create you server and with the help of [stripe api ](https://stripe.com/docs/api) we can make transaction which will be shown on your stripe account once it is successfull or failed.
If you are familiar with backend then provide your endpoint where you want to send your data and then get the response.
```js
fetch(`YOUR ENDPOINT HERE`,{ //example https://www.mycart.com/checkout
method:'POST',
headers:{
'Content-Type':'application/json',
'Accept':'application/json'
},
body:JSON.stringify(body)
})
```
If you are new to backend and nodeJs then clone the repo [mycart-api](https://github.com/rashidmakki/mycart-api.git) and follow the few steps shown there.
## Step 6:
Download the react-native-cli : `npm i react-native-cli` if you haven't.
##### Run the following command from the root folder of your app in the terminal:
`npm install`
`react-native run-android`
on another terminal: `react-native start`
Now the `app` is ready to run.Wait till it execute all the files.
*Note: If you are facing issue regarding adb devices or Android SDK, Android SDK Platform, Android Virtual Device that is because you haven't set up [Android Development Environment](https://reactnative.dev/docs/environment-setup) properly.You can also refer to stackoverflow for the same.*