Skip to content

πŸ“Š This repository contains an experimental project exploring the integration of Next.js and Tremor for data visualization.

Notifications You must be signed in to change notification settings

jesspsilva/metrics-dashboard

Repository files navigation

πŸ“Š Metrics Dashboard

This repository contains an experimental project exploring the integration of Next.js and Tremor for data visualization.

Table of Contents

Overview

This project is a web application built with Next.js that displays various statistics and charts. Users can filter the displayed data by category through a select input, and interact with the charts to further filter the data.

Features

  1. Category Selection: A select input allows users to filter content by category.
  2. Data Display: Three cards display key statistics.
  3. Interactive Charts: Charts are updated based on the selected category and allow further filtering when elements like bars or circles are clicked.

Technologies Used

  • Next.js
  • React
  • TypeScript
  • Tremor (for charts)
  • Styled Components (for styling)
  • Tailwind (for charts styling)
  • Jest (for unit testing)
  • Testing Library (for UI testing)
  • Cypress (for E2E testing)

Installation

Prerequisites

  • Node.js (>= 20.x)

Steps

To run this project locally, follow these steps:

  1. Clone this repository to your local machine.
$ git clone https://github.com/jesspsilva/metrics-dashboard.git
  1. Navigate to the project directory in the terminal.
cd metrics-dashboard
  1. Install the dependencies by running the following command:
npm install
  1. Once the installation is complete, start the development server with the following command:
npm run dev
  1. Open http://localhost:3000 with your browser to see the project in action.

Project Structure

  • src/: Contains the source code of the application.
    • app/: Main application folder.
      • components/: Contains reusable React components.
      • utils/: Contains utility functions.
        • __mocks__/: Contains mock data for testing.

Running Tests

Unit tests

This project uses Jest and Testing Library for unit and integration tests.

  1. Run all tests:
npm run test
  1. Run tests in watch mode:
npm run test:watch

E2E Tests (Cypress)

  1. Run Cypress in interactive mode:

    npm run cypress:open
  2. Run Cypress tests in headless mode:

    npx cypress run

Screenshots

Desktop

Mobile

mobile_1 mobile_2

mobile_3 mobile_4

Screen recordings

Desktop

project_desktop

Mobile

project_mobile

Contributing

Contributions to this project are welcome! If you have any ideas, bug fixes, or enhancements, please feel free to open an issue or submit a pull request. Make sure to follow the existing code style and provide clear documentation for your changes. Just take into account that this is an experimental project and a work in progress.

About

πŸ“Š This repository contains an experimental project exploring the integration of Next.js and Tremor for data visualization.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published