# Period Alphabet

## 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 (aka "What? No Jello Mold?"):
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 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

## Resources
[Flask Web Development, One Drop at a Time](https://flask.palletsprojects.com/en/1.1.x/)
[PythonHow.com](https://pythonhow.com)
[Healthline: Menstruation: Facts, Statistics, and You](https://www.healthline.com/health/facts-statistics-menstruation#Menstruation-throughout-the-ages)
Credit to: https://www.shutterstock.com/g/autumnn for the images used.