### Problem
The lack of NoSQL content in current college level CS courses can put students at a disadvantage in pursuing CS careers. Although NoSQL is introduced as a concept, its functionalities are not taught in-depth. Due to inaccessibility of NoSQL at the college level, we wanted to bring MongoDB’s technology to students interested in learning about databases and provide them with the resources to build innovative projects.
MongoDB is an open-source, documentation-focused database program that lets users store data without worrying about complicated data structures. Data are stored as separate documents in collections rather than in rows and columns in traditional databases. MongoDB are the industry leaders in NoSQL databases, which are non-relational and store data through key values. NoSQL is designed for the cloud, eliminating the need to install programs on a local drive and allowing for unlimited storage.

### Solution

![Bit Project student developer and MongoDB mentor leading workshop](https://uploads-ssl.webflow.com/5f62ec1dc433ad87b1f8de58/5f74ca81897c6a67be6dcc13_presentation%20mongo.png)

Recently, MongoDB launched MongoDB University, a free educational program for university students to take courses on NoSQL technology and practice for developer and database administrator (DBA) exams. At Bit Project, we saw the educational potential in bringing MongoDB courses to students by creating interactive, beginner-friendly lessons. We expanded upon MongoDB’s educational efforts by creating open source content MongoDB databases and how they apply to everyday life.
The Bit Project team developed an interactive scavenger hunt with MongoDB engineers, spanning the entire workshop, teaching students fundamental NoSQL concepts and their applications to MongoDB. The activity taught different types of queries, or data requested from a database.

The educational resources included an introduction to databases and NoSQL and their practical uses in CS and introduced students to MongoDB Atlas, a program that lets users host their database online without needing to code beforehand. Using the sample database already set up in Atlas, the students were taught to search for and execute multiple types of queries, which perform certain functions within the database to find, add, or delete information. The students were to use the queries to find all the letters of a word and proceed to the next activity page.

### Results & Future Plans

The partnership helped make technical learning accessible and exciting for our student participants — the interactivity of the resources encouraged students to ask engaging questions and communicate effectively with their peers. As opposed to a typical college CS course, our interactive lessons with MongoDB let us bring skills and issues from the tech industry to students.

Currently, Bit Project plans to create a MongoDB bootcamp that will make the platform more accessible to a larger student network and make these complex technical concepts more approachable.


How MongoDB and Bit Project Are Collaborating to Make NoSQL Database Technologies More Accessible Than Ever to Students

Using NoSQL to Power Student Developer Projects with MongoDB

# About Me 👩‍💻

Hi! My name is Anita, and I'm currently a junior studying Computer Science at the University of Illinois at Chicago.  When I'm not doing school work, my favorite hobbies include biking, cooking, and painting (I've been doing a lot of online paint alongs during lockdown).

​	I'm a HUGE foodie. One of my favorite social activities has always been going out to eat with friends. I thoroughly miss in-person classes in Chicago because it gave me an excuse to try out new places for takeout nearly every week. If you're ever in the city, I 10/10 recommend heading to [Brightwok Kitchen](https://brightwok.com/)! 

Choosing a place to eat has always been a struggle of mine, and there are a couple factors I always take into account: 

1.  Convenience – I have never been one to take a road trip just for the sake of getting some food. 
2.  Cuisine – I crave Sushi way more often than I would like to admit.

That's pretty much it. I'm generally not that picky 😊

# What's Dine the Distance?  🚗

​	Dine the Distance is a web application that takes the zip location locations between two points (you and a friend), a restaurant cuisine, and delivers restaurant recommendations at a neutral midpoint location. Each restaurant recommendation is requested from the Azure Maps API and  includes a link to the location’s website, menu, phone number, and address. Dine the Distance provides food locations that are convenient whilst filtering results by cuisine preferences. It was created to help avoid situations where you and your friends cannot decide on a place to meet up and grab some food.

![flowchart](https://user-images.githubusercontent.com/28051494/112161497-7219eb80-8ba8-11eb-931c-b94268451e5a.png)

Now we'll go into the steps I took to build this project the necessary details to replicate it in the future:

# Creating the Azure Function App 💻

1. Navigate to the Azure Portal and create a Function App Resource that uses a Node.js runtime stack. 
2. After it has deployed, add an HTTP trigger to your resource. This is where we will be providing the backend code for our application!
3. Before the function can be used, you will want to install the necessary package dependencies. Run “npm init -y” in your terminal to create a package.json file to store your dependencies. Next, install the following dependencies (npm install):
   - node-fetch
     - To make our HTTP requests 
     - https://www.npmjs.com/package/node-fetch#api
   - us-zips
     - To convert user zip code input into latitude and longitude coordinates
     - https://www.npmjs.com/package/us-zips
   - geolib
     - To find the midpoint between two coordinate locations
     - https://www.npmjs.com/package/geolib

# Frontend ✨

1. Create a form for user input

```markup
<form onsubmit="handle(event)" enctype="multipart/form-data">
	<div class="row">
		<div class="form-group col-md-6">
			<input type="text" name="zip1" placeholder="Zip Code 1" required>
			<input type="text" name="phone1" placeholder="Phone Number 1" required>
		</div>
    
		<div class="form-group col-md-6 mt-3 mt-md-0">
			<input type="text" name="zip2" placeholder="Zip Code 2" required>
			<input type="text" name="phone2" placeholder="Phone Number 2" required>
		</div>
	</div>
    
	<div class="text-center" style="padding-top: 30px;">
		<input type="text" name="cuisine" placeholder="Food Cuisine" required>
	</div>
	<div class="text-center"><button type="submit">Find Food!</button></div>
</form>
```

​	To capture the user’s location, contact information, and preferred cuisine information, you will need to create a form in an index.html file. The main elements you will definitely need in this form include:

- Two inputs for two user zip code locations
- Two inputs for two user phone numbers 
- A submit button to send the form data to our HTTP trigger (called dineTrigger)



2. Send user's form data to our HTTP trigger (dineTrigger)

```javascript
  var functionUrl = "/api/dineTrigger"
  const resp = await fetch (functionUrl, {
      method: 'POST',
      body:JSON.stringify({zip1, zip2, cuisine}),
      headers: {
        'Content-Type': 'application/json'
      },
  });

  var data = await resp.json();
  var newData = JSON.stringify(data.results);
  var obj = JSON.parse(newData);
```

​	Send an object containing the user zip code and cuisine information and await a JSON response body that can be parsed to populate the frontend with relevant restaurant information. 

# Backend ⚙️

Our first HTTP trigger `HTTP Trigger 1 (dineTrigger)`
 will send our user zip code and cuisine information to Azure Maps to retrieve restaurant information.

1. Convert zip codes into coordinates and find the midpoint

   ```javascript
   module.exports = async function (context, req) {
       
       var body = req.body;
   
       //zip code 1 -> latitude and longitude (us-zips) -> zip1Response
       //zip code 2 -> latitude and longitude (us-zips) -> zip2Response
       // midpoint lat lon (geolib) -> centerCoords 
   
       var zip1 = body.zip1;
       var zip2 = body.zip2;
   
       var zip1Response = usZips[zip1];
       var zip2Response = usZips[zip2];
   
       var centerCoords = geolib.getCenterOfBounds([
           { latitude: zip1Response["latitude"], longitude: zip1Response["longitude"] },
           { latitude: zip2Response["latitude"], longitude: zip2Response["longitude"] },
       ]);
   
       var cuisine = body.cuisine;
   
       var testResult = await analyzeCoords(centerCoords["latitude"], centerCoords["longitude"], cuisine);
       
       context.res = {
           // status: 200, /* Defaults to 200 */
           body: testResult
       };
   }
   ```

   ​	Before we can request restaurant data, we will need to find the midpoint between the two zip code locations entered by the user. This is where the us-zips and geolib node packages come in handy! First, convert the user zip code locations into JSON objects with their respective latitude/longitude coordinates using the usZips function. Next, we will use these coordinates to find the midpoint via geolib.getCenterOfBounds. Lastly, pass in the center latitude, center longitude, and preferred user cuisine into another function (analyzeCoords) to send this data to the Azure Maps API. 

   

2. Request Restaurant Data 

   ```javascript
   async function analyzeCoords(latitude, longitude, cuisine){ 
       
       const subscriptionKey = process.env['map-key']; 
       const uriBase = 'https://atlas.microsoft.com' + '/search/fuzzy/json';
   
       let params = new URLSearchParams({
           'api-version': '1.0',
           'query': cuisine + ' ' + 'restaurant',
           'subscription-key': subscriptionKey,
           'lat': latitude,
           'lon': longitude,
           'limit': 10
       })
   
      
       let resp = await fetch(uriBase + '?' + params.toString(), {
           method: 'GET'
       })
   
       let data = await resp.json();
       
       return data; 
   }
   ```

   ​	Let us take a closer look at the analyzeCoords (latitude, longitude, cuisine) function. In this function, you will want to populate your URL search parameters and perform a GET request for your response data that we will parse through for the user to see on the frontend. 

   Refer to the Free Form Search API documentation to add or modify URL parameters: 

   https://docs.microsoft.com/en-us/rest/api/maps/search/getsearchfuzzy



# `HTTP Trigger 2 (msgTrigger)`

Our second HTTP trigger will send users text message directions to the restaurant they select.

1. Add Twilio Bindings to your HTTP Trigger's function.json file

   ```json
   {
     "type": "twilioSms",
     "name": "message",
     "accountSidSetting": "TwilioAccountSid",
     "authTokenSetting": "TwilioAuthToken",
     "from": "+1425XXXXXXX",
     "direction": "out",
     "body": "Azure Functions Testing"
   }
   ```

   ​	You'll need to [create a Twilio Account](https://www.twilio.com/try-twilio) in order to populate your Twilio resource binding with the proper accountSID, authToken, and Twilio phone number. In this project, I created two bindings in order to send a separate text to each of the two user's who will need the restaurant address. 

   

2. Send user's restaurant choice to the HTTP trigger (msgTrigger)

   ```javascript
   async function sendAddress(phone1, phone2, address, name){
     var functionUrl = "/api/msgTrigger";
     const resp = await fetch (functionUrl, {
       method: 'POST',
       body:JSON.stringify({phone1, phone2, address, name}),
       headers: {
         'Content-Type': 'application/json'
       },
     });
   }
   ```

   ​	Similar to how we sent an object containing form information to dineTrigger, we'll need to make another POST request to send an object containing the user's phone numbers and restaurant location to our new HTTP trigger. 

   

3. Text both users the address of the restaurant they select

   ```javascript
   module.exports = async function (context, req) {
       
       var body = req.body;
       var phone1 = body.phone1;
       var phone2 = body.phone2;
       var address = body.address;
       var restaurantName = body.name;
   
       var txtMessage = "Thanks for using Dine the Distance! Here's the address to go to " + restaurantName + ": " + address;
       
       //send directions
   
       context.bindings.message = {
           body : txtMessage,
           to: phone1 
       };
       context.bindings.message2 = {
           body : txtMessage,
           to: phone2 
       };
   }
   ```

   ​	Finally! It's time to send the users the address of the restaurant they plan to go to. After defining the body of the received POST request, we can formulate our message into a variable (txtMessage) and specify the body and phone numbers we want to contact in context.bindings.message. 

# Deploying the Static Web App 🚀

1.  Create a static web app in Azure in the Azure Portal and add the workflow to the master branch of the GitHub repo you are currently working in
2.  Grab a friend and try a new restaurant with Dine the Distance! 

Here's a link to try out my version: https://calm-moss-0d1a6c110.azurestaticapps.net/

# So what's next? 🔮

​	Dine the Distance has some room for additional features. The next course of action involves presenting each user with a distance tracker to help them visualize how far they will need to drive to each recommended restaurant.  

​	Until then....with Dine the Distance, you and your friends can stop aimlessly scrolling on online for restaurants nearby and instead utilize this all-in-one functional web app next time you want to grab a bite! 

# Special Mentions 🤗

​	This project was created as part of the [Bit Project](https://www.bitproject.org/) Serverless BitCamp cohosted by Microsoft. I'd like to thank my mentor Marie Hoeger for answering all my questions and making this project a great learning experience! Additionally, thanks to Emily, Evelyn, and Julia for coordinating our cohort activities and laying out clear expectations throughout the Bit Camp. 

Lastly, the name credit for this app goes out to my dear friend Divya Francis 💖

Dine the Distance is a web application that takes the zip location locations between two points (you and a friend), a restaurant cuisine, and delivers restaurant recommendations at a neutral midpoint location.

Dine the Distance

# Face Mask Detection
Upload an image or video to detect whether you or someone else is wearing a face mask!

## Description
The Face Mask Detection where it uses facial and object recognition to accurately distinguish those with or without masks. The user would upload an image and the program would analyze it and output whether or not they're wearing a mask. This project is needed to prevent higher risk of spreading the coronavirus and to enforce those who don't follow proper guidelines to wear a mask.

![image](https://user-images.githubusercontent.com/28051494/112170155-10f61600-8bb0-11eb-984a-87ee38b36fb6.png)

## Creator
Hello! My name is Kim, a sophomore studying Computer Science at the University of Southern California. I have many interests but currently, I want to explore more in the field of robotics, artificial intelligence, and front-end development. Outside of coding, I love to do digital design, gaming, hanging out with friends, and streaming on [twitch](https://www.twitch.tv/akzelea)! I also have a personal website [here](http://kimhoangdo.com/) if you would like to know more about me.

### Why I Created this Project
I created this project because I wanted to address the problem with people not following the guidelines for wearing face-masks during a global pandemic. It saddens me to see those not putting on masks when needed in public because it causes a higher risk of spreading the virus even more. Thus, I created this project to encourage and enforce people to wear one.

Another reason why I created this project is because like most college students, we want to be able to attend in-person classes as soon as possible and the only way we can go back to our college campuses is for the number of COVID cases to die down. Therefore, I felt that like a project like this can simulate technology that can benefit those who are trying to prevent the virus from spreading as much as possible.

## Project Features
* **Python:** A programming language that can be used, for example, back-end and software development.
* **Microsoft Azure Functions:** Helps you launch serverless applications.
* **Face and Object Recognition/Detection**
  * **Artificial Intelligence**
  * **Machine Learning**
  * **Deep Learning**
* **Google Collaborate**
* **Front-End-Development**
  * **HTML**
  * **CSS**
  * **Javascript**
  * **JQuery**
  * **Bootstrap**
* **OpenCV:** A library of programming functions mainly aimed at real-time computer vision. 
* **Tensorflow API:** A free and open-source software library for machine learning. 
  *  **Keras:** An open-source software library that provides a Python interface for artificial neural networks.

## Diagram of Project
![flowchart](https://user-images.githubusercontent.com/28051494/112170356-3daa2d80-8bb0-11eb-9564-b49a53a8029d.png)

## Facial and Object Recognition
We need to create the code for the program that reads an image pixel by pixel and uses facial and object recognition to output a frame and percentage on the face in order to detect whether or not the person is wearing a face mask.

I did this part of the project in an environment called google colaboratory. It's a colab, similiar to Jupyter Notebook that allows anyone to write and execute python code through the browser, and is especially well suited to machine learning, data analysis and much more. I also created a repository in github entirely for my code so I can clone it every time I enter back to my colab file.

First, we have to import many different libraries in order for this to work and the ones we need are shown below.

```python
import cv2
import os
from tensorflow.keras.preprocessing.image import img_to_array
from tensorflow.keras.models import load_model
from tensorflow.keras.applications.mobilenet_v2 import preprocess_input
import numpy as np
from google.colab.patches import cv2_imshow
```

We're using a very basic and simple face detector called the [Haar Cascade](https://opencv-python-tutroals.readthedocs.io/en/latest/py_tutorials/py_objdetect/py_face_detection/py_face_detection.html) due to my first time playing around with face detection.The Haar Cascade algorithm is a machine learning object detection algorithm which is used to identify objects in an image or video. Instead of creating and training the model from scratch, we use the “haarcascade_frontalface_alt2.xml” to detect faces. It's one of the oldest face detector file applications and it detects the face in a matter of few seconds using machine learning. It's not the best in accuracy but it's one of the fastest. Once the face is detected, then we will use this model file from Keras Tensorflow called mask_recog.h5 to detect masks.

```python
faceCascade = cv2.CascadeClassifier("haarcascade_frontalface_alt2.xml")
model = load_model("mask_recog.h5")
```

Once we have everything set up, we start the code. First, we need to convert the file into a grayscale image or video and then use our Haar Cascade to detect the face in the image. Note, my code can currently only detect one face at a time. It will output an error if there is more than one face or more than one output (ex. detects one person wearing a mask and one not wearing a mask). Once the images and faces are identified, you send it out to the mask detector application. We basically pre-processed the image in order to meet the requirements for Haar Cascade application. Now, we send that image to a predictor file through the model_recog.h5 OpenCV file and the rest of the code is basically it creating a frame around the face of the person and outputting a percentage as well. A person wearing a mask will be labeled with a rectangular green frame with a high percentage (most likely between 95%-100%) and a person not wearing a mask will be labeled with a rectangular red frame with a low percentage (< 90%). 

```python
#converting the file into a grayscale image or video
def face_mask_detector(frame):
  frame = cv2.imread(fileName) #google colab library that will be later commented out
  gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
  faces = faceCascade.detectMultiScale(gray,
                                        scaleFactor=1.1,
                                        minNeighbors=5,
                                        minSize=(60, 60),
                                        flags=cv2.CASCADE_SCALE_IMAGE)
  faces_list=[]
  preds=[]
  
  #mask-detector function
  #creation and design of the frame output
  for (x, y, w, h) in faces:
      face_frame = frame[y:y+h,x:x+w]
      face_frame = cv2.cvtColor(face_frame, cv2.COLOR_BGR2RGB)
      face_frame = cv2.resize(face_frame, (224, 224))
      face_frame = img_to_array(face_frame)
      face_frame = np.expand_dims(face_frame, axis=0)
      face_frame =  preprocess_input(face_frame)
      faces_list.append(face_frame)
      if len(faces_list)>0:
          preds = model.predict(faces_list)
      for pred in preds:
          (mask, withoutMask) = pred
      label = "Mask" if mask > withoutMask else "No Mask"
      color = (0, 255, 0) if label == "Mask" else (0, 0, 255)
      label = "{}: {:.2f}%".format(label, max(mask, withoutMask) * 100)
      cv2.putText(frame, label, (x, y- 10),
                  cv2.FONT_HERSHEY_SIMPLEX, 1, color, 2)

      cv2.rectangle(frame, (x, y), (x + w, y + h),color, 3)
      cv2_imshow(frame) #google colab library that will be later commented out
  return frame
```

Finally, we just give the program what file we want it to read and we do that by inputting it and then showing it on google colab through the imshow library. The image output  function code is very simple but the video output function is more because it needs to detect each frame and gives us a file output (due to google colab not having a live server to allow us to watch a video). Thus, there would be a generated output file for the video. Thus, our working code is created and now we need to connect it to our front-end for others to use it.

```python
#image output
input_image = cv2.imread("image.jpg")
output = face_mask_detector(input_image)
cv2_imshow(output)
```

```python
#video output
cap = cv2.VideoCapture('video13.mp4')
ret, frame = cap.read()
frame_height, frame_width, _ = frame.shape
out = cv2.VideoWriter('output.avi',cv2.VideoWriter_fourcc('M','J','P','G'), 10, (frame_width,frame_height))
print("Processing Video...")
while cap.isOpened():
  ret, frame = cap.read()
  if not ret:
    out.release()
    break
  output = face_mask_detector(frame)
  out.write(output)
out.release()
print("Done processing video")
```

## Front-End Development
Due to time contraints, I was inspired by a particular design and used a template and modified it to my own in order to make my website application. Below is the homepage of my website. I used HTML, CSS, Javascript, JQuery, and Bootstrap to create and modify my website. 

![image](https://user-images.githubusercontent.com/28051494/112170596-6cc09f00-8bb0-11eb-8d8f-5ae31cb75499.png)

### Layout of Website
1. **Homepage:** Main page that demonstrates my title, logo, navigation bar, and an iconic carousel for important reminders and relevant information.
2. **Demo Page:** To demonstrate the easy and simple steps of how to upload an image or video to create an output.
3. **Upload Page:** The area where the user will upload their image and video and the output will display back with a frame and percentage that shows if the person is wearing a mask or not.
4. **About Page:** The project description, information, and future discussion are posted there.
5. **Gallery Page:** A carousel containing lots of images that I tested out to show some samples of what similar results could be produced.

### Static Web App
We had to use static web app in order to deploy our website. 

Here is a link to my website: https://gentle-meadow-05bb21c1e.azurestaticapps.net/

## Back-End Development

![image](https://user-images.githubusercontent.com/28051494/112170701-81049c00-8bb0-11eb-9d08-b1920754b8d6.png)

### Uploading File
We would need to create two buttons to wear we can pick or upload our chosen image or video file and then creating a submit button in order to send the data to our HTTP trigger. Once it does that, it goes through the face mask detection functions that we created and await for our JSON response to bring back the image or video with whether or not the person is wearing a mask.

### Azure Function App
Now we need to create a Microsoft Azure function to call the API, face detector function, and front-end image in order to read the uploaded file from the user. First, I went on my portal and created a entirely new function. Below are the settings I used but they can vary for others. 

![image](https://user-images.githubusercontent.com/28051494/112170769-8f52b800-8bb0-11eb-96d7-d4289c447a1d.png)

Then, after creating the function, I went on Visual Studios and installed the necessary extensions (such as Azure Functions) and uploaded the files I wanted to put in my function. Then I deployed it from VS code to the portal and thus, it successfully connected. There were definetely errors in terms of installing the correct libraries and such but I was able to fix most of it. After it was done connecting, I used Postman to test it out as well and it worked! Now, it became the matter of trying to figure out how connect it to my front-end as well.

![image](https://user-images.githubusercontent.com/28051494/112170809-98dc2000-8bb0-11eb-9087-f719a05bab7e.png)

## Results
The results should be similiar to what you see below. The image on the left presents a person not wearing a mask while the person on the right presents a person wearing a mask.

![nomaskandmask](https://user-images.githubusercontent.com/28051494/112702075-90eddb80-8e4f-11eb-8105-02af83e16120.jpeg)

## Demo
![Short Demo](https://media.giphy.com/media/40SERPBtSSyg3ULGS6/giphy.gif)

## Future Plans
I plan to have many improvements and suggestions to my project. 
* In the future, I want to integrate this into a webcam where it’s able to detect LIVE and in real-time of whether or not the person is wearing a mask or not. 
  * However, this might not require Azure Functions so it would stray a different path.
* I want to use a different algorithm where it's able to more accurately detect faces because sometimes, when someone uploads an image, it doesn't always work and only seems to be working for really high-quality images which is not feasible for real-life images. 
* I also want to implement an algorithm to where it can detect more than one face instead of only one. 


## Special Thanks
I want to thank so many people who supported my journey throughout BitCamp. I first want to thank you Ankit, my personal mentor who fought through and through with me in trying to fix errors and help me understand so many concepts. I learned so much from him and really want to say that he's an amazing mentor. 11/10! I also want to thank you Julia, Emily, and Evelyn for being awesome and kind instructors who kept me organized and supported us so much. Thank you for all the communication and flexibility you gave us! Finally, I want to thank you Chloe, Daniel, and Shreya for providing and teaching us with very well-explained and professional lectures to those who had no clue about Microsoft Azures in the beginning. I was very grateful for every one of you and for this great opportunity! It was a fun experience that I recommend to those who want to learn more about Serverless Microsoft Azure.

The Face Mask Detection where it uses facial and object recognition to accurately distinguish those with or without masks.

Face Mask Detection

### Challenge

Researchers in the social sciences heavily depend on data collection and analysis. However, educators around the world struggle to integrate technology into courses due to the lack of time, training, and resources.
> "Students struggle with the idea of learning to code because it seems more complicated than it is." Daniel Kim, Bit Project founder >

### Solution

Bit Project empowers undergraduate research in the social sciences by giving students hands-on experiences with Twitter's API. In order to equip students with a good foundation in data science, we built an open-source Bootcamp with Twitter engineers designed to mentor students with no coding background and learn about data visualization and other data science principles.

![presenter](https://uploads-ssl.webflow.com/5f62ec1dc433ad87b1f8de58/5f73e8d7d0fb730bb2b0bbdd_student%20bryan%20presenting.png)

Analyzing data is a crucial part of the social sciences, and learning to apply coding skills and concepts (such as Python code and APIs) enhances understanding of the social sciences. Students who are interested in the intersection of technology and social sciences greatly benefit from projects that teach coding fundamentals. Empowering research in the social sciences using a social media platform like Twitter encourages learners to apply their skills beyond the workshops. With these lessons from Bit Project, social sciences students can learn how to apply these new programming skills to their future work in the field, harnessing the power of data science to further their academic or personal interests.

### Results & Future Plans

In this project, students learned to collect data using APIs and Tweepy, as well as learn new Python code. For example, they learned to call the search endpoint of the Twitter API through the Python library Tweepy. They could then construct a plot of the data that they collected. With the help of APIs, students were able to draw accurate conclusions from their data. Students honed crucial skills such as coding language as well as emphasize critical thinking and effective communication.
Moving forward, Bit Project will be integrating data science into social science courses in community colleges.
‍


Upskilling Humanities Students with Data Science Fundamentals

Empowering Undergraduate Research in the Social Sciences with Twitter

![](https://uploads-ssl.webflow.com/5f62ec1dc433ad87b1f8de58/5f6df0a68a5b425108af6e66_Gamethon%20Banner%20(8).png)

### What is Gameathon?

Bit Project’s Gameathon 2020 is a two-week program that brings students from around the world together to learn and practice game development skills through educational workshops and project building. Students, educators, and guest speakers from around the world will lead coding workshops from How to use Unity/Game Maker to Build Your Own Pokedex with React.

### Workshops & Projects

Guest speakers, Benjamin Rivers (Toronto-based indie game developer) and Ben Mcilmoyle  (developer advocate with Unity Technologies) will host workshops through which students will be able to learn game design and game development. Workshops are recommended for students with little-no experience in coding games, while the Gameathon competition is open to all, regardless of experience.

During Gameathon, participants will show off everything they learned in the first week by using either Unity and Game Maker to create their own original game. Much like a hackathon (where computer programmers spend several days competing and working on projects), Gameathon participants will have the whole week to work on their individual games. Game Jam does not have a required theme for submitted games. Instead, Bit Project encourages participants to use their imaginations to create any kind of game they want.

At the end of the second week, Bit Project educators will run through the participants' games and determine the best games on each platform for a prize. While final games must be submitted individually, Bit Project encourages participants in Gameathon to work together to troubleshoot problems and ask each other for help.

### Gameathon's Partnerships

While GameMaker is not a free game building platform, Bit Project has partnered with Yoyo Games, a British software development platform, to offer complimentary licenses that will make GameMaker free to use. All participants in Gameathon will receive these licenses, along with the student edition of Unity. This way, all participants will be able to use both platforms free of charge for the duration of the event.

Through a partnership with Yoyo Games and Unity, Bit Project developed Gameathon to give students the opportunity to connect with real game developers and educators from the industry so they could learn about game building from the experts. No matter their previous level of experience with the world of game building, participants will be able to use new tips from guest speakers and workshops along with their imaginations to build their own unique games. After Gameathon, the students will get to apply their new knowledge to whatever projects they work on in the future. Those interested in Gameathon can learn more here!

Join our student community in a week full of game dev, design, workshops, and fun!

Game Development Community

### Problem

Before the COVID-19 pandemic, Bit Project's primary education team held in-person, interactive STEM lessons for students in grades 2-5 focused on a wide range of STEM topics from biology to computer science. However, COVID 19 severely limited what the team could do to provide high-quality STEM experiences.‍

### Solution

> “We are actively working to transform project-based virtual learning.” -Mary Bangloy, Outreach Department Manager
> 

Bit Project partnered with Microsoft to bring hands-on activities to hundreds of students around the world, virtually. Our developers, working from home, developed curricula to supplement learn-from-home.

However, families around the world struggled to get supplies due to stay-at-home orders, which made project-based learning using niche equipment nearly impossible. The primary education team, helmed by curriculum leads Jasmine Yee and Lily Hem, transformed existing STEM activities to involve only readily available materials, allowing students around the world to participate without purchasing expensive materials.

Lessons including DIY Lava Lamps and Weather Plates were all adapted to use common household materials such as water, oil, and food coloring. These sessions are recorded and uploaded to Youtube so students can go back and perform the experiments on their own later.‍

![DIY Lava Lamps with the Bit Project team‍](https://uploads-ssl.webflow.com/5fc87cd0032b2c5d06ff89ad/5fcf15d394fe89e895abc965_5f73f81fe7cb918d9bcdf4e0_Sep-29-2020%252020-12-08.gif)

### Results & Future Plans
The virtual events held in collaboration with Microsoft have provided hundreds of students around the world with the opportunity to continue learning in a fun and collaborative environment outside of classes. Next year, our team will be working with teachers to help integrate project-based learning into their virtual classes.

The Primary Education team's fast response to the pandemic's impact on K-5th grade education

Transforming Virtual STEM Education with Microsoft

SMS reminder for Amazon Products that alerts user when price rises above or falls below a discount threshold.

Save Money and Frustration on Amazon using Azure Functions

# TimeToEat!
###  Get notification reminders for proper eating habits!

## Who am I?
My name is Jason Wu and at this moment, I'm a Sophomore at the University of Rhode Island studying CS. I love food, lifting weights, skincare, video games, honestly anything you can think of, I like!

![image](https://user-images.githubusercontent.com/28051494/112172246-c8d7f300-8bb1-11eb-982b-1e0616f89ab2.png)

Because of lockdown, I haven't been outside to do anything for the past 10 months. Seriously. Nothing. No restaurants, gym, not even boba. I love to eat and workout, but not being to do the ladder during quarantine, I've gained weight and have been eating late at night as well. I would order food just to keep my sanity alive if I'm at home all day. 

But I am determined to go back to my old self! I want to control what I eat and go back to exercising! Thats why I created this application, TimeToEat to help me with diets and fasting (Intermitted Fasting more specifically)!

## What is TimeToEat?
TimeToEat is a web application that gives you daily reminders for you to start or stop eating at specific times of the day through SMS messages. Currently, the application is set to remind you daily at 12PM and 6PM PST.

The app will take your name and phone number, sent to a trigger function in Microsoft Azure, and it will be stored in an Azure storage account. Then it's scheduled to send the reminder at those time through the Twilio API and send you a text with a personalized message.

![image](https://user-images.githubusercontent.com/28051494/112172302-d5f4e200-8bb1-11eb-9007-1bd78eed78c5.png)

## Frontend 
During my frontend development, I created a website from scratch with HTML. I decided to not use a template because I have never created a website and wanted to go on a journey of making one for the first time. Although it does not have much CSS and JS for the design and fun animations, I wanted to learn that step by step in the future. For my application, I needed to make a form to users to input their names and phone numbers. I did this in my main **index.html** file.

![image](https://user-images.githubusercontent.com/28051494/112172386-e86f1b80-8bb1-11eb-88c9-e6c39254b49b.png)

After getting the data from the form, I sent it into the frontend javascript file. In this file, it first waits for the form data to be send there. Once received, the form data will then have all the inputs recognized by name within the script. Then the Azure function script was called to be triggered. (More about Azure function in Backend!)
Finally, the name and phone data will be sent to the Azure URL. All this is located in the **index.js** file.

![image](https://user-images.githubusercontent.com/28051494/112172452-f6bd3780-8bb1-11eb-8d6f-622cc9232783.png)

When my frontend was functional, I decided to use Azure and deploy it with GitHub and Static Web App. Then I went on towards the backend development.
## Backend
Within the backend, I mentioned that I used Microsoft Azure. The form data from my frontend would be sent into a Azure HTTP Trigger Function. In Microsoft Azure, development of anything requires some steps. It requires you to have an Azure subscription, resource group and then you can make a function app. 

### HTTP Trigger Function
This function will trigger when we call it, which we did in the **index.js** file. It will take the form data we sent through the URL in the parameters earlier and then add it into a Javascript Object Notation or JSON file.

![image](https://user-images.githubusercontent.com/28051494/112172495-ffae0900-8bb1-11eb-97de-e49a3522306a.png)
![image](https://user-images.githubusercontent.com/28051494/112172535-08064400-8bb2-11eb-88de-e264d86de3ad.png)

 Our **formdata.json** will store the form data for all the users.
 
![image](https://user-images.githubusercontent.com/28051494/112172630-1d7b6e00-8bb2-11eb-85be-7cd92f300707.png)

### Timer Trigger Function
The timer trigger function does what it sounds like. The function will trigger on a timer. For our application, we wanted to send notifications to users on a specific time each day. This timer functon will first read all the data in the **formdata.json** file and then add it into an array. When all the data is in the array, the function will then loop everything in the array and send the information to the Twilio API to send the SMS message.

![image](https://user-images.githubusercontent.com/28051494/112172681-279d6c80-8bb2-11eb-884f-32702ef3bb4a.png)
![image](https://user-images.githubusercontent.com/28051494/112172727-308e3e00-8bb2-11eb-8a80-d0de3cf93f13.png)

### Twilio backend
In the Twilio application that we used, we created a Twilio account and received an API URL, a ID and authentication token. We needed to put all this information within the timer function's json file. Because I used a Twilio trial account, the application is only limited to send SMS messages to Twilio verified phone numbers. 

![image](https://user-images.githubusercontent.com/28051494/112172787-3dab2d00-8bb2-11eb-824a-73dbfb08a6c7.png)

## The Future
For future development plans, I want to add tons of new features. Heres a list.
 - Selecting which time zone you are in
 - Picking what time(s) to receive the SMS messages
 - Available to non-Twilio verified phone numbers
 - More frontend development (Design, Exceptions, Confirmation page)

But until then, this web application will help me towards a scheduled and healthy diet!

## Thanks!
I appreciate your time for checking out my web app! This project would not be possible without the help of my mentor Ankit, and all the instructors and the team of Bit Project Serverless BitCamp which was cohosted by Microsoft. I had many ideas, some even scrapped, but this whole experience creating this was super entertaining and learned so much. Once again, Thanks!


TimeToEat is a web application that gives you daily reminders for you to start or stop eating at specific times of the day through SMS messages.

TimeToEat

If you or someone you know participated in this year's AP Collegeboard Exams, you probably recognize the stress of submitting handwritten work within a small time constraint.

Creating a File Sharing and Conversion Web App with Azure Functions

In summer 2020, Bit Project introduced our first ever tech bootcamp in partnership with Microsoft: Bit Heroes  We created this bootcamp with high school students in mind — our goal was to provide a valuable learning experience for those who were eager to delve into the world of software engineering head first. As students ourselves, we know it can be difficult getting hands-on experience; these opportunities can be hard to find or extremely costly. But with Bit Heroes, we were able to provide high school students with the chance to explore the tech industry and learn directly from Bit Project mentors and seasoned engineers: an opportunity they may not have had elsewhere.

### Problem

We structured Bit Heroes so that high school students with little to no prior experience with software engineering got lots of experience quickly. Students strengthened their coding abilities by learning more about Javascript, React, and C++, and they became better technical communicators and writers by going beyond just coding. We pushed our cohort to experiment with their work in a low-stakes, supportive environment that encouraged their growth. The students were provided with the tools to apply their knowledge of serverless computing and build projects to demonstrate the application of Azure Functions.

From nearly 200 high school applications, we selected our cohort and started off our program with an overview of the technical programming skills they would need to know. Once students shifted gears to start developing their serverless projects, they collaborated with each other to brainstorm ideas and troubleshoot problems. To foster a productive work environment for the students working remotely, Bit Project mentors hosted weekly work sessions and kept students aware about upcoming project deadlines. One-on-one meetings were also added to the curriculum for additional personalized support.

Feedback from Microsoft engineers Chloe Condon and Umayr Sufi further helped the students learn throughout the program. Their constructive feedback pushed our students to think proactively and critically about how their work process. Once projects were completed, Condon and Sufi gave great guidance on how the students could improve their technical communication skills for their step by step tutorial and their final presentation. All of this time spent learning from industry professionals better equipped our students for their future after high school.

>"Bit Heroes pushed me to learn as much new info as I could in a short span of time. It was an experience I wouldn't get anywhere else." - Meghna Pillai, Bit Heroes 2020

### Results
Our cohort completed a variety of amazing projects by the end of the program, all of which used serverless code:

• Meghna Pillai created a scheduling bot, which helps monitor events and appointments with increased efficiency and productivity. Before the user's scheduled events, the bot will send you text reminders. Her project was made up of three main components: the actual bot itself, a web app, and the Azure Function that supports it. The bot has the key questions which it will ask the user when prompted, and being a web app allows it to store the information in a database. The API's three parts allow it so save, retrieve, and mark data as completed when appropriate. Lastly, the Azure Function periodically runs through the database to see if a reminder needs to be sent out to a user.

![](https://uploads-ssl.webflow.com/5f62ec1dc433ad87b1f8de58/5f6de97de91aa87d9712ade4_1.png)

Meghna Pillai's Scheduling Bot Demo

• Beau Hayes-Pollard built a heart rate monitor using Azure IoT Hub to trigger an Azure Function when a resting heart rate above 100 bpm is detected. The function uses the Twilio API to send a warning message to the user's inputted contacts, ensuring that appropriate actions can be taken quickly. Through Bit Heroes, he was able to learn more about technology and build his own ingenious health monitoring tool to help monitor future workouts.

![](https://uploads-ssl.webflow.com/5f62ec1dc433ad87b1f8de58/5f6de98676835b9acd14800f_2.png)

Beau Hayes-Pollard Heart Rate Monitor

• Lisa Leung leveraged the full power of the Microsoft Face API by creating an emotion analyzer tool, help its user find the perfect picture to post. This Chrome extension allows a user to upload an image of a person and receive a general summary of the person's emotion. After a photo is uploaded through the extension, an HTTP request triggers an Azure Function that utilizes the Microsoft Face API to analyze the age, gender, and smile intensity of the person in the photo.

![](https://uploads-ssl.webflow.com/5f62ec1dc433ad87b1f8de58/5f6de98ea84a55f7f4f9eaeb_3.png)

Lisa Leung's Emotion Analyzer Tool Demo

• Natalie Huang coded an app that recommends songs based on a picture; all the user has to do is upload a current selfie. By using both the Microsoft Face and Spotify API's, this app allows users to submit a picture of their face and analyze their current mood. Based on their mood, it will recommend 10 personalized songs, and optionally create a playlist in the user’s Spotify account.

![](https://uploads-ssl.webflow.com/5f62ec1dc433ad87b1f8de58/5f6de9954f43a2b081ed977f_4.png)

Natalie Huang's Spotify Playlist Recommender Demo

To see our students present their projects and hear about how they completed their work, check out their live stream on twitch.

### Future Plans
Bit Heroes provided these students with a unique opportunity to strengthen their skills as budding programmers, and we are thrilled to have help inspire future software engineers. For example, two of the students who participated in the program went on to use their projects to build the next 8 week bootcamp on Serverless, which is in session in Fall 2020.

The experience that our Bit Heroes students had is crucial. By exploring STEM topics early on in their educational career, they are better to prepared to for their future college and future career in the tech industry. Bit Project plans to continue hosting successful programs by planning more tech bootcamps and reaching even more students who are excited to learn about tech.‍

Bit Heroes provided high school students with the chance to explore the tech industry and learn directly from Bit Project mentors and Microsoft engineers.

Introduction to Serverless Functions with Microsoft

This project is a music player built in React using Typescript and SASS. The application features a library allowing users to select which song they would like to play and also includes play, pause, skip, and seek functionality.

Serverless Music Player

# Problem 

Dr. Jamila Moore Pewu from California State University, Fullerton knew that learning during COVID-19 would present numerous challenges both for her and her Digital History class. She needed support for the Fall Quarter 2020 to ensure that her students could still learn meaningfully in an online environment.

Dr. Pewu also saw a need to incorporate data science into her digital humanities courses. These technical skills are crucial for liberal arts students outside of STEM who conduct research and studies in their respective fields. That's why it is vital for her students to learn and practice these skills, all of which prepares them to use multiple disciplines in their future work.

# Solution

Bit Project and Dr. Pewu collaborated to create a curriculum that not only taught  humanities topics through a digital lens, but valuable data science concepts too. As some of Dr. Pewu's classes include minority and first-generation students, we were mindful of the need to create quality tech resources for those from typically underserved communities.

Members from our organization will act both as assistant professors and teaching assistants through Zoom lectures over the course of our 13 week curriculum. By starting with the fundamentals of data science, Dr. Pewu's students will get to understand these concepts before applying them to more complex statistical analysis and data visualizations. Building the blocks of their data science knowledge will help them truly comprehend what they are learning.

By the end of the quarter, students will feel more confident and comfortable using data science within the realm of humanities. They will create a final research report, combining all that they've learned from Dr. Pewu and Bit Project in one capstone project.

![students learning](https://user-images.githubusercontent.com/28051494/115486274-34da6500-a20b-11eb-9d09-928ff7b9d373.png)

# Results & Future Plans

Bit Project was inspired to create Bit University after building this data science curriculum for this Digital History class. In light of this success with Dr. Pewu, we plan to expand this project to other campuses in the future, bringing the importance of data science to other humanities courses.

By reaching more students from other disciplines, we will help other fields understand the value of data and apply these concepts to their own projects and future careers.

Bit Project and Dr. Pewu from CSUF collaborated to create a curriculum that not only taught  humanities topics through a digital lens, but valuable data science concepts too.

Building Data Science in the Digital Humanities at CSUF

### Problem

Dr. Jamila Moore Pewu from California State University, Fullerton knew that learning during COVID-19 would present numerous challenges both for her and her Digital History class. She needed support for the Fall Quarter 2020 to ensure that her students could still learn meaningfully in an online environment.Dr. Pewu also saw a need to incorporate data science into her digital humanities courses. These technical skills are crucial for liberal arts students outside of STEM who conduct research and studies in their respective fields. That's why it is vital for her students to learn and practice these skills, all of which prepares them to use multiple disciplines in their future work.

### Solution

Bit Project and Dr. Pewu collaborated to create a curriculum that not only taught humanities topics through a digital lens, but valuable data science concepts too. As some of Dr. Pewu's classes include minority and first-generation students, we were mindful of the need to create quality tech resources for those from typically underserved communities.

Members from our organization will act both as assistant professors and teaching assistants through Zoom lectures over the course of our 13 week curriculum. By starting with the fundamentals of data science, Dr. Pewu's students will get to understand these concepts before applying them to more complex statistical analysis and data visualizations. Building the blocks of their data science knowledge will help them truly comprehend what they are learning.

By the end of the quarter, students will feel more confident and comfortable using data science within the realm of humanities. They will create a final research report, combining all that they've learned from Dr. Pewu and Bit Project in one capstone project.‍

![](https://uploads-ssl.webflow.com/5f62ec1dc433ad87b1f8de58/5f6dd8e44c814e038ff0511a_hackdavis%20students%20learning.png)
Students working on Data Science curriculum

### Results & Future Plans
Bit Project was inspired to create Bit University after building this data science curriculum for this Digital History class. In light of this success with Dr. Pewu, we plan to expand this project to other campuses in the future, bringing the importance of data science to other humanities courses.By reaching more students from other disciplines, we will help other fields understand the value of data and apply these concepts to their own projects and future careers

Exploring historical questions and challenging them using a digital lens

Using NoSQL to Power Student Developer Projects with MongoDB

.css-tl9lds{position:static;}.css-tl9lds::before{content:'';cursor:inherit;display:block;position:absolute;top:var(--chakra-space-0);left:var(--chakra-space-0);z-index:0;width:100%;height:100%;}Dine the Distance

Dine the Distance