SketchFit

SketchFit is a workout planner website. It offers pleasing user interface and experience, convenient authentincation options and broad database of exercises for finely tuning workout routine.

Comment 1

SketchFit

Our inspiration

Me and my teammate both attend a gym and support healthy life. However, most of the workout planners in the net does not offer finely tuned workout planners and recommendations. We believe that a beginner should have a proper instructions and his own finely tuned workout plan. Therefore, we decided to build the planner website ourselves.

What it does

The user experience of our website is quite simple, yet effective. The user first authenticates with one of given providers: Discord and Github. Then, they proceed to edit their personal information about their height, weight, gender and goal. After that, the list of exercises that can be filtered according to target muscle group and equipment is shown for the user. They can view a description about benefits or guidelines of each exercise. They add exercises to their workout by clicking on 'Add' button and filling out sets, reps, and rest fields. These exercises appear on their profile, where they can be further deleted or edited. The recommendations page contain information for the user's specific goal, whether it be muscle gain, fat loss or maintenance.

How we built it

HTML5 is a basic part of any website, so I think it is obvious we also used it. As for the programming languages we worked during this project we can include only Typescript. But there is more than that. The core framework is NextJS. It gives all benefits of ReactJS with SEO-friendly server-side rendering and static generation options, built-in page routing and finely configurable backend. For the database we used PostgreSQL. But the ORM of Prisma allowed us to not interact with SQL queries directly. The client side accessed backend via tRPC, which makes Typescript even more type-safe by discouraging the use of RESTful APIs. The user can authenticate via Discord or Github thanks to the NextAuthJS module. We also made use of TailwindCSS for designing our website. As an editor we used Neovim and OS is Arch Linux.

Challenges we ran into

There were a lot of bugs during coding. One wise man said if debugging is removing bugs code, then programming must be the process of putting bugs into it. So no project is safe from bugs. Particularly, we struggled to make use of tRPC procedures without running into undefined or null behaviour. Eventually we overcame this by putting dozens of type checks.

Accomplishments that we're proud of

I think the whole project is an accomplishment. Because we could achieve every goal we wanted and implemented every feature we planned. We could also make it scalable for new features and functions.

What we learned

We learned to use various technologies, making beautiful presentations and video editing. That is why, we are thankful to GitInitHackathon sponsors.

What's next for SketchFit

We wanted to add ready to use workout plans. But was not making it till the deadline. However we will implement later after the Hackathon. We also plan to deploy it to VPS on Ubuntu or if we could dockerize it properly then we could use AWS for this purpose.

Built With

Share this project:

Updates