redacademy/bikelocker-spring-2019

BikeLocker

Project Description

BikeLocker is an iOS app created for the modern city biker. It will help you find and share information about bike parking around town. The information provided is from the Police Department of Vancouver as well as from the biking community itself. As a user, you can check where there are lockers available, whether they have been reviewed by other users and how safe it is to leave a bike there. You can also add new bike parking spots or add your review to existing ones.

App Demo

About the Authors

Nancy Chu holds a BS in Mechanical Engineering from UBC and is an experienced in the robotics industry. She was the project manager in this project, responsible for the roadmap, backlog and sprints planning on ZenHub, plus a great portion of the code, especially the GraphQL backend on GraphCool.

Gavin Jin is a talented developer, constantly seeking new technologies to learn. More recently, he is diving into blockchain technologies. He loves using Javascript, React, React Native and CSS. In this project, he mainly contributed to the backend in GraphQL and the CRUD for the bike lockers.

Jeremiah Aguirre is a skilled developer and web technologies Teaching Assistant. He enjoys working in a team and always likes to learn new things. Some of his favourite languages are React, React Native, Javascript and PHP. For this project he mostly worked on integrating Google Maps with customized app pins and the user on-boarding screens, having contributed to the other parts as well.

Andre Moura an experienced Product Manager working in the Tech Industry. He was responsible for the app structure and navigation, as well as the CRUD for the user profile information.

Technologies Used

• React Native
• Apollo
• GraphQL
• AsyncStorage
• XCode
• Google Maps API

Instructions for Running

Installation

Install dependencies:

cd server
yarn

cd client
yarn

You will also need to install Podfiles for Google MapView

---

• Navigate to:

client/ios

• And run:

 pod install

---

Run iOS simulator

cd client
react-native run-ios

bikelocker-spring-2019's Issues

Style Profile screen elements

Match design with styling Profile screen elements.

Add Splash Screen

Add Splash Screen

Create Thank You Modal

Create thank you response modal

• On submit of adding a locker, show thank you modal

Create profile screen

Add profile screen

• Show current users profile
• Edit current users about section
• Edit current users contact info

Add gql query to Profile Container

Add a query to fetch user data from endpoint.

Style Add a Locker Modal

Create Presentation side of Add a Locker Modal

• Correctly display added photos (adjusting add photo button)
• Display rating as locks
• Correctly styled form and buttons

Implement Locker Input functionality

Implement Locker Input functionality

• Allow users to add locker spots
  • Upload pictures
  • Add review

Create Edit Profile screen and components

Create Edit Profile screen and two components for the tabs About and Contact

Add resources screen

Create resources screen

• Add hyperlinks

Create Find A Locker screen

Create Find a Locker Screen

• Search Component
• Map View
• Pin Modal

Populate Graphcool database with starter data

Populate Graphcool database with starter data

-Perform following mutations:

• Add at least 5 reviews
• Add at least 5 lockers
• Add at least 5 users

User Auth Flow

User auth flow:

• Create a Backend To support your auth flow
  • Use GraphCool
• Login
  • Create UI
  • Connect UI to Backend Logic
  • User input validation
• Register
  • Create UI
  • Connect UI to Backend Logic
  • User input validation

Create Search field component

Create Search field component

• Implement google places API
• Enable Autocomplete

Style the Edit Profile screen header

Add the styling for the Edit Profile screen header.

NavBar

Create Map View component

Create Map View Component

• Add map view with geo tracking

Import City of Vancouver rack locations to database

Import City of Vancouver rack locations to database

• convert from CSV to JSON
• convert street address to lat and long on server side. Load into database

Create about screen

Add about screen

• populate about screen with static content

Add Navigation

Add The Top Nav

• NavBar
• Hamburger Menu

Add city to graphcool schema

add missing field to schema

Add rating to Locker info modal

add rating to Locker info modal

• Display average from last 10 review ratings

Create GraphCool Server

Create How to Use the App screen

Create How to Use the App screen

• Use a presentation component
• Populate it with the given static data

Add contact us screen

Create contact us screen

• add text input
• submit the input

Create global styles theme

Create global styles theme

• Add standard fonts, colours, spacing, links, buttons, etc.
• Create global Text component and others that are extensively used.

Create Auth

Creating Authentication Process

• Create Account & Login
• Send and Retrieve Data

Create Resources screen

Create Resources screen

• Use a presentational component
• Populate it with give copy and links

Connect Login Data

-Run CRUD operations to fetch and add account data

Locker modal navigation

Locker modal navigation

• Open modal in half view and then add arrow button so that it pulls to full view with slide up animation
• Pass in data from MapView pins

Link behavior to locator icon in navbar

Hamburger Menu

Menu

• Navigation To all Screens
• Logout Function

Create contact info form

Implement Logout Functionality

Implement Logout Functionality

• implement logout on drawer menu

Create about me form

Update navigation to load Authorization screen

Update navigation to load Authorization screen

• Use createSwitchNavigator to open AuthLoading screen and check if there's a user token to load app or signin/signup.

Add and update dependencies

Add and update dependencies

Create Sign Up

Use final form to create new user

Create Locker Info Modal

Create Locker Info Modal

• Implement slide from bottom
• Read data from database (reviews - show average)
• Implement Directions button with link to 3rd party map app

Implement avgRating calculation

Implement avgRating calculation

try to implement the avgRating calculation as a function in the server side with graphcool. Failing that, implement it on the client side.

Perform code clean up

Perform code clean up

• Check that all components have the proper PropTypes
• Remove commented code
• Remove unused imports
• Remove console.logs and other unnecessary code

Create Reviews Modal

Create Reviews Modal

• CRUD: Update database
• FORM: Text input for review
• Locker rating
• Add Photo (RN image picker)

Add OnBoarding

Three Paged Modal

• Creating modals (3x)
• First Login only

Add EditProfile screen to Profile Stack

EditProfile will be a separate screen for user input.

Create Login

Validation and Login with Final Form

Add README

Add a README file

• add project description
• add authors
• add technologies used
• add installation steps
• add screenshots (GIFs)

Add better ux to keyboard on add locker screen

• add keyboard avoiding view
• add onblur to keyboard when tapped away

Add how to use screen

Create how to use screen

• popuate screen with static content

Query and show user profile

Create file structure

Create file structure

• Use R10 file structure as model

Pin colours(MapView)

• Give markers colours according to the locations security