This is a submission for the KendoReact Free Components Challenge.
What I Built
As a part of this challenge, I have developed a productivity tool designed to help people organize and manage their daily tasks more effectively called WinDay.
Inspired by concepts such as the Eisenhower Matrix and the Zeigarnik Effect, the tool is designed to encourage better planning, reduce overwhelm, and help users feel rewarded for staying consistent and completing their daily tasks.
Key Features
- Weekly and Daily Task Management : Users can add new tasks for each week, along with daily recurring activities such as exercising, skincare, or reading.
-
Task Prioritization : For each day, tasks can be categorized into three groups:
- Must Do (high priority, essential for the day)
- Optional for Today (low priority, to be done if time permits)
- Delegate or Schedule Later (can be reassigned or postponed)
- Dashboard & Tracking : A clean dashboard displays categorized tasks as a to-do list, helping users track progress throughout the day.
-
Gamification : Users earn streak points for maintaining daily consistency. In addition, completing tasks rewards them with points as follows:
- Must-Do Tasks: Completing a must-do task earns the user 3 points.
- Optional Tasks: By default, each optional task is worth 2 points. However, if all must-do tasks are completed, optional tasks increase to 3 points each.
- Other Tasks: Each task in this category gives 1 point. Once both must-do and optional tasks are completed, these tasks are upgraded to 2 points each.
- Rewards System : Users can maintain a WishList of items and unlock them using their earned points—making rewards feel both consistent and well-deserved. Each WishList item requires a fixed number of points (50 in this case) to be unlocked.
- Motivation through Consistency : By combining planning, gamification, and rewards, the tool encourages users to stay consistent, push themselves, and improve their productivity every day.
Tech Stack Used
- Frontend : Vite + React + TypeScript
- Database + Authentication : Supabase
- React UI Library : KendoReact
KendoReact Components Used
I have used the following KendoReact components for building this project :
- @progress/kendo-react-layout - AppBar, AppBarSection, AppBarSpacer, Drawer, DrawerContent, DrawerSelectEvent, GridLayout, GridLayoutItem, Card, CardHeader, CardBody
- @progress/kendo-react-buttons - Button
- @progress/kendo-react-dialog - Dialog
- @progress/kendo-react-inputs - Input, RadioButton, Checkbox
- @progress/kendo-react-notification - Notificatio
- @progress/kendo-react-progressbars - ProgressBar
- @progress/kendo-react-dateinputs - Calendar, CalendarCell, CalendarCellProps
- @progress/kendo-react-animation - Fade
- @progress/kendo-svg-icon - menuIcon, calendarIcon, homeIcon, starIcon, plusIcon, trashIcon, pencilIcon
Demo
GitHub - GitHub Repo
[Code Smarter, Not Harder prize category] AI Coding Assistant Usage
The Kendo React Coding Assistant was extremely helpful during the whole development process. The tool was very prompt in suggesting alternative components and adapting quickly to feedback. I integrated it into my VS Code through an MCP server and used it primarily for:
- Setting up the Bootstrap theme and configuring a side drawing panel for navigating between pages.
- Creating the basic wireframe for all three pages using multiple layout components.
- Setting up the to-do list layout on the second page.
- Applying custom styling instructions, which helped align the design more closely with my vision.
Overall, the tool was really helpful in speeding up the whole development process while also helping familiarize me with the Kendo React library and its components. By handling these foundational tasks efficiently, it allowed me to focus on refining the design, integrating backend functionality, and implementing additional logic for the project.
Future Improvements
- Currently, each reward requires a fixed 50 points to unlock. This could be made customizable, allowing users to set their own point thresholds for different WishList items.
- The tool could be integrated with users google calendars, where an AI agent reads through scheduled events and automatically generates a list of important tasks for the day or week, helping users plan more efficiently.
- The tool could additionally be enhanced with features like reminders to keep users motivated and a Pomodoro timer to help them track their time more efficiently.
Thank you all for taking the time to read this post! I’d love to hear your thoughts and feedback 😄
Top comments (0)