Recent Posts

Engineering for Social Innovation

Engineering for Social Innovation is a Vertically Integrated Project (VIP) through Georgia Tech that aims to address social problems and needs with engineering design and development. Advised by Dr. Joyelle Harris, our team of six selected a project related to the sustainable development goal “inequality,” specifically affordable housing.

The Project

For our project, our team partnered with the Grove Park Foundation in Atlanta to help further their goals of increasing equity in areas of health, housing, and education. To make it easier for Grove Park to communicate with its clients, we created a web application that can be used to add phone numbers to the contact list and send texts and media.

How it Works

Our application has a React.js client-side where users can input phone numbers to be added to the contact list, as well as enter messages and attach media to be sent to clients. This side connects to a Node.js server-side that uses Twilio API to text the contacts stored in the MongoDB database.

Our Team

Advisor: Dr. Joyelle Harris

Frontend Developers: Jennie Baker (myself), Natasha Bohra, Rhea Ganguli

Backend Developers: Madeline Wilson, Albert Lu, Dae’Shawn Taylor

My Role

As a member of the frontend team, I led my sub-group in creating the user interface for our web application. This included using React.js to create a front page that would allow for users to input phone numbers, text messages, and media. Also, during team meetings, I kept a log of what happened during each meeting, including tasks completed and future goals.

Demo Video:

0:00 First, the contents of Grove Park Installation.zip are extracted to the Desktop folder.

0:22 Next, the contents of the Grove Park Installation folder are copied to the Desktop folder.

0:33 After that, the Windows Command Prompt is opened. The directory is changed to the folder containing our messaging app. The ‘dir’ command shows the contents of the current directory to verify it. Then, some necessary packages are downloaded by running these commands:

cd Desktop/messaging_app 

npm install 

npm i alert 

npm install mongodb 

1:09 Then the application launched by selecting the messaging_app.bat file. This computer has a firewall blocking the unfamiliar application so ‘Run Anyway’ is clicked to continue.

1:26 The launching application opens the command prompt, indicated by the ‘run p server start’ messages and proceeding messages. Note that the application has an Express.js server running on port 3001 of this computer and a React.js client running on port 3000.

2:16 The application automatically pops up in the browser at localhost:3000. The user can now use the form to send SMS messages via your Twilio number and can also add a new phone number to the contact list database. 

2:18 When ‘1’ is entered in the New Phone Number box and submitted, it yields a pop-up message that says, ‘This number input is invalid’ and this invalid entry is not added to the phone number contact list.

2:21 When a valid phone number is entered and submitted, it yields a pop-up message that says, ‘This number is in the system ‘+11231231234.’

2:33 The contacts list database is opened in MongoDB compass. The user verifies that the recently added phone number now appears in the database.

2:43 The user enters a message, which includes text and a picture, to send as a text to all phone numbers in the contact list. The picture identified by an embedded URL that ends in its file type, jpg.

3:04 Lastly, the command line is opened again. The ‘queued’ message indicates that the text was sent.