Random User Table

Overview

Simple webpage to show random user data from https://randomuser.me/ API using react js

Requirement

To get started, you need to install [wnlijoan check here

Instalation

Lets begin installing the packagandowd running the project on your local machine:

Clone this repository: git clone https://github.com/maulanaahmadarif/random-user-table.git.
cd random-user-table
npm install
Start the project npm run start
It should running on your localhost with port 3000 http://localhost:3000

How it works

The initial load will fetch the data from https://randomuser.me/ API with the these query params:

query	type	description
results	`Int`	How much data client needs from the server
page	`Int`	Current pagination page
inc	`String`	Specify which fields to include

Sometimes, you want some random names and not extraneous data such as location, phone, etc. Using the inc, you can specify which fields to include, in this case we are only need gender,name,login,registered,email to show to the table

Each columns can be sorted except for username desc or asc by clicking the up and down arrow in each column header, this sorting is not fetch from the API because by developing this webpage, the sort is not supported yet in the API, instead we are manipulating the fetched data using simple localCompare method

The filter function includes with two parameter, search by username and gender. This filter implements simple filter method to manipulate existing data, and for the input search by username its wrapped with debounce function using loadash debounce

Deployment