WSTEMDex

As Women in STEM, it is important for us to recognize those who have paved the way before us. Their contributions towards their fields are invaluable, and their impact is nothing short of significant.

Comment 1

Inspiration

We wanted to pay tribute to women in tech who have paved the way for gender equality in STEM fields (especially since they are part of what we celebrate at WingHacks!), so we focused on finding a way to educate about some of their contributions in a creative manner. Since we wanted to take a playful approach, we also based some of the art and style of our site around Pokémon's Pokédex or the character selection of games like Genshin Impact.

What it does

The project is a fun website that allows users to learn about four notable women in STEM and their significant contributions towards science, tech, engineering, and math. We wanted to further celebrate the diversity of women in STEM by including significant figures from various ethnic and gender backgrounds. Each "character" includes brief yet influential information about their accomplishments in STEM and have detailed character art associated with each.

How we built it

Our website is mostly contained within a React JS framework, with the Google Fonts API being called for its visual design aspects. We also connected our site to Github Pages, and hope to be able to make it public in the future. Since a portion of our website was also focused on UI/UX design, we also used drawing software (Procreate, Clip Studio Paint, and Medibang) and image editors (Canva) to create visual elements for the site. We also planned out our site using Figma, and relied heavily on Github for sharing code.

Challenges we ran into

There were a multitude of errors since we had just initialized the ReactJS application and decided to implement the navigation bar first. This would be the most difficult challenge we faced since we attempted to implement the navigation bar without too much knowledge about ReactJS, CSS, HTML, and GitHub. Eventually, we resolved any errors that appeared with the help of a multitude of tutorial websites and YouTube videos.

Accomplishments that we're proud of

We are proud to have implemented a ReactJS web application that is fully functional with a navigation bar and various pages to display graphical and researched information. Not to mention, we are proud to implement fun effects into the site. These include text and box animations, hover elements, and graphical overlaps.

What we learned

Since this was a majority of the group’s first exposure to web development and React/Javascript, a lot of the challenges faced were adjusting to the differences in functionality of the frameworks and languages. For example, there was a large learning curve in terms of getting used to React Hooks, image implementation, page links, and other unique attributes. We also became much more competent with Git commands and pair programming.

What's next for WSTEMDex

We hope to add more figures to our -dex and implement more graphical assets to properly display each woman’s achievements in the field of STEM. Not to mention, we want to implement more JavaScript elements to include mini-games involving women in STEM and to create a much more exciting website by having special effects!

Built With

Share this project:

Updates