What it does:

Purpose of Pixl Plant app is to incentivize users to take care of and acquire more plants by creating a virtual plant in the app. We used plants that are common such as sunflower, croton, and lilies. While also providing information on the plants that will aid in taking care of their virtual/real plant. The virtual plants are linked to:

  • A restAPI connected to mongoDB for fetching and adding plants.

How we built it

Our team built Pixl Plant by collaborating over GitHub and coding in HTML, JavaScript, react, mongoDB, materiaUI.

Problems we ran into:

Some challenges we ran into were formatting the login page’s “login” input fields, as well as having difficulties with implementing pictures of our plants. The pictures of the plants we had would not show due to errors in our code, but the problem was swiftly corrected.

Accomplishments that we're proud of:

Learned how to use react with material UI and learned how to implement animated backgrounds for the project. Also was able to complete the goals we set out for ourselves using the limited time we had while learning new languages. Handled errors more swiftly as time went on as the minutes ticked by we got better.

What we learned:

MaterialUi 5 is the latest version that was released a month before the event. A lot of the methods that people used in previous documentation was not available. We still figured it out and bypassed the issues.

What’s next for Pixl Plant:

As for Pixl Plant’s future, we plan on developing the application further by adding to our library of known plants and their specific watering habits, sunlight requirements, and other key facts. We also plan on adding fun activities to do in-app, like chat rooms, garden creation, and garden visiting by other users.

Pixelated images were hosted on a firebase storage. Login page accepts users credentials and displays error message when valid password requirements aren’t met.

All the links we used for the project are provided below including the converter used to change normal pictures to pixels. Any plant pixel we could not find we used the converter to change a normal picture to a pixel version.

GitHub Repo https://github.com/RamanChola/PlantWebApp.git

Converter Sites Image to pixel converter: https://giventofly.github.io/pixelit/

Website for pixel images: https://www.pinclipart.com/

Image Links Sunflower:


Easter Lilies: https://www.pinclipart.com/pindetail/ibTmbiJ_clip-art-easter-lilies-png-download/

Pixel room 1: https://www.pinterest.com/pin/759138080915780395/

Flower field: https://wallpaperaccess.com/1366x768-pixel-art

Croton: https://www.seekpng.com/png/full/301-3018351_croton-large-flowerpot.png

Golden Pothos: https://sharvaridesai.gitlab.io/hexo-theme-milan/Pothos/

Corn Plant: https://www.pngkit.com/bigpic/u2e6y3t4q8y3w7t4/

Moth Orchid: https://www.pngkit.com/bigpic/u2q8w7u2e6r5q8u2/

Built With

Share this project: