NattyTracker

We wanted to make a simple web app that will allow you to easily find information about National Parks and allow you to better plan your next trip!

Comment

slack_ids: @Christopher Myers + @Spenser Cheung

Inspiration

While forming project ideas and memeing about creating a "tinder for hiking trails" app, Chris and I realized that we both shared a common love for visiting the US national parks.

But the problem was, there are a lot of national parks in the US (63 as of 2021) and instead of spending hours combing through each of their websites, we wanted to have all the information we needed in one place.

What it does

Our app allows users to "log-in" and be greeted by the welcome page . The user can then proceed into our web app, where they can open up a hamburger menu on the left side of the screen. Within the menu, there are a list of national parks to choose from and clicking on their name will redirect the user to a page specifically for them.

How we built it

For this project, we utilized React for the front-end and Ruby on Rails for our web framework. To connect the two, we used the react-on-rails gem (maintained by ShakaCode). Also, our back-end calls the National Park Services API and populates a database with, and creates a seed to use.

Challenges we ran into

To start off, we both flipped flopped our roles (Spenser did front-end even though he typically does back-end; Chris did the back-end even though he typically does front-end). But the main challenges we faced involved initial set-up (especially with understanding how our front-end would communicate with our back-end and getting the rails server output the view we wanted).

Accomplishments that we're proud of

Having experience on coop with Ruby on Rails, Chris was excited to learn a lot more about the framework. He struggled with setting up the database and creating a seed, but in the end he prospered and was able to go to bed satisfied. For Spenser, who only knew in turns of front-end, only knew basic HTML and CSS, being able to understand how Ruby on Rails' MVC pattern was implemented and have code work on the server was something he was proud of. Also, dabbling with Figma and pre-planning a webpage's design with it was a great experience.

What we learned

We actually learned a lot about Ruby on Rails and setting up gems, as well as whatever was mentioned in the accomplishments above. Our goal was to learn new things during this year's HackBeanPot, and we did definitely achieve that. We also learned that meshing React and Ruby on Rails is tough when new to both concepts, and that makes debugging even tougher. But Google and mentors + organizers had our back, and there's no better feeling than getting your code to work after hours of debugging!

What's next for NattyTracker

We would like to fix up our front-end and have our actual park endpoints be able to match our Figma design. We also want to add authentication for users so they can log-in and check off which of the parks they've visited. Also, using the lat/long data to create a location pin via Google Maps api and have that on each park page was a reach feature for us. Finally, we would like to have a text field for users to save notes about each park, and possibly use ML to recommend parks they would like.

Built With

Share this project:

Updates