Healthcare App Submission — KendoReact Free Components Challenge

Mechon70x7 — Fri, 12 Sep 2025 19:34:08 +0000

What I Built

I developed a Healthcare Management App that helps patients and staff efficiently manage healthcare workflows.

Key features include:

Patient Management: Track patient information and medical records
Appointment Scheduling: Create, reschedule, and view appointments in a calendar-style interface
Data Visualization: Monitor healthcare trends with interactive charts and dashboards

The app demonstrates how KendoReact's free UI components can be used to build a polished, user-friendly, and professional healthcare solution.

Demo

Live Demo: https://kendo-react-challenge.vercel.app/
Source Code: https://github.com/Mechon70x7/-KendoReactChallenge.git

Screenshots

KendoReact Components Used

This project uses a variety of free KendoReact components:

Grid - Display patient records
Form - Input and update patient data
Scheduler - Manage appointments
Inputs (TextBox, NumericTextBox, DatePicker, TimePicker) - Patient and appointment forms
Buttons - Navigation and actions
Dialog - Confirmations and alerts
DropDownList - Select doctors, departments, or appointment types
Charts - Visualize patient and healthcare trends
Layout / Drawer / AppBar - Navigation and application layout

AI Coding Assistant Usage

I used AI assistance to generate reusable React component templates, JSON data handling utilities, and form validation logic, speeding up development and ensuring consistency across the app.

Nuclia Integration

While this submission does not currently integrate Nuclia, future versions could leverage RAG-based healthcare insights, such as automatically generating patient summaries or retrieving relevant medical guidelines.

Technical Details

The project is organized using a clean React + Vite structure:

healthcare-app/
├── src/
│ ├── components/
│ │ ├── PatientGrid.jsx # Displays patient records in a Grid
│ │ ├── PatientForm.jsx # Handles adding/updating patient info
│ │ ├── AppointmentScheduler.jsx # Calendar-style appointment management
│ │ └── Navigation.jsx # App navigation (Drawer/AppBar)
│ ├── data/
│ │ ├── patients.json # Sample patient data
│ │ └── appointments.json # Sample appointment data
│ ├── utils/
│ │ └── storage.js # Utility functions for loading/saving data
│ ├── App.jsx # Main app entry point
│ └── main.jsx # ReactDOM render
├── public/
│ └── index.html
├── package.json
└── README.md

Component Connections

App.jsx manages routing and layout, wrapping the main components.
Navigation.jsx provides the AppBar and Drawer navigation across pages.
PatientGrid.jsx and PatientForm.jsx are linked via local JSON data and utility functions in storage.js.
AppointmentScheduler.jsx interacts with appointments.json and allows adding, editing, or deleting appointments.
All components utilize KendoReact free UI components for grids, forms, buttons, dialogs, inputs, and charts.

This structure ensures modular, reusable components and easy scalability for future features like Nuclia integration or AI-assisted dashboards.
"""

ZK-ID: Privacy-First Identity Verification

Mechon70x7 — Fri, 29 Aug 2025 12:09:59 +0000

This is my submission for the Midnight Network "Privacy First" Challenge

This tutorial shows how to set up, run, and verify the ZK-ID DApp for the "Protect That Data" challenge. It also demonstrates how the identity attestation works using mocked zero-knowledge proofs.

🔨 What I Built

ZK-ID is a decentralized identity verification DApp that allows users to prove who they are without revealing sensitive personal information.

By leveraging zero-knowledge proofs and privacy-first design, users can authenticate themselves securely while keeping their data safe from exposure.

🎥Demo

GitHub Repo: [https://github.com/Mechon70x7/zk-id.git]

🛠️ How I Used Midnight's Technology

This project integrates Midnight’s Compact language and SDK to:

Implement private smart contracts for identity validation.

Use confidential transactions to ensure sensitive data never leaves the user’s control.

Provide auditable yet private interactions, balancing compliance with security.

🔒 Data Protection as a Core Feature

Privacy isn’t an afterthought—it’s built into the architecture:

Zero-Knowledge Proofs allow verification without exposing raw data.

Selective Disclosure ensures users control exactly what they share.

On-chain privacy guarantees that no sensitive identity data is stored publicly.

1️⃣ Project Setup

Clone the Repository

git clone <your-repo-url>
cd zk-id-frontend

Install Dependencies

npm install

Start the Development Server

npm run dev

Deploy contracts using Midnight SDK (see /contracts folder).

Interact with the DApp via the frontend.

Open your browser at http://localhost:5173 to see the app.

2️⃣ User Interface Overview

Initial Input Form

User enters User ID (e.g., Alice)
User enters Birth Year (e.g., 2000)

Generate Proof button triggers verification.

3️⃣ Proof Generation and Verification

3.1 Enter User Information

User ID: Alice
Birth Year: 2000

3.2 Click Generate Proof

Console log shows the internal steps:

Submit clicked
User ID: Alice
Birth Year: 2000
Current Year: 2025
Proof result: { valid: true }
Submitting proof to contract... Alice true
Verified status: true

3.3 Display Verification Status

Identity Verified (age ≥ 18)

Message displayed: ✅ Identity Verified

Identity Not Verified (age < 18)

Change birth year to 2010
Click Generate Proof
Message displayed: ❌ Identity Not Verified

4️⃣ Multi-User Support

The app supports multiple users independently:

User 1: Alice → 2000 → Verified ✅
User 2: Bob → 2010 → Not Verified ❌

Console shows separate proof results for each user.

5️⃣ Running Unit Tests

Run all tests to verify logic:

npm run test

Tests include:

Single user verification
Multi-user verification
Age ≥ 18 / Age < 18 scenarios

👥 Team / Credits

Built by @mechon70x7

8️⃣ Notes for Reviewers

Privacy-Preserving Mechanism: Birth year input remains private; proof generation is mocked.
Zero-Knowledge Concept: generateProof() simulates ZK verification; no real-world value is used.
Multiple Users: Each user is verified independently, demonstrating decentralized handling in UI.

!!THANKS!!

DEV Community: Mechon70x7