HomeProjectsklowhub

Klowhub

At the end of 2024 I joined a team to compete in a hackathon, where we won first place. Our goal was to develop a platform called Klowhub, its mission: gather the no-code and low-code community in one place.

Klowhub consists of 3 main modules:

  1. Courses: Where content creators can publish courses or lessons, both premium and free.
  2. Applications: A place for developers to monetize their applications based on no-code or low-code technologies.
  3. Projects: A hub for users who need custom solutions and developers ready to implement them.

In this project I mainly worked as a frontend developer but also was in charge of the deployment using AWS and made contributions to the backend side.

Section for buying applications based of no-code or low-code technologies
Section for buying applications based of no-code or low-code technologies

On the frontend, we chose Next.js for its server-side rendering capabilities, which make our platform more search engine-friendly and provide an optimal user experience.

One of the challenges was the structure and logic implementation of multi-step forms. To address this, I decided to handle each step as an individual form and use context to group all the data from each step before sending it to the backend.

Doing it this way allowed me to validate each step separately and keep the code clean, making it easy to modify in cases such as:

  1. Moving certain inputs from one step to the other.
  2. Adding steps to the form.
  3. Removing steps from the form.

Also I developed a component to encapsulate all the different types of inputs we would need throughout the project, this way the code for each form is easy to read because it’s simply a set of inputs wrapped in a couple of form tags, just like structuring a simple vanilla html form.

Also I developed a component to encapsulate all the different types of inputs we would need throughout the project, this way the code for each form is easy to read because it’s simply a set of inputs wrapped in a couple of form tags, just like structuring a simple vanilla html form.
Also I developed a component to encapsulate all the different types of inputs we would need throughout the project, this way the code for each form is easy to read because it’s simply a set of inputs wrapped in a couple of form tags, just like structuring a simple vanilla html form.

Another challenge that I faced was the implementation of a chat to serve as the communication channel between users that need custom solutions and developers who submit their proposals.

For this feature we used WebSockets through the Socket.io library to enable simultaneous communication between different users.

In this case I not only implemented the user interface but also collaborated with the backend team to plan the entities and relationships this feature would require.

View of the chat section for projects.
View of the chat section for projects.

I should also add that all the features were implemented using strong typing with Typescript, this way everyone involved in the project had a clear understanding of the data structure we were working with.

Finally, we chose AWS to deploy our platform. Due to the microservices architecture we used, I decided that ECS (Elastic Container Service) would be the best fit for our needs, this implied:

  1. Set up a private network (VPC) for internal communication between the microservices and the frontend.
  2. Create a cluster in the ECS service.
  3. Create the necessary EC2 instances (virtual machines) and attach them to the cluster.
  4. Define tasks, specifically one task for each microservice, including the frontend.
  5. Run the tasks assigning them to their respective EC2 instances.

Without a doubt, this project has been a very enriching experience, I faced several challenges that I was able to overcome successfully while learning new technologies and concepts along the way.