walk-safe/walk-safe-frontend

View Live Application Here

Table of Contents

• Description
• Learning Goals
• Installation
• Walkthrough
• Authors
• Demos

Description

Created to empower individuals to walk alone, Walk Safe brings a user's community along from the trip. Utilizing Geolocation and SMS messaging APIs, we keep a user's community informed of their trip status from start to finish. Should an unforeseen trip interruption arise, Walk Safe will immediately alert the user's contact. We've got your back.

Walkthrough

1. Visit https://walk-safe-frontend.herokuapp.com/ and view the main page of the application
2. Navigate to the "hamburger" menu in the upper-right corner and click the icon to open dropdown and expand navigation options
3. Select the "Add Contact" option to route to the AddContact page
4. Enter your contact's information into the form: name, and full phone number (including country code!)
5. After you've submitted your contact, navigate back to the "New Trip" view by clicking the "Walk Safe" title or by clicking "Plan Trip" in the dropdown menu
6. Create your trip in the form:
   • Type in your starting and ending addresses and select the autocompleted version provided by GoogleMaps
   • Select your transportation type
   • Select the contact you want to keep informed of your trip status
   • Submit Trip!
7. After you submit your trip, you will be provided an estimated trip time. Your trip will start after you've confirmed by clicking "Start Trip"
8. A countdown timer will then begin, and if you reach your destination earlier than expected, you may click the "End Trip" button and your contact will be notified that you've made it safely to your destination.
9. Should your ETA expire before you have made it to your desination, an alert will pop up with the option to extend your trip time:

9a) If you select more trip time, your contact will be alerted you have extended your trip.

9b) If you fail to extend your trip and your ETA has expired, your contact will be instantly alerted that you have not safely arrived to your destination and to contact you immediately

Learning Goals

• GraphQL + Apollo
• Utilize a GoogleMaps API
• Implement SMS messaging
• Create an UI/UX friendly application
• Create an engaging & useful application

Minimum Viable Product (MVP): MVP:

1 user flow:

• Main page
• AddContact page
• CurrentTrip page
• Sad path: user doesn't end trip

Notable Features

• GoogleMaps Places API to autocomplete starting point and end destination addresses
• GoogleMaps API data received from server to determine estimated trip time
• Twilio SMS Messaging API to send "trip started", "trip ended", "trip extended", and "alert!" notifications to user's selected contact
• React Toastify package to display popup windows notifying the user of successful/unsuccesful SMS message delivery
• Apollo + GraphQL to receive contact and trip data from server
• React 'countdown-circle-timer' package to provide intuitive visual display of estimated trip time
• React + React Hooks to navigate user flow
• AddContact component enabling user to create custom contacts to receive automatic SMS messaging notifications

Installation

• The application is deployed to Heroku, to view the live application: https://walk-safe-frontend.herokuapp.com/

• To view the application on your local device:

1. Clone down this application
2. Enter npm i in your terminal
3. Enter npm start in your terminal
4. To view cypress tests open separate tab an enter npx cypress run

Front End Authors

Caroline Eubanks GH	Bryan Hohn GH	Peter Muellerleile GH

Demos

• Application in iPhone 6/7/8 mobile view

User Trip Form Submission	User Trip Start & Countdown Timer

Timer Expiration & Trip Extension	Extension End & Alert Scenario

"Add Contact" Functionality	Light/Dark Mode Theme Toggle

walk-safe-frontend's Issues

Aria/Lighthouse testing for accessibility

EDIT:
We're now at a Lighthouse score of 97 - the only flags are for color contrast.
-Pete

Research GraphQL/Apollo Client

Resources utilized:

• https://www.youtube.com/watch?v=G8hpICPmNdo&list=PLmy_XW4uLtj8o6Hx1ZovfLU1YTlBtaR-V&index=1
• https://www.youtube.com/watch?v=BithauQybW8&list=PLmy_XW4uLtj8o6Hx1ZovfLU1YTlBtaR-V&index=2
• https://www.howtographql.com/react-apollo/2-queries-loading-links/
• Apollo Docs: https://www.apollographql.com/docs/react/
• https://www.sitepoint.com/how-to-build-a-web-app-with-graphql-and-react/

Testing: Main Page - Form Sad Paths

• information left out of input box
• start/end locations (how does this need to look so googlemaps api will work?)

Research for App Updates

• Formick: looking to implement for form UX & error handling
• React Toastify - uniform alerts for errors & notifications

User Stories: Main Page View

1. User opens the application
2. User sees their name displayed on the page
3. User sees the options for starting point, and an endpoint for the trip.
4. User selects a start point and endpoint.
5. User sees transportation options dropdown menu.
6. User selects a transportation option.
7. User sees a contacts drop-down menu.
8. User selects a contact/phone number
9. User select "Submit Trip" button
10. Modal appears with Trip ETA

New Trip Mutation

1. Write Mutation for a new trip in Form Component

TravisCI SetUp

JSX/CSS: Alert modal component

• Build out Alert modal component
• Format and style modal display
• Connect modal with SMS messaging functionality

User Stories : Login Page

1. User opens the application
2. User sees login box
3. User sees continue as a guest option
4. Login box shows username and password input

User Query

