Blockchain-Technology-Lab / edi-frontend

Frontend (dashboard) for the EDI (metrics)
https://groups.inf.ed.ac.uk/blockchainlab/edi-dashboard/
0 stars 0 forks source link

Edinburgh Decentralisation Index (EDI)

The Edinburgh Decentralisation Index (EDI) collects stratified metrics describing the decentralisation of blockchain systems.

Public URLs

Code repos

Team

The EDI team includes specialist researchers, scientists and engineers.

Website

This is a Next.js project bootstrapped with create-next-app.

Getting Started

These instructions will help you set up and run the project on your local machine for development and production purposes.

Prerequisites

Before you begin, ensure you have the following installed on your machine:

Installation

yarn install

Running the Development Server

To start the development server, run:

yarn dev

This will start the server on http://localhost:3000. The page will reload if you make edits. You will also see any lint errors in the console.

Building for Production

yarn build

This will generate an optimized version of your application in the /dist folder, ready to be deployed. It can be hosted on any web server that can serve HTML/CSS/JS static assets. Read more more about static exports and deployments.

Preview Production

After building the project, you can preview the production build with:

yarn start

The production server will run on http://localhost:3000.

Adding a new page

In Next.js, pages are created by adding files to the pages directory. Each file inside this directory automatically becomes a route that corresponds to its file path.

If you create src/pages/about.tsx that exports a React component like below, it will be accessible at /about.

export default function About() {
  return <div>About</div>
}

For nested routes, you can create a nested folder structure and files will automatically be routed in the same way.

Examples

Please see src/pages/methodology.tsx and src/pages/accessibility.tsx for examples on how a static page can be structured.

Learn more about Next.js pages

Adding a new data source

Examples on how charts pages are structured can be found under src/pages/index.tsx and src/pages/consensus/index.tsx.

CSV files:

Chart data: