Vn Smart City
I take on the role of the lead front-end developer for the Vn Smart City project. I have developed this website into an attractive interface, focusing on visualizing data to become the best tool for capturing information within the IoT systems in various buildings and cities.
Visit website- Front-end Development
- UX and UI Design
- Data Source Scraping and Identification
The problem
In 2023, LUMI participated in IoT projects providing management solutions for buildings and cities. Recognizing the strengths and weaknesses of competitor's management tools, the main objective of the project was to create a website that could make a significant difference, focusing on an interface that can intelligently and comprehensively provide a large amount of information, as well as real-time early warning alerts.
Data Source Scraping
During the development phase, the input data must ensure the highest level of rationality and alignment with reality, simulating key information about the city: lighting system, water system, CCTV system, and transportation system. I collected and filtered all the data from various websites, resulting in a large and complex volume of data in multiple formats. I have completed the construction of the dataset and converted it into a GeoJson format that can be displayed on a map.
Enhancing the User Experience
Within the system that utilizes multiple data, components can become ineffective or visually overwhelming. Therefore, I have incorporated all the information onto a map, where all the components can be interacted with to display information when necessary. Additionally, the selected components change color to differentiate them from others. This allows users to easily access comprehensive information that is hierarchically organized, ensuring a user-friendly experience.
Technology
The website is built using JavaScript (TypeScript) programming language and incorporates the following technologies: ReactJS library for the user interface, MapBox V3 for map display and related components like Marker, Popup, etc., and Socket.io for real-time data updates.