Growth Plans

Origin story:

Plant mom gone Thanos killing all her plants. What if we could gamefy this? Could we combine virtual plant parenting and adulting? So it was born!

Features:

*Page is formatted to be displayed on half of the window to allow users to have other windows open (e-mail, calendars, contacts, etc)

On the banner, an randomized inspirational quote will render and refresh with the page each time to a new one.

Landing Page - In-Progress Nursery

Landing page will display the in-progress nursery to allow users to plan their day around their current to-do list, upcoming deadlines

As you complete a task, click "done" and your little plant will grow in stages! Plant images have up to 6 different stages. Users can be incentivized and celebrate the small victories seeing their plant grow and blossom!

Illustration done by Maria at Fiverr. Check out her work! https://www.fiverr.com/mariangehc

Set Plan(t) Goals

Set, edit or remove your own goals to include a description of your goal, difficulty level, reason why you want to complete the goal, due date and a dynamic addition of subtasks. Click send to nursery to add the goal to your nursery or cancel.

Trophy Garden

Unlock Trophies in your garden the more goals you complete. Unlocking new trophies will increase in difficulty as you complete more goals.

Watering Station

Click "water" on your plant or go to the Watering station to set time aside to work on your goal. This section offers a hover over feature to teach users about the 5 second rule along with a Promodoro Timer with an option for lofi/focus music, so you can focus on completing your tasks.

Celebrate

Finally, the Celebrate button will show the user a strolling component in an "ending movie credits" style displaying all the goals the user has completed, along with a hype dancing Groot and Celebrate music.

Dependencies:

"@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.60", "@mui/icons-material": "^5.3.1", "@mui/lab": "^5.0.0-alpha.67", "@mui/material": "^5.3.1", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "axios": "^0.25.0", "bootstrap": "5.1.3", "gh-pages": "^3.2.3", "react": "^17.0.2", "react-bootstrap": "^2.1.2", "react-dnd": "^15.1.1", "react-dnd-html5-backend": "^15.1.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.4"

Installation and Setup Instructions

Clone this repository. You will need node and npm installed globally on your machine.

Installation:

npm install

To Run Test Suite:

npm test

To Start Server:

npm start

To Visit App on your platform: localhost:3000

Deployed sample found here: https://dynamicdev3000.github.io/growthplans/

Page's back-end is currently deployed through Heroku. You'd need your own back-end to save your own data. Back-end can be found here: https://github.com/DynamicDev3000/growthplans-back-end