The Story of an All-Night Coding Session: Building INJA.ONLINE Builder
The amazing story of building an AI-powered website generation tool in one hackathon night - from idea to execution
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:
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!
Written by
Mamad