Live demo page

Picture you just discovered this hot new restaurant in a popular part of town. You make a reservation and you drive up the night up eager for a night of great food and drink. Upon getting to your destination, however, you realize that there. Is. No. Parking.

Anywhere.

You turn off the main street onto a residential side street and you experience the all-too-familiar torment where every time you think you see an open spot you realize that it’s only open because it’s in front of a driveway. And you think “there has to be a better way!”

Well now there is! (Sort of.) Enter SpotMe!

SpotMe is a mobile application I’m working on in a team of 4 engineers starting in mid-October of 2017. We’ve

Features

Facebook login

One of the first challenges I tackled for this project was O-Auth. O-Auth was much more complex than anything I had learned at App Academy thus far, and took much longer than I expected. Here’s what the flow for the authentication ended up being for me:

1. I used a website called Auth0 to help me with the process. Altogether, Auth0 didn’t actually save me any steps, but because it was built to handle multiple logins through multiple sites all using a single endpoint from the developer perspective (meaning the process to add Google authentication would be theoretically minimal), it seemed to be the right way to go. The built-in debugger was very helpful in me figuring out where I was going wrong in my requests.

2. Using Auth0, I pinged Facebook for an access code. This is a short-ish code that you’ll need for Step 3.

3. Facebook (and other websites - including Auth0!) have a Client ID along with a Client Secret that you have to keep, well, secret. I ended up storing this in the backend using the Figaro gem, in the application.yml file, so the next step is to ping our backend with the access code we got in Step 2, so Rails can ping Facebook for the actual authorization token.

4. Rails pings Facebook for the actual authorization token.

5. So Facebook sends you the authorization token back. We’re done, right? NOPE. It gives you the token back in a Base64Url encoded format, which I then used the jwtDecoder library to decode. When the token is decoded, we finally have access to our Facebook information (email, profile, etc) and we can sign in to our app normally.

The result is glorious:

GraphQL

Not only did our team try to develop a mobile application to a minimum viable product within a week’s time, we also learned multiple technologies along the way. The first of them is GraphQL, which we built onto our Ruby on Rails backend as an alternative to more traditional RESTful APIs. Instead of having many rigid API endpoints that serve a fixed set of data, GraphQL allows for a single flexible endpoint with a powerful querying language accessible to client applications, effectively eliminating problems of over fetching or under fetching of data. This also allowed for uninhibited iteration of the front end without delay from any prerequisite modification of the backend, greatly increasing development speed of the application. The use GraphQL on the back end allowed us have a more performant and extensible application. We used Apollo Client to access our GraphQL endpoint from our React-Native front end - instead of accessing a route to GET data, for example, we simply enter in a query into our front-end:

const GET_SPOTS = gql`
  query GetSpots($first: Int, $skip: Int) {
		allSpots(first: $first, skip: $skip) {
			id
			latitude
			longitude
			description
			image_url
			price
			rating
			address_number
			address_street
			address_city
			address_state
			address_zip
			reservations {
			id
			start_time
			end_time
			spot {
				id
			}
			user {
				id
				email
			}
		}
		}
	}

Google Maps and seeing all your spots

The major feature of the application is being able to see spots near you as you’re driving around on a map. We utilized the Google Maps API to display all the spots that we just retreived using our query. Users are able to create spots with just an address, and our application will access Google Maps to convert the address into longitude and latitude, which determine the location of the spots on the map.

Note that the address the user enters doesn’t need to be perfect. The Google Maps API is intelligent enough to figure out your address even if users use shorthand or acronyms.

Reserving and Holding Spots

More coming soon…