Create first query to fetch user data for:

• First name
• Last Name
• Username
• Contacts

Dummy Data: User Info

User data contains:

• name
• username (unique identifier?)
• existing contacts (but we are starting out with none)

Testing: CurrentTrip User Flow Sad

• User enters Trip Info
• User Starts Trip
• User sees ETA modal display
• User can select 'Start Trip'
  -User can see a countdown timer
  -User does not End Trip and sees option to add more time
  -User does not add more time and sees an alert that a message has been sent to their contact that their trip was not completed

User Stories: CurrentTrip Page

Connect Back-end server to Front-end

User adds time SMS Message

Figuring out the logic if the user adds more time to their trip and when to send the message and where to call it.

Implement autocomplete in address search inputs

Successfully implement autocomplete address searching using the Google Places API, and implement to:

• Starting Point location input
• End Point location input

Form Error Handling

NewContact.js
-all fields complete
-valid phone number

Form.js
-all fields complete
-valid address

JSX/CSS: Build out Current Trip page

• Build out TripView component
• Format and style Current Trip display

JSX/CSS: Build out AboutUs component

• Build out page component
• Format and style page display
• Write "About Us" team/project bio
• Build out individual dev cards w/ integrated profile pics and GitHub links

CSS: Main Page - Form

See miroboard:

https://miro.com/app/board/o9J_l7sDZXE=/

Implement timer functionality

• Integrate timer functionality into TripView component/display

CSS/JSX: ETA Modal Window

• Create ETAModal.js component to display user's trip ETA after clicking "Submit Trip" button
• Complete CSS for modal display (https://www.npmjs.com/package/react-modal)
• Build sad path functionality for user not wanting to click "Start Trip" button (allow user to click out of modal and return to form)

BUG: User data doesn't persist on refresh of non-Main components

Day 1 Deliverables

• Create a Slack channel - add group members and project manager
• Pin the DTR, Repository links, and Project Board in channel
• DTR (use gist or Google Document)
• Initialize your repositories
• Normalize on the Git Rebase workflow and create a PR template
• Determine the MVP (knowing it could change as the project continues)
• Create wireframes
• Construct schema design
• Set up your project board with Github projects
• Write all stories for what you are committing to have completed by first check-in. Label with Phase 1

Component/File Structure

• Brainstorm Components
• Map out how they interact
• Create file structure in the project

FE/BE Discuss Phone Number Format Validation

How will we ensure that numbers with valid format are entered?

CSS/JSX: Nav Menu (Burger Time)

Build out hamburger menu display/functionality using react-burger-menu npm package:
https://www.npmjs.com/package/react-burger-menu

Download/Install Packages

• Create React App
• Sass
• Cypress

CSS: Login Page

See miroboard outline for Login Page:
https://miro.com/app/board/o9J_l7sDZXE=/

Implement Router to switch between pages

User Stories: User Login

1. User can type username into "username" input
2. User can type password into "password" input
3. User clicks "login" and page view changes to new page display
4. After login is selected, user sees "main page" display which features the application form

JSX/CSS: Build out AddTime component

• Build out AddTime component
• Format and style AddContact modal display
• Add End Trip functionality / page routing
• Add Extend Time functionality / page routing

User Stories: User doesn't end the trip/Sad Path

Apollo/GraphQL FE Setup

Install packages and structure of index.js for Apollo and GraphQL implementation

Cypress Testing: Implement new testing environment

• Implement new testing environment provided by BackEnd team for true end to end testing

Testing: User Login - Sad Paths

User login sad paths:

• incorrect username
• incorrect password
• login information not entered in either input box

Creating Labels

SMS messages sending/Testing

CSS: Responsive Design

Build out mobile view for all displays:

Pages

• Main View
• Trip View
• Add Contact
• About Us

Modals

• ETA
• Add Time
• Alert
• Trip Complete
• Contact Added

User Stories: Add Contacts Page

1. User Sees a contact form with:

• name input
• phone number input

2. User can select a button to submit new contact
3. User can select a button to return to Main Page view

User Stories: Guest Login

Testing: Main Page - Form Happy Paths

• Refactor existing Cypress tests to conform with GraphQL implementation and new UI components
• Add thorough testing for all UI components
• Add testing for GraphQL query (page load data)
• Add testing for GraphQL mutation (form submission)

Documentation: Write Frontend README

Alert notification for message status

Alert message pop up for any message sent in the app

Testing: User Login

Cypress testing for user login story

Testing: Login Page View

Testing for User Login view stories

test

some issue

JSX/CSS: Build out Add Contact page

• Build out AddContact component
• Format and style AddContact page display

Fix TripETA modal display functionality

In Form.js, line 9, `etaModalIsOpen' state is currently set to a default of "true", so that we can see it when we load the page.

This needs to be switched to a default of "false", so that it only opens when Submit Trip button is clicked.

The problem is, when switched, and when the button is clicked, the modal flashes quickly on the screen and disappears. So we need to troubleshoot why this is happening.

I believe it has to do with the way React works, where changes to state trigger an automatic re-rendering of the page.

Cypress GraphQL Stub

Issue stubbing graphql data for queries/mutations in cypress

See addcontact.js test and user-data.json fixture