Update README.md
Update README.md to reflect the KendoReact Free Components Challenge on DEV.to
This commit is contained in:
93
README.md
93
README.md
@@ -1,12 +1,91 @@
|
||||
# React + Vite
|
||||
*This is a submission for the [KendoReact Free Components Challenge](https://dev.to/challenges/kendoreact-2025-09-10).*
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
## What I Built
|
||||
|
||||
Currently, two official plugins are available:
|
||||
**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.
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
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.
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
## Demo
|
||||
**Live Project:** https://campfire-demo.dlseitz.dev
|
||||
**Repository:** https://gitea.dlseitz.dev/dereklseitz/campfire-dashboard
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
### 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.
|
||||
|
||||

|
||||
|
||||
- **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.
|
||||
|
||||

|
||||
|
||||
- **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 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/).
|
||||
|
||||

|
||||
|
||||
## 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
|
||||
<!-- If submitting for Code Smarter, Not Harder prize category, describe how you used the AI Coding Assistant -->
|
||||
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]*
|
||||
|
||||
<!-- Don't forget to add a cover image (if you want). -->
|
||||
|
||||
<!-- ⚠️ By submitting this entry, your submission and project may be publicly featured on the KendoReact website and/or other promotional channels such as social media. -->
|
||||
|
||||
<!-- Thanks for participating! -->
|
||||
Reference in New Issue
Block a user