CODE RUSH 2025, an exclusive internal hackathon for Zohoites. This event provided a platform for Zoho employees to showcase their innovative ideas and coding skills by developing extensions for Zoho Code, our cutting-edge online IDE.
The hackathon spanned over a two weeks, culminating in a final event where participants presented their projects to a panel of judges.
I participated in this hackathon and developed an extension for Zoho Code called "CodeMark" that enhances bookmark management within Zoho Code. Below is the detailed documentation for the CodeMark extension.
CodeMark is a feature-rich Zoho Code extension designed to help developers manage their bookmarks efficiently. Whether you're working on a small project or a large codebase, CodeMark provides the tools you need to organize, prioritize, and annotate your bookmarks with ease.
The Tree View provides a lightweight and intuitive way to manage your bookmarks directly from the Zoho Code sidebar.
- Quick Access: Dedicated bookmark button in the IDE status bar
- One-Click Toggle: Add or remove bookmarks with a single click
- Smart Display: Shows current bookmark count and status
- Visual Feedback: Gold-colored button with bookmark icon
- Hover Information: Tooltip shows current bookmark statistics
- Smart Bookmarking: Bookmark any line of code with custom labels
- Quick Navigation: Click on bookmarks to instantly jump to code locations
- Organized View: Dedicated tree view panel with file grouping and statistics
- Persistent Storage: Bookmarks saved in workspace settings and persist across sessions
- Visual Decorations: Highlighted bookmark lines in the editor with hover tooltips
- Form Dialogs: Professional UI for adding and editing bookmark labels
- Smart Organization: Automatic grouping by files and sorting by line numbers
- Status Bar Integration: Quick access toolbar button with real-time updates
- Add Bookmarks: Quickly bookmark any line of code with a single click.
- Jump to Bookmarks: Click on a bookmark to navigate directly to the corresponding line in your code.
- Delete Bookmarks: Remove bookmarks directly from the tree view.
- Context Menu Actions: Right-click on a bookmark to access additional options like renaming or deleting.
The Webview Dashboard offers a comprehensive interface for managing bookmarks with advanced features.
- Priority Levels: Assign bookmarks a priority level (High, Medium, Low, or None) to focus on what's important.
- Tags: Add tags to bookmarks for better categorization and filtering.
- Notes: Attach notes to bookmarks to provide additional context or reminders.
- Search and Filter:
- Search bookmarks by label, code, file, notes, or tags.
- Filter bookmarks by priority, tags, or recent activity.
- Reminders:
- Set date and time-based reminders for bookmarks.
- Optionally send reminders via email.
- Analytics:
- View insights into your bookmarks, such as the most active files and popular tags.
- Track recent bookmarks and upcoming reminders.
- Customizable Views:
- Switch between Table View and Card View for displaying bookmarks.
- Export:
- Export bookmarks as a JSON file for backup or sharing.
- Remainders:
- Set reminders for bookmarks with optional email notifications.
- View upcoming and overdue reminders in the dashboard.
- Right-click on the line of code you want to bookmark.
- Select "Add Bookmark" from the context menu.
- Open the CodeMark Tree View from the Zoho Code sidebar.
- Bookmarks are displayed in a tree structure, grouped by file and folder.
- Click on a bookmark in the tree view to jump directly to the corresponding line in your code.
- Right-click on a bookmark in the tree view and select "Delete Bookmark".
- Run the CodeMark: Show Bookmark Dashboard command from the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
- Use the Manage Bookmark modal to update priority, tags, and notes.
- Add or remove tags directly from the dashboard.
- Open the Set Reminder modal from the dashboard.
- Specify the date, time, and optional email for the reminder.
Use the search bar in the dashboard to find bookmarks. Apply filters for priority, tags, or recent activity.
- Click the Export button in the dashboard to download a JSON file of your bookmarks.
- Open Zoho Code. (code.zoho.com)
- PS: Zoho Code is not yet available for public use.
-
In the terminal, run the following command:
npm run dev
-
Visit the URL provided in the terminal to access the CodeMark extension.
Demo.Video.mp4
Note: This video demonstrates the key features of CodeMark, including adding bookmarks, navigating through them, and using the advanced dashboard for management.
- Thanks for Zoho Code team, for providing the platform to develop and test CodeMark and for conducting this amazing hackathon.
CodeRush 2025 was an amazing experince, although I didn't win the hackathon, I learned a lot about building extensions for Zoho Code. The final event was a great opportunity to showcase my work and connect with other developers. I appreciate the support from the Zoho Code team and the community.
I hope you find CodeMark useful in the development workflow. If you have any feedback or suggestions, feel free to reach out!