# Building the Campfire: My Custom CMS for 'Campfire Logs' (KendoReact Challenge Submission) Hey everyone! Welcome back to [***Campfire Logs: The Art of Trial & Error***](https://campfire.dlseitz.dev)***.*** Since this CMS is the very tool I will \[eventually\] use to publish these logs, I wanted to share my submission to the [KendoReact Free Components Challenge on DEV.to](https://dev.to/challenges/kendoreact-2025-09-10) that just wrapped up. Because this doesn’t dive into development process, you may notice it isn’t numbered like my other logs. Be sure to check back for **Log** **#6** (*title tbd*) soon. I'll be diving deep into the technical aspects and 'uh-oh' moments that went into developing it. --- *This is a submission for the* [*KendoReact Free Components Challenge*](https://dev.to/challenges/kendoreact-2025-09-10)*.* ## What I Built **If you've been following my** [**blog**](https://dev.to/dlseitz)**, you know I'm a big believer in building things the hard way to truly understand them.** From my own Gitea server to the backend systems for my website, I'm logging the entire process of building a full digital ecosystem from scratch. As promised in an earlier blog post, I decided it was time I develop my own tool to manage the blog itself. The KendoReact Free Components Challenge was the perfect spark to the fire. I built the **Campfire Logs CMS**, a personal [Content Management System](https://www.ibm.com/think/topics/content-management-system) Dashboard and Editor designed specifically for my blog series, [*"Campfire Logs: The Art of Trial & Error"*](https://campfire.dlseitz.dev). This is a private dashboard that provides a clean, efficient interface for content creation and management, without the complexity of public user management systems. As Phase I of IV (the website, backend, and database are coming soon!), it’s a purpose-built tool that lets me focus on the writing. ## Demo **Live Project:** https://campfire-demo.dlseitz.dev **Repository:** https://gitea.dlseitz.dev/dereklseitz/campfire-dashboard ### Key Features: * **Secure User Login**: For the private login page, I kept the interface clean and simple with KendoReact's `Input` and `Label`, using the `Notification` components to provide clear feedback on success or failure. ![A demonstration of the animated login page of the Campfire Logs CMS application.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07qxh0aq5j6hvm9p5g5d.gif align="left") * **Clear Dashboard Navigation**: To avoid stumbling around the metaphoric campfire (it's dangerous!), I built a straightforward navigation system using KendoReact's `AppBar` and `PanelBar`. This makes it easy to jump between managing posts, checking drafts, referencing external sources, and getting right into the editor. ![A demonstration of how the navigation panels work in the Campfire Logs CMS application.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0169nsqq0pahx1ia10t.gif align="left") * **At-a-Glance Post Organization**: For a quick visual overview of my content, I used KendoReact's `GridLayout` and `Card` components to create a clean grid of published posts and drafts. ![A demonstration of blog post cards, organized in a grid in the Campfire Logs CMS application.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/janncg2bpctjrsuwmy80.png align="left") * **A Writer-Focused Editor**: Because I switch between [Markdown](https://www.markdownguide.org/) and a visual editor a lot when writing content, I used KendoReact's premium `Editor` and `Splitter` to create a toggleable dual-editor experience that supports both formats, with automatic image processing for (almost) effortless [asset management](https://www.unifiedinfotech.net/blog/explained-what-is-asset-management-software/). ![A demonstration of the interactive dual-mode text editor in the Campfire Logs CMS application.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bq3t4tbsah2bgayn7aqc.gif align="left") ## KendoReact Components Used For this application, I used 18 Free Components and 3 Premium components (with the help of KendoReact's Trial License). **Just like my other projects, this was an exercise in learning by doing.** I also used the [KendoReact ThemeBuilder](https://www.telerik.com/kendo-react-ui/components/styling/theme-builder) to design a cohesive, campfire-inspired theme that fits the brand of my blog. The free layout components were the backbone of the dashboard's structure, while the premium Editor was key to creating a great writing experience. ### KendoReact Free Components Used * `@progress/kendo-react-buttons` (1 component) * Button * `@progress/kendo-react-layout` (11 components) * Card * CardImage * CardBody * GridLayout * PanelBar * PanelBarItem * AppBar * AppBarSection * AppBarSpacer * Avatar * Breadcrumb * `@progress/kendo-react-inputs` (1 component) * Input * `@progress/kendo-react-labels` (1 component) * Label * `@progress/kendo-react-notification` (2 components) * Notification * NotificationGroup * `@progress/kendo-react-common` (2 components) * IconsContext * SvgIcon ### KendoReact Premium Components Used * `@progress/kendo-react-editor` * Editor * Splitter * SplitterPane ## \[Optional: Code Smarter, Not Harder prize category\] AI Coding Assistant Usage While I **did not** use the **KendoReact AI Coding Assistant** and am therefore unable to enter into this category, I do find it very important to give credit to the AI tools that helped me on this journey and because all AI tools are not created equal: * **KendoReact ThemeBuilder's AI Theme Generation Tool** - for helping me design the perfect color scheme to use in my project, especially given the need for cohesion between KendoReact components * **Google's Gemini** - for helping me brainstorm the features and functionalities I wanted in this application, verifying component eligibility (exactly what qualified and what didn't), and answering questions whenever I got stuck figuring out underlying structures in the components * **Anthropic's Claude (via Cursor)** - for helping me clean up comments and debugging component layout quirks that gave me fits during the development process * **Venice.ai** - for giving final feedback on this submission post and for being linked in the External Links of the dashboard ## \[Optional: RAGs to Riches prize category\] Nuclia Integration *\[Leave this section blank if not applicable\]* *\*End of submission post\** --- ## Before You Go As always, thank you so much for checking out this post! I had a lot of fun working on this project, and I have a lot of ideas on additional features that I’ll tell you about soon. See you back here soon!