---
title: "Discussion on \"I Design, You Build! - Frontend Challenge #4 (Supabase version)\" | Hashnode"
description: "Discussion on \"I Design, You Build! - Frontend Challenge #4 (Supabase version)\". Appreciation ❤️\nI'm loving every submission here on Hashnode from the previous challenges! Really thank you everyone that participated, or bookmarked it! \n\nNew Challenge (Supabase version)\nLet's step up from the plain 1 pager, and static data! It's t..."
url: "https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [I Design, You Build! - Frontend Challenge #4 (Supabase version)](https://blog.zernonia.com/i-design-you-build-frontend-challenge-4-supabase-version?utm_source=hashnode&utm_medium=feed)

Appreciation ❤️ I'm loving every submission here on Hashnode from the previous challenges! Really thank you everyone that participated, or bookmarked it! New Challenge (Supabase version) Let's step up from the plain 1 pager, and static data! It's t...

Apr 18, 2022 · 3 min read · blog.zernonia.com  
Updated May 9, 2022  
Read the article

-   [#web-development](https://hashnode.com/tag/web-development)
-   [#frontend-development](https://hashnode.com/tag/frontend-development)
-   [#beginners](https://hashnode.com/tag/beginners)
-   [#javascript](https://hashnode.com/tag/javascript)
-   [#css](https://hashnode.com/tag/css)

## Written by

[Zernonia](https://hashnode.com/@zernonia)

@zernonia · Malaysia

  
[View profile](https://hashnode.com/@zernonia)

Vue Developer | Supabase Fans 😂

I'm a self-taught Web Developer, and fell in love💚 with VueJS. Working on some articles and open-source project during my free time!

## Responses 13

Markdown supported · ⌘↵ to post

[Sivasakthi M](https://hashnode.com/@Shiva9727)

[Jan 18, 2023](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/63c7f95d16cfbf7c0f2b41f7)

Thanks a lot Bro. I have been searching for Figma designs for practice and to showcase my frontend skills. This is awesome

[Zernonia](https://hashnode.com/@zernonia)

[May 8, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/6277dac9317fc95a74caa04a)

-   [Fabio D. Oliveira](https://hashnode.com/@fabioivi)
-   [Arpit Dalal](https://hashnode.com/@arpitdalal)
-   [Alejandro Alvarez](https://hashnode.com/@AltF4Dev)
-   [Alfredo Tito](https://hashnode.com/@alfredots)
-   [Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

Congratulation to 5 of our winners for "I Design, You Build" Challenge 4!! Please DM me on Twitter ([zernonia](https://twitter.com/zernonia)) to receive your reward!!!! 🤩

Thank you everyone for participating!! I love all the submissions! ❤️

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

[May 9, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/6277dac9317fc95a74caa04a#reply-6279042affdd2d96c766f336)

FIRST HACKATHON I EVER WIN!!!

[Zernonia](https://hashnode.com/@zernonia)

[May 9, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/6277dac9317fc95a74caa04a#reply-62790530ffdd2d96c766f388)

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

Hahahahah congratz!!!

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

[May 9, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/6277dac9317fc95a74caa04a#reply-62790b357f98319956cd27b8)

[Zernonia](https://hashnode.com/@zernonia) I need help, reply me on Twitter

[Lucas Kenzo Cyra](https://hashnode.com/@Cycl0n)

[May 6, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/627570e7317fc95a74ca67ad)

> The judging period will be 1 month time from the today! Dateline for submission will be 7 May 2022

Hey nice challenge, is it UTC or GMT+8 from Malasya?

[Zernonia](https://hashnode.com/@zernonia)

[May 7, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/627570e7317fc95a74ca67ad#reply-6275db04317fc95a74ca6eb4)

Thank you! It will be UTC 7 May 😁

[Lucas Kenzo Cyra](https://hashnode.com/@Cycl0n)

[May 8, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/627570e7317fc95a74ca67ad#reply-627830dd317fc95a74caa839)

[Zernonia](https://hashnode.com/@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](https://supabase-staem.vercel.app/).

Github: [Cycl0-staem](https://github.com/Cycl0/supabase-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

[Fabio D. Oliveira](https://hashnode.com/@fabioivi)

[May 5, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62745b160d853a42640539dd)

Feedback: I loved this challenge, nice work

Demo: [staem.vercel.app](https://staem.vercel.app/)

Github: [fabioivi/STAEM](https://github.com/fabioivi/STAEM)

Tech-Stack: React, NextJS, Learning Outcome:

1.  Chakra UI
2.  Swiper

[Zernonia](https://hashnode.com/@zernonia)

[May 6, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62745b160d853a42640539dd#reply-627484720d853a4264053c2b)

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

[staem.vercel.app](https://staem.vercel.app/) [github.com/fabioivi/STAEM](https://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`

[Fabio D. Oliveira](https://hashnode.com/@fabioivi)

[May 6, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62745b160d853a42640539dd#reply-6275816c317fc95a74ca691b)

[Zernonia](https://hashnode.com/@zernonia) thanks for the feedback.

I made the changes reported, thank you very much.

[Alfredo Tito](https://hashnode.com/@alfredots)

[Apr 25, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62668c8b5dd5677e9b8e09b8)

```
Feedback: I loved the approach to the challenge and learning to use supabase it helps a lot with data.

Demo: staem-challenge.vercel.app

Github: github.com/alfredots/staem-challenge

Tech-Stack: NextJS, Styled Components

Learning Outcome: 
  1. I learned to use the splitjs library to create stylish carousels.
  2. Deepen my responsive design skills in applications.
```

[Alfredo Tito](https://hashnode.com/@alfredots)

[Apr 25, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62668c8b5dd5677e9b8e09b8#reply-6266e06548d65f908681a2fa)

[Zernonia](https://hashnode.com/@zernonia) Great feedback on improvement points. I will focus on them for a better fit.

[Alfredo Tito](https://hashnode.com/@alfredots)

[May 2, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62668c8b5dd5677e9b8e09b8#reply-626fc6e2fa2b07f7d96a8349)

[Zernonia](https://hashnode.com/@zernonia) I made the changes you reported. Hope you like the new version.

[Zernonia](https://hashnode.com/@zernonia)

[May 6, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62668c8b5dd5677e9b8e09b8#reply-627485678af49c436c440395)

Sorry I missed out your comment here 😅

Awesome job [Alfredo Tito](https://hashnode.com/@alfredots) !!! The page looks and feels so much better now!! I'm loving it! ❤️

Hope you do enjoy the challenge ya! 😊

[Arshdeep Singh](https://hashnode.com/@Arsh1611)

[Apr 25, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/626668f85dd5677e9b8e0387)

Can I use any tech stack I want?

[Zernonia](https://hashnode.com/@zernonia)

[Apr 25, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/626668f85dd5677e9b8e0387#reply-62666b105dd5677e9b8e03c3)

Yes you may!!

[Alejandro Alvarez](https://hashnode.com/@AltF4Dev)

[Apr 24, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62658d145dd5677e9b8def1e)

Feedback: Second one!

Demo: zernonia-frontend-challenge-4-altf4dev.netlify.app Github: /AlejandroAltF4Dev/Challenge-4 Tech-Stack: Angular, TailwindCSS Learning Outcome:

1.  First time using @egjs/flicking

[Zernonia](https://hashnode.com/@zernonia)

[Apr 25, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62658d145dd5677e9b8def1e#reply-62662cf9d82f4558aff8bf69)

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](https://supabase.com/docs/reference/javascript/select) to return "count", so that you can trigger infinite scrolling programmatically.

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

[Apr 24, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62653b35d82f4558aff8ad14)

```
Feedback: This challenge is totally awesome!!! If you don't do this challenge, you lost lots of learning, knowledge and skills! Really recommend joining and participating, there is a lot of time left for you ⌚.


Tech-Stack: Netlify, React, Remix, and finally Tailwind CSS
Learning Outcomes: 
  1.  Learned more about how to use Tailwind CSS as I really don't know very much how to use it.
  2. Refreshed and improved my skills in Remix as I would do more functionality without using JavaScript.
```

**Hey there, why not check out my _Twitter Account?_** [@DevOmar100](https://twitter.com/DevOmar100)

**And so many thanks to [Zernonia](https://hashnode.com/@zernonia) as this challenge improved my programming skills as a school student**

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

[Apr 25, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62653b35d82f4558aff8ad14#reply-62667a3fd82f4558aff8c9c7)

Sure [Zernonia](https://hashnode.com/@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
```

[Zernonia](https://hashnode.com/@zernonia)

[Apr 25, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62653b35d82f4558aff8ad14#reply-6266d5791612be8e5c8fcce4)

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

Sure no problem! Whatever tech stack will do, as long as the design and functionalities is there.

Vercel has some very useful [guide](https://vercel.com/guides/deploying-angular-with-vercel) showing how to deploy Angular apps.

Do let me know if you got the site running ya! 🤩

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

[Apr 26, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/62653b35d82f4558aff8ad14#reply-626759a148d65f908681aa5a)

[Zernonia](https://hashnode.com/@zernonia) I did try **Vercel**.

Do **watch the video to judge fairly**

[Arpit Dalal](https://hashnode.com/@arpitdalal)

[Apr 22, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/626217cfd82f4558aff86840)

Twitter: `_arpit_dalal_`

Tech-Stack: Remix, React, Tailwind CSS, Netlify

Learning Outcome:

1.  Used Tailwind CSS for the first time, I've used Bootstrap utils before so felt somewhat like using that but much more powerful since Tailwind supports a lot more utility classes
2.  Practiced my Remix skills and learned the way to do things when there is no JavaScript like sorting, searching, and implementing infinite scrolling

[Zernonia](https://hashnode.com/@zernonia)

[Apr 22, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/626217cfd82f4558aff86840#reply-626218880f819f588af73326)

Thank you [Arpit Dalal](https://hashnode.com/@arpitdalal) for your submission! Hope that you enjoy this challenge!!

[Michael Marino](https://hashnode.com/@saucegod)

[Apr 19, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625e80c457bc3611152039c9)

Love this concept ! I'll give a try if I find time.

Thank you !

[Zernonia](https://hashnode.com/@zernonia)

[Apr 19, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625e80c457bc3611152039c9#reply-625ea57057bc361115203ea9)

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

[Rahman Ramsi](https://hashnode.com/@rhmrms)

[Apr 19, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625e50b857bc3611152032af)

Would try this !!!

[Zernonia](https://hashnode.com/@zernonia)

[Apr 19, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625e50b857bc3611152032af#reply-625ea54657bc361115203e9e)

Awesome!!! Looking forward to see your submission!

[Tâm Trịnh](https://hashnode.com/@gemblue998)

[Apr 19, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625e2d6a57bc361115202f00)

love your ideal

[Zernonia](https://hashnode.com/@zernonia)

[Apr 19, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625e2d6a57bc361115202f00#reply-625e2e4457bc361115202f1a)

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

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

[Apr 18, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625d46089ad0ef10f07bd754)

100% should participate!!!

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

[Apr 18, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625d46089ad0ef10f07bd754#reply-625d51379ad0ef10f07bd8be)

[zernonia](https://hashnode.com/@zernonia) It seems I can do it by today/tomorrow!

But if I win swag, is shipping free?

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

[Apr 18, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625d46089ad0ef10f07bd754#reply-625d537a9ad0ef10f07bd913)

Quick feedback, the Dribbble link is invalid

[Zernonia](https://hashnode.com/@zernonia)

[Apr 19, 2022](https://hashnode.com/posts/i-design-you-build-frontend-challenge-4-supabase-version/625d3c64740c26066de65ebe/comment/625d46089ad0ef10f07bd754#reply-625e116757bc361115202d19)

[Omar Moustafa](https://hashnode.com/@Omar-The-Dev)

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.