KendoReact Free Components Challenge : 🚀 VibePilot – Your AI-Powered Social Media Co-Pilot

Amlan 🚀 — Mon, 24 Mar 2025 06:58:28 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

VibePilot streamlines social media management by integrating AI-powered content creation, visual scheduling, and analytics in one elegant platform.

Live demo: https://vibepilot.netlify.app/

Key Features

AI Content Assistant

Enhances social media posts with platform-specific optimization
Provides conversational guidance for content creation
Integrates Cohere's API for natural language processing

Visual Content Calendar

Drag-and-drop scheduling with color-coded platform indicators
Displays optimal posting times based on audience engagement
Identifies scheduling conflicts and content distribution gaps

Performance Analytics

Visualizes engagement across platforms with interactive charts
Compares AI-enhanced vs. standard content performance
Identifies top-performing content types and posting times

Streamlined Post Management

Create posts for multiple platforms simultaneously
Apply platform-specific formatting automatically
Track publishing status with visual indicators

Tech Stack

Frontend: React + TypeScript
UI Components: KendoReact
State Management: React Query
Authentication: JWT
AI Integration: Cohere API
Deployment: Netlify

NOTE: This is just a prototype for submitting to the challenge

Demo

demo link : https://vibepilot.netlify.app/

repo : https://github.com/Amlan-git/VibePilot-

KendoReact Experience

Using KendoReact in VibePilot was honestly a game-changer. I wanted to build something that looked polished and felt intuitive — without spending weeks on custom UI from scratch — and KendoReact delivered on that right out of the gate.

Getting started was super smooth. I activated the free commercial license in just a couple of minutes, used the license key, and everything worked seamlessly. No weird setup issues, no blocked features as well, just a solid dev experience from the start.

Once I got going, the components really helped me move fast.

here are all the Kendo UI components used in this project:

1. Layout Components

AppBar, AppBarSection, AppBarSpacer
Drawer, DrawerContent
Card, CardHeader, CardTitle, CardBody, CardActions
TabStrip, TabStripTab
Avatar

2. Form Components

Form, Field, FormElement, FieldWrapper
Input, TextArea
Button, ButtonGroup, FloatingActionButton
DropDownList, MultiSelect
DateTimePicker, DateRangePicker, DatePicker
Upload
Label, Hint, Error

3. Data Visualization

Grid, GridColumn, GridToolbar
Chart, ChartSeries, ChartSeriesItem
Various chart components for analytics

4. UI Components

Dialog, DialogActionsBar
Notification, NotificationGroup
Tooltip
Loader
Badge
Chip, ChipList
Icon

5. Scheduler Components

Various scheduler components from @progress/kendo-react-scheduler

Common Components:

Avatar
Icon

Kendo React Packages (version 7.4.0):

Core Packages:

UI Component Packages:

Data & Form Packages:

Date & Time Packages:

Visualization Packages:

Additional Functionality:
Theme Package:

AIm to Impress

GenAI used : cohere AI

VibePilot uses Cohere AI for two main features:

Content Enhancement: The app integrates Cohere's language generation capabilities through the cohereService.ts service to help users optimize their social media content. Key functionalities include:
Content rewriting with different tones (professional, casual, promotional, etc.)
Hashtag generation for social posts
Content idea generation
Post optimization for better engagement
The service uses Cohere's /generate endpoint with the "command" model
AI Assistant Chat: Users can interact with an AI assistant powered by Cohere's chat capabilities:
The chat feature maintains conversation history for context
It uses Cohere's /chat endpoint with the "command" model
The implementation handles back-and-forth dialogue in a conversational UI

Thank you !

Thank you for taking the time to explore VibePilot. 🚀

Your interest and feedback mean the world to me. Whether you're a creator or a fellow developer, I hope you like VibePilot.

If you've made it this far, thank you for your support! 🙏✨ I can't wait to hear your thoughts on this project. Building VibePilot was more than just a coding project - from wrestling with Cohere's AI capabilities to crafting an intuitive interface with KendoReact, this project pushed me to grow both as a developer and a problem-solver.

Most commonly used commands for NPM and YARN !

Amlan 🚀 — Mon, 18 Oct 2021 21:30:31 +0000

Hello everyone! 💙

In this article, we look into the commonly used package managers - NPM and YARN🤩 Probably you already know about these two package managers and have used them in your React JS projects or while building React JS or Node JS web apps. But you may often have been relying on a quick google search every now and then for the commands used differently by both the package managers! So here we explore the similar and different commands used by both package managers!

Let's get started !!

So what are NPM and YARN basically?

A package manager is a tool that automatically handles a project’s dependencies in a variety of ways. For example, with the help of a package manager, we can install, uninstall, update, and upgrade packages, configure project settings, run scripts, and so on. The package manager handles all of the heavy work, leaving us with only the coding which is the most enjoyable part.

NPM - It stands for Node Package Manager. This was released in 2010.
NPM involves a command-line interface (CLI) for interacting with npm via the terminal, the CLI tool. It ships as a default package manager with each fresh Node installation, which means we can start using it right away!

YARN - It stands for Yet Another Resource Negotiator, It is an alternative for npm.
It was released in 2016.
Yarn was created to address npm's shortcomings, such as performance and security concerns. It quickly established itself as a secure, speedy, and dependable JavaScript dependency management tool.

So what we get to know here is that package managers like NPM and Yarn make it easier to handle a project's dependencies.

So what are the commands which are * DIFFERENT * for both NPM and YARN?

What are they used for?

Let's look into this little sheet I prepared 👇

So what are the commands which are SAME for both NPM and YARN?

Let's look at another sheet I prepared 👇

So that's it for today! You have reached the end of the article 😁

Hope you liked this article and learned something and maybe it helped you remind the commands!

If you find this helpful please share and like it 😁 💙

Hi, I'm Amlan, a React Developer, and a CS Engineering student! This is my first blog article on DEV and I'm glad I finally decided to hop on the learning in public journey 😁

If you find this useful, please feel free to connect with me on any of the platforms below!

Twitter
LinkedIn

DEV Community: Amlan 🚀