A shopping mobile application made with react native for Android.

Overview

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: [email protected].

Issues
Owner
Software engineer, blockchain developer, front-end developer, and UI/UX designer.
null
Mobile, desktop and website Apps with the same code

Mobile, desktop and website Apps with the same code This project shows how the source code can be architectured to run on multiple devices. As of now,

Benoit VALLON 5.1k Sep 20, 2021
: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

Buttercup 316 Sep 24, 2021
📚 The React Native Developer Roadmap 📚

?? React Native is a cross-platform library to build mobile apps using React and JavaScript. This guide is to help you in your React Native journey. this repo contain a great the resources you need to work with React Native art,(Articles, Tutorials)

Said Hayani 216 Sep 19, 2021
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

Chatwoot 237 Sep 16, 2021
Next generation iOS and Android apps for Mattermost in React Native

Mattermost Mobile Minimum Server versions: Current ESR version (5.31.3) Supported iOS versions: 11+ Supported Android versions: 7.0+ Mattermost is an

Mattermost 1.4k Sep 24, 2021
Barton Hammond 4.6k Sep 21, 2021
📺 A news app using YouTube playlists, built with React Native

NewsWatch-React-Native A YouTube News app for iOS, made with React-Native. Enjoy watching your daily news. Screencast: This project was bootstrapped w

brad oyler 156 Jul 4, 2021
一个基于 React native 开发的音乐软件。

洛雪音乐助手移动版 说明 一个基于 React native 开发的音乐软件。 所用技术栈: React native Redux 支持的平台: Android 注:不计划支持IOS 软件变化请查看:更新日志 软件下载请转到:发布页面 或者到网盘下载(网盘内有MAC、windows版):https:

lyswhut 803 Sep 16, 2021
:camera: Point your camera at things to learn how to say them in a different language. Android app built with React Native.

What the Thing ? Point camera at things to learn how to say them in a different language. Native Android App built with React Native. Made it as a par

Vignesh M 526 Aug 29, 2021
F.A.N Report - Facebook Audience Network Performance Tool (available both iOS and Android).

Audience Network - Facebook Ads Performance Tool Check your Facebook Audience Network performance quickly with the app. It shows number of ad requests

kf 51 Apr 5, 2020
A simple weather app for demonstrating react-native skills.

weather-app A simple weather app for demonstrating react-native skills. Application screenshots Portrait Mode Landscape Mode How to run System require

Rafael Mello 3 Jun 28, 2021
Standard Notes for iOS and Android - https://standardnotes.org

Standard Notes iOS & Android App Standard Notes is a safe place for your notes, thoughts, and life's work. It focuses on being simple, so you don't ha

Standard Notes 721 Sep 9, 2021
Look Lock - Show photos without worries in React Native (available both iOS and Android).

PhotosReactNative Look Lock App written in React Native (available both iOS and Android). Goodbye to nosy swipers! Pick the photos you want to share w

kf 129 Apr 17, 2021
A Third-party Hupu App (http://bbs.hupu.com/) client implemented using React Native (Android and iOS).

React-Native-HupuJRS 中文文档点此 This is a third-party client for the React Native version of Hupu Forum, which is compatible with Android/iOS platform and

MelonRice 26 Aug 20, 2021
GitHub Notifications in your pocket.

Gitify Mobile If you are looking for the desktop version - manosim/gitify. Download Available for free on iOS & Android. App Store Google Play Store P

Manos Konstantinidis 99 Jul 17, 2021
A iOS and Android client for YouTrack

YouTrack Mobile YouTrack Mobile app lets you stay on track with your tasks while you're on the go: Easily work with your projects and tasks no matter

JetBrains 203 Sep 13, 2021
TweetDeck for GitHub - Filter Issues, Activities & Notifications - Web, Mobile & Desktop with 99% code sharing between them

DevHub: GitHub Notifications & Activities on your Desktop Android, iOS, Web & Desktop with 95%+ code sharing between them thanks to React Native + Rea

DevHub 7.6k Sep 17, 2021
App to manage the products of the FastBuy Store (built with React Native and Redux).

Click to view a video demonstration Requirements Mandatory MacOS. Xcode and Android Studio. Homebrew. Node, Watchman and React Native. Optional Atom,

Bruno Tortato Furtado 175 Sep 5, 2021