Skip to content
This repository has been archived by the owner on Nov 16, 2022. It is now read-only.

Home

Jump to bottom
zyan225 edited this page Nov 25, 2020 · 8 revisions

Multilingual Glossary Frontend

This space will be used for documenting the process of creating the COVID-19 Multilingual Glossary project.
It also contains some useful documents and format the team members should follow in this project.

Organization: WDCC

Introduction

This repository only contains the code of the frontend. There are 3 pages of the website, Welcome Page, Search Page and AboutUs Page.
In the search page we have two mode to display the data, one is pagination one is all data at once.
We also provide darkmode for the webstie.

Welcome Page

welcomePage

Search Page

allData

About Us Page

AboutUsPage

BackEnd API

The BackEnd API is used only in the SearchPage, to restrive all the data from the database.

  • Sequence time is generated by real time. Using sequence time due to the search page using the instance searching, the front end will always display the newest data from the backend
  • pageRows indicate we get all the data from the backend.
let url = https://cmlgbackend.wdcc.co.nz/api/translations?sequence= + sequenceTime + pageRows=all
 
if ( this.state.word !== '' ) {
    // add search words if had
    url += '&word=' + this.state.word;
}

if ( this.state.rowsPerPage !== "all" ) {
    // retrieve information for one page only
    url += '&pageNum=' + this.state.currentPage;
}

Potential Risk

Currently we load all the data in the frontend and cache it no matter which display mode the user choose. Besided, for sorting the data, we also doing in the frontend. Based on the suggestion of professional tutor, the current design is not good enough.

  • It will be better to send the request to backend API when ever the page is changed.
  • It is also better to do the sorting on the back-end and send request every time sorting is needed by using lazy loading approach.
  • When searching for related words, it is better to only search under languages displayed. e.g. If the user types "covid" and only "English" is selected, we should only search for English words that contain "covid".
Clone this wiki locally