- Project Overview
- Deployment
- Learning Goals
- Technologies and Tools
- Project Reflections
- Roadmap
- Setup
- Contributors
- Organizational Resources
- Other Resources
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.
View our deployed Treezy app.
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
- Express
- PostgreSQL
- Heroku
- JavaScript
- React
- JSX
- HTML
- Figma
- CSS
- Fetch API
- Cypress
- NPM
- Webpack
- Vercel
- 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
- 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
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
- Fork and clone down this repository.
cd
into the root directory and install dependencies by runningnpm install
.- To run the server, use command
npm start
in the terminal. To stop the local server, use commandControl + C
. Closing the terminal without stopping the server first could allow the server to continue to run in the background and cause problems. - Running
npm start
should direct you to the application, but you can always access the website by visiting http://localhost:3000/. - For more information about the API, visit Treezy-API.
Irmak Erdem
Betul Baskan
Rachel Bock
Brandon Ainsworth