Git Product home page Git Product logo

react-native-shopping-app's Introduction

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.

Based on React Native - The Practical Guide by Maximilian Schwarzmüller.

react-native-shopping-app's People

Contributors

dependabot[bot] avatar solygambas avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

react-native-shopping-app's Issues

compile error

after issuing command
expo start -w

web Failed to compile.
D:/react-native-shopping-app/store/actions/products.js
Module not found: Can't resolve '../../constants/Environment' in 'D:\react-native-shopping-app\store\actions'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.