A shopping mobile application made with react native for Android.

Last update: Apr 15, 2022

Shop App



Description

This project is a simplified implementation of a shopping system, the project aims to provide the basic features that are expected to be found in a mobile e-commerce applicaion where users can purchase and sell products. To navigate through the app, users have to authenticate themselves. Once logged-in, users can scroll through the list of available products, add different products to the cart, and make orders. Users can also add, edit, remove their own products into the main store.

Authentication and Security

The app contains a simple authentication system implemented using Firebase Auth REST API for the backend. If the authentication process is successful, a unique token is sent from the backend to the user in concern, the token is then stored locally in the device and will expire exactly after 1h of its receival. When expired, the token is deleted from the device and the user will be automatically signed out and prompt to the login screen. Otherwise, if something went wrong with authentication process, the proper error message will be displayed in the screen.

To ensure the right credentials are to be provided whenever the user enters some data, all forms in this project contain some basic validation algorithms that are reused whenever validation is required.

Databases

Most data in this project (products, orders, users) is stored in Firebase Realtime Database. Some other user-specific data (auth-token, favorite products) is stored locally in the device using AsyncStorage.

Navigation

All navigation in this project is built with React Navigation v5.

Animations

The app contains different types of animations on different screens to provide a smooth user experience, all animations are implemented using the React Native Reanimated library, which means the vast majority of calculations required to animate different style properties are all done in the UI Thread in the native side, so the bridge between native and react native is very infrequently crossed, therefore, animtions are never interrupted even if the JS Thread is heavily busy, resulting in smooth animations that would run at 60fps even in low-end devices.

Designs

All design assets used in this app (screens, components, input fields, icons...) are made by the owner of this project.

Usage

To run the project locally run the following commands in order:

Clone the project locally

$ git clone https://github.com/abdoutech19/shop-app.git

Navigate to project root directory

$ cd shop-app

Install all dependencies

$ yarn install || npm install

Run the project in debug mode

$ npx react-native run-android

Or run the project in release mode for a smoother experience

$ npx react-native run-android --variant=release

NOTE: this project uses the Hermes JavaScript engine to improve start-up time, decrease memory usage, and reduce app size. For these improvments to take effect, the app has to be running in release mode, otherwise, Hermes won't have any effect on improving performance in debug mode, in fact, some developeres have noticed slower results with the Hermes engine enabled in debug mode.

Built with

Demo

To test the app in your android device, you can download the .apk file from here: shopping.

Video Demo

Authentication and validation

Shop.App.Demo.-.auth.mp4

Shopping

Shop.App.Demo.-.shopping.mp4

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Email me at: abdou19.[email protected].

GitHub

https://github.com/abdoutech19/shop-app
You might also like...

Hacker News iOS and Android App - Made with React Native.

Hacker News iOS and Android App - Made with React Native.

DEPRECATED FOR NOW - uses an old version of react native See other react native example apps here: https://expo.io/featured HackerNews-React-Native Ha

May 1, 2022

NewYork Times Top Stories app made with React Native with sqlite for Android - http://i.imgur.com/SU9B3TM.gifv

NewYork Times Top Stories app made with React Native with sqlite for Android - http://i.imgur.com/SU9B3TM.gifv

NewYork Times Top Stories - React Native NewYork Times news reader Android, made with React-Native. ##Features/components Uses React Native 0.25.1 wit

Feb 14, 2022

📲💬 react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.

📲💬 react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.

📲💬 react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.

Dec 3, 2021

A mobile application to deploy private VPN servers in the cloud with DNS ad-blocking and other features

A mobile application to deploy private VPN servers in the cloud with DNS ad-blocking and other features

ZudVPN A mobile application to deploy a personal VPN server in the cloud (DigitalOcean, AWS, GCP, Azure and others) with DNS ad-blocking and other fea

Apr 28, 2022

React Native mobile app for Magento 2.x

React Native mobile app for Magento 2.x

Open source React Native mobile app for Magento 2 Magento React Native is a fully functional eCommerce App for your Magento 2 website. It uses Magento

Mar 28, 2022

Short-term memory training game (mobile). Built with React Native and Redux.

Short-term memory training game (mobile). Built with React Native and Redux.

sequent Short-term memory training game. Remember the sequential order of numbers displaying on your screen. Free, no ads, open source. Created in Rea

Apr 17, 2022

Mobile app for Chatwoot - React Native

Mobile app for Chatwoot - React Native

Mobile app for chatwoot platform. Built with React Native Chatwoot is an opensource alternative to Intercom, Zendesk, Drift, Crisp etc. Supported Chat

May 1, 2022

Project management mobile app built with React Native

Project management mobile app built with React Native

Project Management mobile app built with ReactNative App UI Mockup project_management_mobile_app3.mp4 App Screenshots Like this project? Don't forget

Apr 29, 2022

Built with Expo, React Native, and GraphQL, Lexicon is a pre-built mobile discussions app that you can customize for your users.

Built with Expo, React Native, and GraphQL, Lexicon is a pre-built mobile discussions app that you can customize for your users.

Apr 4, 2022
Dérive - an android mobile app to control your finances written in React Native with Expo
Dérive - an android mobile app to control your finances written in React Native with Expo

Dérive Dérive - an android mobile app to control your finances written in React Native with Expo. The app allows you to add bank cards, monitor their

May 14, 2022
:clipboard: mobile app for a consultancy hub - made with react native, expo, styled components and typescript
:clipboard: mobile app for a consultancy hub - made with react native, expo, styled components and typescript

Consulty Consulty App A marketplace to find a consultant for your next step. ?? Project | Features | Integrations | Technologies | Getting Started | L

Apr 19, 2022
PyTorch Live is an easy to use library of tools for creating on-device ML demos on Android and iOS. With Live, you can build a working mobile app ML demo in minutes.
PyTorch Live is an easy to use library of tools for creating on-device ML demos on Android and iOS. With Live, you can build a working mobile app ML demo in minutes.

Build your AI-powered mobile apps in minutes: Get Started · Tutorials · API PyTorch Live is a set of tools to build AI-powered experiences for mobile.

May 9, 2022
Liker Land on iOS/Android Mobile

Liker Land App Liker Land on iOS/Android Mobile Features Personalized reader Content reader included oice and other websites Like and follow the reade

May 7, 2022
You can automize iOS and Android app's build, upload and versioning processes via Mobile App Automizer CLI tool.
You can automize iOS and Android app's build, upload and versioning processes via Mobile App Automizer CLI tool.

Mobile App Automizer You can automize iOS and Android app's build, upload and versioning processes via Mobile App Automizer CLI tool. You can upload y

Apr 4, 2022
Audiobook mobile application accomplished with React Native and React ecosystem, just a single code base.
Audiobook mobile application accomplished with React Native and React ecosystem, just a single code base.

Audiobook App Open Source Audiobook mobile application accomplished with React Native and React ecosystem, just a single code base for both android an

May 9, 2022
:iphone: React-Native mobile application for Buttercup
:iphone: React-Native mobile application for Buttercup

Buttercup Mobile The mobile application for the Buttercup Credentials Manager. About This repository holds the source for the Buttercup mobile applica

May 9, 2022
Social Marketplace is a Mobile Application built with React Native
Social Marketplace is a Mobile Application built with React Native

Social Marketplace is a Mobile Application built with React Native. Description Social Marketplace to sell what you don't need anymore. the app suppor

Feb 16, 2022
This is the mobile version of my application curriculum-simulator powered by react native

This is the mobile version of my application curriculum-simulator powered by react native

Apr 12, 2022