DEV Community: Araan Sheikh

Creating an Intelligent Task Management Dashboard

Araan Sheikh — Thu, 20 Mar 2025 18:31:48 +0000

KendoReact AI Task Management Dashboard

This is a submission for the KendoReact Free Components Challenge.

What I Built

I've developed an AI-powered task management dashboard that helps users optimize their productivity through intelligent task scheduling and insights. The application leverages 12 KendoReact free components to create a professional, intuitive interface while integrating Google's Generative AI for smart task management features.

Demo

DEMO LINK: Kendo Task AI

GitHub Repository: kendo-task-ai-dashboard

KendoReact Experience

Here's how I utilized 12 KendoReact free components to build this application:

1. Button (`@progress/kendo-react-buttons`)

Buttons are used throughout the UI for primary actions like creating tasks and generating AI schedules.

<Button
  themeColor="primary"
  onClick={handleCreateTask}
  icon="plus"
>
  Create New Task
</Button>

2. ProgressBar (`@progress/kendo-react-progressbars`)

The ProgressBar visually represents task completion rates and productivity metrics.

<ProgressBar value={completionRate} max={100} />

3. Switch (`@progress/kendo-react-inputs`)

Used for toggling settings and options within the application.

<Switch onChange={handleToggle} checked={isEnabled} />

4. Tooltip (`@progress/kendo-react-tooltip`)

Tooltips provide contextual help throughout the interface.

<Tooltip anchorElement="target" position="right">
  <i className="info-icon" title="Percentage of completed tasks out of all tasks">ⓘ</i>
</Tooltip>

5. Notification & NotificationGroup (`@progress/kendo-react-notification`)

Notifications display success/error messages and important updates.

<NotificationGroup
  style={{
    position: 'fixed',
    right: '20px',
    top: '20px',
    zIndex: 1000
  }}
>
  {notifications.map(notification => (
    notification.isVisible && (
      <Notification
        key={notification.id}
        type={{ style: notification.type, icon: true }}
        closable={true}
        onClose={() => handleCloseNotification(notification.id)}
      >
        <span>{notification.message}</span>
      </Notification>
    )
  ))}
</NotificationGroup>

6. TabPanel & Tab (`@progress/kendo-react-layout`)

The TabPanel organizes dashboard content into logical sections: Tasks, Calendar, and Analytics.

<TabPanel
  selected={tabSelected}
  onSelect={(index) => setTabSelected(index)}
>
  <Tab title="My Tasks">
    <TaskTable tasks={tasks} />
  </Tab>

  <Tab title="Calendar">
    <TaskCalendar tasks={tasks} />
  </Tab>

  <Tab title="Analytics">
    <EnhancedProductivityCharts tasks={tasks} />
  </Tab>
</TabPanel>

7. Form Components (`@progress/kendo-react-form`)

Form components power the task creation and editing functionality.

<Form
  onSubmit={handleSubmit}
  initialValues={initialValues}
  render={(formRenderProps) => (
    <FormElement>
      <Field name="title" component={Input} label="Task Title" />
      <Field name="description" component={TextArea} label="Description" />
      {/* Other form fields */}
    </FormElement>
  )}
/>

8. DateInputs (`@progress/kendo-react-dateinputs`)

DatePicker components allow users to select and manage task due dates.

<DatePicker
  value={selectedDate}
  onChange={handleDateChange}
  format="MMMM dd, yyyy"
/>

9. DropDowns (`@progress/kendo-react-dropdowns`)

DropDownList components allow selection of task priorities, categories, and filters.

<DropDownList
  data={priorities}
  value={selectedPriority}
  onChange={handlePriorityChange}
  textField="text"
  dataItemKey="value"
/>

10. Dialog/Modal (`@progress/kendo-react-dialog`)

Custom modal dialogs provide focused interaction spaces for task forms and AI suggestions.

<CustomModal 
  title="AI Suggested Schedule" 
  onClose={() => setShowScheduleSuggestion(false)}
  width={700}
>
  {/* Modal content */}
</CustomModal>

11. Charts (`@progress/kendo-react-charts`)

Charts visualize productivity metrics and work patterns in the Analytics tab.

