Macaron

Inspiration

As someone who struggled to reach my fitness goals and stay consistent, I found that tracking my macros was a powerful tool in achieving success. This journey inspired me to create Macaron, a platform designed to help others take control of their nutrition and reach their fitness goals. With the right tools and support, I truly believe anyone can achieve their desired results.

What it does

Macaron is a software-as-a-service (SaaS) platform that allows users to track their macronutrient intake to help them achieve their fitness goals. The platform primarily integrates Wix Velo APIs and the USDA FoodData Central API to make tracking macros as seamless as possible.

How I built it

The frontend was built using HTML, CSS, and JavaScript. I integrated the QuaggaJS barcode scanner, Chart.JS charting element, and Flatpickr datepicker in iframe elements that communicate with my frontend page code via postMessage to allow users to easily scan, visualize, and track their food intake.

I used Wix Velo to easily build the backend of the platform. I created a backend function to assign and remove weekly badges to members, automated with the job scheduler. I also created a backend function to allow a user to delete their own member account. But the backend is remarkably light; Wix has built-in user authentication, database management, and automated email notifications with no need for additional code.

Challenges I ran into

One of the main challenges I faced was accurately tracking a user's progress, which required complex calculations involving multiple collections and real-time updates. When a food entry is logged into the database, its macronutrient details need to be accurately calculated based on the servings eaten, and then compared against a user's current daily goals to determine the amount of macronutrients eaten and calculate the current progress toward their goal. This required careful attention to detail to ensure accuracy.

I also had to develop logic for handling a variety of user actions, such as updating goals, notes, and deleting foods from their database, all of which needed to be reflected in their daily progress. In addition, I needed to incorporate a flatpickr datepicker element to allow users to change the date on their dashboard and view their progress for that day.

One of the most significant challenges was ensuring that a user's daily progress versus their goal was consistently calculated, even if they changed their goals daily. This required careful consideration of various edge cases and the development of robust logic to handle these scenarios.

Overall, the challenges I faced required a deeper understanding of the Wix Velo APIs than I originally thought, and involved significant debugging and testing to ensure the platform was working as intended.

Accomplishments that I'm proud of

One of my biggest accomplishments on the coding side was successfully integrating camera access into iframe elements for the barcode scanner (and the experimental OCR test page), then using postMessage to send the barcode data (or parsed photo data) to the frontend page code for use. I'm also proud of the logic for the Chart.Js iframe element, updating in real-time upon goal update, food entry, food deletion, or date change.

However, one of the most significant accomplishments I'm proud of is creating a visually appealing and user-friendly experience. I had a lot of fun developing a consistent and modern "brand", with Questrial font, themed container boxes, and original art and logos. The Feed, the social platform/forum, has realistic stock photo-style imagery reflecting macarons in various "poses" that correspond to each category. Colors have been carefully chosen and assigned to each macronutrient and other elements on the page for a cohesive look and feel.

Overall, I'm proud to have created a platform that helps users achieve their fitness goals and take control of their nutrition, all while providing a visually pleasing and intuitive experience.

What I learned

During the development of Macaron, I gained a lot of experience in developing a full-stack web application. I learned how to work with various APIs, especially with the Wix Velo APIs, to integrate third-party tools into my platform. Additionally, I learned about the importance of user experience and how it can make or break a platform. I also gained a greater appreciation for the complexity of developing a nutrition tracking application, as there are many intricate calculations that need to be done in the background to ensure that users receive accurate data.

One of the most important things I learned during this project was perseverance. Macaron started out as a simple final project for my CS50 class, but I was inspired by the Wix Make-a-SaaS Hackathon to take it to the next level. However, as I started working on it, I realized that it was a lot more complex than I originally thought. There were many challenges along the way, but with each obstacle, I learned something new and grew as a developer. Every success made every failure, every error, and every late night worth it. Despite being a beginner developer, I gained valuable insights and experience through developing this project, and it was an invaluable asset to my coding future.

What's next for Macaron

Moving forward, I plan to continue improving and expanding the platform. As a beginner developer, I am constantly looking for ways to improve Macaron and make it more useful for early adopters. Following the hackathon suggestion, I launched the platform three weeks before the due date to get feedback from users and implement their suggestions.

I'm excited to share that I am currently developing three new features that will soon be available on Macaron. First, I am integrating OCR Photo Recognition (available at /testingsandbox), which allows users to log their food intake simply by taking a photo of a nutrition label. By leveraging the Google Vision API, the code will automatically recognize the text and extract nutritional information, making it easy to log meals and stay on track with macronutrient goals.

Secondly, I am adding a search bar on the "add entry" page to query the USDA Food Data Central Database (available at /searchtest). This feature will enable users to find nutritional information for food items even if they don't have the nutrition label handy, making it more convenient to log their meals.

Lastly, I am working on a feature that will be particularly useful for people who have nocturnal lifestyles or work night shifts. Currently, users who are awake and eating over the course of two calendar days face challenges in logging their macronutrient intake accurately. The Customizable 24-Hour Tracking Period allows users to define any 24-hour period as their "day," making it possible for them to log their meals more accurately. For example, users could choose to track their daily intake from 8am to 8am instead of the default 12am to 12am. (An early version of this feature's UI can be previewed at /daychange)

In addition to these features, I am considering integrating an OpenAI API-based chatbot that can generate daily meal plans for users based on their current macronutrient goals, with logic for handling allergies and routinely eaten or favorite foods.

By implementing these features, I aim to make Macaron even more user-friendly and adaptable to individual needs. I will continue to improve and expand the platform based on user feedback and strive to help users reach their fitness goals effortlessly.

Built With

• charts.js
• css
• date-fns
• flatpickr
• google-vision-api
• html
• javascript
• openfoodfacts-api
• quagga-js
• usda-fooddata-central-api
• velo
• wix