Introducing CodingCam: An IDE Extension and Dashboard to Track and Visualize Your Coding Activity

This is a submission for the KendoReact Free Components Challenge.

What I Built

As developers, we pour hours into coding—writing lines, debugging, and building projects—but how often do we step back to see our progress? That’s where CodingCam comes in. It’s a passion project I’ve been intensively crafting to help developers track their coding journey with precision and flair. Think of it as a personal coach for your coding life, capturing every keystroke and turning it into meaningful insights.

CodingCam consists of two key pieces:

• CodingCam Extension: A custom-built extension for IDEs like VS Code that monitors your coding activity in real-time. It tracks metrics like time spent coding, languages used, projects worked on, and detailed progress—all stored securely in a backend database.
• Interactive Dashboard: A React-powered frontend that brings your data to life with visualizations, leaderboards, and a stunning 3D global map showing where you (and others) code from.

This isn’t just about numbers—it’s about celebrating your growth, spotting patterns, and connecting with a global coding community. Whether you’re a solo coder or part of a team, CodingCam makes your coding story visible, actionable, and downright fun.

Key Features:

• Real-Time Tracking: Captures your coding activity as it happens.
• Detailed Analytics: Breaks down time spent by project, language, and day.
• Leaderboard: See how your coding stacks up against others.
• 3D Global Map: Visualizes coding activity worldwide with an interactive twist.
• User-Friendly Dashboard: A one-stop hub for progress and insights.

After months of refinement, CodingCam is ready to shine—and KendoReact made it possible.

Demo

The live demo and code repository are still in the works, but trust me, it’s worth the wait! Links coming soon:

• Live App: [Coming Soon]
• GitHub Repository:

Frontend: https://github.com/Haseeb-Arshad/CodingCam
Backend: https://github.com/Haseeb-Arshad/codingcam-backend
Extension: https://github.com/Haseeb-Arshad/codingcam-extension

Front Page: The landing page welcomes users with a clean, inviting design, showcasing the core concept of CodingCam and its benefits.

Login/Signup: Secure authentication pages using KendoReact's Input and Button components for a smooth user experience.

** Dashboard: ** The heart of CodingCam, displaying key metrics like total coding time, active projects, and recent activity. KendoReact's Chart components are used extensively here to visualize data.

Leaderboard: A gamified view of coding activity, ranking users based on their coding time. Badge components highlight top performers.

Reports: Detailed breakdowns of coding activity, filterable by date range (using DatePicker), project (DropDownList), and language.

Insights/Projects: Provides personalized recommendations and observations based on the user's coding patterns with a dedicated section to manage and track individual projects, with details on time spent and progress made.

Goals/Teams/Global Progress: (Future Feature) Allows users to set coding goals, track their progress towards them, functionality to collaborate and track coding activity within teams, and a visually stunning 3D map displaying coding activity across the globe.

Settings: Allows users to customize their profile, preferences, and notification settings.

How I Built It

CodingCam is built on a modern tech stack, combining the power of frontend and backend technologies:

• Frontend: The interactive dashboard is built using React and Vite.js for a fast and efficient development experience. I chose TypeScript for type safety and improved code maintainability. The routing is handled by react-router-dom, providing a seamless navigation experience between different sections of the application (as seen in the code snippet you provided, with routes for Dashboard, Reports, Settings, etc.).

• Backend: A Node.js server handles data storage, retrieval, and user authentication.

• Extension: The core of CodingCam is the custom-built extension (for IDEs like VS Code). This extension is responsible for tracking coding activity in real-time. It meticulously monitors every keystroke and active coding session, detecting breaks after 7 minutes of inactivity. This ensures accurate tracking of both coding time and focused work periods.

• Data Storage: User data is securely stored in a MongoDB database, managed using Mongoose. This NoSQL database is well-suited for handling the flexible and evolving data structure of coding activity.

• Image Storage: User avatar images are uploaded and stored using Pinata Cloud, a service designed for storing content on the IPFS (InterPlanetary File System).

• Authentication: Secure user authentication is implemented to protect user data and ensure privacy.

KendoReact Integration:

KendoReact Free Components were instrumental in building a polished and functional UI. Here's a deeper dive into how I used specific components:

• Button: Used throughout the application for primary actions, such as submitting forms, triggering updates, and navigating between sections.
• DropDownList: Enables users to filter data by selecting from predefined options, like projects or programming languages.
• Input & TextBox: Used for various input fields, including search bars, form inputs, and settings configurations.
• DatePicker: Allows users to select specific dates or date ranges for viewing historical coding data.
• Dialog & DialogActionBar: Provides structured modal windows for displaying information, confirming actions, or presenting forms.
• Popup: Used for displaying contextual information or menus.
• Menu: offer a way to display hierarchical navigation options.
• Avatar, AvatarFallBack, AvatarImage: Used to display user profile pictures, with fallback options for a consistent user experience.
• Badge & BadgeContainer: Used to highlight user rankings on the leaderboard and to indicate activity streaks or achievements.
• Loader: Provides visual feedback to the user during data loading, ensuring a smooth and responsive experience.
• Chart, ChartSeries, ChartSeriesItem: These components are crucial for visualizing coding data, displaying trends, and providing insights into user activity. They transform raw data into easily understandable graphs and charts.
• Slider: For adjusting the time range and checking the analytics.
• Textarea: For jot notes and coding sessions.

The KendoReact components provided a consistent look and feel, excellent performance, and saved me a significant amount of development time. The extensive documentation and readily available examples made integration straightforward.

Benefits and Outcomes

CodingCam offers several benefits to developers:

• Increased Awareness: By tracking coding activity, developers gain a better understanding of their work habits, identifying peak productivity times and areas for improvement.
• Improved Productivity: The insights provided by CodingCam can help developers optimize their workflow, set realistic goals, and stay motivated.
• Gamification: The leaderboard and badge system add a fun, competitive element to coding, encouraging developers to stay engaged and productive.
• Community Building: The global progress map fosters a sense of community, allowing developers to see where others are coding and connect with fellow coders.
• Data-Driven Insights: CodingCam provides data-backed insights into coding habits, helping developers make informed decisions about their projects and career development.

Challenge Qualification

This project qualifies for both prompts of the KendoReact Free Components Challenge:

1. Meet KendoReact: CodingCam utilizes more than 10 KendoReact Free components, showcasing their versatility and power in building a real-world application.
2. Delightfully Designed: The UI is designed to be both functional and aesthetically pleasing. The use of components of KendoReact and the combination of colors and styles gives an amazing look to the interface.

I'm incredibly excited about CodingCam and its potential to help developers worldwide track, understand, and improve their coding journey. I believe KendoReact played a vital role in bringing this vision to life.