🌳 Treezy

Table of Contents

• Project Overview
• Deployment
• Learning Goals
• Technologies and Tools
• Project Reflections
• Roadmap
• Setup
• Contributors
• Organizational Resources
• Other Resources

Project Overview

Treezy is a full-stack environmental application that allows a user to input their Colorado zip code and see what trees they are able to grow in their respective growing/hardiness zone. The U.S. has 13 hardiness zones (Treezy currently uses 8 of these) which have different climate implications that determine what plant-life would thrive in a given geographic area. Our goal is to inform our user of not only what kind of trees they could grow where they live, but also more information about those trees, such as their mature height, growing speed, foliage color, and more!

Back-end: We hand-rolled our data in Google Sheets, used Express for our server, and PostgreSQL as our database. We deployed our API to Heroku for easy access to our endpoints instead of running the API locally.

Front-end: We used React, React Router, Hooks, and more. We used end-to-end (E2E) testing on Treezy using Cypress and deployed to Vercel.

Deployment

View our deployed Treezy app.

Learning Goals

This project is a part of Turing School of Software and Design's Stretch Tech.

• Self-teach new technologies quickly
• Create an API
• Create a database
• Deploy an API
• Write modular, reusable components, and create a single-page application that simulates multiple pages using Router and conditional rendering
• Implement a robust testing suite using Cypress
• Create a dashboard that is easy to use and displays information in a clear way
• Make network requests to our API endpoints to retrieve and manipulate data

Technologies and Tools

• Express
• PostgreSQL
• Heroku
• JavaScript
• React
• JSX
• HTML
• Figma
• CSS
• Fetch API
• Cypress
• NPM
• Webpack
• Vercel

Project Reflections

Challenges

• We had to reset and reseed our database many times to reformat the data, fix broken links, and fill in incomplete tree information
• CSS was difficult because each component was interconnected and then bundled by Webpack
• Refreshing the application would reset state, which would leave all data fields as undefined
• We struggled to realize that we needed an endpoint to return a single tree in addition to the endpoints we had already created
• We discovered a little too late that our code editors had different formatting rules and needed to update settings for uniformity

Wins

• Successfully seeded and deployed our databse
• Created multiple (3) GET endpoints for our API
• Dynamically rendered our tree images as some trees had more/less images than others
• Successfully filtered trees by growing zone and zip code
• We alotted time to research what we needed from the new technologies and implemented them in a timely and effective manner

Roadmap

Future features could include:

• More zip codes to reach the rest of the country
• More trees to provide the user with added variety
• Functionality to determine if a user has purchased a tree
• More pages to: browse all trees in the database, learn general information about trees, learn about the positive environmental impact of trees, and provide more in-depth information about tree care and planting (e.g., informing the user to call 811 prior to planting, where a certain tree should be strategically placed, etc.)
• Responsiveness on multiple devices

Setup

1. Fork and clone down this repository.
2. cd into the root directory and install dependencies by running npm install.
3. To run the server, use command npm start in the terminal. To stop the local server, use command Control + C. Closing the terminal without stopping the server first could allow the server to continue to run in the background and cause problems.
4. Running npm start should direct you to the application, but you can always access the website by visiting http://localhost:3000/.
5. For more information about the API, visit Treezy-API.

Contributors

Irmak Erdem

• LinkedIn
• GitHub

Betul Baskan

• LinkedIn
• GitHub

Rachel Bock

• LinkedIn
• GitHub

Brandon Ainsworth

• LinkedIn
• GitHub

Organizational Resources

• Project Board
• Figma
• FigJam

Other Resources

• Stack Overflow
• Convert CSV to SQL
• US Zip Code List
• Tree Data - Nature Hills
• Tania Rascia - Express Tutorial
• Nick Ciliak - Button Inspiration
• Artan Myrtolli - Mentor
• John Hennerich - Backend Consultant