Giter VIP home page Giter VIP logo

back-country-buddy / backcountry-buddy-ui Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 4.0 10.3 MB

A planning app for backcountry skiers/recreationists. Users can create a Tour, fill out the "plan, ride, and debrief" sections according to the AIARE framework, and share it with tour partners.

Home Page: https://backcountry-buddy.netlify.app/

HTML 1.16% CSS 13.49% JavaScript 40.17% TypeScript 45.18%
react typescript progressive-web-app auth0 rest-api skiing snowboarding backcountry-skiing javascript

backcountry-buddy-ui's Introduction

Backcountry Buddy

Plan safer backcountry ski tours with friends.

Table of Contents

Introduction

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.

Back-end Repo

Backcountry.Buddy.Demo.Comp.mp4

Technologies

React + Hooks, React Router, TypeScript, JavaScript, Auth0, Progressive Web App, RESTful APIs, Cypress, Travis CI, HTML, CSS

Dependencides & Libraries

  • React Promise Tracker
  • React Loader Spinners
  • React Step Wizard
  • React Toastify
  • Google Workbox

Deployment

Deployment Link

Netlify Status Build Status

To view in browser on desktop:

  1. Visit the deployment link
  2. 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:

  1. Visit the deployment link in Chrome
  2. Click the install icon to the right of the URL

To download PWA on iPhone:

  1. Visit the deployment link in Safari
  2. Tap the share icon at the bottom of the screen (next to bookmarks)
  3. Tap "Add to Home Screen"

To download PWA on Android:

  1. Visit the deployment link in Chrome
  2. Tap the 3 dots to open the Chrome menu
  3. Tap "Install Backcountry Buddy"

To run locally:

  1. Clone down this repo
  2. npm install
  3. npm start
  4. Visit http://localhost:3000/

Features

Log In

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.

login welcome

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.

Add A Tour

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.

addtour plan

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.

View Current Tours

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.

currenttours

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.

View Past Tours

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.

pasttours tourdetails

Under the Hood More fetch requests, plus some filtering functionlity in the search bar.

Profile

Visit the Profile page to view your info, update tour emergency contact information, and log out of the app.

profile

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.

Offline

Because many users will be accessing the app where there is poor or no service, we added offline capabilities.

offline

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.

Future Features

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


Wins And Challenges

Wins

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.

Challenges

  • 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.

Authors

Boone Epstein GH Tashia Davis GH Rachel Buchta GH
Boone Epstein Tashia Davis Rachel Buchta

backcountry-buddy-ui's People

Contributors

deadbelly avatar rachelbuchta avatar tashiad avatar

Stargazers

 avatar

Watchers

 avatar

backcountry-buddy-ui's Issues

README

4: CI/Deployment badges on all repos OR swagger.ui or something similar for documenting for the endpoints is used.

3: All repos have a README with a project description, screenshots (if applicable), endpoint documentation (if applicable), links to production sites, links to associated repos, instructions to setup, contributions to all team members. Clear and consistent markdown format is used.

User Story: Plan Checklist

As a user, I should be able to fill out the PLAN checklist for an upcoming tour.

  • Open an upcoming tour from the dashboard.
  • I should see the four planning items for the checklist.
  • Beneath each item I should be able to add details based sub-prompts.
  • If I close and re-open this tour, my responses should be saved.

User Story: Debrief

As a user, I should be able to fill out the DEBRIEF checklist for an upcoming tour. Once completed the tour will be moved to a new view.

  • Open a tour and mark it as completed.
  • I should see the three debrief items for the checklist.
  • Beneath each item I should be able to add details about the prompt.
  • When I submit the checklist I should be brought back to the dashboard.
  • The tour I just completed should be missing.
  • Open Past Tours.
  • My completed tour should be added to the list.

User Story: Adding Tours

As a user, I should be able to add a tour, and view it in my dashboard

  • Open app.
  • Click +Tour
  • Add a date and location, and submit the form
  • I should be returned to the home page, and see a new tour

UI MVP: Add A Tour

I've opened this issue back up to track the next two pages of adding tour. Sorry for the confusion about what this issue included.

Loading

React Promise Tracker dependency

  • auth
  • api

Styling: Nav

Content on bottom of tour details page is currently hidden behind nav

Potential solution: put navbar into each necessary component manually rather than app?

Disable y-overflow scrolling on main?

User Story: Departure Check

As a user, on the day of a tour I should be able to CONDUCT A DEPARTURE CHECK.

  • Open a tour for today.
  • I should see a Departure Check checklist.
  • I can check off each item.
  • Once the check is complete I am brought to the active tour flowchart.
  • There should be a space to record observations and other notes.

User Story: Past Tours

As a user I should be able to search my past tours.

  • Open Past Tours.
  • I should see a list of all completed tours.
  • I should be able to enter a search query.
  • My past tours will filter based on that query.

Deployment & CI passing

4: App has CI and successfully builds by day 5 and is deployed successfully after every PR merges. Logs should show that failed builds are very quickly addressed.

3: App has CI and successfully builds halfway through the project, and on due day.

2: App has CI and successfully build on the due day.

User Story: Plan Tour With Group

As a user, I should be able to log in and add friends to a given tour that I've created.

My friends should be able to log in and see that tour populate on their "Current Tours" page.

  • Open app.
  • Login
  • Click Add Tour
  • Add/edit friends, see friends already added
  • Friends should be able to do the same (should they be able to add friends to that tour too or only the tour creator?)

Error Handling

  • New api call for date/location
  • Conditional rendering for missing data
  • Server errors
  • Incorrectly filled out fields in form (require date + location for add tour)
  • Make routes redirect to landing if no user is authenticated
  • Sad path testing
  • save double click?
  • convert JS dates

Final Check

  • Review testing suite
  • Remove all unnecessary comments, console.logs, etc
  • Accessibility audit (WAVE/Lighthouse)
  • Run linter
  • Create production build? npm run build
  • Confirm PWA is working
  • Clean up CSS files (bring more global styles into app.css, make semantic)

User Story: Adding A User

As a user, I should be able to log in, view my info on the profile page, and edit my info/add emergency contact

  • Open app.
  • Login
  • Click Profile
  • See my info and be able to edit (changes should persist)

Stories labeled "Phase 1"

Write all stories for what you are committing to have completed by first check-in. Label with Phase 1

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.