Skip to content

Mock-up of the product analytics web portal I developed at Alibaba for internal users and external clients. Includes live search, filters, role-based access control, product listings, and data visualization.

kennethlng/digiroma-mockup

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 

cover

Digiroma is a product analytics web portal I developed at Alibaba for viewing and editing product details and visualizing data in interactive charts. The app is used internally, so this is just a mockup of what I worked on as I'm not able to share much about its use case.

Installation

  1. Clone the repository or download the project to your desktop.
  2. Run npm install to install the dependencies.
  3. Run npm start and open http://localhost:3000 to view the web page in the browser.

Stack

React Javascript Nodejs MySQL Viserjs Ant Design

Features

Live Search

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. The Authorization component checks the component's action (e.g. read-product-data) and verifies it 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.

import React from 'react'; 

const check = (action, permission) => {
    if (action === permission) return true; 

    return false; 
}

const Authorization = props => {
    const { action, permission } = this.props; 

    return check(action, permission) ? props.isAuthorized() : props.isNotAuthorized(); 
}

Authorization.defaultProps = {
    isAuthorized: () => null,
    isNotAuthorized: () => null
}

export default Authorization; 

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.

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.

data visualization

Contact

If you have any issues or questions, message me on Twitter or email me hello@kennethlng.com.

About

Mock-up of the product analytics web portal I developed at Alibaba for internal users and external clients. Includes live search, filters, role-based access control, product listings, and data visualization.

Topics

Resources

Stars

Watchers

Forks