MVP Review Diva Devs (Group A) [REAL]

[gemstone496]

Set up the Dev Environment

• Follow instructions in README.md to ensure you have Ruby, Rails, and mySQL2 downloaded.
• From the terminal, run git pull or clone the repo to ensure updated code.
• Install the gems from Gemfile: bundle install
• Purge and reload the databases for bikes and stations to ensure up-to-date tables:

  - rake db:drop 
  - rake db:create 
  - rake db:schema:load
  - rake load_data:station
  - rake load_data:bike
  - rake load_data:product

• Open the server by running rails s (or similar)
• Open localhost:3000 in your browser (or corresponding link to the server)

Complete description of the MVP's functionality

• A header bar displaying the ValetBike name and logo, and links to the following pages (described in detail below). On PC, this header will appear near the top of the page and follow as the user scrolls down. Website features that appear behind the header will blur out. The text on the links swaps from black to the website's signature blue-purple color when the user hovers their mouse over the link. On mobile, the logo appears at the top of the page, and three lines in the top left indicate a dropdown header, with all the same links. The links, are as follows:
  • Home Stations Trips Pricing Contact Account
• Home shows information about Valetbike. It includes a brief summary, a fun link to a popup image of a Monster High character on a bike (we themed our website with Monster High), and a list of icons with short descriptions indicating the flow of using the ValetBike service we provide. The user enters the website here by default.
• Stations includes both a Map (default) and a List view, exchangeable via button below the header:
  • Map view:
    • An interactive map that can be panned and zoomed in or out of
    • Pins at each station location to mark them.
    • Popups on each pin, so that clicking on one opens a layer that includes station information (identifier and name as a colored header font, and address and number of available bikes otherwise), and the following:
      • If a user is not signed in, a greyed out Reserve Bike button that informs the user via popup that they must log in to reserve a bike.
      • If a user is signed in and doesn't have a bike checked out, the popup includes a signature-color Reserve Bike button which changes to color-outline white-filled on mouse hover. This button links to the Bike Reservation page, discussed below.
      • If a user is signed in and has an ongoing trip, the button will show (signature-color with the same hover behavior) Return Bike Here and will end the user's trip at the selected station when clicked, rerouting them to the Trip Confirmation page, below.
    • A marker that shows either the user's profile picture image (if available) or the default image if none is available. The marker will show over the user's location (determined by IP address), or over a default location if the IP address is invalid.
  • Station view:
    • An itemized list of each station including the same station information and the same button available as described in the Map view.
  • Trips shows the list of trips the user has taken
    • The list includes a signature-color label of Trip # (e.g. Trip 1), and then additional information about the trip in normal grey and black text:
      • the trip status (ongoing or ended),
      • the trip time taken,
      • the Station where the trip began,
      • and the time the trip began.
    • If the trip has ended, the info will additionally display:
      • the Station where the trip ended,
      • and the time the trip ended.
    • If a signed-in user has no trips, the page will direct them to the Stations page, with a message to begin their journey there. If no user is signed in, the page will ask them to log in to view their trips.
  • Pricing page displays information about our subscription plans and allows user to use Stripe to set up payments for a plan:
    • On-the-go allows users to commit nothing, and charges them daily based on time spent biking per day.
    • Student and Regular plans charge a fixed fee for 15 hours of ride time each month, and every minute beyond that will be charged similar to the On-the-go plan, except with invoices sent monthly rather than weekly, and they are charged at a reduced rate.
    • When a user selects a plan through the menu, they are routed to a confirmation page that thanks them for selecting a plan and suggest they check out the Stations page to reserve a bike.
  • Contact page, because we needed to entertain ourselves somehow :). This page suggests (erroneously) that we are not, in fact, actually just a group of students enrolled in CSC223 and suggests a (nonexistent) email as our contact information as an organization.
  • Account contains the following features:
    • When a user goes to the account page and isn't signed in, they are routed to a sign-in page. They may enter their username and password to log in, cancel their sign-in (which returns them to their homepage), or create an account. If they have forgotten their password, they may also click Forgot your password, which takes them to a similar set of pages allowing them to enter an email address and receive an email confirming their access, and then allowing them to change their password to something they will hopefully remember.
    • When a user successfully creates an account or signs in, they will be routed to a profile page that contains information about their account:
      • A profile picture, set automatically to a default, which can be edited to any image the user uploads through the Edit button on its right, or reset to the default through the same method.
      • Contact information, with the users name (empty by default), email, and phone number (empty by default). There is a separate button to edit these. They are greyed out unless being edited, in which case they turn white to indicate that the user can now change them.
      • Subscription information, either linking to the Pricing page if the user does not have a subscription, or with information about their payment plan and their upcoming billing costs, as well as a description of the plan they have chosen. Underneath the payment information is a button allowing the user to cancel their subscription, which is confirmation-protected with a popup
      • Options to log out and delete accounts, both confirmation-protected.
  • Bike Reservation is accessible only when a signed-in user asks to reserve a bike. The application will autoselect a bike from the station and link them to a page with the following information:
    • A subtitle with the bike number and a link to view all bikes at the appropriate station and select the same or a different one (if for some reason the user can't use the selected one or has a particular Thing about particular Numbers ¯_(ツ)_/¯).
    • A text box containing the bike number, the user's email, and the station number.
    • A button to reserve the selected bike from the selected station, which when clicked has the following behavior:
      • If the user is signed in, they are routed to a success page, which confirms their trip booking and suggests they check out their Trips page to view trip information.
      • If the user is not signed in, they are instead redirected to the Pricing page, where they are informed that they must choose a payment plan in order to reserve a bike.
  • End Trip is similarly accessible only through the Stations page, and this time when a user returns a bike. In this case, the bike is returned to the selected station and the user is shown a table displaying all the information about their newly-ended trip that would be shown in their Trips page at the top.
    This page also includes a button at the bottom to take the user to said Trips page if they want to see all of their trips

Summary of changes you have made since the prototype

• Bike reservation: Instead of displaying a list of bikes and telling users to choose a bike to reserve like our initial prototype, we figured that it would be more convenient to assign a bike to the user at each station.
• Stripe payment: The prototype had no integration with a payment API (it couldn't accept payments). We added functionality to both allow users to subscribe to our service and pay-per-trip without a buy-in to a subscription. As part of this, we updated our pricing page, showing all 3 options for payment, and our account page, to display the user's subscription information and allow them to cancel their subscription.
• Our prototype required users to sign in again after creating an account, and routed users to the homepage after signing in. The routing was updated, and users are now automatically logged in after creating an account.
• We added functionality for users to view their list of trips and trip history. We also rerouted the reservation links including the reservation page and confirmation page, to prevent users from reserving a bike unless they have a payment plan and to improve intuitive navigation of the website.
• We improved the map substantially—fixing a loading bug and allowing users to reserve bikes through buttons on the map popup identically to the list view. We allow users to now select between map or list view instead of listing both sequentially. We also improved the aesthetics with the pins, added a user profile picture (which is hard set to Bass Hall on the non-deployed version but should pick up the User's IP address and show on that location instead if the user is using the deployed version)
• We smoothed out the viewing experience on the mobile app, allowing users to use a dropdown menu instead of the topbar to allow page navigation if they view from a mobile device.
• A lot of styling work was done to make our site look professional. This includes a newly updated logo and favicon, customized map pins, readable and color-themed fonts, confirmation buttons for destructive choices, and more features.

Recommended walkthrough steps to observe key features

• Begin on the home page. Read it! Click on the text This could be you! Enjoy your life. Observe the nav bar at the top of the page that says ValetBike on the left side. Navigate to the Contact page, just to see it.
• Navigate through the nav bar to the Stations page.
  • Check out the map! Slide it, click on a pin or two, look at your tiny little person icon, look at your nearby maps.
  • Try clicking on the Reserve Bike button and see what it says.
  • Click for List View at the top and check out the view version without the map.
• Check out the Trips page, just to see what it looks like before you have an account.
• Go to the Account page, and click Sign Up at the bottom. Enter an email and password, and then the password again and click Create an account
  • Check out your account page!
    • Edit and upload your profile picture (the edit button in top right) if you want.
    • Edit in your name and phone number (using the edit button on the top right corner of the Contact Information subheader).
    • Log out (through the dialogue) and go back to the account page. This time, forget your password. Go through the dialogues from the Forgot Password option, and then check your sign-in email for an email with instructions on how to reset it.
    • Log back in (with a new password if you wanna)
• Go back to Stations. This time, select a station and try to reserve a bike.
  • Confirm your information, and try to reserve a bike. Notice you get rerouted to the Pricing page.
• Select a payment plan.
  • Input generic fake card information (the stripe is set up to not accept real payment so don't submit a real card).
  • Submit for the subscription plan.
• Go back to Stations and select a station to reserve a bike from (again)
  • This time, reserve the bike, check out your confirmation, and go to your trips page. Check it out! Enjoy your ongoing trip.
• Once again, navigate to Stations
  • Return your bike at a station, and check out (again) the confirmation with your trip information.
  • Use the button to navigate a final time to your trip page, just to check it out.
• One final time, go to your account page. Scroll to the bottom.
  • Cancel your subscription.
  • Delete your account.

Link to live production deployment of application

https://valetbike-by-divas-2c66adac9bf4.herokuapp.com/