Overview:

The goal of this dashboard is to allow researchers to analyse data collected from participants and gain insights into infant health. The dashboard is a React.js web application and is supported by the backend-offline team.

Setup and Installation:

  1. Clone frontend-web github repository. You need to get access as this is not a public repository.
          
       git clone https://github.com/infant-nutrition-project/frontend-web.git
  2. Open terminal, cd to the folder frontend-web and run the following commands to install necessary packages. You will need to download npm to run these commands, you can do that here.
           cd dev-dashboard 
       cd dashboard-frontend
       npm install
  3. To run the code and host the website locally run the following code from the dashboard-frontend folder. Note that browser should launch automatically with the website. As you make changes to the code, the website will automatically reflect these changes as soon as you hit save. 
          
       npm start

Getting Familiar with the Code:

  1. Login, Register, Logout


    When you first run the website, you should be greeted with a Login screen. As you will not have an account yet, you can simply press “Create new account.” This will bring you to the registration page. You will enter an email, username, password and will also be asked to confirm your password. There will be alerts on the screen if any of these fields do not meet the guidelines. These can be found in /src/RegisterPage/RegisterPage.js and include ensuring the email is valid (using a built-in JS email validation package), ensuring the username is between 3-20 characters, ensuring the password is between 6-40 characters and that the passwords match. Any of this criteria can easily be changed if necessary. Once you hit create account, an API call will be made to register your account and save your information in the database. You can also coordinate with the back-end team to require certain formatting for the database entry as well. Right now, the only restriction the backend has is that no emails can be repeated as they are the primary key.
    After creating an account, the website will automatically take you to the login screen and display a message “Registered, please login.” You will also notice that there is a “Forgot Password” button on the login screen. This functionality has not been implemented yet. Now, you can sign in using the email and password you registered your account with. Another API call will be made to validate your input. If unsuccessful, you will see a message that you entered invalid credentials. Note: you should never reveal which field is incorrect on a web-app as it will make it easier to hack into accounts by narrowing down the errors. If your login attempt is successful, you will be greeted by the “Dashboard Home” page. Note that if you try to access the landing page without logging in, say by typing into your address bar “localhost:3000/admin”, you will be re-directed to “localhost:3000/login,” as this is a restricted route. This was implemented using the PrivateRoute component found in /src/components/PrivateRoute.js.
    Once the dashboard redirects to the home page, you will be greeted by a welcome message and a logout button. Pressing the logout button will redirect the browser back to the login page. As I am typing this, there are issues with the CSRF token provided by the login API expiring. Therefore, the logout button right now does not make an API call but simply removes the user from the Local Storage. This logout function can be found in /src/services/AuthService.js and should be fixed as soon as the back-end problem is fixed.

    So now that we know what is happening in regards to the user experience, what is happening at the code level? The login, register and logout functionalities were implemented using Redux. Redux is a pattern and library for managing application state, using events called “actions.” It serves as a centralized store for state that needs to be used across the entire application, with rules that the state can only be updated in a predictable fashion. In addition to Redux, we also use Local Storage, React Router, Axios and React.js hooks. Local Storage is a type of web storage that allows JavaScript sites and apps to store and access data right in the browser with no expiration date. React Router is the standard routing library for React. It keeps your UI in sync with the URL. Axios is a library that helps us make http requests to external resources. Rather than explain in detail every file I added for this functionality (as it is a lot), I will provide a links to very similar examples that I found explained this topic very well: Example 1 and Example 2.