Alphonse Kazadi

Posted on Sep 19 • Edited on Sep 23

I built MineSafety: A Powerful Incident & Safety Tracker for Mines

#devchallenge #kendoreactchallenge #react #webdev

This is a submission for the KendoReact Free Components Challenge.

What I Built

Mining is one of the world’s most hazardous industries. Safety officers and workers often face challenges with fragmented tools for reporting and monitoring, which makes it harder to:

Log incidents efficiently
Track and analyze safety patterns
Maintain compliance with strict regulations
Communicate effectively across teams To address this, I created MineSafety — a responsive, accessible, and data-driven web application designed to:

✅ Track workplace incidents in real time
✅ Visualize safety trends and performance metrics
✅ Provide a modern, intuitive interface for both workers and administrators
✅ Foster better communication through an integrated chatbot

Built with React (Vite + TypeScript), TailwindCSS, and KendoReact free components, MineSafety demonstrates how quickly a professional-grade safety management system can be developed with the right tools.

Key Features

📊 Dashboard Analytics – Real-time KPIs for active, resolved, and critical incidents.
📝 Incident Reporting Workflow – Log new incidents with categories, severity, and date pickers.
📈 Data Visualization – Charts, gauges, and progress indicators to track safety performance.
🤖 Built-in Chatbot – Powered by KendoReact Conversational UI, allowing users to interact, report issues, or retrieve summaries in a conversational way.
📤 Data Export – Export reports to Excel and PDF in a single click for compliance and auditing.
📌 Notifications – Instant alerts for critical incidents using the Notification component.
📂 File Upload – Upload supporting documents or images when logging an incident.
🗂️ Organizational View – OrgChart to visualize safety staff and reporting hierarchy.
🖥️ Accessibility & Responsiveness – Optimized for both desktop and mobile, with clean navigation.

Demo

🔗 Live Demo: https://mine-safety.vercel.app
💻 Source Code:www.github.com/alphonsekazadi/MineSafety

Video

Screenshots

KendoReact Components Used

MineSafety integrates a wide range of KendoReact free components for both UI and functionality:

🔹 Navigation & Layout

AppBar
Drawer
Button
Dialog, DialogActionsBar

🔹 Forms & Inputs

Input, TextArea, Switch
DropDownList
DatePicker
Upload

🔹 Data Display & Visualization

Grid, GridColumn
ListView
OrgChart
Chart (ChartSeries, ChartSeriesItem, ChartLegend, ChartCategoryAxis, ChartCategoryAxisItem)
CircularGauge
ProgressBar

🔹 Export & Reporting

ExcelExport
PDFExport

🔹 Feedback & Alerts

Notification, NotificationGroup

🔹 Conversational UI

Chat, Message

With over 15 KendoReact components, MineSafety demonstrates not just the breadth of the library, but also how seamlessly these components integrate into a real-world application.

[Code Smarter, Not Harder prize category] AI Coding Assistant Usage

I leveraged the KendoReact AI Coding Assistant to accelerate development and validate best practices.
📌 One example of used prompts :
@kendoreact Generate a responsive layout using KendoReact AppBar and Drawer, with AppBar fixed on top and Drawer collapsible on mobile.

His result

import React, { useState } from 'react';
import { AppBar, AppBarSection, AppBarSpacer } from '@progress/kendo-react-layout';
import { Drawer, DrawerItem } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';
import { menuIcon } from '@progress/kendo-svg-icons';
import './App.css'; // Optional: for custom CSS styling

const App = () => {
    const [drawerExpanded, setDrawerExpanded] = useState(false);

    const toggleDrawer = () => {
        setDrawerExpanded(!drawerExpanded);
    };

    return (
        <div>
            <AppBar themeColor="primary">
                <AppBarSection>
                    <Button
                        type="button"
                        fillMode="flat"
                        svgIcon={menuIcon}
                        onClick={toggleDrawer}
                    />
                </AppBarSection>
                <AppBarSpacer style={{ width: 8 }} />
                <AppBarSection>
                    <h1>My Application</h1>
                </AppBarSection>
            </AppBar>
            <Drawer
                expanded={drawerExpanded}
                mode="overlay" // Use "push" to push content instead of overlay
                onSelect={toggleDrawer}
            >
                <DrawerItem title="Home" />
                <DrawerItem title="About" />
                <DrawerItem title="Services" />
                <DrawerItem title="Contact" />
                {/* Add more DrawerItems here as needed */}
            </Drawer>

            <div className="page-content">
                {/* Main content goes here */}
                <h2>Welcome to My Application!</h2>
                <p>This is an example of a responsive AppBar and Drawer setup.</p>
            </div>
        </div>
    );
};

export default App;

The assistant instantly scaffolded a working layout, saving hours of manual coding. I then customized the output with TailwindCSS and TypeScript to match the project’s design.

I also used it to configure the KendoReact Grid (sorting, filtering, and column props), ensuring accessibility and great performance from the start.

By combining AI-assisted code generation with human creativity, I achieved faster development, fewer bugs, and a more polished UI.

💡 Final Thoughts

The KendoReact Free Components Challenge has been an eye-opening experience. I discovered how powerful, elegant, and developer-friendly KendoReact truly is:

Accessible by design – every component is WCAG-compliant out of the box.
Highly productive – instead of building grids, charts, or dialogs from scratch, I focused on solving the real problem.
Visually consistent – components blend together perfectly for a professional-grade UI.
With just the free library, I built MineSafety — a project that could realistically improve safety management in the mining industry. This proves the challenge’s theme: with KendoReact, you really can Build Without Boundaries.

Top comments (23)

Ashley Childress • Oct 4

I love it! Also (because I have to ask) why pick the mines? I'm extremely curious because I grew up in an area where coal is king and the mines are a way of life. Though your version looks more like gold, if I'm not mistaken... It's an awesome idea!

Alphonse Kazadi • Oct 7

Thank you so much @anchildress1 ! Yes, you're right — it's focused more on gold and mineral extraction.
I chose the mining sector because it's a major industry in my country, and safety issues are often overlooked.
The idea behind MineSafety (& Incident Tracker) was to create a simple, modern app that contributes to improving worker safety and incident reporting in mining operations.
I'm really glad you liked it! 🚀

Ashley Childress • Oct 7

"safety issues are often overlooked."

In my experience, this is a massive understatement! Thanks for answering the question. It ticks off all the boxes—great work!

Alphonse Kazadi • Oct 7

Totally agree ! Glad the project resonated with you — means a lot! 🙌

Anna Villarreal • Oct 3

I really love how your app monitors incidents and could be used to highlight areas where safety could be improved - potentially saving lives and preventing injuries. Monumental work. 🔥 Keep going!

Alphonse Kazadi • Oct 7

Thank you so much @annavi11arrea1 ! I truly believe technology can make a real difference in high-risk industries like mining.
If this app can help even a little to improve safety and protect lives, it’s already a success for me. 🙏