MVP Match - Frontend Dashboard

This is a frontend web app, which renders an interactive MVP Match Dashboard to generate reports and insights about the MVP Match project transactions.

THe web app is currently limited to the generating report data, and other features may be added in the future.

The web app design was translated from the provided Figma design file.

Demo

View a brief GIF demo of the web apps' design functionality below:

Getting Started

Prerequisites

• install Node.js. The version used for this project is v18.17.0

Setup

• clone the repository (e.g. git clone git@github.com:Sayvai/react-project-dashboard-mvp-match.git)
• navigate to the project directory (e.g. cd react-project-dashboard-mvp-match)
• run npm install to install the dependencies
• run npm run dev to start the web app
• open http://localhost:5173 to view it in the browser

Testing

Unit Tests

There are a number of unit tests written for the web app. The tests are written using the React Testing Library.

To run the unit tests, run the following command in the terminal:

npm test

Supported Browsers

The web app has been tested on the following browsers:

• Google Chrome (115.0.5790.114)
• Microsoft Edge (115.0.1901.188)
• Mozilla Firefox (115.0.3)

Future Improvements

Below are some of the improvements that can be made to the web app for future consideration:

• Add more unit tests
• Add more features to the web app
• Add End-to-End tests

Technologies Used

• Vite - A fast build tool for web apps (using the SWC compiler)
• React - A JavaScript library for building user interfaces
• TypeScript - A typed superset of JavaScript that compiles to plain JavaScript
• c3.js - A D3-based reusable chart library
• React Testing Library - A library for testing React components