My final project at the IT Academy is a culmination of my work to implement the complex features of Angular, understand how to make a visually pleasing site design, and implement intuitive map features. My original presentation PDF created in Spanish can be found at this link here. I started out by exploring case studies of inspirational website experiences using maps.
As an overview, I implemented the MEAN Stack (MongoDB, Express, Angular, Nodes.js) as the main technological stack. The front end was devised with Angular and Angular Material. I used Illustrator as the main tool to create the icons for the site.
For the backend, I utilized Postman extensively to test my endpoints.
I can divide my App development process into 3 steps:
- Planning and Design
- Front-end
- Back-end
Planning and Design:
- I completed an initial investigation into applications and designs that I enjoyed based on their color scheme and hierarchy.
- I completed preliminary wireframes to see how the elements would fit with one another.
In the end I wanted to emulate an app design that incorporated vector graphics, blobs, and three primary colors of pink, gren, and yellow.
Angular Material and Color Palette:
To accomplish what I wanted I customized Angular Material by selecting the three colors from the predefined color palette.
I created wireframes in Illustrator for large, medium, and mobile screens. But mainly, I focused on the large screen wireframe due to time constraints.
Finally, I drafted preliminary design schemes in full colors testing out different map styles and card layout designs.
Front-End Development
Site-Map:
Essentially, the site is composed of 3 main modules of Home, Authorization, and Dashboard. There is also a shared module that contains navigation features that are shared among the 3 modules.
The bulk of the Components are from Angular material with their respective documentations found at the angular material site.
As Angular Material did not come with a default slider feature, I incorporated a 3rd Party Responsive Keen Slider for the “Trending Events” section. This component worked well with the rest of the Angular components.
For the major map component of the site, I used Mapbox GL. Although the documentation is extensive and offers many advanced examples, for the purpose of my site, I initialized the map by indicating the:
- style – which is the color scheme you can modify with mapbox studio
- center of map
- zoom
- and the div in the Angular html that will hold the map content.
Furthermore, I used two Mapbox API’s to retrieve locations:
- forward geocodification
- inverse geocodification