RECme

Inspiration

Working out is critical to staying happy and healthy in college but traditionally toxic campus gym environments are often hostile towards newcomers. Many of our team members have felt intimidated by the weight room inside the Rice rec center and know that technology can help us do better to teardown the gatekeeping of traditional gym culture on college campuses.

What it does

RECme(www.recme.tech) is an open-source platform that aims to help make campus gyms more accessible to those without extensive gym experience. Users can easily find gym buddies at their level to learn with them or experienced gym buddies to show them the ropes. Having a buddy to work out with will make the gym environment less intimidating and build an accessible gym culture. RECme uses google authentication to verify that users are both from the university and who they purport to be, giving RECme users peace of mind when they meet up with their workout buddies. RECme has the functionality to post a workout session, search workout sessions, set profile preferences, and join and leave workout sessions.

How we built it

The front-end is written in react using fully custom HTML and CSS written by the team (no CSS frameworks). The UI/UX was first sketched, then honed to adopt a sleek and simplistic look, scratch coded in straight HTML and CSS, and finally implemented using the ReactJs framework. The design is mobile-first, but even though we didn't have time to build a desktop-specific layout, the app is still responsive in all viewports. For the back-end, RECme uses Google's Firebase to register and sign users into the app, as well as Firebase's built-in Firestore database to store and manage workout sessions in real-time. We installed the firebase npm module to integrate it with React.

Challenges we ran into

One major challenge we ran into was designing the backend with firebase. A bug in our code spammed the firebase servers with read requests, leading us to max out our daily allowance of 50,000 in mere minutes. We painstakingly searched our code to fix any potential bugs and tried again on a new google account but the problem still persisted. Finally, after more debugging, we switched the database to yet a third google account and confirmed we fixed the bug.

Another major challenge we ran into was that we designed our GUI in HTML and CSS but when we tried to implement it in react, the formatting was drastically different. We ultimately needed to rewrite a large portion of our HTML and some of our CSS to make the app functional and stylish.

Accomplishments that we're proud of

We are proud of pulling off a very technically complex app with >1000 lines of code written within a 36-hour period, despite having two team members who were complete beginners to web development. Writing our HTML and CSS from scratch, while technically daunting, allowed us to maintain granular control over the UI/UX and forced us to make intentional design decisions towards a clean, stylized, and minimalistic user experience primarily for mobile but with a decent desktop UI as well. We maintained a high-functioning team dynamic and delivered an app that successfully solves a real-life problem that faces real people on college campuses nationwide. We plan to continue to hone the app beyond HackRice 12 and grow our user base on campus.

What we learned

As a team of four freshmen taking on our first hackathon at Rice, HR12 was a learning experience. On our team, only Adrián had any experience using React, so integrating it into our project took some time for the whole team. Ryan and Joel also didn’t have any previous experience with HTML and CSS, so they spent a large part of their time watching tutorials to become accustomed to web development. For the video, no one had any experience with video editing, so Joel learned how to use Final Cut Pro. No one on our team has UI/UX design experience, so we consulted mentors and potential users to help rapidly iterate our UI ideas. Adrián had some experience doing back-end development with Python, but he had to learn how to use Firebase because of time constraints that didn't allow building and deploying a full API.

What's next for RECme

In the future, we plan to integrate new features that support larger college campuses that may have multiple student workout centers. We plan to build a design that is more optimized for desktop use, but even though our current one was primarily designed for mobile, it is serviceable on desktop as well. We also plan to add a direct message feature to allow for communication within the app (the current solution is email-based) and options to schedule weekly repeating workout sessions.

Built With

• css
• firebase
• firestore
• html
• javascript
• react
• vercel