Online platform for micro improvement of urban areas
Displaying various map layers: micro-projects, government projects, data from the GAC
Authorization on the platform with the possibility of password recovery
Working with micro-projects on the map
Implementation of the list of specialists and the project catalog
Implement the platform storage using MinIO.
Implement the work of micro-project diary, news presentation on the front page, likes, comments.
Implement Admin UI as a separate React application with the ability of comments, specialists and projects moderation.
About the project
Implementation of urban beautification projects
The Platform for public places was created to unite city activists, authorities, sponsors and direct executors of works for the implementation of urban beautification projects.
In addition, the Platform provides access to an up-to-date map of the state of landscaping, notifies city communities about successful projects and attracts more activists to the processes of improving the city environment.
Working with the map
The map on the platform reflects the state of improvement projects and provides information from the public cadastral map on the state of certain territories of the city.
The idea is framed
Accepted on the platform
The project is approved
In the process of implementation
On the balance of the city
Project is finished
Creating a project
Any user can add their project to the platform. The project will be moderated and shown on the general map.
At the very beginning, the lifecycle of the#nmsp;landscaping project is presented. Each item leads to a page with additional information.
Project creating algorithm
The name and description of the project, which will be available to all users.
You can draw a polygon directly on the map, the information about the territory will display the numbers of cadastral plots and information about them from the PCM (Public Cadastral Map).
Choosing a territory
It is important to show the problem of the selected territory in the photo. Concept design is a desired picture of the result, which the designers on the Platform can help with.
Photos and concept design
The platform has a catalog of proven specialists from different fields. You can put together a dream team for a project of any complexity.
At this stage, the initiator's work is completed and the project moderation begins. Upon successful completion of moderation, the project begins to be implemented.
The project has been successfully created!
The project is created
A project card contains full information about the project: name, description, diary, donations, documentation, team.
Full information about the team, with the opportunity to join
Displaying progress and current status over the project lifecycle
The ability to financially support any of the projects on the Platform
A set of project documents, concept design, various letters, requests and responses
The moderators of the platform receive notifications about new projects, changes in current projects, new comments and applications to the catalog of specialists.
Notifications about changes in projects on the platform
Notifications about new comments
The platform is adapted to mobile devices — you can use it where and how it is convenient for you.
We selected React for the client part of the "Platform". In development, we partially used the Feature-Sliced Design methodology, dividing parts of the project into the following layers:
app: styles, settings and providers for the entire application;
pages: a layer of full-fledged pages of our application, consisting of components and features;
features: a layer of actions and user scenarios, for example, an authorization feature and a donation feature;
shared: reused components, models, and functions.
To work with the city map, we use the Leaflet with layers from Google Maps for satellite maps and the OpenStreetMap to represent the map as a schema.
Working with the map
In fact, the Platform is two React applications, the transition between which is carried out using Nginx. The first application is basic and available to everyone. That's what you use when you go to delaigorod.ru. The second one is available only for the moderator and they use it to process user comments and projects.
We have also collected common components, styles, hooks and models into one repository, which is a library of components. It is used as an npm dependency in each of the projects and allows us to avoid copy-paste and maintain the same behavior and appearance in the same parts of applications.
Different types of users
The server part of the "Platform" was written in Java using our own framework — SmartActors. It uses an actor model. Its essence is that any functionality or feature consists of small blocks — actors, small pieces of Java code that can be easily reused. A message is sent to the server, it indicates exactly what we need to do and what data we are given for this. Then this message goes through each actor in the chain and the finished result comes in response.
We use JWT tokens for authentication. The client has two tokens stored: the access token and the refresh token. The first one is needed in order to check whether the user is authorized and has a relatively short life span. And the second one was created in order to update access after its expiration.
We use PostgreSQL to store application data. We use JSONB, so we can store any set of fields for any object. All important collections have archive collections, which, if necessary, will restore the previous state of the required object. Also, in order to work with geographical objects, we added an extension to PostgreSQL — PostGIS, which simplifies all work with geographical objects, allowing you to work with GeoJSON.
To store files, we use MinIO, a high performance object storage. We have to work with files a lot, in different formats and so that everything is fast and reliable. Since each user can have a photo, and also a resume. Each project can have several photos and a large number of documents. And since this is a separate service, it can always be moved to a separate server in case more memory is needed for its operation.
The process of working as a QA specialist is a very multifaceted process: from communicating with the customer to clarify the requirements to testing a ready made part of the software to make sure that all the requirements are met.
We actively participated in the prototyping process. We made sure that the prototypes and layouts met the requirements, and further coordinated them.
After approval, we documented all the requirements by writing user stories and acceptance criteria. Then we created test documentation based on them. The testing process was based on testing for functional and non-functional requirements. We tested on different devices, operating systems and different browser versions. Also, Postman was used to test requests to the server. If errors were found, we created bug reports, where we described in detail how to repeat the bug, indicated its criticality and the environment in which testing was performed.
When working with 7bits, I especially liked the fact that the developers were actively involved in the formation of product requirements. I got the right set of features at the end of each iteration, and I didn't have the feeling that it still needed to be finished here, here, and here. The long-term planning of the project was carried out professionally, but I would also note the proactivity of the 7bits team and their desire to help me achieve the tasks set for the project.
Today, when the "Delai gorod" platform has been working for more than 6 months, I want to say with confidence that I got the result I expected. And I enjoyed the very process of implementation at the same time.