<Chart>
  <ChartSeries>
    <ChartSeriesItem type="column" data={productivityData} />
  </ChartSeries>
  <ChartCategoryAxis>
    <ChartCategoryAxisItem categories={days} />
  </ChartCategoryAxis>
</Chart>

12. Grid/ListView (`@progress/kendo-react-grid`)

The Grid component powers the task table view with sorting, filtering, and editing capabilities.

<Grid
  data={tasks}
  sortable={true}
  filterable={true}
  onRowClick={handleRowClick}
>
  <GridColumn field="title" title="Task" />
  <GridColumn field="priority" title="Priority" />
  <GridColumn field="status" title="Status" />
  <GridColumn field="dueDate" title="Due Date" />
</Grid>

AIm to Impress

This application integrates Google's Generative AI (Gemini) to provide intelligent task management features:

AI-Powered Schedule Optimization

The dashboard includes an "AI Schedule Suggestions" button that analyzes pending tasks and generates intelligent scheduling recommendations:

const generateOptimalSchedule = async () => {
  const pendingTasks = tasks.filter(t => t.status !== 'completed');
  if (pendingTasks.length === 0) {
    showNotification('No pending tasks to schedule.', 'info');
    return;
  }

  setIsLoadingSchedule(true);
  try {
    const suggestion = await AIService.suggestOptimalSchedule(pendingTasks);
    setScheduleSuggestion(suggestion);
    setShowScheduleSuggestion(true);
  } catch (error) {
    console.error('Error generating schedule:', error);
    showNotification('Error generating schedule. Please try again.', 'error');
  } finally {
    setIsLoadingSchedule(false);
  }
};

The AI service considers:

Task priorities
Deadlines
Estimated completion times
Dependencies between tasks

The system then generates:

A recommended task sequence
Daily task plans
Reasoning behind the suggestions

AI Integration Architecture

The application uses the Google Generative AI SDK to create AI-powered features:

Task Analysis - AI examines task details and metadata

Schedule Generation - AI creates optimized schedules based on various factors

Reasoning - AI explains its recommendations to help users understand the approach

Development Experience

Building with KendoReact components significantly accelerated development. Each component offers a rich set of features out of the box, saving countless hours of development time.

The most valuable aspects were:

Consistent Design Language - All components share the same visual style
Rich API Surface - Components offer extensive customization options
Documentation - Clear examples made implementation straightforward
Accessibility - Built-in accessibility features saved development time

Future Enhancements

With the foundation of KendoReact components in place, I plan to extend the application with:

Team collaboration features
More advanced AI-powered workflow optimization
Integration with third-party productivity tools
Mobile apps for iOS and Android

Conclusion

The KendoReact free component library provided everything needed to build a sophisticated, AI-enhanced application with a professional UI and excellent user experience. The components are powerful, flexible, and work together seamlessly, making development efficient and enjoyable.

The Real Story Behind Building is-cod.in Universe: From $52 Bills to Free Hosting 😅

Araan Sheikh — Sun, 16 Mar 2025 18:47:52 +0000

The Journey No One Talks About 🎢

Hey dev.to family! 👋

I'm Araan, founder of is-cod.in Universe, and today I'm sharing the REAL story behind building our platform - including all the embarrassing mistakes and expensive lessons learned!

The Expensive Learning Curve 💸

The $52 Netlify Surprise 😱

Picture this: You're a student developer, excited about your new project, and then...

# Email from Netlify
Subject: Your Monthly Bill
Amount: $52
Usage: 4 days
Reason: Edge Function Execution

My reaction: "WHAT THE... 😨"

Yes, I actually got a $52 bill for just 4 days of usage! Why? Those sneaky edge functions were running wild!

