Digiroma: Product Web Portal

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

Kenneth Ng
Mar 25 · 3 min read

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.

Documentation

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


Thanks for reading!

Kenneth Ng

Software Developer and MBA Candidate

Kenneth Ng

Written by

Software Developer

Kenneth Ng

Software Developer and MBA Candidate

More From Medium

More on Alibaba from Kenneth Ng

Also tagged React

Also tagged Web Development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade