Skip to content

• A Mobile App to find project partner using ML recommendations • One can create their profile and swipe recommended profile cards. • Once, both persons swipe each other right, they'll be able to chat with one another. • Tech Stack: React Native, Flask, MySQL, Firebase

Notifications You must be signed in to change notification settings

Project-Based-Learning-IT/pairup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PairUp

Demo Video

PairUP

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

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

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

Recommendation Algorithm

Process Flow Diagram

Diagram

Example prediction

Diagram of prediction

Class Diagram:

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

    1. Navigate to the cloned repository

      cd CollegeSpace

      cd frontend

      yarn install

      If yarn is not found npm install -g yarn
    2. 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

    3. [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]

    4. 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

      1. Make sure your laptop and your phone are on the same Wi-Fi network.
      2. Open your React Native app on your device.
      3. You'll see a red screen with an error. This is OK. The following steps will fix that.
      4. 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
      5. Go to Dev SettingsDebug server host & port for device.
      6. 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
      7. 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 -

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

    Backend hosted on Heroku

    pip install gunicorn
    pip freeze > requirements.txt
    

    Inside Procfile:

    web: gunicorn <main_file_name>:<flask_app_name>
    

    For errors

    heroku logs --tail
    

    To check logs on heroku cli -

    heroku logs --app appname_on_heroku
    

    Frontend hosted 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')

    About

    • A Mobile App to find project partner using ML recommendations • One can create their profile and swipe recommended profile cards. • Once, both persons swipe each other right, they'll be able to chat with one another. • Tech Stack: React Native, Flask, MySQL, Firebase

    Topics

    Resources

    Stars

    Watchers

    Forks

    Packages

    No packages published

    Contributors 4

    •  
    •  
    •  
    •