While backcountry skiing has witnessed steady and strong growth for more than a decade, COVID-19 inspired a global boom in the activity. But with that growth came a record-breaking season of avalanche fatalities. In fact, Colorado is approaching the most avalanche fatalities we've had in the last 100 years.
Whether you're a beginner or an expert, one of the best ways to reduce risk in the backcountry is to use the checklist provided by The American Institute for Avalanche Research & Education (AIARE). Checklists are proven to be effective across industries & activities that involve any kind of risk management, from rock climbing to investing on Wall Street. When you take a course with AIARE, they provide you with a "backcountry decision-making guide"-- a little booklet where you're supposed to actually write down your trip plan, observations while in the field, and debrief. The goal is to help manage human factors that can challenge an individual's or group's backcountry decisions. The problem is that no one actually uses this.
"No one" is a generalization, of course. But the Director Of Recreational Programs at AIARE echoed this sentiment in a phone call. She said the most useful thing she can think of to help reduce avalanche accidents would be to make the booklet into an app. "No one wants to dig up their book and write things down while out skiing. It needs to be where people already are: their phones," she said. That's where Backcountry Buddy comes in.
At its core, Backcountry Buddy:
- Converts the "Plan" "Ride" and "Debrief" sections of the AIARE booklet into a form that users can edit and save for each tour.
- Allows a user to share/collab on the tour with the group they're going out into the backcountry with.
- Saves all past tours so that users can reference them later.
This application was created in just 2 weeks by a team of 3 front-end and 2 back-end students for our capstone project at Turing School of Software & Design. The project specifications can be found here.
Backcountry.Buddy.Demo.Comp.mp4
React + Hooks, React Router, TypeScript, JavaScript, Auth0, Progressive Web App, RESTful APIs, Cypress, Travis CI, HTML, CSS
- React Promise Tracker
- React Loader Spinners
- React Step Wizard
- React Toastify
- Google Workbox
To view in browser on desktop:
- Visit the deployment link
- The app was designed for mobile, so it'll look best if you check it out on a smaller view width! (Tablet/Desktop are coming in future iterations)
To download PWA on desktop:
- Visit the deployment link in Chrome
- Click the install icon to the right of the URL
To download PWA on iPhone:
- Visit the deployment link in Safari
- Tap the share icon at the bottom of the screen (next to bookmarks)
- Tap "Add to Home Screen"
To download PWA on Android:
- Visit the deployment link in Chrome
- Tap the 3 dots to open the Chrome menu
- Tap "Install Backcountry Buddy"
To run locally:
- Clone down this repo
npm installnpm start- Visit
http://localhost:3000/
On initial visit, you'll see a login page. It'll redirect you to an Auth0 site, and then back to the welcome landing page. From there, you can access everything in the app.
Under the Hood
We connected both the front and back end to Auth0, and (after much trouble shooting) we able to get the "current user" all hooked up.Visit "Add Tour." Start by picking a date and location, then click "Create Tour" (this saves the tour to your "Current Tours" so you can go back in and edit it later). Now, you can complete the "Plan," "Ride," and "Debrief" sections and save your progress at any time. You can also add friends to a tour by their email, see their emergency contact info, and call the emergency contact phone number directly. The checkboxes get automatically checked off once all fields in a given form section have been filled out.
Under the Hood
Several API calls are happening here. You can create a tour (POST), you can come back in and edit the tour (GET & PATCH), you can fetch all your current tours (GET), and you can add a friend to a tour (GET, POST). This was one massive controlled form, with state maintained in hooks. We brought in React Step Wizard to break up the long form into sub-steps for a better UX.Visit the "Current Tours" page to view all tours that you're planning. You can also see who created the tour. Click into any tour to make edits.
Under the Hood
We fetched all user's tours and rendered each of them to the cards on this page. When you click into one, you're redirected to the form state of that tour, with all previous entries visible and editable.Once you've completed the debrief section for a tour, you click "Complete Tour" to move it to "Past Tours." At this point it is no longer editable (although you can delete both current and past tour cards). When you visit "Past Tours," it'll appear there and you can click in to view all details for that tour. You can also search all past tours by location.
Under the Hood
More fetch requests, plus some filtering functionlity in the search bar.Visit the Profile page to view your info, update tour emergency contact information, and log out of the app.
Under the Hood
We brought in data properties from Auth0 and our backend API to render the user's photo, email, username, etc. We also added in another POST/PATCH for the emergency contact info.Because many users will be accessing the app where there is poor or no service, we added offline capabilities.
Under the Hood
Background sync via Google Workbox periodically tries to send a request to the server until it's successful, without losing new data. A React Toastify message pops up to let the user know when they are in offline mode and whether their changes were saved or not.Now that we have the basic functionality down, there is so much more we can build! Here are our top priorities moving forward:
- Make fully-functional offline (in progress)
- Use tour location coordinates to connect to a weather API and local avalanche danger forecast (in progress).
- Add a field for users to share a link to their GPX track(s) for a given tour.
- Allow users to upload photos from a given tour.
- Expand search/filter functionality for Past Tours.
- Bring in notifications if a user went on a tour but has not yet completed the Debrief.
More improvements are documented in issues in our Project Board
Successfully learning 3 new stretch technologies over the course of 2 weeks: TypeScript, Progressive Web Apps, Auth0
Solid teamwork and collaboration:
- Working and communicating with a backend team in order to get data we needed on the front end.
- Asynchronous workflow that allowed us to efficiently implement features, styling and testing in a short amount of time
- Our team was able to create a harmonious and inspiring teamwork environment. This allowed us to take on tasks independently while also brainstorm, troubleshoot, and pair program together, and come to compromises when needed. In the end, we produced a product we are each very proud of!
Creating, planning and organizing the largest project we all have ever worked on; watching it grow from conception to functional fruition! 12 unique endpoints were used.
Overcoming unforeseen challenges together while keeping morale up. The challenges we encountered with CORS took up valuable time could have derailed our progress - instead we made sure to use our resources and encourage one another until we found a solution.
- The biggest challenge we faced was circumventing CORS issues on our PATCH requests. We received very generic error messages when our OPTIONS preflight requests failed, and spent a large chunk of our time blindly trying to fix this bug. Although we never found documentation on this, we now think this is a common issue when using a Rails backend. In the end, we were able to solve it by changing our PATCH requests to PUT requests.
- We originally planned on using a GraphQL backend for this project but ran into major issues with deployment. As a result we were without a backend for several days while our team built a RESTful API. We were able to stay on schedule, but it was challenging, and required some over-reliance on temporary, hard-coded data.
- Originally we planned to use TypeScript (which we had never used before) for this entire project. After the code base reached a certain size, however, we realized we needed a bit more experience before we could manage all the moving parts. We pivoted to using JavaScript for more complex files, like fetch requests.
| Boone Epstein GH | Tashia Davis GH | Rachel Buchta GH |
 |
 |
 |