In the final month of my 16 week full stack developer bootcamp with the School of Code, we were given our final project brief, to design, build and deploy a web application using the skills we had developed over the last three months of the course.
- Ana Raducanu
- Spencer Ley
- Luis Rodriguez Valido
- Danny Ryan
- Me (Liz Robson)
During the first week of the project, we started the ideation process by discussing problems we have encountered during the intensive bootcamp experience, for example, staying motivated and finding time for further learning outside of bootcamp hours. This led us to discussing how difficult it is to stick to new habits when you are trying to build them. This led us to discussing how difficult it is to stick to new habits when you are trying to build them. We've all been there, often it feels like achieving our goals, whether it’s sticking to 100 days of code, mastering a new language, or conquering a marathon starts with good intentions but once the initial excitement fades, motivation vanishes and we're back to our old routines, feeling defeated.
We came to the conclusion that there was potential in pursuing a solution to this problem and it kick-started our inspiration for the app. We undertook user research to test our ideas and extensive competitor research.
People need a simple yet engaging habit tracking app to help them build habits in a fun, social and accountable way, without distracting from what’s important.
So we built Habitap, a mobile-first app which turns goal-setting into a rewarding, fun and collaborative journey. Users focus on up to five habits that truly matter, check in daily for just a couple of minutes to update their progress, and witness their virtual plant flourish. No cluttered menus, no endless notifications, just a simple interface that celebrates every small step towards your goal. Share with your friends, cheer each other on, and watch your collective garden grow.
After careful consideration, we chose TypeScript and Next.js as we felt they would enhance our code quality and the app's performance respectively. The component-based architecture of React allowed us to reuse components throughout the app in the front-end and the developer-friendly nature and strong documentation for Supabase's Authentication and Database tools made it a great choice for our back-end. Given the time constraints on the project, we also chose to use these technologies as we had worked with them on the bootcamp and could use the project to advance our skills further.
- Typescript
- Next.js
- React
- Supabase Authentication
- Supabase Database
- Figma
- Setting up the databases and authentication on Supabase and connecting it to the front-end
- Keeping the team on track and focused on sprint goals
- Fixing bugs to ensure CI/CD
- Translated user needs into user stories
- Scrum Master role
We found Authentication difficult to implement and didn't build it into our app until the last week. The issue being we had already built the majority of the app to render on the client-side whereas Authentication ideally needs to happen on the server-side. We tried many different routes, tried and failed many times! Which made it particularly rewarding when we managed to resolve it in the final days.
- Utilise the server-side rendering capabilities of Next.js more
- Gain a better understanding of client-side vs. server-side rendering
- Consider which version of a programming language to use - we chose Next 14 which hadn't been out long so there wasn't a lot of documentation to refer to. In hindsight as beginners, we should've used Next 13.
- Do more user testing throughout the project
We would like users to be able to select the plants they choose to grow, rather than a preset one. We would also like to tie the completion of users' plants to a charitable donation to the British Bee Charity. Another feature we would like to build is a team hive - social accountability was an important aspect of our app. We would look at users being able to join a group hive based on filtering and allow users to find other users who are looking to achieve similar goals, or being able to invite your contacts to your hive.
"We deployed our app to Vercel in the first week of the build which put is in a great position to practice continuous integration and it really helped us with bug fixes and conflicts. Liz Robson
"We encouraged open and transparent communication where team members felt heard and valued. We also recognised that diverse perspectives can lead to better outcomes." Ana Raducanu
"We scoped and defined the key features for our app from our huge number of features to ones that our target users wanted the most, which allowed us to focus on having less features but doing those features incredibly well." Spencer Ley
- Clone down the repo:
- Install dependencies:
git clone https://github.com/liz-robson/SoC-final-project.git
npm i