Hidden Figirlines

Home page for Hidden Figirlines!
Order events in the correct order to win!
Select a blind box to view details!
View options before purchasing!
Admire collected figirlines in the bookshelf!

Inspiration

For our project, we focused on the female empowerment aspect of the hackathon. Our goal was to shine a light on overlooked female historical figures, especially those in male-dominated fields. A main source of inspiration came from the movie Hidden Figures, which highlights the important contributions of women whose stories have often been left untold or overshadowed. We combined our interests of collecting blind boxes and online games into this educational website where users can play games designed to empower women by making learning fun and engaging, while also showcasing the diverse and vital roles women have played throughout history. By seeing women as trailblazers in science, politics, the arts, and beyond, players are encouraged to see themselves as capable of achieving great things. The game also promotes curiosity, critical thinking, and representation, helping to reshape how we understand history and whose stories are told.

What it does

Users can play a timeline game where they simultaneously sort and learn about historical achievements and celebrations of women, in chronological order. After sorting them correctly, they earn coins, which can be used to pull female figurines from blind boxes in a series of their choice (Sports, STEM, Politics). Users can then admire their figurines in their bookshelf, which displays the figure and their photocard, containing information about a different woman’s historical impact and story.

How we built it

Hidden Figirlines is built using React, JavaScript, HTML and CSS as our main languages in building a framework and styling our content. In addition to these languages, we also used tools such as Daisy UI, Tailwind CSS, and hello-pangea/dnd to implement individual components inside our website. Design wise, Figma and Adobe Creative Suite were used to wireframe, prototype, and create the graphics for our website and blindbox series packaging.

Challenges we ran into

One of the main challenges we faced was learning React for this project. Getting comfortable with its concepts and workflows took time but ultimately strengthened our development skills. Additionally, we had to figure out the technicalities of collaborating on Github and properly setting up all of our files to ensure our work was being properly integrated with each other. Overcoming these challenges helped us grow both technically and as a team.

Accomplishments that we're proud of

We are proud of building a fully functional timeline game from scratch while learning new languages, such as React. We were also able to create numerous cohesive images of the figirlines to use on our website that represent and uplift the women featured. Another component of our project we are especially proud of is the carousel featured in the shop, displaying the blind box options for users. These accomplishments reflect the creativity, collaboration, and technical growth we achieved throughout the project.

What we learned

As it was most of our team's first or second hackathon, we learned a lot about coding together simultaneously and collaboratively. Technical skills, such as pulling code from Github and implementing components, and soft skills, such as delegating work and offering constructive feedback were skills that we as a group were able to develop and improve. We also learned the fundamentals of designing a website that would offer a user-friendly experience and create a positive learning environment.

What's next for Hidden Figirlines

We plan on both expanding the amount of women featured on our website and improve our current game. One of our main ways of doing so is by introducing additional blindbox series, each featuring important women from different fields, such as arts, humanities, and more. We also plan to implement other types of games and improve on our current timeline game. By adding more events to sort into our database, we can educate users and spotlight even more influential women. The addition of more games will also make the website more engaging and interactive as a whole, creating a more enjoyable learning and playing experience. As for our current game, additional features we plan to implement is the game telling users how many they got correct out of five and displaying when each event happened (specifically the year).