Giter Club home page Giter Club logo

national-parkfinder's Introduction

National Parkfinder

Abstract

This project won 1st Place at the Turing School of Software and Design's all-school Demo Competition. The presentation video for it can be found here.

National Parkfinder is an application that allows you to explore all 63 of the national parks in the United States in one place. We implemented the National Parks Service API (view documentation) to display each park and were able to access the unique data by calling the API with a four-digit parkCode when the user clicks on a button from the navigation menu. Users can search for parks by full or partial name or select a state from the dropdown form. Within the park view, the user can see park details, a map, and contact information about that park. On the displayed park, the user also has the ability to "add to visited" or "add to bucket list". There are separate views for the user's visited and bucket list parks, which can be accessed via the buttons in the footer. From here, they are able to delete them from their respective list or move bucket list parks to their visited list. This app was completed for the Mod3 Stretch project at the Turing School of Software and Design and the full project rubric/spec can be seen here.

How To Access This Application

On your terminal:

  • git clone [email protected]:jaypeasee/national-parkfinder.git
  • cd national-parkfinder
  • npm start (to start the server)
  • npm test (to run the test suite)

Tools/Technologies

  • TypeScript
  • React (with hooks)
  • React Router DOM
  • JavaScript
  • TDD: React Testing Library, Jest
  • SCSS
  • localStorage
  • Travis CI
  • Deployed with Heroku

Demo

gif 1

~

gif2

~

gif 3

Next Steps

  • Mobile responsiveness (move navigation to hamburger popup)

  • Error handling on Router

  • Create backend/user login to host local park data and post user data

Contributors

national-parkfinder's People

Contributors

jaypeasee avatar baileydunning avatar saraho1123 avatar

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.