Welcome to BartVentures

Background and Overview

BartVentures targets tourists visiting the San Francisco Bay Area. A user can use the app to figure budget. In addition, users can look at the popular attractions near that Bart Station to better help them make up their mind where to explore.

Technologies

• MongoDB for managing our database
• Express for simplifying the server creation process
• Node.js based server
• Axios for fetching information from the backend
• JavaScript ES6 for enhancing components
• React.js for updating and rendering proper components
• Redux for maintaining predictable state
• MLab for remote storage
• HTML5 for formatting
• CSS3 for styling components

Functionality and MVP

Map

We used Google Maps API to include the map on our website. Map shows users how far they can get with their budget on Bart.

Here is code snippet showing how we center the map to the area where bart is operating

  const GoogleMapExample = withGoogleMap(props => (
            <GoogleMap
            defaultCenter = { { lat: 37.773972, lng: -122.431297 }}
            defaultZoom = { 11 }>

            { this.props.bartMarkers.map((bart, index)=> {
              let loc = { lat: bart.lat, lng: bart.lng};

Markers

Markers within the map show bart stations and public attractions, such as parks, museums, and tourist areas. Users can get more specific information of a certain public attraction on the right side of the screen and scroll through all the attractions they can visit within the budget range. They only need to enter the budget and choose the starting bart station.

User authentication

BartVentures has a secure frontend to backend user authentication using BCrypt. This is a step towards giving logged users opportunity to comment on certain attractions (which is a future feature).

We used Validator to check if the email provided by the user is a valid one.

if (!Validator.isEmail(data.email)) {
  errors.email = 'Email is invalid';
}

Future Features

• Logged Users can comment on attractions
• Display weather within the map
• Display free events within the map