ParkHero is an app that uses React technologies for dynamic front end interacting with an Express back end server and MongoDB for our database in order to provide a dynamic parking lot experience. For web scraping, the app uses the request from superagemt multi times in client/react side.
https://youtu.be/UcKDdcHC44E this is with sound and HD video. Click the link to open youtube video.
Using React we inserted a number of different components that dynamcially communicate with our backend servers and various API technologies to make up our ParkHero app.
The first component that the user would be encouraged to use is the Google Sign-In feature, which uses Google Sign-in API to provide our website with basic Google/Gmail related information to create a unique user experience. This allows the user to do things like favorite parking locations.
In relation to the actual function of our app, we begin with our Google Searchbar, which uses the Google Autocomplete API. The user can input a desired location into the searchbar, which then gives a dropdown of close options.
Once searched, our map component uses Google Maps API to display a map of the searched locations with pins of the parking locations close to the searched area.
The next component which uses the ParkWhiz API, displays all nearby parking locations' address, nearby street, and streetview image to the location you searched in this displayed format.
This is a closer view of one of the location's displays. You can click on the book & pay button which will send you to the page for payment information so you can reserve your parking spot.
You can click on the streetview image, which uses Google Street View API, in order to get a closer look at any one of the parking locations' street views.
Once you have selected a parking location, you can input your cell phone number to get the streetview image as well as a customized message with information about your spot.
In our busy modern lives, the last thing we want is to waste time looking for parking locations in our crowded cities. ParkHero takes care of this by allowing you to see which parking spots are available and have the best rates before you even get to your location. The app then allows you to pay for your spot ahead of time, to save you the hassle and the time it takes to find a spot once you're in the fray. Our app also allows you to see the spot on the street level so you won't miss it once you get there. If you need a text reminder, our app can also give you a SMS notification with basic information about your spot if you just enter your phone number.
Install the server and client dependencies using the preinstall command.
$ cd ParkHero
$ npm run preinstallTo start running server and client concurrently run the start command.
$ cd ParkHero
$ yarn startWe used the following API technologies:
- Google Auto Complete
- Google Sign In
- Google Map and Street View
- ParkWhiz API
- Node.js
- Express.js
- MongoDB
- Mongoose
- Javascript/ES6
- jQuery
- AJAX/JSON
- NPM modules:
- Cheerio
- Request-Promise
- Bootstrap 3
- CSS3 (including css animations and transitions)
- HTML5
- Canvas BG