DayCache – Personal Digital Diary

This is a submission for the KendoReact Free Components Challenge.

What I Built :

DayCache is an interactive journaling app designed to help users maintain a daily writing habit effortlessly. Unlike traditional diary apps, DayCache adds intelligence and convenience with:

✨ AI-Powered Writing Assistance – Stuck on what to write? Autocomplete feature will Suggest you most suitable text.
📅 Monthly Activity View – Stay on track with a beautifully designed calendar that highlights your journaling consistency.
🗂 Organized Sidebar Navigation – Easily browse past entries by selecting a date.

This project was built using React (Vite) + Kendo-React, integrating multiple free components to enhance the UI/UX.

Live Demo & Code

Note: Using this app requires registering with an email, so I've added demo credentials in the login form. You can directly log in and use it.

🔗 Try it here: DayCache
💻 GitHub repository: Project Link

Kendo-React Experience

KendoReact’s free components made development smooth and efficient, helping me create a visually appealing and intuitive interface with minimal effort.

When I started working on DayCache, I ran into unexpected issues—some components didn't behave as expected, and my initial setup felt messy.
So instead of forcing my way through, I decided to restart from scratch and properly follow the Getting Started guide for Kendo-React. That turned out to be the best decision!
With a structured setup, everything started falling into place, and I got to experience KendoReact the way it was meant to be used.

Some of the key kendo-react components I used :

Form Components

• Input – Used for diary entry writing and form fields.
• MaskedTextBox – For formatted text input.
• Label – Provides accessible labels for form elements.

Buttons & Actions

• Button – Primary and secondary action buttons.
• ButtonGroup – Groups related buttons together.
• FloatingActionButton – Quick access of CacheChat feature.
• Chip – Represents selectable items like tags or categories.

Notifications & Feedback

• Notification – Displays messages like success, error, and warnings.
• NotificationGroup – Groups multiple notifications together.
• Badge – Shows counters for new messages or updates.

Dialogs & Popups

• Dialog – Used for confirmation messages and popups.
• DialogActionsBar – Provides actions (e.g., Save, Cancel) inside dialogs.
• Window – Displays resizable modals for detailed views.
• Popup – Quick popups like date selection or tooltips.

Layout & Structure

• Drawer – Sidebar navigation for selecting days.
• AppBar – Displays top navigation and actions.
• AppBarSection – Sections inside the AppBar (e.g., logo, menu).
• AppBarSpacer – Adjusts spacing in the AppBar.
• PanelBar – Expanding/collapsing sections for structured content.
• Card – Displays content in an organized card format.
• CardHeader, CardTitle, CardSubtitle, CardBody, CardActions – Structured elements of a card layout.

Indicators & Loaders

• Loader – Displays loading indicators while fetching data.
• Skeleton – Placeholder loading animation for smooth transitions.

Use of Skeleton to show loading screens

Animations & Effects

• Slide – Provides sliding transitions for elements.
• Fade – Smooth fade-in/out animations.
• Zoom – Zoom-in effects for UI elements.
• Reveal – Revealing animations for interactive components.

SVG Icons

• SvgIcon – Displays custom icons.
• bellIcon, menuIcon, homeIcon, saveIcon, trashIcon, paperPlaneIcon, chevronIcons – Various icons used for UI enhancements.

use of kendo-react svg-icons

Lists & Selection

• ListBox – Displays selectable list of days in month.

Miscellaneous

• Avatar – User profile image in the AppBar and Profile.
• ActivityCalendar – Custom component for tracking daily activities.

Definitely going to use kendo react in projects ahead.

Here is the table showing user activity for the current month.

Floating Action Button to Access Chat from anywhere in the app

Aim to Impress

DayCache is more than just a journal—it’s an AI-powered diary that enhances your writing experience with:

Here are the integrated generativeAI features :

Cache Chat – Ask about any past entry and get instant insights.

Generate Summary – AI-powered daily summaries for quick reflection.

Autocomplete – Smart suggestions to help you write effortlessly.

These features make journaling seamless, insightful, and enjoyable!