Team Member

Syed Shihab

Description

Likho is an AI-supported no-code blog website builder with a WYSIWYG editor that simplifies the process of creating a personalized blog website. As a multi-tenant platform, it offers users to have custom subdomain for every project of a user.

It is more than just a blog site builder; it was a gateway to the world of personalized blogging, where dreams took shape and creativity flourished.

At the heart of Likho lies an AI, a digital muse that supported creators in bringing their visions to life. No coding was needed, as Likho's powerful WYSIWYG editor allowed users to effortlessly enrich the contents of their blog websites, just as they imagined them. This meant that even those who were not tech-savvy could now share their stories, ideas, and passions with the world.

One of the most enchanting features of Likho was its multi-tenant capabilities. Every user's creative projects could have their own custom subdomain, giving each blog website a unique home on the vast digital landscape. This allowed creators to build a personal brand, showcasing their work with pride and individuality.

But Likho didn't stop there. It knew that presentation was key to making a lasting impression. Its clean and elegant layout options transformed each blog into a masterpiece, offering users an experience that rivaled that of seasoned professionals. The world of blogging had never felt so accessible, and the joy of creation was contagious.

Likho aimed to get attention from storytellers, artists, technical writers, traveler and enthusiasts from all corners of the internet to utilize this platform. The community is a tapestry of diverse voices, all sharing their unique stories and insights. It is a place where beginners will find guidance, and experts will find a new canvas for their ideas.

Why likho?

In today's digital landscape, user engagement is paramount for the success of online businesses and websites. Writing Blog has proven to be highly effective in capturing attention and driving conversions. However, the process of making a blog website often presents challenges, such as coding complexities, time-consuming tasks, and repetitive work. These tasks can be a significant drain on valuable time that could be better spent on innovative solutions. Recognizing this issue, Likho was developed to provide a solution.

Likho solved the problem of simplifying and streamlining the process of creating personalized blog websites. It addressed challenges such as coding complexities, time-consuming tasks, and repetitive work that hindered users from focusing on innovative solutions. By offering an AI-supported, no-code platform with a WYSIWYG editor, custom subdomains, and elegant layouts, Likho empowered users to effortlessly build professional-quality blogs, saving time and enabling them to engage with their audience effectively.

Let's delve deeper into the problem that Likho solved and how it addressed each aspect:

1. Coding Complexities: Traditional website development often requires extensive knowledge of coding languages such as HTML, CSS, and JavaScript. This can be a major hurdle for individuals and businesses that lack technical expertise. Likho eliminated this challenge by offering a no-code solution. Users can create and design their blog websites without writing a single line of code. The platform's WYSIWYG (What You See Is What You Get) editor allows users to visually design their websites, making it accessible to a wider audience.

2. Time-Consuming Tasks: Building a blog website from scratch can be time-consuming, involving tasks like designing layouts, optimizing for different devices, and setting up hosting. These tasks can eat up valuable time that could be better spent on creating content or developing new ideas. Likho streamlined this process by providing pre-designed, elegant layouts that users can customize to their liking. Additionally, the platform takes care of hosting and technical details, saving users from the hassle of managing these aspects.

3. Repetitive Work: Managing multiple projects or blogs often means dealing with repetitive tasks, such as setting up separate websites for each project or managing domain configurations. Likho's multi-tenant platform solves this by allowing users to create custom subdomains for each project. This not only provides a unique identity for each blog but also reduces the repetitive setup process, making it efficient and convenient.

4. Professional-Level Design: A visually appealing and professional website is crucial for engaging users and leaving a positive impression. However, achieving a polished design can be challenging, especially for those without design expertise. Likho addressed this by offering clean and elegant layouts that users can use as a foundation for their blog websites. This ensures that even users with limited design skills can create a professional-looking blog that stands out.

Overall, Likho's solution focused on making blog website creation accessible, efficient, and visually appealing. By removing coding barriers, simplifying setup, and offering stylish design options, Likho empowered users to focus on their content, engage with their audience, and build a strong online presence without the typical challenges associated with website development.

The solution

Likho is a game-changing solution that addresses the challenges stated above.
Here is how it solves the problem (i.e Features) 👇👇

1. Beautiful dashboard for managing: 🏠

   Likho provides a beautiful and intuitive dashboard that simplifies the management of your blog. Easily navigate through your blog projects, and make necessary adjustments, all within a visually appealing and user-friendly interface.

   

2. No-code editor: 🔨

   With Likho's no-code editor, you can create stunning blogs without any hassle. Say goodbye to the complexities of coding and enjoy a seamless blog website builder experience with AI support. Customize the content of your blog effortlessly, making them visually captivating and engaging for your audience

   

   .

