This is a submission for the KendoReact Free Components Challenge.

What I Built

I built an AI-powered Study Buddy—your intelligent friend who makes learning effortless and efficient. All you have to do is upload your study material, and that’s it! In seconds, you get:

Personalized Flashcards to help reinforce key concepts.

AI-Generated Quizzes to test your understanding engagingly.

Comprehensive Study Guides that summarize the entire material, making complex topics easy to grasp.

It also comes with an inbuilt study schedule planner in which you can schedule and plan your study sessions with the topic date and time and the duration of your study session.

This smart companion not only saves you countless hours but also becomes a lifesaver during last-minute revisions, especially when exam stress is at its peak.

Demo

Live link : here
lanfing

AI

sum

plan

GitHub Repo: Source Code

KendoReact Experience

The experience with Kendo components was very seamless as the documentation was very clear and the example code was also very useful to understand and implement them.
I personally liked Kendo components a lot and therefore this is how I utilized Tell them in my Study AI Buddy with 10 free components as well a few premium components To maintain a seamless user experience.

KendoReact Components Used in This Project

1. Calendar (@progress/kendo-react-dateinputs)

Used for selecting dates in the study scheduler.

Files: src/components/StudyScheduler.tsx

c

2. DateTimePicker (@progress/kendo-react-dateinputs)

Used for scheduling study events.

Files: src/components/StudyScheduler.tsx

d

3. Grid, GridColumn (@progress/kendo-react-grid)

Used for displaying tabular data of study sessions.

Files: src/components/StudyScheduler.tsx, src/components/StudyStats.tsx

g

4. Button (@progress/kendo-react-buttons)

Used for interactive actions in the study scheduler and header.

Files: src/components/StudyScheduler.tsx, src/components/Header.tsx

b

5. ButtonGroup (@progress/kendo-react-buttons)

Used for navigation options.

Files: src/components/Header.tsx

bn

6. Chip, ChipList (@progress/kendo-react-buttons)

Used for tag-like elements in the header.

Files: src/components/Header.tsx

on

7. FloatingActionButton (@progress/kendo-react-buttons)

Used as a mobile help button.

Files: src/components/Header.tsx

{
              setShowHelpDialog(true);
              setMobileMenuOpen(false);
            }}
            className="mt-4"
          />

8. Dialog (@progress/kendo-react-dialogs)

Used for event creation forms and help dialogs.

Files: src/components/StudyScheduler.tsx, src/components/Header.tsx

Imageds

9. DialogActionsBar (@progress/kendo-react-dialogs)

Used for actions within the help dialog.

Files: src/components/Header.tsx

Im

10. NumericTextBox (@progress/kendo-react-inputs)

Used for duration input in study scheduling.

Files: src/components/StudyScheduler.tsx

d

11. Drawer (@progress/kendo-react-layout)

Used for mobile navigation.

Files: src/components/Header.tsx

Iman

12. Typography, SvgIcon (@progress/kendo-react-common)

Used for text and icons in study stats and header.

Files: src/components/StudyStats.tsx, src/components/Header.tsx

Study Statistics

13. DropDownList (@progress/kendo-react-dropdowns)

Used for subject filtering.

Files: src/components/StudyStats.tsx

Im

14. Pager (@progress/kendo-react-data-tools)

Used for pagination.

Files: src/components/Index.tsx

Imags

15. process (@progress/kendo-data-query)

Used for processing study data.

Files: src/components/StudyStats.tsx

setGridData(process(filtered, { sort: [{ field: 'date', dir: 'desc' }] }));
 setGridData(process(studySessionsData, { sort: [{ field: 'date', dir: 'desc' }] }));

AIm to Impress

I have integrated Gen AI technology in this project which analyzes **the **long study materials of students which they spend a lot of time going through into simple MCQ forms and flashcards and gives the overall summary by going through those documents which saves students a lot of time and a lot of stress during their exams

ai

guide

flashcard

quiz

Delightfully Designed

The Kendo UI Figma kit plays an important role in designing the UI for the project, as it provides a comprehensive set of pre-built components that can be seamlessly integrated into our designs. By utilizing these ready-made elements, I ensure design consistency, improve efficiency, and accelerate the transition from prototyping to development. This allows us to enhance the user experience while maintaining a structured and scalable design approach.

figma