The Amazing Roni's Mac Bar Dashboard

This dashboard is designed to provide valuable insights into customer ordering patterns, popular items, ingredient preferences, and customization trends.

Comment

Roni's Mac Bar Dashboard

Overview

This dashboard is designed to provide valuable insights into customer ordering patterns, popular items, ingredient preferences, and customization trends. It's a powerful tool to help you make data-driven decisions to enhance your menu offerings, optimize inventory management, and tailor marketing strategies.

Key Features

  1. Monthly Trends Line Chart Depicts order patterns across different months.

  2. Top Items Bar Chart Shows the most frequently ordered dishes.

  3. Weekly Demand Radar Chart Illustrates order distribution throughout the week.

  4. Ingredient Popularity Bar Chart Displays the top 10 most selected ingredients across all orders.

  5. Customization Popularity Pie Chart Breaks down the popularity of different customization categories (e.g., drizzles, toppings).

  6. Customization Trends Stacked Bar Chart Shows the distribution of customization options for the top items.

Technologies Used

  • Full-Stack Framework: Next.js

Setup Instructions

Prerequisites

  • Node.js: Version 14.x or higher
  • npm or yarn: For package management

Installation Steps

  1. Clone the Repository

    git clone https://github.com/AidenStickney/Datathon-24-Ronis-Dashboard.git

  2. Install Dependencies

Using npm:

   npm install

Or using yarn:

   yarn install
  1. Environment Variables
  • Create a .env.local file in the root directory.

  • Add the following environment variable:

     NEXT_PUBLIC_BASE_URL=http://localhost:3000

    Adjust the URL if your CSV files are hosted elsewhere or if you're deploying to a different environment.

  1. Place CSV Data Files
  • Ensure your CSV data files are placed in the public directory.

  • Required CSV files:

     april_2024.csv
 may_2024.csv
 june_2024.csv
 july_2024.csv
 august_2024.csv
 september_2024.csv
 october_2024.csv

  • If you have data for additional months, you can add more CSV files following the same naming convention. You must also update the csvFileUrls array in app/api/orders/route.ts to include the new file paths.

  • The CSV files should have the following headers:

     Order #, Sent Date, Modifier, Option Group Name, Parent Menu Selection, Order ID
  1. Run the Development Server

Using npm:

   npm run dev

Or using yarn:

   yarn dev
  • The application will start on http://localhost:3000.
  1. Access the Dashboard
  • Open your web browser and navigate to http://localhost:3000 to view the dashboard.

Usage

  • Explore Charts: Interact with various charts to gain insights into customer behavior.
  • Hover for Details: Hover over chart elements to see detailed information in tooltips.
  • Responsive Design: The dashboard is designed to be responsive and accessible on different devices.

Built With

  • next.js
Share this project:

Updates