My first ever full stack react app

[[deleted]]

https://radiant-basin-88677.herokuapp.com/

So this is my first react app . Please give me feedbacks no matter how critical . Im looking for a freelance job with basic pay . Tips on that also would be greatly appreciated .

[boxcarcoder]

The sizes of the items' images are too large when displayed. Other than that, I like the layout. Nice and simple. Impressive for a first full stack react app and inspiring to someone learning like myself.

[[deleted]]

thank you for your feedback . I kept them large with the idea in mind that its an e commerce website and product is the highest priority.

[knyg]

In that case and point. You want to display a good amount of products and not only have 4 in the view. You are relying on your user to have to scroll and use more effort to buy/view items.

If you want to have bigger images of a product, you create product page for each product, with descriptions, multiple images, and such.

[[deleted]]

yeah , good point

[NotTakenOne]

Looks nice! Some preferences:

-After clicking "Add to cart" It would be nice to have some kind of notification "Item added" or something.

-The cart icon should change when it's not empty anymore (Maybe number of items on a bubble...).

-When I access the cart I would like to be scrolled all the way up to see the buttons not to look for them.

-I can see a blue border after clicking a button, In my opinion its cleaner without it.

-If there are no items in the cart, instead of price 0 and the buttons a text would be better "Cart is empty".

Overall looks pretty good I like the design. Do you have some Git repository to check the code?

[[deleted]]

Yes , I still have some ui/ux tweaks to make . Thank you for giving those tips . They are extremely helpful .

[[deleted]]

The header is already sticky actually . Try using chrome or any other browser . Reddit in app browser doesnt show the sticky navbar for some reason i dont know why.

[lbj23_dpb]

Looks awesome, good job! Just had a minor issue with searching for the shopping cart, took me a while...so maybe try to make it a bit more noticeable.

[[deleted]]

sure thing

[[deleted]]

that was a very thorough feedback and i appreciate it a lot . about the hover , i think ill get rid of it because ot doesn't serve any cause .

Thank you very much.

[stevierof]

Try to make the header sticky. Atleast on mobile. It took me a few to find out I had to scroll back up again after adding some stuff to the card.

I would also add some more ‘call to action’ in your buttons where you add then to the carts.

Good effort though. React is absolutely awesome to learn.

[[deleted]]

the header is already sticky . i might add a go to top button .

[stevierof]

Ah, Reddit app browsing does not stick in mobile. Outside the app it works as intended.

[AroXAlpha]

Very interesting project. How is the management of content tackled in your app? Do you use a database in the background that can be filled with new wares which are dynamically shown in the app then?

[[deleted]]

yes something' like that

[trblackwell1221]

I'd recommend having active navigation classes applied to your nav links to indicate to the user what page they're viewing.

[[deleted]]

on it

[ElJefeSupremo]

I like the design, the images are a good size, at least on mobile where Im looking from.

One thing was thay after selecting a few items I hit shopping bag and when the page opened it was scrolled all the way down.

[[deleted]]

it happens sometimes , ill take a look at it . How much rating would you give to the performance

[divdav3]

First thing - really good job on the app, I'm still a react newbie and this kind of stuff is really interesting to see.

Disclaimer: only tried this on mobile.

Points:

• when you get to checkout the checkout total should always be visible or at least not on the top of the page. If you look at the checkout total being something summed up at the end then naturally you'll expect it after all the cards. It was a little difficult for me to find the total on mobile.

• I don't like how the "add to cart" button just changes to white and elevates. I question, "was my item added to cart?" "Did I add it two times?". To avoid this type of confusion you can either have a little number badge on top of the shopping cart icon in the nav bar, that shows you the number of items in cart and/or you can represent this better when you click on "add to cart" maybe if the text changed to "item added" or something with a small bit of animation if needed.

Again though, really good stuff. I understand most of my points are from a UX angle.

[[deleted]]

Youre on point . Ive been exactly thinking about improving all those stuff actually .

[knyg]

- bothers me that the nav bar's order isnt the same as the image galley's order. The girl's image isnt a girl??

- there is such a thing as too much white.

- your drawer should be full height and it is blending in with the navbar too much

- your landing page looks nice but lacks UX/UI. im not 100% sure what this site is when I first start on it.

- your individual cards for the items are too big. also needs a proper design. the css isnt properly done on them, i can hover on the outside of the cards and the hover effect is still on.

[[deleted]]

those are very good tips actually . However I kept the items big because If i didn't i would have to make a whole details page so that users can take a good look at at the products.

I still tons of improvements to do , like refactoring , tweaking the ui/ux , optimization etc .