This App mainly utilizes Ticketmaster's Discovery API, MapBox Geocoding Places API, and Mapbox's GL JS library to allow users to retrieve local events, and then search for events around the world. The Back-end is developed in Node and Express with MongoDB as the database allows users to employ CRUD operations on three collections of Users, Events, and Maps. For Back-End Repo click here.
Front-End: Angular with Angular Material is used for the front-end UI Components. Additional Frontend components include Angular Flex Layout and Keen-Slider. I also extensively used Illustrator and Photoshop to create wireframe sketches for the web application's design.
Back-End: Node and Express comprise the backend, and the database is served with MongoDB. Other packages include bcrypt.js, cors, jsonwebtoken, express-validator, and mongoose.
Tools Used:
APIs Used:
In this project I learned how to obtain the user's location upon initialization and then allow for asynchronous calls to both Mapbox's Geocoding Places API and TicketMaster's API to obtain Events. Extensively, I learned how to develop within Mapbox's extensive library and thus implement custom map functions, overall map styling, and custom styling of the map Markers.
I was able to combine Angular Material's autocomplete component with a call to Mapbox's Geocoding Places API to load a list of world places whenever a user used the main search bar.
Due to the breadth of the API responses from Ticketmaster's API, I learned how to properly structure the interfaces for the API responses and then apply that to the custom Backend API routes.
- Add Dashboard Components for saved maps.
- Once user add events automatically create a map with all the saved events associated with that user.
- Add additional functionality to map to save individual markers to User's saved maps.
- Implement more helpful UI features such as modal asking a user to confirm when they either add or delete Events or Maps.
- Implement edit feature on each Saved Event whereby the User can create a unique note about the saved event.
- Implement working calendar feature that automatically populates User's Calendar with the dates of their saved events.
- Implement advanced filtering for the user's saved events based on dates, location, and event type.
- Add ability for Users to search Users of app and add them to Friends.
- Create a "friends" key for each User to store individaul User's friends and show if Friend is interested in the same events.
- Add dashboard feature to put User's interests so that suggested Events based on User's preferences appear.
- Add "components" document to easily copy & paste sections of the readme.
- Additional styling to Featured and My Events cards.
- Refactor the code.
See the open issues for a full list of proposed features (and known issues).
This project was generated with Angular CLI version 14.0.1.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Clone or fork the Repo, and ensure that you have the Angular CLI installed.
In the project directory.
npm installIn the project directory.
ng serve --openUpon starting the client server, The app will attempt to retrieve the user location. Upon successful retrieval of user location, the app will automatically load 10 cards of events nearby. The user may also search for a location anywhere in the world, and the app will update with events near that new location. The user is able to get additional information on a separate page or add that event to their "My Event" section if they are logged in. In the bottom is a "Load More Events" button where the user can load 10 additional events on mouse click.
Below is the map section whereby a map will be loaded with the center point being the user's location. On initialization 40 events are loaded on the map and each user can click on the markers to retrieve additional information or they may save the event to their "My Events" section if they are logged in.
On the top right are the return to center, help, and filter buttons. If a user clicks on the return to center button the map will automatically scroll and zoom to the user's location. The help button opens up a dialog, which describes the map's functions, and the filter buttons allows the user to filter events from 6 events categories.
On the bottom right, is a load more function that will load more events on the map. This can be applied when the map zoom is far away. Yet when a user is zoomed in sufficiently on the map, every time the user scrolls, 40 more events load onto the map automatically.
On the left are the search places and events panel buttons. In the search button the user is able to type in any location in the world, and the map will find 5 matching locations matching the query, and the map will zoom out to show the 5 search markers matching the query. If the user selects one of the markers, he or she is then able to load events from that location, which will set the Events count to restart from that location.
In the Events panel, the user is able to click on a drop-down of all the events loaded on the map. When a user clicks on a event, the map zooms and pans to that particular event, and the user is then able to read more information about that event or add to their own Events.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.