How we created a unique resource for small businesses

The goal of my team was to create Merchant Market Place.

Look at our GitHub repositories: frontend and backend

Merchant Market Place is a secure place where the merchant can create a business profile and sale goods or services. This App helps grow merchant business in an affordable manner.

Shoppers have the ability create a profile, identify interest, be matched to sellers, add filters, pin searches, and have the ability to check out and purchase goods or services. The shopper is able to search by product, location, and leave a review on their experience.

Sellers have the ability to create, delete, and update a product or service, add a product image, tags, categories, associate a price, and post to the marketplace.

Our team was responsible for Release 1:

  • User should be able to create an inventory to sale.
  • User should be able to update their profile, Address, Office Hours.

Start with the high-level strategy

For reaching out desirable product features we started with the high-level strategy — Architecture Diagram, and then systematically worked our way down to the details.

Architecture Diagram

We determined what Technical decisions we would apply for the frontend and the backend.

Tech desicions

There were some advantages and risks of our tech decision. For example, an advantage was using Redux. Since a top-level React component’s state is not sufficient, especially with deeply nested components, we need to use Redux state management. The risk was that Redux is slightly more complicated; however, as a Redux wizard, I am always happy to help anyone on my team with it.

We developed Data Model and database schema Tables.

Data Model
Data Model

Creating user stories

The next step was creating user stories. A user story should allow a user to complete some task, even if that task is small. It will help to collaborate with a development team, and test it. For example:

As a Seller, I want to be able to search an item by categories/tags, so I can quickly find products.

Here is a more detail break down of individual tasks:

  1. Search by category
  2. Search by tag
  3. Search with an autocomplete/select feature
  4. Reset search

Three members of our team including me were responsible for the frontend. For release 1 features we brainstormed our approaches on creating a new product and updating a user account. Then we assigned tasks for each other.

Coding

My first task was building product forms for creating a new item and collecting data for HTTP post requests. Data includes an item name, description, price, quantity, published field, and a photo link.

I used Ant Design input forms. It was my first experience with Ant Design; hence, I had to self-learn rules for verification of the fields.

So I implemented a collection of the main info, and started to work on creating and choosing categories and tags.

For displaying categories in a Select form, I created fetch and add Categories actions, Category and addCategory reducers for Redux state management.

Invoking asynchronous code of this project challenge

To keep track of many-to-many relationships between product id and images, categories, and tags, our data model schema has intermediary tables for product id ,image url, category id, and tag id.

Since http requests takes some time, we need to make http post request for main info product, get a new product id and post new image, categories and tags with this new product id in parallel by clicking on button “Submit”.

I created an action for posting product main_info using async/await to invoke asynchronous code:

Called addProduct action, got a response with a new product id, and after that called addItemImage, addProductCategory, addProductTag actions.

My contributions to the project: frontend

  1. Create a new product.

Seller can create main info (product name, description, price, quantity) of a new product and this info will be displayed in an inventory.

2. Add an image to a new product.

Seller can download a photo and save it for a new project. An Image displays in a carousel.

3. Fetch and display categories and tags on the inventory list of product cards.

Seller can see list of categories and list of tags on product cards.

4. Create and add categories to a new product.

Seller can create a new category and add it to a new product.

Seller can add an existing category to a new product.

5. Create and add tags to a new product.

Seller can create a new tag and add it to a new product.

Seller can add an existing tag to a new product.

6. Delete product.

Seller can delete a product from an inventory.

7. Ability to see published/unpublished product.

Seller can select unpublished products and filter them in an Inventory page.
Seller can select published products and filter them in an Inventory page.

8. Update Product.

Seller can update product main info: item name, description, price, quantity, published mark.

9. Search products.

Seller can search products by name.

10. Sort products by category/tag.

Seller can choose/sort products by choosing category and grouping items.
Seller can choose/sort products by choosing tag and grouping items.
Seller can reset sort.

11. Loading Product Skeleton.

Loading Product Skeleton provides a placeholder while waiting for a product content to load, so user will not see an empty page while loading products.

Future features

There are many features that would made good additions to the inventory page. Here are the user stories for some of them:

  1. As a seller I want to be able to see statistics of product sales in graphs, pie charts, and diagrams.
  2. As a seller I want to be able to see statistics of product sales by categories and tags.
  3. As a seller I want to be able to get reports that display items that are running low.
  4. As a seller I want to be able to get an information about who are my top customers, so I could create special exclusive events or programs to drive loyalty.

How this project furthers my career goals

This project came with an existing codebase. I first had to familiarize myself with the code and understand which components could be reused, and where I can make http requests, read, create, and update data.

I also learned how to write and document code so that the next team will be able to build effortlessly on top of it.

I learned how to create architectural diagrams and data models, how to review my peers code, give and receive their feedback.

All of the aspects of this project are very important in my career as a full stack web developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store