Skip to content

Latest commit

 

History

History
52 lines (41 loc) · 3.31 KB

README.md

File metadata and controls

52 lines (41 loc) · 3.31 KB

Habit-at

About

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.

Contributors

Front End Team

Back End Team - BE repo

Preview

Screenshot 2024-05-19 at 9 15 08 PM

Technologies Used

react javascript Three.js react-router cypress Tailwind CirclCi blender

Flower models were created by Yashar.

Cypress Testing

We used Cypress to implement E2E testing for this app. To run the tests:

  • git clone this repo
  • cd into the directory
  • npm i to install dependencies
  • npm start and open http://localhost:3000 in your browser
  • npm run cypress:open will start Cypress and open up test window
  • click E2E testing
  • when finished, ctrl + c to stop running local server

Background

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.

Challenges and Wins

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.

Future Direction

  • User login with OAuth
  • Enhancing flower models to show growth vs wilting