Yesterday, we built two simple APIs using Flask. Today, we will continue to build our web application, focusing on building the frontend using React. Our goal is to build a simple web application that allows the users to select the person / companies (entities) that they would like to get the latest news of. We will be building our web application using React as the frontend and Flask as the backend. Today’s post will cover the data flow as well as the Flask backend API logic.
Data flow between Frontend and Backend
The figure below showcase the data communication between our frontend and backend. The user will begin by entering / choosing the entity (person / company) that they would like to track. Our frontend will then take the chosen entity and query the backend database. We will use the selected entity to retrieve all the relevant document ids from the entity-doc-mappings database. We would then use the document ids to retrieve all the relevant documents from the main database, filtering out fake news, duplicate content, and out-dated articles. Lastly, we would use the latest document ids to retrieve the sentence-level data from sentence-level-topic-modelling database. The relevant document and sentence-level results are passed back to the frontend to display to our users.
Our frontend has two dynamic pages, meaning that the data for those pages changes depending on which entity or document you are querying. The two figures below showcase our home page and document page.
Home page – allows user to select an entity to track and display all the “latest” relevant articles
Document page – display sentence-level data of a document, which includes topic modelling and sentiment analysis
I won’t be releasing my react codes here because there are so many different component and container files. I will probably release the whole working web application code in the future using Github. In the meantime, I have screen recorded a quick demo of the web application, which you can view it here: https://youtu.be/UweuucnScqA