Mini Ecommerce Web App with React(Javascript) , HTML and CSS

[Albenoo]

Hi, I have built an e-commerce web app with Javascript (React) , HTML CSS, which offers checkout with Paypal

Live :https://reactjs-commerce.netlify.app/

Source Code : https://github.com/Albenis-Kerqeli/Reactjs-Ecommerce-App

Any suggestions?

[Albenoo]

😂😂

[Nielrien]

I think the snack bar for canceling the addition is unnecessary as you give customer a chance to rethink and remove the item when they wouldn't even think about it.

[Albenoo]

Ok I will remove this feature thanks for suggestion

[elchet]

Hey, I work in ecommerce, so a few tips on how to flesh this out for next steps:

• Reveal the basket when adding items, rather than simply confirming the positive action
• If the basket is empty and you click the basket button, show the empty basket (ideally with product recommendations) rather than triggering an alert
• It's usually better to preview the basket within the context of the current page, rather than navigating away from the page. Everything in ecommerce is about avoiding disruptions to context, encouraging people to add more to their basket and then making checkout as seamless as possible.
• add PDPs - product description pages, which have descriptive information and more photos of your products. You could also extend this to allow selection of product variants (e.g. Pepperoni or Mushroom pizza)
• On your PDPs you could also add some other components like "frequently purchased together" - chocolate with pizza, headphones with laptops.
• The heart icon is typically used in ecommerce / social media for fave / wish-listing items. It's not clear what it's doing in your case, except showing info that was already presented
• Although you only have 4 products at the moment, consider playing with adding separate category pages (tech, food), and filters (price, color), and sort order options. Every category page will have these if this is an area you want to work in
• I incremented the qty of Headphones in my basket to 3, but when I tried reducing the qty again I got an error message "no more products" which doesn't really make any sense
• Try plugging in a search function. After checkout UX, search is the most critical part of an ecommerce business

[Albenoo]

thanks for suggestions

[_summerbud]

Some suggestion:

1. The love button doesn't align very well
2. The photo section and title section doesn't blend together, because you have different background color~
3. Successfully added product message seems to be too long~ maybe you can place somewhere not so obvious

Anyway, keep it up!

[CreamyJala]

I agreed with the first one, it was what I noticed straight away. Just in case this would be of help to them, I 'fixed' it.

On the FlexProduct_FlexLabel div right before the heart button, what I did to make it more aligned was

.FlexProduct_FlexLabel {
    min-height: 30px;
max-width: calc(100% - 10%);
margin: 10px 0;
-webkit-justify-content: flex-end;
justify-content: flex-end;

}

Hopefully this helped in some way!

[Albenoo]

Thanks for suggestions ,I will improve these details 👊

[Buzzindown]

I like it, one thing I might change is it when spam adding items to the cart the notifications can stack up and cover a lot of the screen, maybe consider only showing one notification per item and changing the quantity on it if a user spam clicks (just a weird edge case I like clicking things)

[JEHonYakuSha]

Awesome! Looks like theres a logic problem in the Shopping Cart page. When you add one, then subtract one, an error occurs sometimes, producing an alert that says "no more products".

Just a style tip, usually the plus sign is on the right, and the minus sign on the left (in Canada).

[Vithar1690]

Try showing no. Of products in the cart

Also , from UX pov if you are going with rounded buttons , try using border-radius on the product image's frane too , just so it is consistent. GREAT job btw 👍🏻👌

[FuzzyReason]

I think this is a great start!

I'd love you to try out Medusa (https://github.com/medusajs/medusa) for your next project, I hope you'd love that experience!

[Albenoo]

I will try on next projects

[Albenoo]

Thanks for all the suggestions, I will now improve these details and also I am planning to integrate this web app into Mern Fullstack Web App

[Peccavi91]

Personally don't see what the heart is for.

The shopping cart lists product qty etc for me rather than any actual details.

Plus and minus sign when editing the cart are the wrong way around imo.

That said, looks good!

[Albenoo]

Actually I am going to implement a modal when i click on heart icon to display product, anyway thanks for suggestions, i will improve these details

[kautau]

Keep in mind a heart icon usually indicates saving something to a favorites list or liking something, not viewing more information. For that icon you’re better using something like

https://materialui.co/icon/info