kaohman / national-parks

A React app for with an interactive map of all 58 U.S. National Parks and information about each park. Users can save parks to their visited and bucket lists.

National Parks

See it Live!

Mark My Parks on GitHub Pages

Set-Up Front-End:

Clone this repo
Run npm install from the root directory
Run npm start and visit localhost:3000 in your browser

Background / About:

There is a great deal of information available from the National Park Serivce on parks throughout the United States. However their website can be difficult to navigate through to get to a park you are interested. There is also not an option to save parks you would like to visit.
Mark My Parks provides an easy to use interface where users can explore national parks across the United States. Users can also use the information and save preferences below to plan future trips:

• Find an overview of each park including a direct link to the National Park Service's webpage for that park
• Save parks to their personal Bucket List or Visited Parks list
• View parks only in their Bucket List or Visited Parks list

Primary Technologies Used:

• React
• Redux
• Leaflet
• Javascript
• HTML
• CSS/SCSS
• National Park Service API

Testing:

Jest and Enzyme for front-end testing.
Run npm test from the root directory

Enhancements:

Additional enhancements we would like to include in the future

• Functionality to plan/save a trip export route between parks to Google Maps
• Add Geolocation API to find parks near your current location
• Include additional monuments and historic sites run by the National Park Service and parks in other countries
• Ability for users login to rate and comment on parks they have visited.
• Ability for search by park name

Preview:

Original Assignment:

Whateverly project from Turing School of Software and Design

DTR Memo:

https://gist.github.com/trbachmann/ceb360e8cf0d946281cdba7091e4e484

Contributors:

Karin Ohman
Adam Niedzwiecki
Tiffany Bachmann

Wireframes:

national-parks's Issues

When viewing Visited, the user should be able to...

• View a map with just visited parks displayed.
• Click on visited park markers to view pop-up with more info about the park.
• Remove parks from visited in park pop-up.
• Have visited parks persist on reload.
• Click on "show all states" button to see all parks.

On Click and Hover Functionality for Touch Screen Devices

Click and hover states do not work correctly on touch screens - need to change functionality for these devices.

Write Read Me

Add React Router

possible to add router for park details pages?

Search by park name

Map will update with park names that match live search

Responsive Layout

Need to make app responsive.

Testing!!!

Close park card when new state is chosen

If park card is open when a new state is selected from drop-down, close park card.

Click anywhere outside card to exit

Add functionality to click anywhere on DOM outside card to have card close

When viewing State display, the user should be able to...

• View the map zoomed to the selected state with parks shown for that state.
• View the state name and details about the state and associated parks in the state.
• View a bar graph of the state's population and annual visitors in each park in the state.
• Click on "show all states" button to hide state info and view all states on the map.

Setup SCSS files

• Create styles folder
• Create .scss files for each component, mixins, variables, etc.

Show All Parks Functionality

• When button is clicked, map resets to show all parks and original extent.
• Hides/resets state display.

When viewing Bucket List, the user should be able to...

• View a map with just bucket list parks displayed.
• Click on bucket list park markers to view pop-up with more info about the park.
• Remove parks from bucket list in park pop-up.
• Have bucket list parks persist on reload.
• Click on "show all states" button to see all parks.

Sign-up/Login Functionality

Allow users to make and account and sign in so they can store their visited/bucket lists

Map reset when buttons are clicked if user has moved map

• have map reset if user has moved it and then clicked any of the buttons below.

Geolocation API

Incorporate geolocation API to get user's location/parks near user - export to google maps?

When viewing Home page, the user should be able to...

• View a map of the United States with all National Parks identified with markers.
• Hover over a point on the map so I can see the name of the National Park.
• Click on a park icon on the map and pull up a preview of the selected park.
• Click on "show favorites" button which will update the map to only show favorites.
• Click on "show bucket list" button which will update the map to only show parks on the to visit list.
• Click on "show all states" button to reset the map.
• Search parks by state to display state information.

Update admin lines - source not working

Functionality to allow users to rate and comment on parks

Works with backend and user's account

Show State Functionality

• State card pops-up below map when state is chosen.
• Map zooms to state - zoom transition?
• Map displays only parks within given state.
• Hide state display button can be clicked and hides state details, resets select.

Bucket List Functionality

• View bucket list button can be clicked, checks local storage and updates the map via App's state, current parks and re-render of map.
• Icon in pop-up can be clicked.
• When icon is clicked, add to local storage
• When icon is clicked, also updates number in button below map.

Population Bar Graph

• Add graph to UsState component.

Update images on park card

• Add in caption and credit
• Add slideshow of all available images on large park card
• Make map/cards larger on screen

When viewing Park Preview, the user should be able to...

• Click a delete icon to close park pop-up.
• Favorite a park.
• Add a park to their Bucket List.
• Click on "show more" in park preview and see all details about the park.

Credit photo with url

• Put photo reference in appended card

Style Pages

• Landing Page
• Homepage
• Parks pop-up - also need icons for visited/bucket list
• State display
• Style buttons in park pop-up to be centered, colors matching marker icons etc. - Tiffany
• Add hover text pop-up on visited/bucket list icons. - Tiffany
• Add hover state to delete icon on park pop-up, color red and increase size slightly - Tiffany
• Set description height and include overflow scrollbar. - Tiffany
• Remove button styling on icons - Tiffany
• Increase icon size on hover - Tiffany
• Figure out overlay issue - Karin
• Look into changing map icons to green -Karin
• Style state card, add chart. - Adam

Create backend

• Create backend to cache API data
• Allow users to create accounts and store visited/bucket lists
• All users to post comments and rate parks

Visited List Functionality

• View visited list button can be clicked, checks local storage and updates the map via App's state, current parks and re-render of map.
• Icon in pop-up can be clicked.
• When icon is clicked, add to local storage
• When icon is clicked, also updates number in button below map.

Add Landing Page

• Switch statement/landing page on App.js
• Add component for landing page