5g-mag's Introduction

5G-MAG: A User Interface for Metrics and Consumption Reports

This is a Next.js project created for Advanced Web Technologies course.

Project Topic

5G-MAG: A user interface for metrics and consumption reports.

This project provides a dashboard to visualize Quality of Experience (QoE) metrics and consumption reports using mocked data for demonstration purposes. Additionally, it includes real-time data interactions with a mock Express server to fetch M8 Information and Service Access Information.

Getting Started

First, clone the project and navigate to the project directory:

git clone https://github.com/saramakishti/5g-mag
cd 5g-mag

Install Dependencies

Install the necessary dependencies using npm:

npm install

# or

npm i

Run the Development Server

The project is set up to run both the Next.js frontend and the mock Express server concurrently. Use the following command to start both servers:

npm run dev

This command utilizes concurrently to run both the frontend and backend servers simultaneously.

The Next.js frontend server will be running at http://localhost:3000
The mock Express server will be running at http://localhost:3003

Available Scripts

dev: Runs both the Next.js frontend and the mock Express server concurrently.
dev:next: Runs only the Next.js frontend server.
dev:server: Runs only the mock Express server.
build: Builds the Next.js project for production.
start: Starts the Next.js server in production mode.
lint: Runs the linter to check for code issues.

Project Structure

The project is structured as follows:

app/: Contains the Next.js pages.
- page.jsx: The home page of the dashboard.
- layout.jsx: The root layout with the navbar for the project.
- qoe-reports.jsx: Page to display QoE metrics.
- consumption-reports.jsx: Page to display consumption reports.
- m8-reports.jsx: Page to display M8 information.
- service-access-reports.jsx: Page to display service access information.
- mock/: Contains the JSON mocked data that are used to display QoE and Consumption Reports charts.

components/: Contains React components used across the project.
utils/: Contains helper JavaScript functions used across the project.
mock-server/: Contains the mock Express server setup
- app.js: The main server file.
- routes/: Contains route handlers for different endpoints.

5g-mag's People