What I did next (don't judge 😅):

Panicked
Deleted my account
Created a new one
Learned about pricing BEFORE deploying

The Hosting Adventure 🎪

Attempt 1: Netlify

Pros: Easy to deploy
Cons: Expensive edge functions
Result: $52 bill and a deleted account 💀

Attempt 2: Vercel

// The dream
deploy.toVercel();

// The reality
Error: Sandbox execution timed out
Error: Function exceeded maximum execution time
Error: Why won't you work? 😭

Turns out Vercel's sandbox environment doesn't play nice with certain DNS operations!

Attempt 3: Railway

Looked promising until...

WARNING: Network egress approaching limit
WARNING: Network egress exceeded
WARNING: Your wallet is crying

Pro tip: Watch those egress limits like a hawk! 🦅

Final Solution: Microsoft Azure (Free Tier FTW!)

# The sweet spot
Azure Free Tier + Careful Resource Management = Happy Wallet 😊

Lessons Learned (The Hard Way) 📚

Read the Pricing Pages
- Don't just click "Deploy"
- Check the free tier limits
- Understand what "egress" means BEFORE you need to
Test Locally First

   # Good approach
   Test locally
   Monitor resource usage
   Calculate potential costs
   Deploy safely

   # My approach initially
   Deploy first
   Cry later

Ask Your Community
- Seniors have wisdom
- Juniors have fresh perspectives
- Twitter tech community saves lives

The Technical Challenges 🛠️

1. DNS Propagation

// What I thought I needed
const updateDNS = () => {
  // Simple update
};

// What I actually needed
const updateDNS = async () => {
  await handleCaching();
  await checkPropagation();
  await prayItWorks();
  await handleFailures();
  await consolePeople();
};

2. Resource Management

// Important lesson
interface Hosting {
  cost: number;
  limits: {
    egress: number;
    compute: number;
    patience: number;
  };
  reality: "Different from docs" | "Way different from docs";
}

Cloud Provider Comparison (From Experience) 🌩️

Netlify

Great UI/UX
Dangerous edge function pricing
Best for static sites

Vercel

Amazing for Next.js
Sandbox limitations
Watch those function timeouts

Railway

Solid performance
Clear pricing
Watch the egress!

Azure (Our Choice)

Reliable free tier
Good documentation
Complex but worth it

Money-Saving Tips for Developers 💰

Always Calculate Costs

   Monthly Users * Average Requests * Edge Function Calls = 💸

Use Free Tiers Wisely
- Azure: Great limits
- Vercel: Good for small projects
- Railway: Watch the egress
- Netlify: Avoid edge functions unless necessary
Monitor Everything

   // Set up alerts
   const monitorResources = () => {
     if (costs > budget) {
       sendPanicEmail();
       startPraying();
     }
   };

What We Use Now 🎯

Our current stack:

Azure Free Tier for hosting
Cloudflare for DNS
MongoDB Atlas (free tier)
Next.js for frontend
TypeScript for sanity

Advice for New Developers 🌟

Start Small
- Test locally
- Use free tiers
- Scale gradually
Read Documentation
- Especially pricing pages
- Including the fine print
- Even the boring parts
Join Communities
- Discord groups
- Twitter tech community
- Local dev meetups

The Happy Ending

Despite the $52 lesson and multiple hosting migrations, is-cod.in Universe is now running smoothly on Azure's free tier, serving thousands of users without breaking the bank!

Get Started (Without the Expensive Mistakes) 🚀

Visit register.is-cod.in
Create your free account
Get your subdomain
No surprise bills! 😉

Remember: Everyone makes mistakes - the key is learning from them (preferably from mine instead of your own 😅)

Happy coding (and careful deploying)! 🚀

Araan
Founder, is-cod.in Universe

Building the World's First User-Friendly DNS Manager: The is-cod.in DNS Panel Story

Araan Sheikh — Sun, 26 Jan 2025 00:44:52 +0000

The Problem We All Face 😫

Hey dev.to fam! 👋

Ever tried getting a free subdomain for your project? Let me paint you a picture:

Searching through GitHub repos 🔍
Staring at confusing README files 📚
Trying to understand DNS records 😕
Making pull requests and waiting forever ⏳
Getting rejected because of one tiny JSON error 😭

Sound familiar? Yeah, I've been there too.

The Birth of a Solution 💡

I'm Araan, and this exact frustration led me to create is-cod.in DNS Panel - the world's first user-friendly subdomain management platform. No more JSON editing, no more waiting for PR approvals!

What Makes Us Different? 🌟

The Old Way (Bruh really!) 🤢

{
  "name": "araan",
  "type": "A",
  "content": "192.0.2.1",
  "proxied": true
}

^ Dealing with this in GitHub repos

The New Way (Yay!) 🎉

Visit register.is-cod.in
Sign-Up then login(bcz I'm still using Clerk in development)
Click "add records"
Fill a simple form
Done in 30 seconds!
Wait for Approval.

Free Domains We Offer 🎁

.is-cod.in - Perfect for portfolios & APIs
.is-host.in - Ideal for web apps
.topg.dad - Because why not be cool? 😎

Real Developer Stories 👥

"I was looking for a subdomain to test for megavault.in before purchasing one, as I was starting with a zero budget. Everywhere I looked, hosting services offered subdomains, but they all included the hosting service's name in the subdomain, which was so frustrating! But then I found is-cod.in, and it was absolutely perfect! I got my subdomain in just 3 minutes! 🎉 I was able to launch my MegaVault (formerly known as SkyVault) under this amazing subdomain, and I couldn't be happier! 😊

I highly recommend is-cod.in to anyone just starting out with a domain – it's a game-changer! 🙌 With 100% uptime and zero issues, it’s been smooth sailing all the way. Don’t hesitate, give it a try!"

R3AP3R editz

"Spent 3 hours fighting with GitHub DNS repos. Switched to is-cod.in, had my subdomain in 2 minutes!"

Alex

The Tech Stack (For The Curious Minds like Chill Guy) 🛠️

const ourStack = {
  frontend: "Next.js 14",
  backend: "Node.js",
  database: "MongoDB",
  dns: "Cloudflare API",
  language: "TypeScript",
  deployment: "MS Azure"
};

Why It's Revolutionary 🚀

World's First:
- Full frontend interface for DNS Management
- Real-time updates
- No technical knowledge needed
Performance Optimized:

const detectDevice = () => {
  const isMobile = /iPhone|Android/i.test(navigator.userAgent);
  return {
    optimizations: isMobile ? "high" : "standard",
    features: isMobile ? "core" : "all"
  };
};

Features That Make Life Easier 🎯

1. Instant Setup

30-second subdomain creation
Real-time DNS propagation
No waiting(approval from team may take time lol), no refreshing

2. User-Friendly Dashboard

Clean interface
Easy record management
Real-time status updates

3. Fun Extras

Festive themes 🎄(Performance Optimized 🚄)
Celebration animations 🎉

Perfect For: 👇

🎓 Students building portfolios
💻 Developers testing APIs
🚀 Startups launching MVPs
🎨 Creators showcasing work
🔧 DevOps testing environments

Getting Started (Isn't it Super Easy!) 🏃‍♂️

# Old way
git clone some-repo
edit json
make PR
wait forever(sometimes gets rejected within min)
pray it works(just like me)

# Our way
visit register.is-cod.in
click "add records"
fill form
done! 🎉

The Best Part? It's All Free! 💫

✅ No hidden charges
✅ No credit card needed
✅ No premium features
✅ No usage limits

What's Coming Next? 🔮

Automatic optimization
Custom DNS templates
Team collaboration
Shared configurations
Integration guides

Join Our Community! 🤝

Quick Tips for New Users 💡

Starting Out:

   # Visit
   register.is-cod.in

   # Configure
   Click 'Add Records'

   # Choose the sub-domain
   your-project.is-cod.in/is-host.in/topg.dad

   # Submit
   Fill the required field, visit [Docs](https://register.is-cod.in/docs) for reference.

   #Wait for approval from admin team.

   # Done!
   Start building! 🚀

Best Practices:
- Use descriptive subdomain names
- Keep records updated

Let's Make DNS Fun Together! 🎮

Remember when DNS management was a headache? Neither do our users! Join us to be one of the developers who've made the switch to is-cod.in.

Get Started Now! 🚀

Visit register.is-cod.in
Create your account
Get your first subdomain
Join our Discord community

Need Help? 🆘

Drop by our Discord - we've got the chill tech community waiting to help!

if it works don't touch it!
Happy coding! 🚀

Araan Sheikh
Founder, is-cod.in