Digiroma is a full stack product analytics 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 share much about its use case. All screenshots are from a mock-up using the same frameworks.
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.
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.
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.
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.
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.