My Pinterest clone - Pixterest!

My Pinterest clone - Pixterest!
0.0 0

#1

Ok, my Pinterest clone is called Pixterest! and is ready for testing! :star_struck:

GitHub repository


#2

You are missing the .me part of your link.


#3

Ok, so did you actually look at the site?


#4

Looks good. My only suggestion deals with the navigation to more results. When I click the downward arrow at the bottom, I thought it was going to just append on more results instead of loading new results. Once I click the downward arrow, the only way for me to see the previous results is to click on a category again and keep clicking the downward arrow until I get to the results I want to see again.

To me, the downward arrow should just append new results (leaving the existing results unchanged) or put an upward (back) arrow which takes you back to the previous set of results.

This is just my opinion based on how most sites I visit typically handle this type of situation.

EDIT: The hearts and stars do not appear to have any functionality when not logged in. Once I log in, the star option goes away completely, but the heart (like) works. What is the purpose of the star when not logged in and why does it vanish once logged in? Also, I think it would make the site more user friendly if you had a little message pop up when someone clicks the heart, that tells them they need to log to use the heart (like). I just assumed the heart was going to be a tracking the total number of likes and the star was going to be where the user would mark it as a favorite, but it seems like your approach treats the heart like a favorite where all the hearted images can be viewed under My Likes.


#5

May I suggest the following 2-line changes to the css file.

.w3-card-4 {
   padding: 0px;
   border-radius: 16px
}

Also, reduce the box-shadow spread from 10px to 5px.

That way, you get this nice rounded corners.


#6
  • I think the amount of pictures on a page could be more. You could indeed append more pictures on clicking the arrow as @randelldawson suggested.

  • Not sure if I should be able to like my own pictures.

  • It feels a bit weird that the page reloads when you like something.

  • On really large screens you still only have 2 or 3 pictures in a row.

  • There is no space below the icon for more results. And it is not a perfect circle…


#7

Thanks for the review. I was not sure what to do with the “more” link. Pinterest behaves like you describe but the postback was re-drawing the whole page which looks crap.
I should put proper paging with numbers in as this is what the behaviour is.
Now on the Todo list!
The heart I could remove in the unauthorised view but yes I could have a warning to log in to “like”. The star is a category indicator. All categories have different icons. I was going for a Panini stickers style.


#8

Thanks for the tip. W3css comes with a few card styles but your tip is a good one, thanks. :+1:
https://www.w3schools.com/w3css/w3css_cards.asp


#9

Thanks for looking. I was having problems with Masonry so was experimenting with fewer images. I scrapped Masonry in the end so this is why the limited number.
I agree, the postback when you click an image is annoying. I will look for a better way of doing that. Any idea why there are only 3 images on big screens? I put the meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0"> for mobile friendly view.


#10

You are using percentages for the width.


#11

Oh yes. Probably from the Masonry issues. I had them at fixed widths before. I can fix that, thanks :wink: :+1:

I added a media query for big screens.


#12

I’ve added the icons in the navigation so it is a bit clearer that there is a link with the top of the card icon and the category.
I think it looks better and doesn’t take up too much room.


#13

Thanks again for the feedback. I have added a tooltip for the like button and got rid of paging altogether.
I am trying a “lazy loading” plugin instead.
Also, when you :heart: a pic it stays at the same page location instead of refreshing & returning the page top although the image zoom-in animation will probably annoy someone. :frowning:

https://fcc-pinterest-clone.glitch.me/