-
-
Front homepage when user opens the web
-
they go next
-
they select their domains and area of interest and generate
-
they select their domains and area of interest
-
will give input as picture
-
user will login or signup
-
user will see the materials are detected correctly or not or if they want to add anything else
-
now they will get output of ideas
-
now they will get output of ideas and can save the ideas for future
-
now they will get output of ideas with steps, instructions and material needed
-
user can see all the saved ideas
Inspiration
The inspiration for Craftly AI came from observing two critical issues: millions of tons of household waste ending up in landfills daily, and people struggling with creative blocks when trying to upcycle. We asked ourselves: "What if AI could see the potential in everyday waste that humans often miss?" This led us to create an intelligent companion that transforms how people think about household recyclables, making sustainable crafting accessible to everyone.
What it does
Craftly AI is an AI-powered web application that revolutionizes upcycling. Users simply upload photos of household items like bottles, cardboard, or fabric. Our computer vision AI identifies the materials and their craft potential. Then, the system generates 4 unique, personalized DIY craft ideas based on the user's skill level, available time, purpose, and tools. Each craft comes with detailed step-by-step instructions, material lists, and pro tips. Users can save their favorite projects and access them anytime through their personal account.
How we built it
We built Craftly AI using React 18 for a modern, responsive frontend with beautiful gradient aesthetics and smooth animations. For AI capabilities, we integrated Groq API with Llama 3.2 90B Vision for image analysis and Llama 3.3 70B Versatile for creative craft generation, achieving sub-1-second response times. We implemented custom authentication using localStorage, base64 image encoding for API transmission, and dynamic prompt engineering with randomization seeds to ensure diverse suggestions. The app is deployed on Vercel with automatic CI/CD, and we used Lucide React for consistent iconography throughout the interface.
Challenges we ran into
API Response Consistency: AI models sometimes returned markdown-wrapped JSON instead of pure JSON. We solved this by implementing a multi-layered parsing function that tries direct parsing, markdown extraction, and text fallback.
Craft Repetition: Initial versions generated similar ideas repeatedly. We fixed this by adding randomization seeds, shuffling craft type requirements, and explicitly instructing the AI to create "COMPLETELY DIFFERENT" projects.
Vercel Deployment: Environment variables and asset paths behaved differently in production. We debugged by changing from process.env.PUBLIC_URL to absolute paths and created comprehensive validation tools.
Image Size Management: Large images caused timeouts. We implemented a 5-image limit, client-side previews, and efficient base64 encoding.
UX Balance: Finding the sweet spot between simplicity and customization required multiple iterations, ultimately leading to progressive disclosure with smart defaults.
Accomplishments that we're proud of
✨ Real-Time AI Integration: Achieved < 1 second response times using Groq API, making the experience feel magical
🎨 Beautiful UX: Created an intuitive, visually appealing interface with smooth animations and mobile-first design
♻️ Practical Impact: Built something that genuinely encourages sustainable behavior and makes eco-friendly crafting accessible
🚀 Full-Stack Implementation: Successfully completed authentication, complex state management, and robust API integration
💾 Robust Error Handling: Implemented graceful fallbacks ensuring the app always works, even when APIs fail
📱 Cross-Platform: Fully responsive design that works seamlessly on mobile, tablet, and desktop
What we learned
AI Prompt Engineering: Discovered that specificity in prompts dramatically improves output quality, and requesting exact JSON formats prevents parsing errors. Adding randomization seeds was key to preventing repetitive suggestions.
Vision API Integration: Mastered base64 image encoding, learned to handle various formats efficiently, and implemented robust error handling for API failures.
React State Management: Deepened our understanding of hooks, learned to manage complex state across multiple screens, and implemented proper data flow between components.
Performance Optimization: Groq's inference speed enabled real-time experiences, and we learned the importance of graceful fallbacks and optimized image handling.
UX Design: Created an intuitive 3-step process, implemented effective visual feedback, and learned that mobile-first design leads to better overall experiences.
What's next for Craftly-Ai
Short-Term: Add community features for sharing crafts, implement a rating system, enhance AI with multi-image analysis and video tutorials, and add gamification with achievement badges and eco-impact tracking.
Long-Term: Develop native iOS and Android apps, integrate AR features for previewing finished crafts, create a marketplace connecting crafters with recycling centers, partner with schools for STEM education, and build proper backend infrastructure with authentication and databases for scalability.
Ultimate Vision: Make Craftly AI the go-to platform for sustainable crafting worldwide, diverting millions of items from landfills while inspiring creativity and building a global community of eco-conscious creators. Every craft created is a small step toward a more sustainable future! 🌱
Log in or sign up for Devpost to join the conversation.