shop-app - GitLite

KO | EN

gitlite — search

#python #llm #machine-learning #rust #linux #macos #java #cli #kubernetes #pytorch #security #mcp #openai #open-source

shop-app

(★ 141)

A shopping mobile application made with react native for Android.

파일 탐색기

최종 버전 다운로드 (.zip)

- App-test.js
- - _BUCK
  - build.gradle
  - build_defs.bzl
  - debug.keystore
  - proguard-rules.pro
- build.gradle
- gradle.properties
- gradlew
- gradlew.bat
- settings.gradle
- - AppDelegate.h
  - AppDelegate.m
  - Info.plist
  - LaunchScreen.storyboard
  - main.m
- - project.pbxproj
- - Info.plist
  - ShoppingTests.m
- Podfile
- - shopApi.js
- - Colors.js
- - createDataContext.js
- - cartItem.js
  - order.js
  - product.js
- - AdminNavigator.js
  - AuthNavigator.js
  - DrawerNavigator.js
  - FavoritesNavigator.js
  - ProductsNavigator.js
  - RootNavigator.js
- - CartScreen.js
  - CreateProductScreen.js
  - EditProductScreen.js
  - FavoritesScreen.js
  - LoginScreen.js
  - OrdersScreen.js
  - ProductDetailScreen.js
  - ProductsScreen.js
  - SignupScreen.js
  - UserProductsScreen.js
.buckconfig
.editorconfig
.eslintrc.js
.flowconfig
.gitattributes
.gitignore
.prettierrc.js
.watchmanconfig
App.js
app.json
babel.config.js
index.js
LICENSE
metro.config.js
package.json
react-native.config.js
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd shop-app

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Gradle (Java/Kotlin)

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
JDK (Java) Java/Kotlin 프로젝트를 빌드/실행하려면 필요합니다.
Gradle 레포에 포함된 gradlew(Gradle Wrapper)를 쓰면 Gradle을 따로 설치할 필요가 없습니다.

cd android/app

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

./gradlew build

Gradle로 빌드를 진행합니다.

✅ BUILD SUCCESSFUL 메시지가 뜨면 성공입니다. build/ 폴더에 결과물이 생성됩니다.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

$ yarn install || npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Shop App
</br>
<p align="center">
  <img width="300" height="600" style = "border-radius: 30px; margin-right: 20px" src="https://i.ibb.co/yfRjyNS/Screenshot-20210728-181451-Shopping-1.jpg">
  <img width="300" height="600" style = "border-radius: 30px;" src="https://i.ibb.co/7r0g8MZ/Screenshot-20210728-181502-Shopping-1.jpg">
</p>
</br>

## 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](https://firebase.google.com/docs/reference/rest/auth) 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](https://firebase.google.com/docs/database). Some other user-specific data (auth-token, favorite products) are stored locally in the device using [AsyncStorage](https://github.com/react-native-async-storage/async-storage).

## Navigation
All navigation in this project is built with [React Navigation v5](https://reactnavigation.org/docs/getting-started/).

## 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](https://docs.swmansion.com/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](https://reactnative.dev/docs/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](https://reactnative.dev/docs/getting-started)
- [React Navigation v5](https://reactnavigation.org/docs/getting-started/)
- [Firebase Auth](https://firebase.google.com/docs/reference/rest/auth)
- [Firebase Realtime Database](https://firebase.google.com/docs/database)
- [React Native Reanimated v2](https://docs.swmansion.com/react-native-reanimated/)

## Demo
To test the app in your android device, you can download the **.apk** file from here: [shopping](https://drive.google.com/file/d/1QzceGiaLU72TZSFnQF_250pXH2KnCQHX/view?usp=sharing).

## Video Demo

### Authentication and validation

https://user-images.githubusercontent.com/44240293/127367181-ba188c22-997d-4280-8cff-b7867ebf324c.mp4

### Shopping
https://user-images.githubusercontent.com/44240293/127366818-a3f6316b-e770-4a8e-8cd0-59c08df8361d.mp4

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

## Contact
Email me at: abdou19.tech@gmail.com.