Dashboard created to analyze user demographics and interaction data of BHelp, a mobile app designed to help parents manage their children’s tasks.
The dashboard is built with React.js and connects to the mobile app database using Firebase Firestore (2019 SDK).
It includes interactive visualizations with Chart.js, CanvasJS, and KendoReact.
- 📈 Visualization of user demographic data
- 👨👩👧👦 Tracking parent–child interactions within the mobile app
- 🔥 Real-time connection with Firebase Firestore
- 📊 Dynamic charts powered by Chart.js, CanvasJS, and KendoReact
- 🗂 Data export to PDF and CSV
- 🖥 Responsive UI with dynamic menus
- Frontend: React.js (16.8.6), React Router, React Burger Menu
- Charts & Visualization: Chart.js, React-Chartjs-2, CanvasJS, KendoReact
- Database: Firebase Firestore (SDK 5.10.1)
- Utilities: PapaParse for CSV parsing, Bootstrap 4.3.1 for styling
- Clone this repository:
git clone https://github.com/VivianGomez/bhelp-dashboard.git cd bhelp-dashboard - Install dependencies:
npm install - Configure Firebase credentials in:
/src/services/firebase.js
Note: Sample Data - https://github.com/VivianGomez/bhelp-dashboard/blob/master/src/bhelp-48327-export.json
- Run the development server:
npm start - Open in your browser:
http://localhost:3000
npm start → Runs the app in development mode
npm run build → Builds the app for production
npm test → Runs tests
npm run eject → Exposes the React configuration
This is a demo/prototype project, not intended for production use without further improvements.
Firebase SDK used is from 2019; upgrading may be required for compatibility.
This project is licensed under the MIT License.
Vivian Gómez