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

<!-- Share an overview about your project. -->
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

<!-- Share a link to your app and include some screenshots here. -->
<!-- Share a link to your code repository. -->
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

<!-- Tell us how you leveraged KendoReact Free Components. -->

<!-- Include the additional sections below if your submission qualifies for additional prize categories. -->
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";

<Label className="font-medium" editorId="firstName">
 First Name&nbsp;
</Label>
<Input
  id="firstName"
  disabled
  name="firstName"
  type="text"
  value={firstName}
  onChange={}
/>

2 Kendo DatePicker

import { DatePicker } from "@progress/kendo-react-dateinputs";
<DatePicker
  className=""
  name="dob"
  value={dob}
  onChange={}
/>

3 Kendo DropdownList

import { DropDownList } from "@progress/kendo-react-dropdowns";
<DropDownList
  style={{
  width: "390px",
 }}
 data={sex}
 value={gender}
 defaultValue="Male"
 onChange={}
 name="gender"
/>

4 Kendo Notification

import { Notification } from "@progress/kendo-react-notification";
<Notification closable={true} type={{ style: "error", icon: true }}>
 {error}
</Notification>

5 Kendo Toolbar, ToolbarSeperator, Button and ButtonGroup

import {
  Toolbar,
  ToolbarSeparator,
  Button,
  ButtonGroup,
} from "@progress/kendo-react-buttons";
<Toolbar>
  <ButtonGroup>
    <Button
      className="k-toolbar-button"
      svgIcon={boldIcon}
      title="Bold"
      onClick={() => onFormat("bold")}
    />
</ButtonGroup>
</Toolbar>

6 Kendo Grid, GridColumn

import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
<Grid>
   <Column field="id" title="ID" filterable={false} width="40px" />
   <Column field="productName" title="Product Name" width="240px" />
</Grid>

7 Kendo Dialog, DialogActionBar

import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
<Dialog title={"Please confirm"} onClose={toggleDialog}>
  <p style={{ margin: "25px", textAlign: "center" }}>
    Actions for {selectedProduct.productName}
  </p>
 <DialogActionsBar>
    <Button themeColor="info">
     Edit
    </Button>
</DialogActionsBar>
</Dialog>

8 Kendo Checkbox

import { Checkbox } from "@progress/kendo-react-inputs";
 <Checkbox
    type="checkbox"
    id={}
    name={}
    defaultChecked={}
    onChange={}
    label={}
 />

9 Kendo Card, CardTitle, CardBody

import { Card, CardBody, CardTitle } from "@progress/kendo-react-layout";
<Card style={{ width: 300 }} type="info">
  <CardBody>
    <CardTitle>Total Products</CardTitle>
       <p>Number of products in the system.</p>
    </CardTitle>
  </CardBody>
</Card>

10 Kendo ProgressBar

import { ProgressBar } from "@progress/kendo-react-progressbars";
<ProgressBar value={productLength} />

11 Kendo FloatingActionButton

import { FloatingActionButton } from "@progress/kendo-react-buttons";
<FloatingActionButton
   svgIcon={open ? cancelIcon : homeIcon}
   items={navLinks}
   item={CustomItem}
   positionMode="absolute"
   modal={true}
   onOpen={handleOpen}
   onClose={handleClose}
/>

AIm to Impress

<!-- Explain how you integrated GenAI technology into your project. -->
I integrated AI technology with OpenAI.

• Here users can ask the AI questions relating to the products in the inventory/database 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

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

AI Integration Pictures

<!-- Don't forget to add a cover image (if you want). -->

<!-- Thanks for participating! -->