Find My Sisters

Find My Sisters Thumbnail
How it Works
Homepage of the React App
Edit your personal information. Info on the left screen is kept confidential and info on the right screen can be viewed by all matches.
Adding/editing your tags and identifying whether you are a big or little sister.
View a list of trending tags on a given day, in descending order of the number of profiles it was tagged in.
View a list of top matches in descending order of how many tags you have in common.
A Match's profile displays their contact information and shared tags of interest to encourage conversation.
Database Design (Entities/Tables)
Adding the DNS record to map the domain name to the web server's IP address.

Inspiration

According to statistics from 2020, there are more women than men in Canada: about 98 males for every 100 females [1]. On the contrary, women make up only 18% of all licensed engineers in Canada [2]. Historically, Engineering has always been a male dominated field. It's justifiable for different fields of study to attract an unequal amount of men and women; however, the gender disparity in Engineering has proven itself to be problematic. They can cause tragic events such as the École Polytechnique massacre in 1989, which resulted in 15 deaths. In the following years, efforts were made to encourage more women to pursue engineering, but they yielded little success. In the past 30 years, the amount of women graduating with engineering degrees is increasing at a much slower rate compared to men [3]. This essay aims to demonstrate that male dominance in Engineering not only results in discrimination against women currently in the field, but also discourages other women from pursuing Engineering, thus continually furthering gender disparity within the field. Such gender disparity can only be eliminated by encouraging more women to pursue Engineering and providing support to women already in the field.

What it does

Find My Sisters aims to encourage women to pursue careers in technology, through providing a space for female and non-binary identifying university students in the technology field to support each other and foster meaningful connections based on common interests.

How we built it

We used the web-based app Lucidchart in the planning stage of our project to collaborate live and draw UML diagrams while brainstorming different designs for the relational database. We tried to come up with the most logical design, with the following factors in mind: the database's complexity and maintainability, the complexity of the queries to be supported, the hackathon's time constraint, the data's scalability.

Figma, another web-based app that supports live collaboration, was also used in the planning stage to design prototypes of the various pages needed for the web app to support our desired functionalities.

GitHub and VSCode were used for collaboration during development, and we regularly updated our remote repository by using terminal line commands in VSCode and the GitHub Extension.

JavaScript, HTML, and CSS were used to format, style, and handle the functionalities of Find My Sisters. Google API Fonts were also used to style text.

Google Cloud Platform (GCP) was used to host a remote MySQL server to store and maintain data for Find My Sisters. (Also used again later to deploy the web app after development)

We chose Node.js as our back-end framework to establish a connection to the remote database server we previously hosted, and allow registered clients to access and/or edit the data stored.

We chose React for the front-end library to build the UI for Find My Sister, aiming to replicate the prototypes we designed using Figma.

Finally, we registered a domain name under the .tech Top Level Domain, FindSistersIn.Tech, and created a DNS Resource Record to map the web app we deployed on GCP to our domain name so that anyone with Internet can access the Find My Sisters web app. (They would still need to go through student ID authentication to view any information)

Our presentation was styled and made on Canva.

Challenges we ran into

We ran into quite a few challenges when creating our React app. The first challenge was figuring out the design of our relational database. We had a hard time piecing together how many entity diagrams we should have, how many tables, how would the tables link together and some attributes. With the help of our mentors (thank you very much Erin and Phil) we were able to get on a rough idea of how our relational database should look.

The second challenge was the abundance of errors when trying to execute our SQL queries. We created a js file to programmatically connect to and initialize our database (by creating and defining PK/FKs of the tables). All our CREATE statements worked fine, but our INSERT statements threw errors when we tried inserting sample default values. Due to the time constraint and the amount of errors we decided it was best to manually insert default values to the database. We used Google Cloud SQL Admin API and opened a Google Cloud Shell terminal to execute the SQL queries from there.

Our third challenge we ran into was being able to integrate our remote MySQL database with React. While having prior knowledge in using MySQL and Express.js (front-end framework) we assumed that utilizing NodeJS and MySQL with React would be comparable. Since it was our first time utilizing these 2 together we had ran into trouble trying to piece things together in the short amount of time we had. While we had some queries in mind to match the desired functionalities, we could not figure out how to properly execute the JS code that we wanted, given that React is a front end library and does not support back-end logic.

Accomplishments that we're proud of

--> Publishing to a .tech domain

--> Setting up a functioning site with routes to link corresponding pages

--> Designing a simple yet purposeful UI design for our react app

--> Being able to style a few pages to the UI design for our react app

--> Creating a database and storing its data on Google Cloud

--> Designing a relational database with normalized data

What we learned

--> DNS Management: This project was both of our first times registering a domain name and adding different types of DNS records. It was really cool to apply the concepts we learned in class to a real project, and it's crazy to think that the record that we created was stored in a publicly accessible DNS server.

--> Google Cloud SQL Admin API: We've never used this API before, but the setup was fairly straight forward and there wasn't much of a learning curve since it's just using SQL. I would use this again in the future since it was easier than executing the queries programmatically, but it would not be efficient on a larger scale. (We only needed to execute 4 INSERT statements.)

--> Routing React Screens: In our past projects using React, we've never had multiple completely different web pages where different components needed to be rendered and re-rendered to support the user's browsing path between Find My Sister's various "views".

What's next for Find My Sisters

Due to the time constraint of this hackathon, we were not able to fully develop our project to what we originally intended. We would like to continue developing the app to what we originally planned and additional functionalities can be added to the JavaScript code to support useful features such as messaging in the app itself, connecting a community rather than pairing students, or being able to track the trending tags or matches on a certain day.

Another project could involve analyzing the data collected from these students to look for trends between tagged topics.