VanGo is an itinerary planner for locals and tourists who want to discover events and attractions in Vancouver. Users can find information on events and attractions, organize their plans, and save or share them to better explore the city.
VanGo was created to aid locals and tourists in exploring the city by showing them local events and nearby attractions. In comparison to other itinerary apps, VanGo integrates attractions and events all in one place. We will be storing event information, list of itineraries, and user information. Using this data, users will be able to plan and fill their itineraries with events and attractions, generate a path between all their events and attractions, and create a user account to save their itineraries. Some additional functionality we can add are an event filter based on type and cost, Google sign-in to save data to itinerary information, the ability to detect time conflicts between events, the ability to display projected weather, and the ability to display areas with high crime activity.
We were able to complete all of our minimal and standard goals and one of our stretch goals which was to add filtering. In the future, we'd like to be able to detect time conflicts between events and add social media sign-in. Most of all, we would like to extend functionality to other major cities.
As a team, on top of using the technologies introduced in our class: HTML/CSS/Javascript, React, Redux, NodeJS, Meteor, MongoDB and Heroku for Release Engineering, we also integrated many external APIs to create a seamless project that integrates both events and attractions in Vancouver into a simple-to-use itinerary planner.
Our initial plan to scrape websites for events was changed since other websites either had terms of conditions that did not allow for scraping or the data from the websites had inconsistent formatting (i.e. event dates were strings in different formats which did not allow us to get the correct times for events). We had to adapt our plans by using Yelp's API to get our events instead.
We learnt that Meteor and Redux do not interact well together. We used Meteor's withTracker which was tracking data in the database, so whenever we updated the database (like fetching the event and attraction data using Yelp's API and storing it), the map would re-render each time causing a lot of throttling. This was fixed by removing withTracker from the client, and creating Meteor methods to store the data in redux to decouple the client and the database.
When we deployed the app, we realized that there was an issue with the events being rendered on-screen when multiple users were using the app simultaneously. One of us would select a date and the other would get the markers for that particular date. We realized the cause was due to the events being stored and fetched from a single database where multiple users were all manipulating the same data. This was fixed by adding a redux store for the events retrieved for a selected date so that each user had their own state instead of sharing one. In the future, we would like to store all the events in the database per call to reduce the number of API calls and effectively speed up performance. We learnt the importance of where to place the data as it not only affects the time to retrieve the data, but also who has access to the data.
As our project involved many APIs such as google-maps-react and Meteor Accounts, our team came across insufficient documentation of how to use certain features of the API. To overcome this, we often had to read the code and look through existing issues to search for answers.
Semantic UI https://semantic-ui.com/modules/modal.html
Marker Icons https://icons8.com/ https://img.icons8.com/color/48/000000/compact-camera.png
React-Router Quick Start https://reacttraining.com/react-router/web/guides/quick-start
React Calendar https://www.npmjs.com/package/react-calendar
Debug Tool: Tracing why a react component is re-rendering https://stackoverflow.com/questions/41004631/trace-why-a-react-component-is-re-rendering/41005168
React Google Map API Tutorial https://dev.to/jessicabetts/how-to-use-google-maps-api-and-react-js-26c2
Zoom out Google maps to fit all the markers https://github.com/fullstackreact/google-maps-react/issues/335#issuecomment-487174836
Getting the Center Longitude and Latitude https://gist.github.com/tlhunter/0ea604b77775b3e7d7d25ea0f70a23eb
React + Redux - User Registration and Login Tutorial & Example https://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example Adding User Accounts & Adjusting Permissions https://www.youtube.com/watch?v=eNxuaTGq4Qk Meteor User Accounts https://github.com/meteor-useraccounts/core/blob/master/Guide.md
https://www.freecodecamp.org/news/how-to-make-and-test-your-own-react-drag-and-drop-list-with-0-dependencies-6fb461603780/ github link https://github.com/siffogh/drag-and-drop-article