Space for Her

• 

  Example of Scattergram with many different clubs

Inspiration

All four of us have felt like outsiders at one point or another when exploring new clubs, especially technological ones. Being the only woman in a room full of people caused us to feel alone, judged, and unwelcome, and it has sometimes felt scary to pursue interests in tech as a woman. To combat the unwelcoming environments many women face in the UVA social and extracurricular scene, we need to hold clubs accountable for gender discrimination and lack of diversity. Space for Her is the solution.

What it does

Space for Her is intended to work similarly to Rate My Professor, but with the goals of inclusion and accountability. Very frequently, it's intimidating to tell club officers that their organizations are unwelcoming toward women and other underrepresented groups in tech. Space for Her gives women and other underrepresented groups the chance to anonymously rate and provide reviews about how welcoming UVa CIOs are. This not only allows UVa students to share their experiences in a cathartic way, but it makes it easy for girls to find clubs where they'll feel comfortable exploring their interests. Most importantly, it gives club leaders honest feedback about their club, and holds them accountable for the atmosphere created in their CIOs.

How we built it

We followed the template of the example code from today's Web Development seminar. We then modified this code to reflect our functionality -- instead of taking videos and posting them, we wanted the users to be able to enter a few fields and their review. Similarly to the example code, we wanted to save each review and display it on the webpage, which we attempted to do via a JSON string. However, we used our own url for the JSON string, which we generated using a separate express file. Then, we wanted to display the average rating for each CIO on a scatterplot on the webpage.

Challenges we ran into

We had trouble transferring the reviews and ratings into a JSON link. Thus, we could not receive this data on the homepage to graph onto the scatterplot. We also had trouble linking our page where you submit the review to our home page. Both pages are functional but only one page can be accessed at a time. In addition, because our retrieval from express was not working, we were unable to modify the reviews listed on the page with our own information. However, encountering these problems allowed us to focus on how developers connect files together through the transfer of data. We were challenged to try out and consider several different ways of transferring data, including through JSON, Amazon S3 buckets, custom links created through websites, and Express.

What we learned

We’re proud that we were able to make a React web app and even make our own local server, considering this was the first time any of us had attempted to do so. We learned how to use JSON, React, CSS, HTML, useState, express, Card, Form, Modal, ScatterChart, and other libraries in JavaScript, and we all used React.js for the first time today. Despite our project not ending in the result we’d hoped for, we’re glad we were able to participate in Hacks of Kindness (three of our members’ first hackathon!) and gain more hands on experience.

Citations

• Example code from Intro to Web Development seminar: https://github.com/brian-yu/wicstagram
• https://codesandbox.io/s/vzyiw?module=/example.js&file=/index.js:872-1161
• https://canvasjs.com/react-charts/scatter-point-chart/
• https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/

Built With

• express.js
• javascript
• node.js
• react