CodeCrafter

CodeCrafter is a browser-based tool that transforms vague project ideas into structured, executable codebases with a single voice or text prompt.

Comment

Inspiration The inspiration for CodeCrafter came from a desire to democratize app development, making it accessible to anyone with an idea, regardless of coding expertise. I was motivated by the potential of AI-driven tools like Kiro to streamline coding workflows and the power of voice technology to break down barriers for non-technical users. The Code with Kiro Hackathon provided the perfect opportunity to combine these passions, creating an app that transforms ideas into code using text or voice input. I envisioned a tool that not only generates code but also engages users through gamification, like badges, to make the process fun and rewarding. What it does CodeCrafter is a full-stack web application that allows users to submit app ideas via text or voice, generates code snippets, and stores ideas in a database for future reference. Key features include:

Text and Voice Input: Users can type their app idea or use AWS Transcribe with WebRTC to dictate it, making the app accessible to diverse users. Code Generation: Submits ideas to a backend that saves them to Supabase and returns placeholder code snippets (frontend and backend). Saved Ideas: Displays a history of submitted ideas with timestamps. Badges System: Awards achievements like "First Idea" and "Voice Input Used" to gamify user engagement. Responsive UI: Features a dynamic gradient background, navigation bar, footer, and a "How It Works" section, all styled with Tailwind CSS. Error Handling: Uses React ErrorBoundary to ensure a smooth user experience.

The app is deployed at https://codecrafter-web.netlify.app/ and uses Netlify functions for serverless backend logic. How we built it CodeCrafter was built using a modern tech stack and Kiro’s AI-driven development tools:

Frontend:

Created a React app with TypeScript in frontend/ for type safety and scalability. Used Tailwind CSS with @tailwindcss/postcss for responsive styling, including a dynamic gradient background with CSS animations. Implemented components like InputForm.tsx (text/voice input), SavedIdeas.tsx, Badges.tsx, Navigation.tsx, Footer.tsx, and HowItWorks.tsx. Added ErrorBoundary.tsx for robust error handling. Integrated WebRTC for audio capture and AWS Transcribe for voice-to-text (polling for transcription results).

Backend:

Built a Node.js/Express server in backend/ with a /generate-code endpoint to save ideas to Supabase. Deployed serverless logic via Netlify functions (frontend/netlify/functions/generate-code.js) for scalability. Used Supabase to store ideas (generated_code table) and badges (badges table).

Kiro Integration:

Leveraged Kiro’s “Code with Spec” mode to generate components, backend code, and tests through iterative prompts. Used agent hooks to automate dependency installation, file setup, and testing. Stored documentation in /.kiro/ (requirements.md, design.md, tasks.md, submission.md).

Deployment:

Hosted the frontend on Netlify with frontend/ as the base directory and build as the publish directory. Configured Netlify functions for serverless API calls. Managed environment variables for AWS, Supabase, and S3 in Netlify.

Testing:

Wrote Jest tests for all components to ensure reliability.

The development process involved iterative Kiro prompts to fix issues like Tailwind CSS setup and Netlify deployment errors, ensuring a streamlined workflow. Challenges we ran into Building CodeCrafter wasn’t without hurdles:

Duplicate Folders: Early on, duplicate frontend and backend folders caused confusion and Netlify build errors (e.g., frontend/frontend/build). I resolved this by restructuring the project with Kiro’s help, ensuring a single frontend and backend under the root. Netlify Function Errors: A 500 error from /.netlify/functions/generate-code was due to missing Supabase credentials and incorrect function paths. Debugging Netlify logs and updating netlify.toml fixed this. AWS Transcribe Integration: Implementing WebRTC and polling for transcription results was complex. I initially used a placeholder, then added full integration with S3 uploads and error handling. Tailwind CSS Setup: Early Tailwind issues (e.g., missing styles) were resolved by correctly configuring @tailwindcss/postcss and postcss.config.js. Time Management: Balancing feature development within the 7–10 day timeline was challenging, but Kiro’s automation saved significant time.

Each challenge was a learning opportunity, reinforcing the importance of clear project structure and robust debugging. Accomplishments that we're proud of I’m thrilled with CodeCrafter’s achievements:

Fully Functional App: Delivered a responsive, feature-rich app with text and voice input, deployed successfully on Netlify. Voice Integration: Implemented AWS Transcribe with WebRTC, making the app accessible to non-technical users. Gamification: Created a badges system that enhances user engagement, with dynamic updates via Supabase. Kiro-Driven Development: Successfully used Kiro’s spec-driven approach to generate 90% of the codebase, from components to tests. Robust Testing: Achieved high test coverage with Jest, ensuring reliability. Polished UI: Built a visually appealing interface with Tailwind animations and accessibility features (ARIA labels, keyboard navigation).

Winning the hackathon would be amazing, but I’m already proud of creating a tool that inspires creativity and learning. What we learned This project was a crash course in full-stack development and AI-driven workflows:

Kiro’s Power: Learned to craft precise prompts for Kiro to generate complex components, backend logic, and documentation, reducing manual coding time by approximately 60% (estimated via development logs). AWS Transcribe: Mastered integrating WebRTC and S3 for real-time voice transcription, handling asynchronous polling with error states. Supabase: Gained expertise in setting up and querying relational tables for dynamic data. Netlify Functions: Understood serverless architecture and debugging deployment issues. Teamwork with AI: Discovered how to collaborate with Kiro as a “teammate,” iterating on prompts to fix bugs and add features. Accessibility: Learned to implement ARIA labels and keyboard navigation for inclusive design.

The hackathon taught me to embrace challenges as opportunities to grow, especially in a fast-paced environment. What's next for CodeCrafter CodeCrafter has exciting potential:

User Authentication: Integrate Supabase Auth to support user-specific data and badges, replacing the anonymous user ID. Advanced Code Generation: Use AI models (e.g., via xAI’s API) to generate more sophisticated code snippets based on user ideas. More Badges: Add achievements like “10 Ideas Submitted” or “Power User” to enhance gamification. Mobile App: Develop a mobile version using React Native for broader accessibility. Analytics: Track user interactions with Google Analytics or Supabase to improve UX. Open Source: Invite community contributions via GitHub to expand features.

I aim to refine CodeCrafter into a go-to tool for aspiring developers, leveraging Kiro for rapid iteration.

Built With

Share this project:

Updates