3. Use ChatGPT while writing: ⌚

   With AI at its core, LIKHO streamlines the website creation process, making it quicker and more intuitive than ever before. No need to worry about writing complexities; chatGPT will take care of that for you.

4. Notion Styled - WYSIWYG: 👁️
   If you love Notion's simplicity and ease of use, you'll fall in love with LIKHO. Our interface is designed to be familiar and user-friendly, making it accessible to beginners and professionals alike.

5. Free Subdomains! 🪄⚡

   Likho is perfect for individuals, businesses, agencies, and even developers managing multiple clients. Seamlessly switch between different projects, collaborate with team members, and create stunning websites for various clients within one platform.

   

6. Instant Website with Stunning Simpicity:

   Thinking about deployment? Dont worry. It will instantly deploy and make your own website within few seconds having beautiful, elegant and minimal design. Content in the Notion Styled - WYSIWYG editor will show exactly what it will deploy and look like.

Development Phases

1. Planning

   Yes, every successful project begins with careful planning. Recognizing the importance of laying a strong foundation, I dedicated long hours to meticulous planning. This involved selecting the key features, anticipating potential challenges, outlining the UI skeleton, mapping out the user journey, and conceptualizing the overall app design.

   After planning, it turns out that a lot of features could be implemented including custom domain integration, analytics, SEO optimization and many more. But I focused on some selected features for this release. The selected features are already mentioned on top.

2. Designing

   The design phase is a crucial stage in the development process, where the visual aesthetics and user experience of the project come to life. Here's an overview of the key steps involved in the design phase:

   i) Gathering Requirements:
   After carefully analyzing the project requirements, I identified the key pages that needed design attention. These pages include:

   • A playground page for displaying projects and option to create more.

   • A project page where all available blogs will be listed and having an option to create subdomain.

   • A blog editing page for users to create new blogs.

   • A preview page for users to preview their blogs in separate subdomain.

ii) Research and Inspiration:
To ensure a fresh and innovative design approach, I conducted thorough research and drew inspiration from various sources. Platforms like Dribbble and other design communities provided valuable insights and ideas. By immersing myself in design inspirations, I gained a clearer vision of the desired aesthetics and user experience.

1. Coding the App

   During the coding phase, it was mixed feelings of cry and joy. I brought the visual designs to life by implementing the functionalities of Likho. Leveraging technologies like Next.js 13, Grafbase and TypeScript, I created graphql API's and integrated features such as the Notion Styled - WYSIWYG editor, subdomain, and preview option. Version control tools facilitated collaboration and maintained code integrity throughout the development process. The coding phase transformed the design into a fully functional app, ready to empower users with a seamless no-code blog website building experience.

Tech stack used

Likho is built on top of hot technologies including:

1. Next.js: A popular React framework for building fast and scalable applications.

2. Grafbase: Grafbase is a developer platform that provides tools for accelerating backend software development.

3. Headlessui: A bunch of components kit for creating stunning UI.

4. Novel: Novel is a Notion-style WYSIWYG editor. Built with Tiptap, OpenAI, and Vercel AI SDK.

5. TypeScript: A statically typed superset of JavaScript that enhances code maintainability and developer productivity.

6. Tailwind: A utility-first CSS framework that enables rapid UI development with pre-built components and customizable styling.

Challenges I faced building it

1. Getting Familiar with Grafbase:

   When I first started using Grafbase, it took me some time to grasp its features and become comfortable with its functionalities. However, once I gained a better understanding, working with it became an enjoyable experience.

2. Implementing the multitenant feature:

   I was quite frustrated to think of how I could build such an interface for creating subdomain and displaying code of WYSIWYG editor. Proper seaching is always making up!

3. Setting Up the Editor:

   Integrating of WYSIWYG the editor posed a challenge. It required some effort to configure and establish the necessary connections between the two. However, once everything was properly set up, it greatly enhanced the functionality and user experience of the project.

Public Code Repository 🧑‍💻

Here is a link to the public Github repo:

https://github.com/desyed/likho

Live App

Start building website here: likho.site

Final Words

This project has significant potential for growth and can effectively solve real-world problems. As an open-source initiative, it offers a valuable opportunity for collaboration and innovation in the realm of blog website building. By expanding customization options, improving integration compatibility, implementing analytics capabilities, and providing robust documentation and community support, this project can become a go-to resource for businesses and developers.
And I'm actively looking for support from the community.

Thanks for organizing this amazing hackathon! 💖

And, I had an incredible journey working on this project for the hackathon. I want to extend my heartfelt thanks to Grafbase and Hashnode for arranging this fantastic hackathon! I am truly grateful for the opportunity they provided and for their support throughout the process.

#Grafbase and #GrafbaseHackathon