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

• React Native v0.64
• React Navigation v5
• Firebase Auth
• Firebase Realtime Database
• React Native Reanimated v2

Demo

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

Video Demo

Authentication and validation

Shopping

License

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

Contact

Email me at: [email protected].