Giter VIP home page Giter VIP 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

solygambas avatar

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.