Teamwork Makes the Dreamwork
The Team and The Tasks
Our team consisted of full stack developers, divided into a few front-end engineers, and a few backend engineers. We were solving the problem of displaying a seller’s inventory in Merchant Marketplace, a virtual marketplace where users could buy and sell products. I focused on displaying a seller’s profile and inventory, using React components which would display that data by fetching the data from the backend, and routing and rendering those components. I also created a carousel component that would display random products on the landing page that a user could click on and get routed to that product’s category. One big challenge for me was that this project was a build-on. We were taking a project that existed and was partially built, then adding to it and enhancing it. I was a little nervous that I wouldn’t be unable to adequately navigate the project repo and understand the code that had already been written. I also saw that redux was being used, which I preferred much less to Context API. So I was intimidated by that as well.
My primary responsibility was simple enough- hit the API endpoint that would return all of the Inventory Items and display 4 random images of those items in a carousel on the landing page, and use that same endpoint to display all the inventory for a particular Seller.
Blockers and Breakthroughs
My first hurdle was using the ANTDesign frontend framework for styling and formatting the carousel. Before the backend had the database deployed, I used the Rick And Morty API just so I could display something in the meantime. The way I had my props being passed from parent component where the API call was to the child component where the carousel was being rendered caused a new carousel to be rendered for every image in the data response. We only wanted 1 carousel with 4 images rotating through it. Having just come off of a lot of algorithm practice in Leetcode, I decided to approach a solution was good old fashioned vanilla JavaScript. I created a new array of images from the GET response, filtering all but the first 4 images, and adding them to the new array, and then passed the items in that single array down as props. Was it hacky? Maybe. But it was creative enough to get the job done and act as a placeholder until the database was built.
As for the database itself, that was another challenge. We had it set up and everything had deployed successfully, but there was still no data coming back from the new GET endpoint. Eventually we realized that the seeds were not migrated successfully in Heroku. Once the problem was identified, our Team Lead and hard-working backend developers broke through the stubborn barrier that is (sometimes) Heroku error debugging. Soon enough, we were getting our seed data and displaying inventory.
Wins and Almost-Wins
In the end, our list of shipped features fell a little short of what we’d hoped to achieve, but we were able to compete the following:
- User authentication using Okta
- Backend database deployed to Heroku
- Frontend deployed with AWS
- A seller profile that displays current seller’s inventory
- Links to inventory items in drafts
- Landing page with a carousel of available items and their respective categories
- Landing page view of Top Rated Merchants
As for the future of Merchant Marketplace, we hope to enhance the application even further by some basic utilities like adding the ability to search available inventory using a filter, as well as more innovative features like adding Seller Reviews that can be added by a user and commented on by the seller. Moreover, we want to integrate SendGrid to automate promotional emails from sellers to buyers, and potentially incorporate online payments.
Integrating SendGrid will prove challenging, as would online payments. SendGrid was added to the current project, but due to time constraints we were unable to fully connect it to the frontend. Going forward, this can be completed, but we know firsthand that it will take substantial time and effort from the team.
The most rewarding feedback we got was that we worked very well as a team under some very challenging circumstances. What started as a team of 8 members was reduced to only 5. At this point, some progress had been made, but there was a lot more to do, and now we had fewer people to do it. I was grateful that our hard work in spite of the reduced person-power did not go unnoticed.
Lessons and Takeaways
The whole experience from start to finish: meeting a new team, formulating a plan of action, volunteering for tasks, and (most importantly) communicating along the way was so much more valuable in getting myself one step closer to career readiness than I thought it would be. I approached this project hoping I would have something shiny and new to put in my portfolio. Instead, I shared a rich and rewarding collective experience with some highly talented individuals, all of whom were willing to step up and help out the team whenever necessary. If I can take a modicum of that group-spirit with me to the next opportunity, I’ll be another step closer to career readiness.
