Inspiration
Urbanization is a global trend, and Ontario is no exception. The rise of urbanization can have significant impacts on local ecosystems. These impacts include habitat loss, fragmentation of green space, and an increase in invasive species. To maintain the health and biodiversity of local ecosystems, it is important to implement measures to mitigate these impacts, which is essential for the well-being of wildlife and maintaining a healthier Earth.
We were inspired by Donna Klein, an advocate for monarch butterflies, who spread awareness about the importance of planting milkweed to support the survival of monarch butterflies. This inspired us to think of an initiative to encourage and support people who live in urban populations to start planting native plant species that promote local ecosystem growth.
What it does
Our project takes the user’s location and creates a selection of the native plant species that the user can choose from to plant and support the local ecosystem. Once a plant is selected, the user is given information about how the plant benefits the ecosystem, instructions on how to plant it, and the recommended environmental conditions for growth.
How we built it
We used Figma to first design our wireframe, and then a high functioning prototype. When building the actual application our tech stack comprised of co:here, Node, Express, Javascript, HTML, and CSS. We set up the backend and server with Express while the front end was comprised entirely of HTML, CSS, and Javascript. We used co:here to retrieve data on native plant species to populate our plant cards.
Challenges we ran into
While working with co:here, our biggest challenge is to navigate through the co:here APIs and determine which ones will be applicable to our project. Due to our lack of experience with integrating AI into coding before this, we had to work around identifying the key words such that the output is to our expectation, i.e. no bullet points and just names of the plants. Moreover, this opportunity also allowed us to understand the advantages- less time consumption for tedious tasks (data-scraping, connecting with search engines), as well as limitations - the output format can be quite unpredictable, and we would have to spend time to train the AI for desired outputs. It was an eye opening experience to understanding how APIs work and how AI tools such as co:here can be applied to projects of varying complexity and functionality.
Additionally, we had some issues setting up the Express server. After much trials-and-errors we figured out that the server had not been initialised correctly. We returned to the basics and after following a tutorial and using some mentor help we were successful.
Other challenges we faced were translating our ideas and designs into code. It’s exciting to have fun designs but writing code to reflect the design can be hard especially since we were limited to more rigid code with flexbox or grids.
Accomplishments that we're proud of
We’re proud that we were able to use co:here to create a functional product. Since this was our first time using AI, we knew we were going to face many obstacles. Each obstacle was a learning experience and we’re excited that we were able to learn and eventually set up a program with co:here.
We’re also proud that we were able to independently set up a server. We started the project by using a Live Server Extension which was useful at the time but prevented further backend progress with node or express. By getting our own server set up we were able to customize our project and make it functional.
What we learned
One thing we learned was how to use co:here to retrieve information. This was our first time working with AI-type software.
We learned how important it is to plan before coding. It is necessary to have a prototype going before beginning the actual coding, this will prevent unnecessary changes and backtracking. We initially started the coding process right after having a wireframe done, although this worked for the backend, it proved messy for the frontend. Everyone had different ideas for the design and we ended up with pages that looked very different from one another.
We also learned the importance of communication. In the future it might be better to split up tasks more clearly by using a project management software such as Trello. This way we know exactly what is being worked on and which tasks still need to be completed.
What's next for Flora
We would like to develop a filtering system for Co:here so we can more precisely output the data that is relevant to our product. We would also like to implement a CSS framework to make our design more coherent, such as Tailwind. We would also like to explore features with .ejs files and take advantage of the ability to use javascript code directly within the html. In the future, we would also like to add some sort of AI API that can find images for the associated plants in the program.
Log in or sign up for Devpost to join the conversation.