Caffeine Checker

Inspiration

We were concerned about the amount of caffeine we would be consuming over the course of this hackathon and wanted a way to make sure that we were following federal guidelines. We also thought that this would be a useful website for others to use to help monitor their daily amount of caffeine and hopefully help people be more health conscious when deciding how many caffeinated beverages to have.

What it does

This website allows the user to select a beverage from a pre-determined list of drinks, enter the size of the drink, and how many they had. That information is then passed to the python server, that searches through the database for the entry with a matching name. The data from the database entry is then used to determine the amount of caffeine in each beverage and the total amount of caffeine consumed. That information is then passed back to the frontend and displayed to the user. The total amount of caffeine was used to determine how much of a progress bar was filled, showing the amount of caffeine consumed compared to FDA daily regulations.

How we built it

The frontend was designed and built in react with Next.js. The front end handled styling and sent get requests so certain features such as the loading bar and dropdown menu can be populated based on our query results .We designed a backend using python with flask to create api endpoints and to connect to our mongodb database. This handled the actual queries made to the database as well as the logic needed from those query results.

Kate: I specifically worked on the backend on writing python code that would be able to find specific data given a database entry. I also wrote functions that could use that data to return the values we wanted. Specifically, I figured out how to take the size and quantity inputs and multiply them by the amount of caffeine in each ounce of the drink to return the total amount of caffeine for all drinks entered.

Juan: I created a lot of the front end components with reactjs (using Nextjs as the framework) and tailwind css. Most of the front end functionality was created using react and tracked the changes through there with useState().

Jose: I created the MongoDB database using atlas and loaded it with information we sourced from online resources. I was also in charge of creating the connection endpoints for the database and handled the Api endpoints for the backend.

Challenges We Ran into

Kate: The main challenge I faced was parsing through the data structure we used to figure out a way to manipulate that data and return variables in a form that the API could communicate to the front end. This was difficult for me because I don't have a ton of experience parsing through larger data structures, especially when they are written in a language other than python. But, after a lot of print statements to figure out the best syntax to use, I was able to get numbers out of the database, calculate the necessary values, and pass those values on to the API.

Juan: When trying to get the backend server (flask) to process information on a POST request, there were a lot of cors errrors we were running into which I have never worked with but eventually we debugged and was able to get the backend to process information like it should after going line by line to find the bug. Another thing we ran into was that there was a conflict with the Select component (from NextUI) and the "key" element from react (when iterating through an array a key is required for the parent element) I realized that the SelectItem element also required the key but it was to link the dropdown option with what was chosen and NextUI/ReactJS would both use the key element. And Realized in the end that it was a backend problem and had to declare a variable to be a certain type which allowed the program to run.

Jose: Getting the API to work. We had a ton of issues getting the information from our database to present on the frontend, as well as getting the user-input data to pass to the backend in a way that the backend could process. One of the biggest challenges we had was getting the drink drop-down menu to populate based on the information we had in the database. We also struggled with passing the user-input to the backend in a way that python understood for the necessary calculations. A lot of our challenges came from figuring out how to integrate the data from our front and back in a way that all the different languages could actually use.

Accomplishments that we're proud of

Kate: I'm really proud of building an array using lists and dictionaries in python and then being able to quickly call that info from those arrays. While that portion of the code was only used as a test database to make sure the rest of the code worked (the database for the website is currently MongoDB, not python), I am really proud that I learned how to parse through a larger data structure.

Juan: Being able to use a website that uses 2 separate servers, one for the backend and one for the frontend. Helping debug a python file (I don't use python). Learned how Apis can be served with flask. I worked with an API fetch request from another server backend. Implementing MongoDB to populate the dropdown onload and also to store the information for our db. "GOING TO SING KARAOKE LOL"

Jose: I surprised myself in the lessons I was able to take with me from previous hackathons, I learned about the importance of time management and the necessity of asking for help from my peers. I was also surprised how I was able to creating the routing and the api for the first time ever, this was a recurring problem I had in every hackathon where the backend frightened me but I rose to the challenge and was able to create a successful backend

What we learned

Kate: I learned so freaking much. Coming into this Hackathon I really only knew basic python. Over this weekend I learned how to make more complex data structures in python. I also learned how to connect python to a different database and recall and use that information. I also learned a lot about how to properly format code for readability. I learned how to write data structures in json, how to use flask with python, how to read react and next, how to work with a team in github, how to work with a team for coding projects in general, and so much more. Basically, if it was more than writing to a list or doing simple math in python, I learned how to do it this weekend. I'm not an expert on really any of the new stuff, but I did get to see how to work with all of these different languages, and learn more about how different parts of a webpage talk to each other. Overall, I would say that I spent more time learning how to code than remembering how to code, which seems like a successful Hackathon.

Juan: I learned new things about python like how certain types should be declared in order for a function to run properly, a lot of python syntax like how everything needs to be spaced exactly. Learning about how post requests can mess with current state and how to work around this problem. Passing information between backend and configuring each server to accept information. Learned about certain MongoDB queries and how to interact with it via API. Debugging code line by line and seeing what part of the program breaks something.

Jose: I learned the importance of debugging and following the programs logic at every step, when we had issues connecting the front and backend we learned from one of the mentors that sometimes creating print statements at every step will allow us to see what data is being pass and where the program failed. It was this lesson that allowed us to backtrack and pinpoint the exact location where our code kept failing and fix it.

What's next for Caffeine Checker

The first thing we want to do is try and expand the drink database. When we expand the database, we also want to switch the drop-down menu for drink input into a query form that auto-populates likely words based on what the user is typing. We also want to make it so that the progress bar can track the amount of caffeine from multiple different drinks over the course of the same day. We are also considering adding other useful information about the drinks, such as calories and/or sugar content.