Bruce Marandino, Timothy Hong, Patricia Booth
Citizen Science describes community-driven research where everyday citizens can contribute to science projects. Science Sleuths aims to be an educational platform that enables teachers and students to collaborate on scientific research. A cross-platform mobile application was developed in Flutter for students to submit observation data. This provides the advantage of allowing students to note observations anywhere they go with any mobile device they have. Collective observation data is displayed for teachers in the web portal built in Flask and React. In this portal, the teachers can manage existing projects, create new projects, and view detailed project summaries and relevant statistical information. Our team was new to many of the technologies used in the project but we accepted the challenge. We learned that designing and developing two applications has the advantage of being independent entities for separations of concern but it also requires agreement on methods of communication used so both applications can send and receive the data seamlessly.
- Initial user authentication through Google Firebase followed by JWT session authorization on backend
- Project management enables analysis of observation data submitted by displaying a table summary along with statistical graphs
- New projects can be created with a variable length of survey questions giving the option for a variety of data types including true or false, numeric, short answer, multiple choice, and date/time
-
Project data can be exported as a .csv file allowing users to have an offline copy of observation results
-
Responsive design using CSS media queries and MUI React components
0 - Boolean
1 - Integer in specified range
2 - Floating point number in specified range
3 - Multiple choice (Four options, one choice is correct)
4 - Text
5 - Datetime
Python 3.10.4
Node 17.9.0
npm 8.5.5
Google Firebase - Firestore, Authentication
- Open terminal and type following command:
pip install virtualenv
- Navigate to root project directory \Science-Sleuths-Web and enter below. A new folder will be created name env.
virtualenv env
- Turn on virtual environment:
env\Scripts\activate
- If you want to close the virtual environment:
Deactivate
- Install required python packages:
pip install -r requirements.txt
- In terminal, navigate into the Flask directory \Science-Sleuths-Web\Flask
- Create a file called .env . This will store all environmental variables.
FLASK_APP=app.py
FLASK_ENV=production
GOOGLE_APPLICATION_CREDENTIALS=
- For
GOOGLE_APPLICATION_CREDENTIALS
, take the contents of the Firebase .json file and convert it to base64. - Start flask:
Flask run
- In terminal, navigate into the React directory \Science-Sleuths-Web\Flask\react-sleuths (folder name is case sensitive)
- In package.json, update the proxy attribute to your localhost similar to below:
"proxy": "http://127.0.0.1:5000",
- Set strict SSL to false
npm config set strict-ssl false
- Install required packages:
npm install --legacy-peer-deps
- Start React
npm start
npm start
will run the development build. This mode includes auto-refresh for any react code changes. It will draw data from flask but if any flask code changes, flask will need to be restartednpm run build
will create a new production build. This will capture the latest development code and update the build folder.Flask run
draws from the build folder.
- If intending to test on Heroku, update proxy in package.json to the following:
"proxy": "https://sleuths.herokuapp.com",
- Then run
npm run build
to confirm changes - Only one branch at a time can run on Heroku. Switch the branch that is intended to test.
- Navigate to root directory. Connect to heroku instance. Authenticate with user credentials.
heroku git:remote -a sleuths
- Replace
BRANCH_NAME
with branch that is desired to deploy.
git push heroku BRANCH_NAME:main
Resources used for this project: