connor-cozens/invest-ed

This platform visualises data on girls’ and women’s education initiatives in Asia supported by private foundations and private-sector impact investing organisations. The sub-sample of initiatives and financers presented here is extracted from the larger original regional Invest-ED Database on non-state private financers of education in East Asia and the Pacific and South Asia.

Invest-Ed Data Visualization Application

Description

Platform visualizing data pertaining to initiatives and actors in girls education in the Global South. Users can view data pertaining to initiatives, target funders, and implementers in the form of graphs and maps. Organization users can access detailed information about these organizations and submit change requests to add new or updated organization-specific information for analysis and visualization purposes. Research users can approve these change requests and respond to user messages.

Documentation

See the repository wiki.

Reference for visualization data formats.

Requirements

• NPM
• Node.js
• Git
• MySQL
• Redis

Installation

Get NPM. NPM is distributed with Node.js, so installing NPM will also install Node.js on your computer.

Install MySQL server. Includes installation guide and links for MySQL on Windows and macOS and Linux distributions.

Redis is an in-memory data store as a database cache used to store user sessions. Windows Installer for Redis 3.2.100. This release includes:

• The redis-server.exe application that runs Redis as a service on your Windows computer.
• The redis-cli.exe to interact with Redis instances

Installation of Redis on other Operating Systems

Local Development Setup

Create the MySQL Databases

1. Download the SQL files.

2. Log on to the MySQL server via cmd or terminal, with the credentials set up during the installation of MySQL:

   mysql -u yourUserName -p;

3. Enter password on subsequent prompt.

4. Create a database and use it:

   mysql> create database yourDatabaseName;
   mysql> use yourDatabaseName;
   

5. Import the SQL file into the database:

   mysql> source pathToYourSQLFile;

6. Repeat for each SQL file.

Configure Node Packages Locally

• Node packages are not included in git, so they must be installed locally.

• Node packages for the Express backend app can be found in the root directory package.json file, and can be installed by navigating to the root directory of the project in your terminal or cmd and executing npm install.

  • This will install all packages listed under dependencies (packages required for production) and all packages listed under devDependencies (packages required for local development).

• Similarly, node packages for the React.js client app can be found in the package.json located within the /client directory and can be installed from that directory the same way.

Setting Environment Variables

1. Create an '.env' file in the project root directory

2. Follow the template outlined in the .env.example file, and replace the placeholder values with the following:

   • Replace PORT with any available local port to run the Express app on.

   • Replace DB_USERNAME with the username used to connect to your MySQL server configuration.

   • Replace DB_PASSWORD with the password used to connect to your MySQL server configuration.

   • Replace DB_HOST_NAME with the machine hosting the MySQL server (localhost).

   • Replace DB_ACCOUNTS with the name of the database holding user accounts.

   • Replace DB_GIRLSED_MAIN with the name of the database holding data for visualization.

   • Replace DB_GIRLSED_TEMP with the name of the database holding change request data.

Set the baseURL in axiosConfig.js, by setting the address and port to route axios requests to the Express app endpoints.

Running the Project Locally

To Run the Node.js Express backend app run npm run dev in cmd or terminal.

• Running this command will invoke nodemon, which is a tool that automatically restarts the node server when file changes are made during development.

• Running this command will also preload dotenv, which will preload all environment variables.

To run the React.js client app run npm start in cmd or terminal.

• This will run the React.js app in development mode.

Deployment

Manually change the port, database access keys, and database names via the config.js file when deploying for production.

Manually set the baseURL in axiosConfig.js, by setting the address and port.

Resources

React docs

Sequelize docs

invest-ed's Issues

Page and Information Access - Fix loopholes that lead to unwanted page and information access

• Back button returns back to unwanted pages in some cases - for example, the form submission success or review success page.
• Currently not fully handling the case if local storage values are changed or cleared by user.
• Dashboard endpoints and any other endpoints that should only be accessed by logged in users should be protected i.e. authenticated.
• Ensure protection from XSS attacks - via forms mainly.

Review and Modify forms - Missing several funder attributes that need to be parsed and populated into forms

Funder attributes that are currently not being populated into form:

• International Base(s)
• Education Subsector(s)
• Organizational Trait(s)
• Asia International Base(s)
• Asia Operation(s)

Account Edit Feature

• Option to allow an organization or RA/root user to edit some of their account details, like email and organization.

About Us - Make sections collapsible

Sections include:

• Project Background
• Project Team
• Publications

Modify Forms - Can't change selection for multi-valued fields

Contact Us - Submit message

Add Form - Increment tag number on new form insert

Modify/Review Forms - Cannot retrieve funder multi-valued fields and implementor fields for user-added forms

Review Form - Submit RA review

Visualization - Make initiatives pie chart hoverable in order to view all initiatives by type

Change Password Feature

Review Form - Form approval endpoints to handle RA review submissions

Review Form - Accept/reject individual form fields

Visualization - Add additional attributes to filter funders and initiatives

Forms - Delete a form

Forms - Support multiple funder and implementor sections

About Us - Add hyperlinks to publications

Review and Modify forms - Fix issue of multi-valued fields not populating on initial form load

Add Glossary Page

Include:

• The terminology used across the application.
• List of initiatives by tag number, to be used for initiative search on dashboard.

Error Messages - Error handling and message display

• Front-end: Clear access errors once new component is loaded/mounted.
• Back-end: Handling of error message response to be sent to front-end.

Transfer domain

Modify Forms - Update Funder bugs

• Update not reflecting in front-end form when retrieved.
• Update replaces previous funder when funder name is updated, meaning forms with that replaced funder can't be accessed from the front-end app without erroring out.
• Update not handling funder-related updates on a form that exists in one database but not another.

Analytics

Contact Us - Message handling endpoints

Visualization - Add network maps with bubbles representing actors

• Actors include initiatives, funders, and implementers

Forms - Error and Warning Message Display Issues

• Field updated check not checked properly on form update for pre-existing forms in DB
• 'Form is under approval' message incorrectly displays for forms (form information) already in DB - occurs for pre-existing data in DB

Add form - Fix insert for regions field

Modify Forms - Update Implementer Bugs

Site - Add Hit Counter