Product Expiry Tracker AI

This is a submission for the KendoReact Free Components Challenge. Table of Contents What I Built Demo Video Demo KendoReact Experience KendoReact Free Components Used AIm to Impress AI Integration Pictures What I Built Product Expiry Tracker AI is an application built on React that helps users monitor the expiry dates of their products. It can be used widely in Supermarkets, drug stores and malls to enable users get real time assessment of their products details. The issue of products expiring on shelves is becoming alarming therefore the need to acquire this application. This Expiry Tracker AI is a real world application that solves real problems and it is powered by React and includes at least 10 KendoReact free Components. This project was built from scratch within the time frame of this challenge. The project integrates AI to give summaries of product details in the inventory, together with actionable steps to prevent expiry of the product. The AI can also scan product details and add products to the inventory automatically without needing to fill the form. Demo The Application is built on React for the frontend and includes 10 or more KendoReact free components which I will list out below Public Url: Product Expiry Tracker AI Github code: Github Video DEMO KendoReact Experience KendoReact Free Components is a game changer used to design and develop business applications with React. It has over 50+ free components in which I used the under listed for this project. It really shaped my user experience flow due to its great UI and its heavy use in this project helped me to do so much with so little code. I just had to pick the component and customize the props to fit the project. KendoReact Free Components Used 1 Kendo Label and Input components import { Label } from "@progress/kendo-react-labels"; import { Input } from "@progress/kendo-react-inputs"; First Name  2 Kendo DatePicker import { DatePicker } from "@progress/kendo-react-dateinputs"; 3 Kendo DropdownList import { DropDownList } from "@progress/kendo-react-dropdowns"; 4 Kendo Notification import { Notification } from "@progress/kendo-react-notification"; {error} 5 Kendo Toolbar, ToolbarSeperator, Button and ButtonGroup import { Toolbar, ToolbarSeparator, Button, ButtonGroup, } from "@progress/kendo-react-buttons"; onFormat("bold")} /> 6 Kendo Grid, GridColumn import { Grid, GridColumn as Column } from "@progress/kendo-react-grid"; 7 Kendo Dialog, DialogActionBar import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs"; Actions for {selectedProduct.productName} Edit 8 Kendo Checkbox import { Checkbox } from "@progress/kendo-react-inputs"; 9 Kendo Card, CardTitle, CardBody import { Card, CardBody, CardTitle } from "@progress/kendo-react-layout"; Total Products Number of products in the system. 10 Kendo ProgressBar import { ProgressBar } from "@progress/kendo-react-progressbars"; 11 Kendo FloatingActionButton import { FloatingActionButton } from "@progress/kendo-react-buttons"; AIm to Impress I integrated AI technology with OpenAI. Here users can ask the AI questions relating to the products in the invention such as to get all product expiring dates, summarize products close to expiry, actionable steps and with the help of the product quantity predict products that should be understocked or overstocked in the next purchase. Users can also scan product details through the use of the camera and the AI will be able to deduce the Product Information from the image, then a Kendo Button had been added so as if the user is satisfied with the AI output, the product will then be saved to the database. This is a shortcut to the stress of individually filling the "Add Product" form AI Integration Pictures

Mar 19, 2025 - 09:05

This is a submission for the KendoReact Free Components Challenge.

What I Built
Demo
Video Demo
KendoReact Experience
KendoReact Free Components Used
AIm to Impress
AI Integration Pictures

What I Built

Product Expiry Tracker AI is an application built on React that helps users monitor the expiry dates of their products. It can be used widely in Supermarkets, drug stores and malls to enable users get real time assessment of their products details. The issue of products expiring on shelves is becoming alarming therefore the need to acquire this application. This Expiry Tracker AI is a real world application that solves real problems and it is powered by React and includes at least 10 KendoReact free Components. This project was built from scratch within the time frame of this challenge.

The project integrates AI to give summaries of product details in the inventory, together with actionable steps to prevent expiry of the product. The AI can also scan product details and add products to the inventory automatically without needing to fill the form.

Demo

The Application is built on React for the frontend and includes 10 or more KendoReact free components which I will list out below

Public Url: Product Expiry Tracker AI
Github code: Github

Video DEMO

KendoReact Experience

KendoReact Free Components is a game changer used to design and develop business applications with React. It has over 50+ free components in which I used the under listed for this project. It really shaped my user experience flow due to its great UI and its heavy use in this project helped me to do so much with so little code. I just had to pick the component and customize the props to fit the project.

KendoReact Free Components Used

1 Kendo Label and Input components

import { Label } from "@progress/kendo-react-labels";
import { Input } from "@progress/kendo-react-inputs";


 First Name

2 Kendo DatePicker

import { DatePicker } from "@progress/kendo-react-dateinputs";

3 Kendo DropdownList

import { DropDownList } from "@progress/kendo-react-dropdowns";

4 Kendo Notification

import { Notification } from "@progress/kendo-react-notification";

 {error}

5 Kendo Toolbar, ToolbarSeperator, Button and ButtonGroup

import {
  Toolbar,
  ToolbarSeparator,
  Button,
  ButtonGroup,
} from "@progress/kendo-react-buttons";

6 Kendo Grid, GridColumn

import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";

7 Kendo Dialog, DialogActionBar

import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";

  
    Actions for {selectedProduct.productName}

8 Kendo Checkbox

import { Checkbox } from "@progress/kendo-react-inputs";

9 Kendo Card, CardTitle, CardBody

import { Card, CardBody, CardTitle } from "@progress/kendo-react-layout";

  
    Total Products
       Number of products in the system.

10 Kendo ProgressBar

import { ProgressBar } from "@progress/kendo-react-progressbars";

11 Kendo FloatingActionButton

import { FloatingActionButton } from "@progress/kendo-react-buttons";

AIm to Impress

I integrated AI technology with OpenAI.

Here users can ask the AI questions relating to the products in the invention such as to get all product expiring dates, summarize products close to expiry, actionable steps and with the help of the product quantity predict products that should be understocked or overstocked in the next purchase.
Users can also scan product details through the use of the camera and the AI will be able to deduce the Product Information from the image, then a Kendo Button had been added so as if the user is satisfied with the AI output, the product will then be saved to the database. This is a shortcut to the stress of individually filling the "Add Product" form