Sweat and Syntax

personalized plan page 2
personalized plan page 1
Signup page
About us page
Login page
workout goal input page

Inspiration

The idea for Sweat and Syntax was inspired by the need for accessible, personalized fitness planning tools. Many people struggle to find workout plans tailored to their unique body metrics and goals, often feeling overwhelmed by generic solutions. We wanted to bridge this gap by creating an application that leverages data to generate customized fitness plans, making health and fitness more attainable for everyone.

What it does

Sweat and Syntax is a fitness planning application that enables users to input their personal body metrics, such as weight, height, and fitness level, along with their specific fitness goals. The app uses this data to generate personalized fitness plans tailored to the user’s unique needs. It also provides progress tracking and recommendations to help users stay on track and achieve their goals.

How we built it

We developed Sweat and Syntax using React.js for the front end to create an interactive and responsive user interface. The backend was built with Flask, structured to efficiently handle user data and fitness plan generation logic. The backend provides RESTful APIs to process user inputs and return personalized fitness plans, which are then dynamically displayed on the front end. This architecture ensures seamless communication between the client and server, offering a smooth user experience.

Challenges we ran into

Session Cookies Issue

One of the challenges we faced during development was the inability to add cookies to the session. This issue arose due to mismatched configurations between the backend Flask server and the frontend React application. Specifically, the backend was set to enforce secure cookies and required SameSite attributes, while the frontend requests were not aligned with these security constraints.

We identified that the Flask session required cookies to be sent with specific headers, but the frontend Axios requests were not configured to include credentials by default. As a result, session cookies were not stored properly, leading to authentication failures and state inconsistencies.

Then we configured the Flask server to allow cross-origin requests and include credentials, updated Axios requests on the frontend to send cookies with credentials and lastly, ensured the session cookie attributes matched the frontend requirements by explicitly defining them in Flask.

This resolved the issue, allowing cookies to be properly exchanged between the frontend and backend, enabling seamless session management.

Backend and Frontend Data Mismatch

Another challenge was handling data inconsistencies between the backend and frontend. The backend expected specific data types and required fields in the JSON payload, but the frontend sometimes sent incomplete or invalid data due to insufficient validation.

For example, the email field in the user input form was sent as an empty string, leading to a 400 Bad Request error. Debugging this issue required inspecting both the request payload and the server-side validation logic.

To solve this, we added form validation in the frontend to ensure required fields like email were not left blank before submission, improved backend validation with clear error messages to assist debugging and logged all incoming requests and responses to quickly identify discrepancies.

These fixes ensured smoother communication between the backend and frontend, reducing errors and improving the overall stability of the application.

Accomplishments that we're proud of

We’re proud of successfully integrating the frontend and backend, along with the database, to create a fully functional full-stack application. This end-to-end integration allowed us to seamlessly connect the user interface with the backend logic and data storage, ensuring a smooth and dynamic user experience. Building a complete full-stack project in a short timeframe was a significant achievement for our team, especially considering the complexity of coordinating between various technologies and components.

What we learned

This project taught us the importance of balancing simplicity and functionality when building a user-facing application. We gained valuable experience in designing algorithms for personalized recommendations and in developing a responsive frontend that enhances user engagement. Additionally, we learned how to integrate fitness logic with scalable backend architecture. For most of our team, this was our first hackathon, which presented a unique learning curve. We learned how to effectively divide tasks, collaborate on a larger codebase, and seamlessly integrate our individual contributions into a cohesive final product. This experience has significantly improved our teamwork and problem-solving skills under tight deadlines.

What's next for Sweat and Syntax

In the future, we aim to incorporate AI-driven plan adjustments based on user progress and feedback, add nutritional planning features, and expand the application’s database to include a broader range of workout options. Ultimately, we hope to make Sweat and Syntax a comprehensive fitness and wellness companion.