This is a submission for the KendoReact Free Components Challenge.
What We Built
Allergy Identifier is a React-based application designed to help users identify potential allergens in products by scanning images and comparing them against known allergens and ailments. The application leverages KendoReact components, React Router, and Google Generative AI for a seamless user experience.
Demo
The application is hosted on Vercel:
Don't forget to try the app in mobile browser!
link to your code repository:
Update Ailments
Scan Ingredients
AI Report
Groups
Update Group
Notification to user to join the group
Products Expiry Tracker
KendoReact Experience
-
@progress/kendo-react-buttons-
Button: Used for various clickable buttons throughout the application. -
FloatingActionButton: Used for floating action buttons to trigger primary actions. -
Chip: Used for displaying small blocks of information, such as tags or categories.
-
-
@progress/kendo-react-layout-
AppBar: Used for the top navigation bar. -
AppBarSection: Used to divide the AppBar into sections. -
AppBarSpacer: Used to create space between AppBar sections. -
Drawer: Used for the sidebar navigation. -
DrawerContent: Used to define the content within the Drawer. -
Card: Used for displaying content in a card layout. -
TabStrip: Used for tabbed navigation. -
TabStripTab: Used to define individual tabs within the TabStrip. -
ExpansionPanel: Used for expandable/collapsible content sections. -
ExpansionPanelContent: Used to define the content within the ExpansionPanel. -
Dialog: Used for modal dialogs.
-
-
@progress/kendo-react-inputs-
TextBox: Used for text input fields. -
AutoComplete: Used for input fields with autocomplete functionality. -
DropDownList: Used for dropdown selection fields. -
DatePicker: Used for date selection fields. -
Input: Used for various input fields.
-
-
@progress/kendo-react-indicators-
Loader: Used to display loading indicators.
-
-
@progress/kendo-react-notification-
Notification: Used to display notifications. -
NotificationGroup: Used to group multiple notifications together.
-
-
@progress/kendo-react-animation-
Fade: Used for fade-in and fade-out animations. -
Reveal: Used for reveal animations.
-
-
@progress/kendo-react-common-
Typography: Used for text styling and typography.
-
-
@progress/kendo-react-tooltip-
Tooltip: Used to display tooltips.
-
AIm to Impress
The Allergy Identifier app stands out with a combination of cutting-edge technology and user-centered design. Our goal was not just to create an app for allergen identification, but to deliver a tool that genuinely helps users in their daily lives, making it easier for them to live allergy-free while providing powerful functionality. Here’s how we aimed to impress:
Seamless Integration of AI and User Data: The combination of image scanning using Google Generative AI with personalized user data (such as known ailments) provides a highly personalized and accurate experience. It’s not just about identifying allergens; it’s about doing so in a way that’s tailored to the individual’s specific health needs.
Comprehensive Allergen Management: While many apps only focus on identifying allergens from ingredient lists, Allergy Identifier extends the scope by offering features like ailment management, group sharing for families, and expiry tracking. This holistic approach makes it more than just a scanner — it’s a full-fledged allergen management system.
Real-time Alerts: With features like expiry tracking and real-time notifications, the app ensures users are always up to date with the status of their products, helping them stay on top of both allergens and product expiration dates.
Ease of Use: Through its intuitive UI powered by KendoReact, Allergy Identifier ensures that even the least tech-savvy users can easily navigate the app. The integration of a clean and simple interface, coupled with powerful features like image scanning and group management, delivers a smooth and effective user experience.
Delightfully Designed
Customizable Themes with Progress ThemeBuilder: We used the Progress ThemeBuilder to create a custom look for the app, ensuring it aligns with the branding and style we wanted to convey. This tool allowed us to easily adapt KendoReact components to fit our color scheme and design preferences, providing a polished, cohesive visual experience.
Responsive Design: KendoReact’s layout components were instrumental in making sure that the app is responsive and looks great across all devices. Whether users are on a mobile phone, tablet, or desktop, they can enjoy a consistent and smooth user interface that adapts to the screen size.
Intuitive User Interface: With the variety of components available from KendoReact, such as AppBar, Drawer, and Card, we were able to build a highly intuitive and navigable interface. These components helped us organize and present information in a way that is visually appealing and easy for users to interact with.
Animations and Transitions: To enhance the overall user experience, we incorporated smooth fade-in, fade-out, and reveal animations using KendoReact’s Animation library. These transitions contribute to a more dynamic and engaging experience, keeping users connected and engaged throughout their journey in the app.
Focus on Accessibility: In addition to the clean design and usability, we paid close attention to accessibility. The app’s elements are designed with proper contrast, keyboard navigability, and other accessibility features to ensure all users can easily interact with the app regardless of their needs.
Through thoughtful design and the flexibility of KendoReact components, Allergy Identifier offers an aesthetically pleasing, functional, and intuitive platform for users to manage their allergens and health needs effectively.
Contributors
- S.Dinesh: dinesh_somaraju
- N.J.K.Vamsi: vamsi_narkedimilli_
- P.S.S.Hrithik: hrithik_pasumarthi
Top comments (0)