About the Project: HackTheVibe Inspiration The inspiration for HackTheVibe stemmed from a desire to make technology more inclusive for individuals with disabilities, particularly the elderly and those with visual or motor impairments. Witnessing the challenges faced by my grandparents in using digital tools sparked the idea to create a platform where anyone could generate accessible, user-friendly applications with a single prompt. The goal was to leverage AI to democratize app development, enabling non-technical users to create tools tailored to their needs, such as voice-activated medication reminders or high-contrast note-taking apps. The vision was to bridge the accessibility gap through intuitive, AI-driven solutions. What I Learned Building HackTheVibe was a deep dive into full-stack development, AI integration, and accessibility standards. Key learnings included:
AI and NLP: Using LangChain and Google Gemini to parse natural language prompts and extract structured configurations for tool generation. React and Dynamic Components: Dynamically rendering React components from server-generated bundles, including handling React.createElement for compatibility. Esbuild and Bundling: Configuring esbuild to create browser-compatible IIFE bundles without module conflicts, overcoming issues like trailing commas and import statements. Accessibility: Implementing WCAG 2.1 AA standards, such as high-contrast UI and ARIA labels, to ensure tools are usable for all. Debugging Complex Systems: Tackling errors like Cannot read properties of null (reading 'useState'), SyntaxError: Cannot use import statement, and Unexpected "," through iterative debugging and log analysis. Teamwork and Iteration: Adapting to an existing UI from a previous developer and refining it to maintain a seamless user experience.
How I Built the Project HackTheVibe is a full-stack web application that generates accessible tools based on user prompts. Here’s how it was built: Tech Stack
Backend: Node.js, Express, Esbuild, LangChain, Google Gemini, Supabase, Nodemailer Frontend: React, TypeScript, Vite, Tailwind CSS, Radix UI, Lucide React Deployment: Local development on http://localhost:7000 (backend) and http://localhost:8081 (frontend)
Architecture
Prompt Processing:
Users enter a prompt (e.g., “A voice-activated medication reminder for elderly users with high-contrast UI”) via the frontend (Index.tsx). The prompt is sent to the backend API (/api/createprompt) handled by promptController.js. nlpProcessor.js uses LangChain and Google Gemini to parse the prompt into a configuration object { toolType, components, features, accessibility }.
Code Generation:
codeGenerator.js generates a JavaScript file (.js) using a template with React.createElement calls, avoiding JSX to prevent bundling issues. The template dynamically constructs a component (e.g., NoteTakingApp) with features like text input, voice input, or email export based on the config. Esbuild bundles the file into an IIFE (.bundle.js) stored in public/tools.
Frontend Rendering:
ToolGenerator.tsx fetches the bundle URL from the API and loads it via a tag, accessing the Tool component from window.<strong>hackthevibe_exports</strong>. The component is rendered within an ErrorBoundary to catch runtime errors. The UI displays the tool preview, features, and accessibility details using Radix UI components and Tailwind CSS.</p> <p>Accessibility Features:</p> <p>High-contrast UI, ARIA labels, and responsive design ensure WCAG 2.1 AA compliance. Voice input uses the Web Speech API for hands-free operation.</p> <p>Key Files</p> <p>Backend: utils/codeGenerator.js: Generates and bundles tool code. utils/nlpProcessor.js: Parses prompts into configs. controller/promptController.js: Handles API requests. index.js: Express server with CORS and static file serving.</p> <p>Frontend: src/pages/Index.tsx: Main UI with prompt input and tool display. src/components/ToolGenerator.tsx: Loads and renders tool bundles. src/components/ErrorBoundary.tsx: Catches rendering errors. src/components/ExampleTools.tsx & AccessibilityFeatures.tsx: Showcase sample tools and accessibility options.</p> <p>Challenges Faced Building HackTheVibe was not without hurdles:</p> <p>React Integration in Bundles:</p> <p>Issue: Initial bundles threw Cannot read properties of null (reading 'useState') due to React being null in the module scope. Solution: Used a global React shim in ToolGenerator.tsx and switched to React.createElement with an IIFE in codeGenerator.js.</p> <p>Esbuild Syntax Errors:</p> <p>Issue: SyntaxError: Cannot use import statement outside a module and Unexpected "," errors broke bundling. Solution: Removed JSX, used vanilla JS, and built a children array to avoid trailing commas. Switched to format: 'iife' in Esbuild.</p> <p>React Key Prop Warning:</p> <p>Issue: The history list in generated components triggered Each child in a list should have a unique "key" prop. Solution: Ensured key: 'history-' + index in the history.map call, clearing old bundles to apply the fix.</p> <p>Dynamic Component Loading:</p> <p>Issue: Loading bundles dynamically via import caused module scope issues. Solution: Used <script> tags to load IIFE bundles and accessed exports via window.<strong>hackthevibe_exports</strong>.</p> <p>Maintaining Legacy UI:</p> <p>Issue: Integrating with an older developer’s UI required preserving animations and components like ExampleTools. Solution: Kept the original Index.tsx structure, enhancing it with Tailwind’s pulse-slow animation and Radix UI components.</p> <p>Accessibility Implementation:</p> <p>Issue: Ensuring WCAG 2.1 AA compliance across dynamic tools was complex. Solution: Added ARIA labels, high-contrast styles, and tested with screen readers.</p> <p>Future Improvements</p> <p>Enhance NLP to support more complex prompts and custom components. Add a download feature for generated tools as standalone apps. Implement unit tests for codeGenerator.js and ToolGenerator.tsx. Deploy to a cloud platform for public access.</p> <p>HackTheVibe is a step toward making technology accessible to all, proving that AI can empower users to create tools that fit their unique needs. Despite the challenges, the journey was a rewarding exploration of AI, accessibility, and full-stack development.</p>
Log in or sign up for Devpost to join the conversation.