PairUp

Demo Video

Deployed Frontend on https://appetize.io/app/b5u340q115tqhw165t0cxy9cwm

Deployed Backend on http://campusspace.herokuapp.com

Sub-project: https://github.com/Project-Based-Learning-IT/linkedin-scraper

Recommendation Algorithm

Process Flow Diagram

Example prediction

Class Diagram:

Setup

Clone the repository using following command or github desktop

git clone https://github.com/Project-Based-Learning-IT/CollegeSpace.git

Frontend

Env Setup and Wireless Connection to JS server using physical android device : https://reactnative.dev/docs/environment-setup

Navigate to the cloned repository
cd CollegeSpace

cd frontend

yarn install
If yarn is not found npm install -g yarn
Open a terminal from the current directory i.e. CollegeSpace/frontend and run the following command to start the metro bundler
npx react-native start --reset-cache
[Android] Let Metro Bundler of previous step run in its own terminal. Open a new terminal inside from the current directory i.e. CollegSpace/frontend. Run the following:

npx react-native run-android

[Make sure to useyarn install if there are errors]

Physical device USB connection

Follow docs and also do adb reverse port 5000 along with 8081 for flask server access

adb -s <device  name> reverse tcp:8081 tcp:8081
adb -s <device  name> reverse tcp:5000 tcp:5000

Sidhant's Device:

adb -s ZF6224Z7QQ reverse tcp:8081 tcp:8081
adb -s ZF6224Z7QQ reverse tcp:5000 tcp:5000

Can use SCRCPY to cast device to PC

Physical device wireless connection

Note: Flask server isn't connected with this method

To find the devices: adb devices

Make sure your laptop and your phone are on the same Wi-Fi network.
Open your React Native app on your device.
You'll see a red screen with an error. This is OK. The following steps will fix that.
Open the in-app [Developer menu] (https://reactnative.dev/docs/debugging#accessing-the-in-app-developer-menu). To open the dev menu: adb shell input keyevent 82
Go to Dev Settings → Debug server host & port for device.
Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). ipconfig to find your machine's IP address
Go back to the Developer menu and select Reload JS.

Errors and solutions

Error: Keyboard.removeListener is not a function

Solution: Edit Frontend\node_modules\react-native-gifted-chat\lib\MessageContainer.js

FaridSafi/react-native-gifted-chat#2090 (comment)

Error: mergeLibDexDebug FAILED

Solution: fixed by enabling the multiDex in the

/android/app/build.gradle file.
android { 
defaultConfig { 
....... 
multiDexEnabled true 
} 
......
}

Network Error of Axios:

Solution: added these to my /android/app/src/main/AndroidManifest.xml

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"  // <-- added this 
        ...>
        ...
    </application>
</manifest>

Frontend References

https://reactnative.dev/

https://callstack.github.io/react-native-paper/

https://reactnavigation.org/

https://www.npmjs.com/package/react-native-deck-swiper

https://www.npmjs.com/package/react-native-flip-card

https://www.npmjs.com/package/react-native-hyperlink

https://www.npmjs.com/package/react-native-dotenv

https://www.npmjs.com/package/axios

https://react-native-async-storage.github.io/async-storage/ [Not Working]

https://rnfirebase.io/firestore/usage

https://github.com/FaridSafi/react-native-gifted-chat

Backend

Setup Database server

using XAMPP (Apache and MySQL) and make these changes after starting Apache and Mysql(Stop MySQL Workbench service from services to freeup port 3306) in XAMMP->Apache->Config->php.ini

Find:
post_max_size = 8M
upload_max_filesize = 2M
max_execution_time = 30
max_input_time = 60
memory_limit = 8M

Change to:
post_max_size = 750M
upload_max_filesize = 750M
max_execution_time = 5000
max_input_time = 5000
memory_limit = 1000M

Normally Exported sql Script does not have create database syntax. So you should create a database using phpMyAdmin and then import SQL file using phpMyAdmin (XAMMP->MySQL->Admin)

Setup Server

Navigate to the cloned repository

cd CollegeSpace
cd backend

Run the following commands one by one:

pip install virtualenv
virtualenv env
.\env\Scripts\activate.bat [For subsequent runs]

Install requirements if not done already - pip install -r requirements.txt

Main Packages

pip install flask
pip install flask-sqlalchemy
pip install mysqlclient
pip install bloom-filter2
pip install pandas
pip install scikit-learn
pip install flask-jwt-extended
pip install python-dotenv
pip install python-dateutil
pip install -U flask-cors
pip install flask-restx

Install a python formatter in VSCode outside of virtual environment

To exit virtual environment use deactivate Formatter -

Open pyton file and press ctrl+shift+p to bring up command pallet and search format
Click format document with and install python formatter when prompted by Vscode
Repeat step 1 to search and choose default formatter to installed one
Also turn on format on save from VScode settings

Use SQLALCHEMY_DATABASE_URI of clever cloud after login.
Manage Tables, database using inbuilt phpMyAdmin of Clevercloud https://console.clever-cloud.com/ Same email and password
Documentation Flask : https://flask.palletsprojects.com/en/2.0.x/
Documentation SQLAlchemy: https://flask-sqlalchemy.palletsprojects.com/en/2.x/
Documentation JWT: https://flask-jwt-extended.readthedocs.io/en/stable/basic_usage/
CORS: https://pypi.org/project/Flask-Cors/
Swagger UI: https://flask-restx.readthedocs.io/en/latest/index.html
To start flask server
python app.py

Backend hosted on Heroku

pip install gunicorn
pip freeze > requirements.txt

Inside Procfile:

web: gunicorn <main_file_name>:<flask_app_name>

Login to heroku and deploy from Repository after creating new app
To deploy from subfolder follow https://stackoverflow.com/questions/39197334/automated-heroku-deploy-from-subfolder
Set config vars in settings from .env file

For errors

heroku logs --tail

To check logs on heroku cli -

heroku logs --app appname_on_heroku

Frontend hosted on Appetize

Build Debug APK using following guide https://stackoverflow.com/a/56520746/15395433, use npx react-native.... and gradlew assembleDebug
Upload it on Appetize

Comment Anchors

ANCHOR - Used to indicate a section in your file
TODO - An item that is awaiting completion
FIXME - An item that requires a bugfix
STUB - Used for generated default snippets
NOTE - An important note for a specific code section
REVIEW - An item that requires additional review
SECTION - Used to define a region (See 'Hierarchical anchors')
LINK - Used to link to a file that can be opened within the editor (See 'Link Anchors')

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

PairUp

Demo Video

Recommendation Algorithm

Process Flow Diagram

Example prediction

Class Diagram:

Setup

Frontend

Physical device USB connection

Physical device wireless connection

Errors and solutions

Frontend References

Backend

Setup Database server

Setup Server

Backend hosted on Heroku

For errors

Frontend hosted on Appetize

Comment Anchors

Files

README.md

Latest commit

History

README.md

File metadata and controls

PairUp

Demo Video

Recommendation Algorithm

Process Flow Diagram

Example prediction

Class Diagram:

Setup

Frontend

Physical device USB connection

Physical device wireless connection

Errors and solutions

Frontend References

Backend

Setup Database server

Setup Server

Backend hosted on Heroku

For errors

Frontend hosted on Appetize

Comment Anchors