The Period Alphabet

Front End Above The Fold
Back End Alphabet Detail w/Comment Form
Back End Alphabet List
wireframe for why to create an account
wireframe for creating an account
wireframe for log in page
wireframe for profile page: gamification with records of discussion posts
wireframe for Accessibility info page: Google Maps, user-submitted locations, free product websites, discussion board
wireframe for where to get free donated products
wireframe for how to get products sent to your door
wireframe for T info page

Inspiration

Growing up, our team connected when sharing our similar expereinces with trying to figure out the basics of menstrual hygiene, sexuality & mental welliness due to lack of formal education & taboo associated with these topics. So we created Period Alphabet! Period Alphabet is an inclusive, fun & user friendly webpage directed towards teaching youth the basics of SexEd, gender/sexuality & mental welliness! Our main purpose consist of spreading the accessibility of vital info to youth as they go through changes & learn to educate themselves. But why the Alphabet? Because we stive to provide simple & vital info (like the ABC’s) on these important topics! This is safe space to learn.

What it does

The user will be able to click on a Letter card out of the “Period Alpabet” to learn the basics of topics ranging from menstrual products, contraceptives, feelings & much more! Period Alphabet aims to provide aesthetic, accessible, and easy-to-read information about sexual and vaginal health for middle and high school girls experiencing changes brought about by puberty.

How we built it

Our talented front-end team created and styled the landing page. Each letter’s correspondence was brainstormed by the team virtually, using Google Meets. Individual team members searched for royalty free graphics to make the page visually fun and engaging. Via VScode, we coded our webpage in languges including HTML/CSS for the Front-end portion, Python Flask for back-end and MongoDB Atlas hosted on Google Cloud for Data storage of comments.

Challenges we ran into

Setting up a db for the back end
Migrating static page into flask framework
Setting up styles to work with jinja templating
Resizing sections of our website
Hosting our website to domain.com

Accomplishments that we're proud of

Beautifully styled landing page
Functional backend that serves pages and manages comments via Google Cloud
Hosted our website to domain.com

What we learned

How to use Mongo Atlas to serve database functionality in a flask app
What an API is
How front end and back end web programming interact
We learned the difference between section and div tags in CSS

What's next for The Period Alphabet

Membership sign-ups
Use a Google Maps API on our platform to show a map to our users of places to purchase or/and get free Period Products
Adding simple & informative content on each Letter displayed
comments/discussion capabilities integrated into front-end
Add a fully functional back-end using Google Cloud that stores usernames & comments

Built With

Submitted to

TechTogether Seattle
- Winner The Wolfram Award Sponsored by Wolfram Language

Created by

I worked on the back end using a python/flask/jinja framework. Integrating Mongo Atlas was especially challenging since I had not previously used a cloud hosted database. Moving forward we hope to fully integrate the front and back ends to provide community signup and conversations.

Laine Gillman
I worked on the front end of the project. I created the HTML, CSS, and JS files and linked the colors and fonts on the page.

Danika H Jaskulak-Gonzalez
I helped create the high fidelity wire frames using Figma and edited our demo video

Delaney Edwards
I helped the feature conception and front-end design in Figma and Adobe Illustrator, specifically the Accessibility and welcome page

Michelle Watson
I worked on the collection of images, presentation formatting, gathering statistics & contributed some code (HTML) for the audio feature. It was great learning experience! :)

Sheyla A
Designing for fun, learning to grow :)
My contribution included feature conception, sourcing visuals for HTML, and organizing the final presentation. I proposed integrating personal profiles, discussion boards, and reward systems as a way to incentivize and reflect current behaviors young girls are already accustomed to from social media. I learned a lot from my team about front and back end development, and can't wait to learn more about WebDev!

Lien White
Hi! I'm a Robotics Engineering undergrad/graduate student inspired to make a change in the world. Let's create something cool!