The Story of an All-Night Coding Session: Building INJA.ONLINE Builder
🚀 Ever had an idea so exciting it pulls you into an all-night coding session? That's the story of INJA.ONLINE Builder! 🚀
The Beginning: Night of May 24th, 2025
It all started on the night of May 24, 2025. My teammate Alireza and I (Mohammad) from INJA.ONLINE team had registered for the hackathon hosted by Cerebras Systems and OpenRouter. Honestly, it was late, and the thought of starting a new project felt daunting. We almost didn't dive in.
But then, that classic "Why not?" kicked in. We decided to give it a shot, starting with a simple idea: what if we could make website creation as easy as talking?
Fueled by this inspiration (and probably a lot of coffee!), we began coding at 9 PM on Saturday. What followed was an intense, focused sprint until 3 AM, and by then, the first version of INJA.ONLINE Builder was alive!
More Than Just a Hackathon
The hackathon might have ended, but the spark didn't. I couldn't resist the urge to keep polishing and adding to what we'd started. This project is a testament to passion, teamwork, and what's possible when you push the boundaries, even under pressure.
🎥 Watch our journey & the tool in action here: https://youtu.be/XMm-aPl9zYQ
What is INJA.ONLINE Builder?
INJA.ONLINE (https://builder.inja.online) is a proof-of-concept showcasing the incredible potential of generative AI in web development. Yes, there are amazing tools like bolt.sh and others out there. But we wanted to explore a few key differences:
- It's free to use!
- It's incredibly fast, thanks to the underlying tech
- We're aiming for a "Bring Your Own Key" (BYOK) model for maximum flexibility
- And we have a vision for more, like an interactive Q&A where the AI asks you clarifying questions to build an even better site
Key Features
✨ Words to Website: Describe your vision, and it crafts the HTML
💻 Live & Kicking: See your website materialize in real-time
💬 Chat & Refine: Iterate on your design through conversation
🎨 Modern & Sleek: Outputs use Alpine.js, Tailwind CSS, & Lucide Icons
The Magic Behind The Scenes
UI Framework:
- Built with SvelteKit 5 & TypeScript for a swift, responsive experience
AI Power:
- Leverages the Cerebras API via OpenRouter
- The real game-changer is Cerebras Systems' specialized AI processors that supercharge open-source models like Qwen, enabling them to hit astonishing speeds of up to 2000 tokens/second! This is what makes the real-time generation possible
Design:
- Styled with Tailwind CSS 4.0 for a modern aesthetic
How It Works
- Describe Your Vision: Enter a natural language description of the website you want to build
- AI Generation: The Cerebras-powered AI analyzes your request and generates clean HTML code
- Live Preview: View your website in real-time with a responsive preview panel
- Iterate & Refine: Chat with the AI to make modifications and improvements
- Export: Get the complete HTML file ready for deployment
Technical Architecture
Backend:
- SvelteKit API routes
- Cerebras API integration via OpenRouter
- Server-side rendering
Generated Websites Use:
- Only HTML, CSS, and JS
- Alpine.js for interactivity
- Tailwind CSS for styling (CDN)
- Lucide Icons for iconography
- Responsive design principles
Unique Features
"Bring Your Own Key" (BYOK) Model
One of the features we're really proud of is the BYOK system. You can input your own OpenRouter API key. This gives you full control, transparency, and leverages the models you prefer.
Incredible Speed
The speed comes from using the Cerebras API via OpenRouter. Cerebras Systems builds these incredible AI processors that can run open-source models like Qwen at mind-blowing speeds of up to 2000 tokens per second! That's what makes this real-time generation and iteration possible.
Interactive Chat Interface
The heart of INJA.ONLINE Builder is the interactive chat interface. You can ask the AI to build a completely new site from scratch, or - and this is where it gets really cool - you can iterate on the current design. Maybe you want to change the color scheme, or add a new section. You just type it in, and the AI refines the website you see on the left.
From Idea to Reality
INJA.ONLINE Builder demonstrates what's possible with the right combination of technology, passion, and teamwork. In just a few hours, we transformed a simple idea into a functional tool that showcases the potential future of web development.
A massive shout-out to my incredible teammate Alireza for burning the midnight oil with me. And huge thanks to Cerebras and OpenRouter for organizing the hackathon that challenged us and sparked this creation!
Useful Links
- Live Demo: builder.inja.online
- GitHub Repository: inja-online/cerebras-hacketon-web-builder
- Demo Video: YouTube
Now, over to you: What amazing, audacious idea would YOU bring to life with this kind of generative AI power? Share your thoughts in the comments!
This project proves that with the right motivation, proper team, and powerful technology, amazing things can be built even under severe time constraints. The future of web development is here!