Skip to content

[Front-End] Web Application for Data Visualization and Management using React, GraphQL, d3, deck.gl and Semantic UI

Notifications You must be signed in to change notification settings

hopetambala/puente-react-cra-dashboard

Repository files navigation

Puente React Dashboard

Build Status Codacy Badge codecov

Puente React is a web dashboard used to visualize data collected on the ground in LMIC countries. It's an early prototype and it's still under development.

For more details, please see our website to see how we build technology to equip the resource-challenged.

For a live demo, please check out here Use the credentials Username: Test Password: test

For the AWS Implementation, please checkout AWS S3 URL

screencap

Project Layout

Key Folder Parent Folder Description
providers src/js Holds the modules for retrieving data and custom functions
pages src/js Holds the main layout folders for content
components src/js Holds the smaller components that are within layouts

Development

This project is built with ReactJS, Redux, and Apollo's GraphQL using a JAM Stack architecture. The visualizations are built using Recharts.

This project is a bootstrapped using create-react-app. It uses client-side rendering.

Here are some quick npm commands to get started:

  • npm install: Install Node dependencies
  • npm start-local: Start the hot reloading development server.
  • npm start: Start the Node + Express server.
  • npm test: Run the test suit and watch for changes.
  • npm build: Build a production optimized bundle of the app.
  • npm lint: Run the ESLinter.

AWS + s3

Get this React App working on AWS by installing the AWS CLI.

Deploy in your terminal

Create a s3 bucket

$ aws s3 mb s3://your-bucket-name

List to see your s3 buckets.

$ aws s3 ls

Build and deploy your app!

Dev

npm run build-local && aws s3 sync build/ s3://dashboard-react-cra-clientside-dev

Prod

$ npm run build && aws s3 sync build/ s3://your-bucket-name

Permissions and Settings

There's a decent amount that'll be necessary to get this publically consumed on the AWS website itself. Follow this guide to get those hammered out.

Resources

Standards

js-standard-style

About

[Front-End] Web Application for Data Visualization and Management using React, GraphQL, d3, deck.gl and Semantic UI

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published