Skip to content

bartswierz/map-search

Repository files navigation

Map Search

trailhawk_search

If you're an avid hiker or just looking for a new adventure, Trailhawk is the perfect app for you. Trailhawk lets you discover the best of the U.S. State Parks and National Parks. From casual hiking trails to treks spanning over 2000 miles, Trailhawk has you covered.

Available Locations

Hiking Trail/State Park State Est. Distance Annual Visitors
Starved Rock State Park Illinois 13 Miles 2,100,000
Matthiessen State Park Illinois 5 Miles 3,000,000
Ferne Clyffe State Park Illinois 75 Miles 200,000
Crater Rim Trail Hawaii 21 Miles 15,000
Red Rock Canyon Nevada 13 Miles 4,000,000
Great Smokey Mountains Tennessee 500 Miles 14,137,812
Pictured Rocks National Lakeshore Michigan 42 Miles 1,200,000
Yellowstone National Park Wyoming 900 Miles 3,000,000
Rubicon Trail California 22 Miles ~5,000,000
Grand Teton Wyoming 35 Miles 3,000,000
Point Lobos State Natural Reserve California 5 Miles 600,000
Haleakala National Park Hawaii 11 Miles 853,181
Rocky Mountain National Park Colorado 350 Miles 4,500,000
Zion National Park Utah 90 Miles 4,500,000
Bryce Canyon Utah 20 Miles 1,500,000
Glacier National Park Montana 700 Miles 2,908,458
Grand Canyon Arizona 21 Miles 4,730,000
Badlands National Park South Dakota 80 Miles 1,006,809
Joshua Tree National Park California 60 Miles 3,064,400
Continental Divide Trail New Mexico 3100 Miles 100,000
Appalachian Trail Vermont 2198 Miles 3,000,000
Pacific Crest Trail California 2650 Miles 400,000
Smith Rock State Park Oregon 3 Miles 747,000
John Muir Trail California 219 Miles 10,000
Mt. Whitney Trail California 22 Miles 4,000,000
Yosemite National Park California 750 Miles 3,667,550
Tongass National Park Alaska 700 Miles 1,881,000

Getting Started

To run the application locally, follow the steps below

  1. Create an empty directory on your desktop

  2. Clone the repository into the folder locally by using git clone:

    git clone https://github.com/bartswierz/map-search.git
    
  3. Navigate into the directory

    cd map-search
    
  4. Navigate into the directory

    npm install
    
  5. You can run this app now with(Google Map Dev Mode)

    npm run dev
    

    Optional: If you would like to experience the app with the best experience you can add a GOOGLE API KEY to remove the Developer Mode Overlay:

    1. Get An Google API Key(~1-2 Minutes)

      https://developers.google.com/maps/documentation/javascript/get-api-key
      
    2. Create an .env file at the root directory

    3. Paste your API KEY inside .env

      VITE_GOOGLE_API_KEY=YOUR_API_KEY
      
    4. The google map will now be displayed without the developer mode overlay! Enjoy!

Built With

  • React.js
  • Tailwind CSS
  • Redux
  • Chart.js

Individual Packages & Resources Used

npm install react react-dom leaflet react-leaflet

React-Leaflet-Google-Layer - Required to use google maps. Pass the API KEY within the ReactLeafletGoogleLayer component

npm install --save react-leaflet-google-layer

Tailwind Installation - VITE: https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Redux Installation - https://redux-toolkit.js.org/tutorials/quick-start

npm install @reduxjs/toolkit react-redux

CHART.JS Installation - https://www.chartjs.org/docs/latest/getting-started/installation.html

npm install chart.js react-chartjs-2

GOOGLE MAPS API - https://developers.google.com/maps/documentation/javascript/overview

Possible Future Features:

  • Favorites: Allow users to save the hiking trails they liked from the results list. This would require a unique id for each hiking trail and a database(would also require a sign in feature to keep track of user data) or local storage to persist the data when user closes the application.

  • Suggest Me Something: A useful option for an eager hiker who is having a difficult time deciding between all the great hiking trails and state parks. This would select a hiking trail at random from the available locations for them if they can't decide.

About

Hiking Trail React Web Application

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published