Emitter

Inspiration

As someone who's been watching the AI boom over the last couple of years, I've been fascinated by how it's transforming building and coding in a positive way . Suddenly, people who've never written a line of code are building cool things with chatbots and experimenting . This got me thinking - what if we could take this a step further? What if we could create a no-code website builder that's so good, it becomes the go-to tool for these new creators? That's where the idea for Emitter came from. I wanted to build something that people would actually use and potentially turn into a startup in the future.

What it does

Emitter is a no-code website builder that allows users to create stunning websites without any coding knowledge. It provides a drag-and-drop interface with a rich library of components, real-time editing, and responsive design capabilities. Users can customize every aspect of their components, and see changes instantly. I have also added a collection of templates to get people started quickly.

-lets user build website using drag and drop interface.

How I built it

The core of Emitter is built on craft.js, a powerful library built on top of grape.js (which upon researching I found out that many commercial website builders use even Craft.js is build upon Grape.js with some state managing feature). Craft.js allowed me to create React components and use them as a component library. For the backend, I chose Convex. Given that the editor states can get pretty heavy, I implemented compression before storing them as saved states in our database.

Challenges I ran into

Some of the major challenges included while executing this project:

Choosing the right editor state framework Making every component draggable and responsive Implementing real-time property changes for selected components Managing complex state in sync across the application Creating and integrating interactive templates Making such big site with different components into mobile responsive.

Accomplishments that I am proud of

Emitter now has over 15 components and 6 templates you can use directly to make website. When I started, I wasn't sure I could make something like this , but now it's turned into something way cooler than I thought it would be. It's pretty awesome to use something I built myself. I dedicated some time from the first week knowing more about convex and was just going through the resources available on the docs and on the youtube which make my first time using convex really easy and In the final 10 days, I utilized this knowledge to develop and deliver a working project, making the practical implementation of these cutting-edge technologies I spent time learning.

What I learned

Through the development of Emiiter :

-I leaned and gained valuable insight about using convex as my go to backend for my next NEXT.js project. -I also learned about a web builder frameworks like Craft.js , which a month ago I don't even have knowledge of existence .

What's next for Emitter

I've got some big ideas for what to do next:

• I am looking forward to adding AI to generate layouts based on what users ask for
• I am also thinking of making it work with other tools like Framer and Webflow, so you can import stuff from them and vice versa.
• and at last Maybe adding a premium feature where you can host your websites directly from Emitter

On a personal level, the development of Emitter has been an incredible learning experience, and I am eager to continue expanding my knowledge and skills in the realm of web based framework. I believe that these no code projects/web-apps holds immense promise, and I am excited to contribute further to this ecosystem.

Built With

• convex
• craft.js
• next.js