Dog walking area
Landscaping of the park
Reconstruction of the square
Online platform for micro improvement of urban areas
2022-2023
DESIGN
QA
DEVELOPMENT
Tasks
- 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.
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.
Project lifecycle
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.
Step 1
Project creating algorithm
The name and description of the project, which will be available to all users.
Step 2
Project idea
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).
Step 3
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.
Step 4
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.
Step 5
Project team
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
Project card
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
Project team
Displaying progress and current status over the project lifecycle
Timeline
The ability to financially support any of the projects on the Platform
A set of project documents, concept design, various letters, requests and responses
Donation system
Documentation
Moderator Interface
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
Mobile version
The platform is adapted to mobile devices — you can use it where and how it is convenient for you.
Frontend
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.
Feature-Sliced Design
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
Component Library
Backend
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.
SmartActors
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.
Authentication
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.
Data storage
File storage
QA
(Quality Assurance)
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.
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.
Testimonial
Look at our other projects