This is a submission for the KendoReact Free Components Challenge.
What I Built
TheNames is a modern portfolio website builder that uses Gemini AI to generate beautiful, customized single-page websites with more robust design capabilities. Users can quickly create and publish professional-looking portfolio websites without design experience, thanks to AI-assisted generation and the intuitive GrapeJS visual editor.
The application combines the power of Next.js for the frontend, and Google's Gemini AI for intelligent website generation. TheNames streamlines the process of creating personal branding websites, then having AI generate a fully functional website that can be further customized using a visual editor.
Demo
Live Demo: https://thenames-frontend.vercel.app/editor
https://github.com/Mahmudqosim/thenames-frontend
KendoReact Experience
KendoReact Experience
TheNames leverages an extensive suite of KendoReact components to create a professional, intuitive user interface. These components were critical to achieving a polished, enterprise-grade look and feel while maintaining rapid development speed:
- KendoReact Buttons - Used throughout the application for all interactive controls, providing consistent styling and behavior for primary actions, secondary actions, and destructive operations.
- KendoReact Layout - Implemented for the overall application structure, including panels, dividers, and responsive layout containers that adapt seamlessly to different screen sizes.
- KendoReact Dialogs - Created modal interactions for website creation, AI content generation, settings configuration, and confirmation of important actions.
- KendoReact Form Components - Utilized the comprehensive suite of input components:
- Inputs for text fields and form controls
- DateInputs for scheduling and date selection
- Dropdowns for selection lists and filtering options
- ListBox for multi-select capabilities
- KendoReact Notifications - Implemented toast notifications for system messages and alerts about site creation, publishing, and updates.
- KendoReact TreeView - Used to display and navigate site structure and content hierarchy in the editor.
- KendoReact ProgressBars - Displayed loading states during AI generation and site publishing processes.
- KendoReact Tooltips - Added contextual help and information throughout the interface to guide users.
- KendoReact Indicators - Implemented loading spinners and status indicators for asynchronous operations.
- KendoReact Animation - Created smooth transitions between UI states and when displaying new content.
AIm to Impress
AI-Powered Website Generation - Users can describe their desired website in natural language, including style preferences, content sections, and links. Gemini analyzes this input and generates complete HTML, CSS, and JavaScript code for a responsive, personalized website.
