Zeal

Inspiration

On our path to self-improvement, many people often start out at the gym. We are often told that when you start out at the gym, you should get a gym buddy to help motivate you, and push you to keep coming back. We thought this idea of a “gym buddy” could also be applied to any goal we set for ourselves, and would greatly increase our chances of success. So, we had the idea to have a goal tracking app that friends can look into, track, and help each other complete goals. But we did not want to stop with just one factor of motivation. We wanted to expand the app to include as many of these factors to increase our chances of success with goals over the long term.

What it does

Zeal was designed from the ground up with the factors of motivation in mind. Motivation is hard. Motivation is what allows you to work towards and complete your goal, and while it starts high in the first few days of a new goal, it can quickly taper off after a few weeks as you try to make progress towards your new goal. This is where Zeal steps in. Zeal helps people accomplish their goals by putting our finger on the scale and helping people make the right choice. We do this by utilizing as many motivating factors as possible to increase the likelihood users will continue with their long term goals.

How we built it

We decided to use a framework (React with Next.js) that our group had very little experience working with. After much deliberation we settled on React and Next.js because they had easy integration with vercel deployment, Server Side Rendering, Hot Reloading, and the simple API/File routing in Next.js. These features were important to us as they would simplify the development process, and allow us to focus on improving the overall quality of the app. We also decided to use Tailwind, because Tailwind vastly reduces the amount of unnecessary CSS needed, and makes the project more robust and scalable in the long term.

Challenges we ran into

We had many growing pains working with next js and its routing, learning the difference between server side and client side components, and what different function needed to be used in each was challenging to wrap our head around. We initially struggled with how to plan this app in a way where it did not feel like any other social media app, we initially planned to have comments, photos, and much more, but we pulled back on this and drew our design from our motivation goals, making a better result. We also struggled to unify the frontend, and the backend as we did not communicate effectively within our group at first, and had set up conflicting methods.

Accomplishments that we're proud of

We are incredibly proud that we were able to make, learn the building tools for, and develop a working app in a little over 30 hours. We are particularly proud of using a brand new technology stack to develop the app, as this is a great skill we will be able to apply moving forward. Among the specific features, we are proud of the design of the progress tracker which gives a clear visual summary of the longer-term achievement of goals. Finally, we are proud of how we stuck to the principles of our design and built our app around our big six factors of motivation.

What we learned

As a team we developed a great skill of setting priorities within our group to tackle tasks in order, this helped us to push through our tasks list and build up on features that were all interdependent on each other. We learned to put into practice the design derived from first principles, which allowed us to stay true to the guiding principles we set out to achieve when we started the project. We also learned a lot about the react framework with Next.js which we had never used prior, this will be incredibly useful when starting, and working on our future projects.

What's next for Zeal

The main feature that remains to implement is shared goals. Since this feature requires more complex work in the backend to link several goals together, we prioritized the functionality of the individual goals in order to demonstrate the main workflow of the app. However, the shared goals are a key part of our vision since they provide the social motivation that we believe to be very effective, and so it is the first priority among the pieces that did not get implemented. In addition, we have prioritized mobile devices in designing the user interface, so we would like to make some design adjustments to allow for a more pleasant experience on desktops. Finally, we would like to standardize the styling to make the code more consistent and clean.

Built With

• next.js
• postgresql
• react
• tailwind