Qoom Creator

The Process: How We Learned to Drag and Drop

Alexandria Balde, Jolie Wang

• 3 min read
The Process: How We Learned to Drag and Drop

This is not going to be another Drag and Drop tutorial, because there are already good ones like DigitalOcean's. Rather, we will be focusing on how we problem-solved and learned to code a new feature as a Qoom Creator.  

The Journey

  1. The Problem
  2. The Guidance
  3. The Code

The Problem

Have you ever heard about the saying "a picture is worth a thousand words"? Sometimes when filling out forms, we would often want to express ourselves in ways other than words since sometimes words cannot be the best description. What if we could design exactly what our response could look like? There would be no set rules or boundaries that needed to be followed; we could now unleash our creativity and let our personality shine through in our responses.

This was the beginning of our idea to create a fully customizable card where every detail of the design and response can be controlled by the user, such as the images, drawings, text, text size, and color.

However, in order to implement the idea, there was a major roadblock that was essential to our idea: being able to drag images. This means we wanted to be able to drag images of our own drawings or provided stickers to the card at any area.

Initially, this seemed like a straightforward issue that could be solved through searching online. It caught us by surprise how Stack Overflow did not have the answers and there were no tutorials that would be able to fit our needs perfectly.

The Guidance

Running into problems and struggling along the way is something very normal in the development process. We just need to look around and see how there are many people, including other Qoom Creators, that could support us in different aspects. Therefore, the key to the problem is to reach out for guidance, especially through a mentor or a partner.

The first step we took was to bounce ideas off of each other. We both did some research and tried to implement different methods. Sometimes, one can provide a perspective or idea that could lead to a major leap towards finding the solution. With trying back and forth, it was also essential in helping us refine our goals.

The next step was the opportunity to ask the experienced founders of Qoom for help. Immediately, the office hours with the founders led us to a completely new level. The solutions offered and problems pointed out were straightforward and easy to comprehend. It was a valuable learning experience being able to go through the problem solving process with guidance.

Every problem has a solution; to find the solution, we just need to continuously dig into the problem and learn the importance of collaborating and reaching out for guidance.

The Code

So with all the help and collaboration, we were able to complete our project. You can check out our code and product here!

https://alexa.qoom.space/~/Customizable%20Form/index

But not only were we able to create the fully customizable form that we have hoped for, but we also learned how invaluable a mentor was as a beginner coder. The code is only as good as the understanding of the programmer. And with tutorials or YouTube videos, we were just copying and pasting their source code. Mr. Jared guided us step by step for programming, and we developed a problem solving process:

  1. Curiosity - There is literally a world of information and articles on topics relating to your challenge or feature you want to build. Use it to create a list of possibilities.
  2. Collaboration -  There might be an easier way to code something or a technique that you had not thought to search up. It is always better to have a second pair of eyes!
  3. Consultation - The pivotal step for us. Ask an experienced friend or a mentor on how to work through this. Teachers are irreplaceable, and when you are out of all other options, they are the best for solving through any issue!
  4. And finally, Creation!

And the best part is that we can use this process in any problem we encounter. Using this survival exercise, we can develop technical skills for our next projects!

The Qoom Creator Group is a small apprenticeship program that values ambition and dedication over experience, so if there is one takeaway from this article, besides learning how to manually code drag and drop features, it is to join the Creator Group!