---

---

Hola everyone, dajiaohao. I’m Robyifan, UI/UX Product Owner, Product Manager, and Software developer based in Singapore. Today I’d like to show you some of my work as a software front-end dev. And why I think it’s important if you’re looking to become a Product Manager.

What do they do at Allmine.com ?

I’m going to explain with examples, this product that we’re seeing on the screen.

This is Allmine Company’s website. As you know, when you’re buying a house or an apartment, they show you a model of the place. Usually, the same layout with furniture, but when you make the purchase, usually it will come without the furniture. You need to negotiate with the real estate person where to get it.

So this very smart company created a marketplace with all those products available online, even grouped by collections.

If you liked the decoration of a model home, you scan a QR code. This leads to a page where you can purchase all the items in that place. Individually or as the whole set if you wanted to. It reaches out to different online marketplaces where you can purchase all these items. You can make the purchase WITHIN the platform. No need to go and log in to the vendor websites.

As a Product Manager, it’s important to explain to other people what you’re doing in an easy, understandable way. Even if they’re not devs, still, you will need the skill to explain very technical ideas in a non-very-technical way.

That’s why I use videos to present my work. Visually it’s easier to understand what changed in the platform. I always try to think about what the deliverable of the work looks like. And how to make it feel like it’s heading in the right direction for the final product. As a dev, you need to understand that the final product is not on your computer. It’ll be on many computers, live, and it’ll need to work for everyone without you being there.

Now, what about the Tech Stack? what technologies did we use?

Well, my role as a front-end developer was to use Javascript, and the very well-known framework called ReactJS to build the UI of the website and connect it to APIs.

In this project we didn’t use Typescript, at that time we were doing the type-checking with prop-types. I used them for certain objects like a product, a physical space, or different users. This allowed me to know the schema for each one and if they had required fields.

For ReactJS at that time we were already using Hooks, we were using useState, useEffect. We needed to update a global state often because we had the option to update a cart with items that you dragged and drop into a collection. Then update the pricing of your cart depending on the ones that were available based on their quantity. This also helped set up default values and error handling in cases where, for example, a product came without a brand name and this still needed to work and not break the UI.

HTML and CSS were a must, we were using SCSS and I had a set of variables. That allowed me to modify components across the whole site, which was more than 100 different pages.

We also had components that showed different content depending on who you were. If you were the owner of a space you’d see some different options than if you were a guest in the space that you were building, if you were an admin you could see all.

Being part of The dev team

The team? Well were around 6 at the time, people in Brazil and the US and myself at the time I was in Mexico.

A couple of devs were back-end developers using java and they built the REST API in which we iterated on using Postman as a CRUD. So we would leave comments there on postman and create draft API JSON responses of what I needed in order to fill out the UI or save new data into the database.

I was the main front end at that time, the previous front end moved to a Product Manager position. He gave me guidance on the business goals. Now, we designed a new user Interface as well, occasionally I had to use Figma to create prototypes of new features using our main style guide.

STYLES was very important for this interior design-friendly platform. Needless to say, being a UI designer also helped a lot. We also had a Python developer who did scraping, and all of this happened with the usual branches and development flows using PRs in github. We had a daily 15 min standup every day and a bi-weekly executive meeting where we did demos of the product.

Designing new features and layouts

Sometimes, depending on the requirements of a feature, I would go into Figma and create multiple options to solve an issue. Or if I knew the components already available, I could create the prototype in the front end directly.
So part of the role also included designing in the browser if possible, which was very easy because of live reloading.

The challenges during development

The performance of the web app was an issue when I arrived at the company.
The webpack build was around 60mbs and that takes sometimes 15 seconds to load some screens. There were improvements in the response time of the API but also we needed to find what was making the build take so long.

I also applied lazy loading and pagination because we had pages with thousands of products available. A special challenge in this project was that the mobile experience needed to be as good as in desktop and there were no designs for those. I had to come up with the responsive version while developing.

Now, why was this experience important when getting a role as a Product Manager?

Well, here’s a list of why?

• First, as a Product Manager you need to manage other developers, so it’s great to have an idea of when a task seems too big and it needs to be broken down into multiple smaller ones in order to get done some of it in a specific timeframe. Meaning, if it’s too long, it’s harder to know if it’ll take 3 months or 6 months, if it’s broken down into smaller ones, at least you can tell how much can we deliver every two weeks and see progress more often.
  
• Second, you get to know who to connect to get things done, if someone is having issues with a script in Python, you know that another person that worked on a similar type of code previously can help unblock the team. It gives you an extra layer of understanding of how to solve an issue.
  
• Third, you’ll be able to write better and more comprehensive project descriptions and requirements that can be seen by non-technical and technical people, because you now have the perspective of both.
  
• Fourth, it gives you the power to know when a feature that hasn’t been done before, requires a SPIKE, a time to be researched in advance and you can set a time for a dev to do that research, and story point it, allocate it into a sprint.
  
• And lastly, time-framing, I think this is one of the most important ones, in Agile development you may have 2-week cycles, and you need to know, what can a developer deliver in that time, not only according to that person’s previous velocity but also to an understandable velocity that will work with the rest of the team.

Product Manager – Outro

I hope that, with these reasons you now get involved more in the tech side as a Product Manager and decide to take a coding course. I started watching LinkedIn Learning videos and then took classes in Codecademy, then got involved in my first position as a front-end building web apps.

Thanks for watching this video, remember to follow me for more Software and Tech videos. Pura vida zaijian people !

💻: If you are in need of a Product Manager, go check my Website: https://robyifan.com/

💻: If you are in need of a Web Designer or Web Developer, go check out my company PengYi Labs, we’ll be thrilled to help you build the perfect match platform for your business: https://pengyilabs.com/

---