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


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

See the mock-up project on Github

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

We wanted users to be able to search for products as they type and see results pop up in real-time. I used a timeout to make sure API requests were only sent after the user stopped typing for a brief duration, which otherwise would’ve 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.

Live search

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.

Visualization

Documentation

As with all my projects, I maintain a wiki to document all variables and processes.


Connect on Twitter @KennethLNg