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 application 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) are 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 smoother 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, 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
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.tech@gmail.com.