PinkThink Web Platform

Inspiration

Our team (#8) was inspired by the PinkThink mission to make coding accessible and fun for young girls. It's especially important to target girls at these young ages (8-14) because many girls lose interest in STEM fields during these years and most toys made for girls do not promote an interest in STEM. We wanted to create an interactive web platform that would bring the stylish and codeable PinkThink bracelet to life for users with interactive block coding, stories to complete, and badges to earn. We use storytelling as an interactive experience because most children respond more positively to visuals and our step-by-step coding tutorial will be memorable because of the lovable characters and their exciting adventures. We also include badges as a means of positive reinforcement for participants and a way to gamify the platform. We hope to inspire children to use our platform to harness their creativity by creating and sharing their own stories with their peers via code, a feature which will keep older students engaged and part of the mentorship network.

How it works

The PinkThink Web Platform is a front end platform that integrates an Arduino-based block coding editor in order to work fully with the back end hardware for the PinkThink bracelet. The platform was designed using primarily HTML and CSS, with functionalities in Javascript. Local server hosting was done on Python. Graphic design for stories was done using a combination of the ArtFlow tablet sketching program, Photoshop, and Canva. On the back end, the block coding editor translates block code created during stories into proper Arduino code, which can be pushed to the Arduino compatible bracelet hardware.

Challenges We ran into

On the software side, we sought to create as sleek of a platform as possible and often ran into bugs with layout.

On the hardware side, the soldering for the PinkThink bracelet broke fairly easily and, even after re-soldering, did not function correctly. Thus, we redesigned a new hardware apparatus for the bracelet, connecting two RGB NeoPixel V2 LEDs to light the bracelet, and rewiring to connect to an Arduino Uno. This version is fully functional, and young coders will program the bracelet to complement their story adventures, as shown in our demo video.

Accomplishments that We're proud of

Every team member entered this hackathon with a variety of previous experience, and our most impressive accomplishment is how we creatively combined our drastically different skill sets. Carolyn is currently working in full stack development and shared her web experience with the team so that everyone understood the website framework by the end of the day. Faye recently began navigating a career change from sociology & business and put her excellent graphic design skills to use on the website's stories and user interactivity. Gracie picked up a lot of HTML/CSS on the fly during the hackathon and, by the end, was designing her own web pages with flair while also stripping wires on the hardware side. Maddie didn't know any front end development, but found her niche leading the team on the hardware front, creating block code, rewiring and programming the Arduino-based bracelet from scratch and teaching the team about Arduino along the way. In the end, the result was far more impressive due to our eclectic skill sets and all of us learned something completely new.

What's next for PinkThink Web Platform

Currently, we have a mock up on our mentorship page. In the future, we envision older and more experienced coders using the platform to create and share their own coded stories with their peers. We would also love to extend this platform by increasing the story interactivity, the number of stories, and following through on our initial implementation of the user profile.

Built With

• arduino
• artflow
• canva
• html/css
• javascript
• photoshop
• pinkthink
• python