Mobility Data Space: React Frontend
The Mobility Data Space is a project of acatech - the German Academy of Science and Engineering - and aims to simplify the exchange of mobility data.
For the project, we were responsible to create Frontend for MDS Catalog in collaboration with the Fraunhofer Institute and olli design using React.js. The task was to integrate the open source backend of the broker with Elastic Search as well as material design components in the frontend.
Overview
The customer requirement
Integrating the open source backend and Elastic Search database with the front end can be technically challenging. It requires careful configuration and APIs for efficient communication. Material design components must be customized and styled to maintain the overall design. Performance optimizations such as caching, lazy loading, and query optimization are important. The front-end should be easy to use, scalable, and flexible to meet future needs. This then resulted in the further requirements:
- Integration of Open Source Backend and Elastic Search
- Adaptation of material design components
- Performance optimization
- Scalability
The solution
Successful solutions overcame the challenges. The backend and Elastic Search database were seamlessly integrated with the frontend. Material design components were carefully customized to ensure a consistent look and feel. Performance optimizations such as data caching, lazy loading, and search query optimization were implemented. The frontend is user friendly and scalable. The MDS catalog runs smoothly and meets future requirements.
Technologies
Technical Approach
Frameworks
React.js
Programming languages
JavaScript, HTML/CSS
Server & Databases
Apache, MySQL
Version control
GIT
