/geepay-analytical-dashboard

Built with Vue 3, vue-router, vuejs3-datepicker, Vue3-apexCharts

Primary LanguageVue

Geepay Analytical Dashboard

A powerful analytical dashboard built with Vue 3, featuring routing with vue-router, interactive charts with vue3-apexcharts, and a user-friendly date picker with vuejs3-datepicker.

Table of Contents

Features

  • Vue 3 for building robust and reactive user interfaces.
  • Vue Router (version 4.2.5) for handling navigation within the application.
  • Vue3-apexcharts for creating dynamic and interactive charts.
  • Vuejs3-datepicker for easy date selection.

Requirements

Before running the application, ensure you have the following installed:

Installation

  1. Clone the repository:

    git clone https://github.com/emeka-richard/geepay-analytical-dashboard
    
  2. Change into the project directory:

    cd geepay-analytical-dashboard
    
  3. Install dependencies:

    npm install

Usage

  1. Start the development server:

    npm run serve
  2. Open your browser and visit http://localhost:5173 to view the Geepay Analytical Dashboard.

Folder Structure

  • src/: Contains the main source code for the application.
  • assets/: Static assets like images and styles.
  • components/: Reusable Vue components.
  • router/: Vue Router configuration.
  • layout/: Displays the dashboard view
  • App.vue: The main Vue component.
  • main.js: Entry point for the application.

Dependencies

  • Vue (version 3): The JavaScript framework used for building the user interface.
  • Vue Router (version 4.2.5): For handling client-side routing.
  • Vue3-apexcharts (version 1.4.4): To integrate interactive charts into the dashboard.
  • Vuejs3-datepicker (version 1.1.2): Provides a user-friendly date picker.

Contributing

Feel free to contribute by opening issues or pull requests. Your feedback is highly appreciated.

License

This project is licensed under the MIT License.

Make sure to replace placeholders like `your-username` in the clone URL and update any other specific details accordingly. Also, customize the features, folder structure, and other sections based on the actual structure and features of your Geepay Analytical Dashboard.