I Design, You Build! - Frontend Challenge #4 (Supabase version)

Thank you! It will be UTC 7 May 😁

Zernonia Hey, I understand that the challenge ended and you've already announced the winners, but when you have time can you still check it out and give feedback? I spent a lot of time making it and learned tons of things due to this awesome challenge, so I thought it'd be a waste to not share :)

Demo: supbase-staem.

Github: Cycl0-staem.

Tech-Stack: React, Mantine, Tailwind CSS

Learning Outcome:

1. Basics of Mantine
2. Practiced using Tailwind CSS
3. Learned to fully customize carousels using SwiperJs
4. Practiced making animation components
5. Tried different ways to implement responsiveness
6. Learned a bit about Supabase and Postgres

Even though the link above was deleted by Hashnode, but in my email I do see the links 😂

staem.vercel.app github.com/fabioivi/STAEM

I'm so glad to hear that you enjoy this challenge!! 😊

Some quick feedback for you yaaa:

1. I love the skeleton loader
2. Carousel is working well using Swiper!
3. Good job with chaining search and sort!
4. Nicely done on Responsive Design!

Feedback:

1. You should you input throttle on Search to prevent search triggers on every key input. Imagine the user search for elden, it would trigger 5 requests, which could cause heavy load on backend API if the traggic is busy.
2. Hover over the card looks good, but when "unhover" it, the scale immediately drop to original, which feels a bit too sudden.
3. Decimal places for price should be 2. eg: $ 22.00
4. Click on card should open a new tab. target=_blank

Zernonia thanks for the feedback.

I made the changes reported, thank you very much.

Zernonia Great feedback on improvement points. I will focus on them for a better fit.

Zernonia I made the changes you reported. Hope you like the new version.

Sorry I missed out your comment here 😅

Awesome job Alfredo Tito !!! The page looks and feels so much better now!! I'm loving it! ❤️

Hope you do enjoy the challenge ya! 😊

Yes you may!!

You are a BEAST!!! So fast completed another challenge!

Feedback:

• I LOVE you put the effort in adding the Steam's favicon!!
• Good carousel header as well!
• Love the subtle hover effect on cards.
• Good job in chaining "search" and "sort" functionalities!
• Good job on splitting codes into each components

Improvement:

• The size of image for the cards is inconsistent.
• Infinite scroll seems to trigger twice.
• Carousel item distance is a bit too far.
• Carousel bullet is not so clear, and the color is off.

Hint:

• You can use Supabase to return "count", so that you can trigger infinite scrolling programmatically.

Sure Zernonia, I almost forgot.

I said I will switch to use only for tech-stack Angular and Tailwind CSS, I found it little more easier

Personally, I tried to make a demo using Netlify & Vercel, but I pretty much don't know but I will give some video while running on my local host 😊

GitHub: Omar8345/zernonia-is-the-best

YouTube Video: https://youtu.be/7600_6x10wQ

Thank you Arpit Dalal for your submission! Hope that you enjoy this challenge!!

Thank you! Sure! The design will be always available, but the prizes has limited time 😉

Awesome!!! Looking forward to see your submission!

Thank you for your kind word!! Give this challenge a try? 😉

zernonia It seems I can do it by today/tomorrow!

But if I win swag, is shipping free?

Quick feedback, the Dribbble link is invalid

Omar Moustafa

Hahahahaha yup! Swag will be shipping free!!!! Really? The link seems fine to me, I see alot of user in the Figma file as well.