When we were younger, we felt confused and lost about our menstrual cycles. If only there was one place to ask for advice and seek recommendations for various items related to periods and general health topics...

What it does

Cycle Sisters: a handy website that can be used to log not only period information, but also sleep and exercise levels. Once this data is entered, our website generates predictions for when the next cycle will occur and recommendations for reducing symptoms like cramps and lower back pain. Interactive graphs of personal health and menstrual cycle data are shown, as well as correlations between menstrual cycle symptoms and factors such as exercise.

How I built it

We employed HTML and CSS for the basic structure and styling of the website. We also used JavaScript to make the website responsive and interactive. Graphs of user data are made with the d3.js library. To create login sessions and store user data, we used PHP and mySQLi, tested through a local server.

Challenges I ran into

We were new to many of the skills and programming languages used. For example, none of us had ever worked with PHP/mySQLi/servers or data visualizations with d3.js. We spent countless hours learning how to securely insert data into and access data from databases, as well as debugging JavaScript functions to allow the arrows on the calendar to change the month and figuring out how to use d3.js to make bar graphs and scatter plots. However, we learned several new skills as a result of these challenges and had a worthwhile experience.

Accomplishments that I'm proud of

We are proud of being able to pick up several new skills while working on our project. It was an ambitious project requiring many features we did not know how to implement at first, but we were able to learn to work with databases and use JavaScript to make our website interactive.

What I learned

We learned how to set up a local server, as well as how to handle the backend of an HTML form using PHP to store and retrieve data from a database on the local server. We also attended workshops and learned how to use d3.js to create data visualizations on our website. Some of us did not have WebDev experience before and learned how to create a website from scratch.

What's next for Cycle Sisters

Adding comments to “Ask a Friend” blog posts -- they currently only include voting systems for users to share the most effective and popular period products, but adding comments would help users understand what's best for them, depending on their situations and preferences. Allowing for more data input, such as diet and changes in weight, to see how they affect menstrual cycles Creating interactive polls in appropriate articles (using a database on web server) Make graphs more interactive -- allowing users to reformat graphs or make their own graphs comparing two factors would allow them to see certain correlations.

Share this project: