Group corsework in university

This project was bootstrapped with

• Create React App,
• Python-docs-samples
• Material ui.

In this project, there were four cloud services involved:

• The Google Identity Platform
• MongoDB Atlas
• Twilio Programmerable Chat
• IBM Watson Natural Language Classifier

To run the application you'll need to gather all cloud services credentials and configure them in example.env and app.yaml.

The Google Identity Platform

• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET
• REDIRECT_URI

MongoDB Atlas

• MONGODB_URI

Twilio Programmerable Chat

• TWILIO_ACCOUNT_SID
• TWILIO_API_KEY
• TWILIO_API_SECRET
• TWILIO_CHAT_SERVICE_SID

IBM Watson Natural Language Classifier

• VERSION
• USERNAME
• PASSWORD

After setting up all the configurations, the first thing is to install all the dependencies. For Python, we used Pip to manage all the backend dependencies. For JavaScript, we used Npm/Yarn to do the frontend denpendencies management.

1. Clone the repository

git clone https://github.com/promer94/SocialFamily.git

2. Open the web_application and install all the dependencies. Before you install the python dependencies, you might to create a virtual enviorment first.

pip install virtualenv env
virtualenv env
source env/bin/activate
pip install -r -requirements.txt

After all the python dependencies installed, you should be able to run the app.py

python app.py

Next step is to install the JavaScript denpendencies.

npm install

It will install all the dependencies decleared in package.json. Run

npm start

It will start a dev-server for frontend. Then you should be able to have a quick look about the frontend page.

Thanks to Create React App, it provides us with a dev-server that could help us to develop. You should start the development by editing the src folder, app.py and app.yaml. Once you are satisfied with you frontend, run

npm run build

It will produce a folder called static. After that you can start the python http server by

python app.py

To test your application.

We recommend you to use Visual Studio Code. There is a list of vscode extensions that might impove your productivity:

• ESLint for JavaScript lint The configuration file is included in this project.
• Prettier - Code formatter It can automatically format your code.
• Sublime Babel Display syntax highlight.
• Path Intellisense Autocomplete filenames
• Python Python support in vscode.
• Git Extension Pack Git support in vscode

For chrome and firefox, we can use react developer tools to debug the application.

We using google app engine flexiable enviorment to hosting our webapplication. If you want deploy it from your local machine, you need download google cloud SDK first.

1. Clone the repository

git clone https://github.com/promer94/SocialFamily.git
cd SocialFamily
cd web_application

2. Set up virtual enviorment for python and install the denpencies

pip install virtualenv env
virtualenv env
source env/bin/activate
pip install -r -requirements.txt

3. Produce the static folder

npm install
npm run build

4. Initialize the google cloud sdk and deploy

gcloud init
gcloud app deploy