Habit-at allows users to track habit progress and consistency using 3D flower models for visualization. Habits are represented as flowers that grow or shrink based on how close the user follows their goals.
Back End Team - BE repo
Flower models were created by Yashar.
We used Cypress to implement E2E testing for this app. To run the tests:
git clonethis repocdinto the directorynpm ito install dependenciesnpm startand open http://localhost:3000 in your browsernpm run cypress:openwill start Cypress and open up test window- click
E2E testing - when finished,
ctrl + cto stop running local server
Habit-at is a final group project as students at Turing. The goal was to showcase the technologies we've learned and expand upon our knowledge through implenting new technologies. We used an agile process and gained experience working with both a front-end and back-end team. Our application uses CircleCI for continuous integration and deployment with the front-end being deployed on Heroku.
An initial hurdle was determining how to implement a 3D scene into our app and how to go about dynamically rendering flowers based on user input. We settled on using Three.js and React Three Fiber to load our scene, and we used React Spring to animate our flowers growth. Throughout this project, we implemented multiple libraries to streamline our code and while using them can simplify code, there was a large learning curve for understanding how to access and manipulate elements.
- User login with OAuth
- Enhancing flower models to show growth vs wilting