Paper Scissor Stone App

Environment

• Ubuntu20.04
• Flask (Server)
• React Native (Client)
• MongoDB (Database)

Introduction

We build a papser scissor stone app by using flask as server system for routing and using react native as client system for user to play the game and view their result. This application contains sign-up, log-in, and log-out authentication system. The user informations are processed, encrypted, and stored in server-side mongo database. The game alogorithm is also processed in server system.

Demonstration

• 

• 

• 

• 

• 

Installation

• Install mongodb with mongo compass (optional)

• Install miniconda (optional)

• Install React Native

Instruction

Start Systems

(Make sure router is on and both mobile device is connected to same router before getting started)

Start Mongodb

$ sudo systemctl start mongod

• Open mongodb compass to view mongodatabse

Start Server System

$ sudo systemctl start mongod.service

$ cd ./server

$ pip install -r requirements.txt

• Create .env in the server directry and put the local mongodb address

MONGODB_URL="Your-local-mongodb-address"

$ ./run

Start Client System

$ cd ./client/PaperScissorStoneApp/

$ npm install

• Create .env in the server directry and put the local mongodb address

SERVER_IP="Your-local-server-ip-address"

$ npx expo start 

• Open Expo Go in mobile and scan qrcode

References

• LukePeters/user-login-system-assets
• Sort dict of dict in jinja2 loop
• SORT DICT IN JINJA2 LOOP
• Install NodeJS 16 on Ubuntu 20.04
• How to Pass Parameters to screen in StackNavigator?
• 【极简】传输formdata时出现415 unsupported media
• React-native API call using Fetch
• React Native Networking – How To Perform API Requests In React Native using the FetchAPI
• Flask 框架：运用Axios库实现前后端交互
• Using ASYNC STORAGE w/React Native & Expo
• 使用 Effect Hook
• Height and Width
• React Native Scrollview height not changing to fit children elements
• How to iterate (keys, values) in JavaScript? [duplicate]
• react native的进度条、table表格和其他组件
• Unknown Option error from Babel in React-Native app
• zetachang/react-native-dotenv
• How do I Configure Flask Dev Server to be Visible Across the Network?