Trees of Seattle

Deployed Site

Front End

Back End

Abstract

Trees of Seattle is a full-stack React/TypeScript web application that allows users to explore a database of trees within the Seattle metro area using an interactive map. Trees are displayed as individual map points, from which the user can navigate to a detailed view for each tree. Each tree's details include common and scientific species names, an image, approximate height, age, circumference, and more. Users can also contribute to the database by posting a tree of their own for other users to discover. The app's target user is the urban nature-lover with a taste for data and maps.

Trees of Seattle was designed with device-responsiveness in mind, and strives for a minimalistic, intuitive UI.

A Heroku-hosted Node.js/Express backend serves up data from a PostgreSQL database.

A Cypress acceptance test suite is also included with the project. See installation instructions below for running the application and/or tests locally.

Demo

Project Context

Trees of Seattle was created as my final solo project for the third section (3 of 4) of Turing School of Software & Design's Front-End Development program. I was given about seven days to complete the project, and decided to make my project full-stack. I was able to self-teach myself Postgres and Knex.js within the timeframe, creating a backend for the project that allows user-submitted data to persist, and which supports a community of users.

Additional Dependencies

• Leaflet.js
• Geoapify
• react-modal

Installation Instructions

1. Fork this repository.
2. Clone your forked repository to your machine.
3. cd into the top level of the project repository from the command line and run npm i.
4. Run npm start to launch the application's server.
5. Navigate to http://localhost:3000 in your browser to view the live page.
6. To run the Cypress test suite, run npm run cypress from the command line while in the top level of the project directory.