Digiroma: Product Web Portal

With data visualization, RESTful APIs, and role-based access control

Published in

Kenneth Ng

3 min readMar 25, 2020

Digiroma is a full stack product web portal I developed at Alibaba for viewing and editing product details and visualizing data in interactive charts.

The project is in stealth so I’m not able to give much information about its use case. All screenshots are from a mock-up using the same frameworks.

Stack

The back-end server was written on Node.js. The front-end was written with React with Ant Design for UI. I used Koa.js middleware for routing and APIs, Viser.js for data visualization, axios for HTTP client, and MySQl for database management.

Features

Live Search

We wanted users to be able to search for products as they type and see results pop up in real-time. A timeout was included so that API requests were only sent after the user stopped typing for a brief duration. Otherwise, it resulted in a build-up of requests. For extra measure, axios’ Cancellation feature was used to cancel requests in the event of duplicate requests to the same endpoint.

Role-Based Access Control

Because the product web portal was to be used both internally by our team and externally by our clients, I needed to add restrictions to pages or components on a page.

I created an Authorization component that receives role and perform props and verifies them against the signed-in user’s permissions. If the user has permission to perform the action based on his or her role, the Authorization component renders the isAuthorized prop. Otherwise, the isNotAuthorized prop is rendered.

I also added the ProtectedRoute from ReactTraining to redirect users to the login page if they weren’t signed in or didn’t have the proper access.

RESTful APIs

In addition to opening the website to our clients, we also wanted them to be able to plug into our APIs. I designed RESTful APIs with CRUD operations and HTTP status codes and messages. The user’s token is included in the Authorization header to validate the request.

Data Visualization

Viser.js was used for data visualization. They have a huge library of ready-to-use components for React. It was just a matter of properly mapping over the data.