Greenfield: Safe-Tree Application

Known Bugs

• Missing some of the current .env variables that should be there
• Plants page is not currently working because the routes have not been moved to /api/plants. And don't know the api used.

SafeTree

SafeTree is a play on the word 'safety' for user's that enjoy the outdoors!

Features

View hiking opportunities

Identify harmful/helpful plants

Identify local animals

Share experiences!

Track Your location on hikes so you don't get lost!

See the weather at each Hike to prevent going at a bad time.

See hikes based on features a park has

Create a packing list so that you can plan for what you need ahead

What frameworks/libraries are used

Tech Stack

Client: -> React (Hooks) & Axios Server: -> Express
Database: -> Mysql/Sequelize
Authentication: -> Passport (Google Strategy)
Style: -> Material UI

What software is required to run

NPM was used to installed the necessary dependencies for this project.

NPM

Node 20.12.2

The Database was built using MySql and the Sequelize ORM.

MySql

Sequelize

The Client side was created with React hooks

React

React-router

React-dom

React-router-dom

Axios was used to communicate with the Server from our Client side.

Axios

Express on the Server side to handle all request handling

Express

Express-session

For errors and specific syntax rules we utilized ESLint with Airbnb rules.

ESLint (Airbnb Rules)

Transpiling was performed from Babel plugins to create compatible code for older browsers.

@babel/core

@babel/preset-env

@babel/preset-react

babel-loader

Bundling for optimization performed by Webpack

Webpack

Webpack-cli

Webpack-dev-server

The Prettier formatter to maintain clean code for all developers involved

Prettier

Styling created using Material UI and emotion

@emotion/react

@emotion/styled

mui/material

For the google maps you need to get a google key for the react-google-maps api

react-google-maps

Lastly for Authentication was performed with the use of Passport and the Google Strategy

Passport

Passport-google-oauth20

What commands to use to Start

1: Start MySql server/service
MAC - Homebrew
mysql.server start

Windows/WSL
sudo service mysql start

2: npm start: Start the server utilizing Nodemon (1 terminal sustained)

3: npm run build: Start the transpiling & bundling process and continuously runs while developing until stopped. (1 Terminal sustained)

4: mysql -uroot -> create database safetree: Create a local safetree database to store data.

5: npm run seed: Create fake data to test operations throughout the development process.

6: Restart server so the database can accept the seed data

Required .ENV Variables

Google Developer Console GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= GOOGLE_MAPS_API_KEY= Visual Crossing VISUAL_CROSSING_API_KEY=

Closing

We would like to continue working on what we have initially created in order to learn more and grow experiences!

Authors & acknowledgements:

Operation Spark instructors & Cody D. Allyn M. Mike S. Darius C. Rodman L.