Go With The Flow

Does maintaining a workout routine around your menstrual cycle seem like an impossible task? Now with our app “Go with the Flow," you can get your own personalized recommendations for exercises.

Comment

Inspiration

Our source of inspiration was wanting to make a workout plan based around our period cycle. Each of us knows what it feels like to not have enough energy to do an intense workout, but still wanting to exercise while also having no idea what level of intensity would be best. According to several studies, certain workouts are best for each phase of the menstrual cycle. Every time we have been faced with this challenge, we had no solution, but now we finally do!

What it does

What our app does is allow you to calculate what days your period is going to be on, and what type of workouts you should do every week of the month, not just the week of your period. In regards to the capability of the app due to the small amount of time to generate this project, we were only able to give the user this month of December to plan out their periods. We also only have 4 different day-length options for how long your period will be. So our app does have limitations.

How we built it

We built the app using the Code.org App Lab, and JavaScript. Code.org also has its own design capabilities and we only minorly applied those for things like buttons, and drop-down menus. While the Java Script we just hand-coded. In regards to version control, we used a GitHub repository to make sure none of the code that we wanted to stay was accidentally deleted. But, to push our code to GitHub we had to put it into Replit first, as you cannot push the code from the App Lab. However, we designed the User Interface using Figma and using the many different plugins Figma offers. Then we converted the files/pages from Figma into the App Lab. We then used the App Lab to create and position the interactive parts of the interface. Then we coded all the interactive features onto it using JavaScript on Replit and pushed that into GitHub.

Challenges we ran into

We ran into numerous problems in the beginning of the hackathon, as we did not know what program we were going to use to make our app. Firstly, we thought we were going to use just Replit and Figma, however every time we exported our layout from Figma, it would be skewed on Replit so we had to figure out a way to make it look right. We decided to save the layout from Figma and use it as an image within Replit. We had planned to simply make interactive buttons on top of the ones from the images, however we soon figured out we could not get the placement correct. So, we used Codedo.org’s App Lab in order to correctly place the interactive parts of the layout, and then we were able to correctly code the app.

Accomplishments that we're proud of

We are very proud of the fact that we were able to learn how to use Figma, and also how to export it, as it was a big hurdle for us to jump over so we could start coding. We are also proud of the way our app looks because it is a big jump from the last project we all did together, and it is showing improvement in our skills.

What we learned

Everyone on this team is a fairly new coder, each of us having less than 6 months of experience with only HTML and CSS, and only two of us having JavaScript experience. However, throughout the course of these 24 hours, we have learned so many different things that we can do with JavaScript, and how to use it to the benefit of our app. We also learned a lot about the different things you can do on Figma, and how to make the user interface aesthetically pleasing. Overall, the hackathon was very beneficial towards all of our technology-related skills, and development because it forced us to think outside of the box to come up with solutions.

What's next for Go with the Flow

For the future of Go With The Flow, we want to take another stab at the Replit, to instead try to make it a functional website, and try to get all the formatting right. Also, it would benefit us to add more user-friendly interfaces and options. For example, add more period day options, and actually, track out when your next period will be. So, that probably includes putting in a functional calendar and adding more JavaScript. Finally, we would want to clean up the calendar a bit to make it aesthetically look and move better.

Built With

Share this project:

Updates