# Dine the Distance                          

### Find restaurant options halfway between you and a friend! 

### 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).

![image](https://user-images.githubusercontent.com/28051494/112161304-4139b680-8ba8-11eb-93c2-c1e683247412.png)

​	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 ⚙️

#### `HTTP Trigger 1 (dineTrigger)`

Our first HTTP trigger 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

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.

Bunnimage aims to help alleviate that stress for students and others working at home. It takes an image as an input on an upload page and converts it into a PDF that is available at a download page.

Creating a File Sharing and Conversion Web App with Azure Functions

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.

Dine the Distance

.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%;}Face Mask Detection

Save Money and Frustration on Amazon using Azure Functions

TimeToEat

Creating a File Sharing and Conversion Web App with Azure Functions

Serverless Music Player

Face Mask Detection