https://github.com/solygambas/react-native-shopping-app

A shopping app using React Navigation, Redux, Redux-Thunk and Firebase.
https://github.com/solygambas/react-native-shopping-app

expo firebase javascript react react-native react-navigation react-redux reactjs redux redux-thunk

Last synced: about 2 months ago
JSON representation

A shopping app using React Navigation, Redux, Redux-Thunk and Firebase.

• Host: GitHub
• URL: https://github.com/solygambas/react-native-shopping-app
• Owner: solygambas
• Created: 2019-09-30T08:52:31.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-02-16T18:31:22.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T11:08:36.051Z (2 months ago)
• Topics: expo, firebase, javascript, react, react-native, react-navigation, react-redux, reactjs, redux, redux-thunk
• Language: JavaScript
• Homepage:
• Size: 2.29 MB
• Stars: 109
• Watchers: 6
• Forks: 25
• Open Issues: 49
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Shopping App

A shopping app using React Navigation, Redux, Redux-Thunk and Firebase.

## Features

- authentication screen to log in or sign up.

- shop to see all products and product details.

- cart to add/remove products and order them.

- orders screen to retrieve orders.

- user admin to create, update and delete products.

## React Navigation

- handling stack of screens for products, orders and user admin with createStackNavigator and createAppContainer.

- using props.navigation to navigate between screens.

- handling data from component to header with setParams and getParam.

- custom header title with navigationOptions.

- custom cart button in the header with react-navigation-header-buttons.

- custom SideDrawer with react-navigation-drawer.

- adding listener with props.navigation.addListener to reload data from server.

- handling manual logout with SafeAreaView and DrawerNavigatorItems.

- handling autologout and forced reload with a custom wrapper for the navigator thanks to useRef and NavigationActions.

## Redux and React-Redux

- using actions and reducers to authenticate and to store data (token and user ID, products, cart, orders).

- using useSelector hook to get the state.

- using props.navigation to pass data to the header without re-render.

- using useDispatch hook to dispatch actions. 

- passing useDispatch to the header with useEffect and useCallback to limit re-render cycles.

- handling logic for the cart (quantity, removing a product and clearing the cart).

- debugging with redux-devtools-extension and React Native debugger.

## React Native

- using FlatList, ScrollView, TouchableOpacity, KeyboardAvoidingView, ActivityIndicator, Alert, AsyncStorage and SafeAreaView.

- custom reusable components (Card, HeaderButton, Input).

- custom fonts, color and environment constants.

- using React hooks (useState, useEffect, useCallback, useReducer, useRef).

- handling input validation with useReducer and custom TextInput component.

- handling dates with Moment.js.

- handling sessions with AsyncStorage, setItem and getItem.

## Redux-Thunk and Firebase

- using Redux-thunk as a middleware to add async code.

- using Firebase as a database for products and orders with fetch (POST, PATCH, DELETE).

- handling authentication with Firebase (email and password).

- showing a loading spinner with ActivityIndicator and useState while fetching data/trying to authenticate.

- handling errors with try/catch blocks and throwing Alerts. 

- using getState from Redux-thunk to send http requests with a token.

## Usage

Add your Firebase url and key in [constants/Environment.js](constants/Environment.js).

Based on [React Native - The Practical Guide](https://www.udemy.com/react-native-the-practical-guide/) by Maximilian Schwarzmüller.