Map Based Application
Requirements and the goal
The requirements for the app was quite straightforward. It should be a map-based web application, where users can add their needs and projects according to their geolocation.
After that, it should display a kind of a heatmap, which represents a needs distribution and relations.
Technology Stack
Based on requirements we decided to use our classic stack:
Meteor as a platform allows us to build apps fast and don't waste time implementing basic functions such as user authorization, user management and etc.
The second important step was to choose a map library. According to the requirements we found only one library which fits our needs — Leaflet.
It's a very popular and wide-spreaded solution, used by many big companies and service providers. Our clients had a suggestion on heatmap plugin, which we'll need to use. Also, Leaflet has a great documented API which allows implementing a lot of custom behavior.
Projects List
The main application page shows a map with a heatmap overlay indicating community needs. On the right side there is a projects list with ranks and short description.
The most challenging part when creating this page was to organize all the routes and the layout correctly (each sidebar page has its own route).
Add Project
Add project is a subpage, which has its own route and routes for each step.
It allows users to add and fully describe their projects, select target changes and upload project logos and images.
We organized all form elements to be separate React components across the project to provide style and code consistency.
Project Page
Each project from projects list has its own page. It shows project location and "affect area", its description and other metrics.
On this page users can upvote/downvote for a project.
Expert View
Expert view is an internal page for experts who help to work on the projects and target change values.
Sliders on the page help to set a compliance between different evaluation metrics.
Account Form
After a sign up process we need to know more about each user. This 3 page form allows users to fill more information about themselves.
In the end of the process user can upload his image or company logo. In other case user's profile image will be generated automatically based on his name characters.
Responsiveness
App design files was provided in 2 modes: desktop and mobile. The difference was quite huge, because the main app element - the heatmap layer and the map itself should be organized in a different way on the small mobile screens.
We spent some time adjusting layout and components to the mobile platforms and managed to get a fully working solution.
