Giter Club home page Giter Club logo

treezy's Introduction

๐ŸŒณ Treezy

TreezyDemo

Table of Contents

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

Betul Baskan

Rachel Bock

Brandon Ainsworth

Organizational Resources

Other Resources

treezy's People

Contributors

irmakerdem avatar brandonainsworth avatar baskanbetul avatar rachel-bock avatar

Stargazers

 avatar

Watchers

 avatar  avatar

treezy's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.