Meepleton - A realtime Dashboard

Inspiration

I've always wanted to learn how to create a dashboard with real-time functionality and graphs. When I got a freelance project to build an interactive dashboard with real-time updates and found Ably, it made integrating real-time features easy.

What it does

Meepleton is an interactive dashboard that provides real-time data analysis for admins. It's tailored for a board game cafe, enabling invoice management. I've created the necessary graphs which can be built for Mongoose schema for invoices which is

const mongoose = require('mongoose')
const mongoosePaginate = require('mongoose-paginate-v2')

const productSchema = new mongoose.Schema({
    description:{
        type:String
    },
    qty:{
        type:Number
    },
    unitPrice:{
        type:Number
    },
    totalPrice:{
        type:Number
    },
    type:{
        type:String,
        enum:['GAMING','FNB','EVENTS']
    }
})

const discountSchema = new mongoose.Schema({
    description:{
        type:String
    },
    qty:{
        type:Number
    },
    unitPrice:{
        type:Number
    },
    totalPrice:{
        type:Number
    }
})

const gameSchema = new mongoose.Schema({
    name:{
        type:String
    },
    gameId:{
        type:String
    }    
})

const InvoiceSchema = new mongoose.Schema(
  {
    customerId:{
        type:String
    },
    customerName: {
      type: String,
      required: true
    },
    customerMb:{
        type:String,
    },
    customerAddress:{
        type:String
    },
    gameHost:{
        type:String,
        required:true
    },
    gameHostId:{
        type:String,
        required:true
    },
    modeOfTranscation:{
        type:String,
        enum:['CASH','CHECK','UPI']
    },
    date:{
        type:String,
        required:true
    },
    time:{
        type:String,
        required:true
    },
    total:{
        type:Number,
        required:true,
    },
    gamingTotal:{
        type:Number,
        default:0
    },
    fNbTotal:{
        type:Number,
        default:0
    },
    eventsTotal:{
        type:Number,
        default:0
    },
    discountName:{
        type:String
    },
    discountAmount:{
        type:Number,
        default:0
    },
    games:[gameSchema],
    discounts:[discountSchema],
    products:[productSchema]
  },
  {
    versionKey: false,
    timestamps: true
  }
)
InvoiceSchema.plugin(mongoosePaginate)
module.exports = mongoose.model('Invoice', InvoiceSchema)

How I built it

I have built a realtime interactive react based dashboard.

Challenges we ran into

The most significant challenge was designing an API that could transform invoice data into a format suitable for graphing.

Accomplishments that we're proud of

I'm proud to have added real-time updates and a filtering feature to the dashboard, enhancing its functionality and user experience.

What we learned

Building Meepleton taught me how to create dashboards and develop APIs for date-wise filtering, as well as gaining insights into React-based graph development.

What's next for Meepleton - A realtime Dashboard

In the future, I plan to expand Meepleton by adding more graphs and introducing a new section for rental-related invoice data, further enhancing its capabilities.

Built With

• apexcharts
• express.js
• horizonui
• mongodb
• node.js
• react