DEV Community

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

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

Zernonia on April 16, 2022

Appreciation ❤️ I'm loving every submission here on Dev.to from the previous challenges! Really thank you everyone that participated, or...
Collapse
 
zernonia profile image
Zernonia

Thank you for your kind word/comment on Figma design.

I'm still very new to using Figma or any design tool. Those designs are by no mean professional, but I'm learning step by step as I create more complicated design and share it with fellow developers. For FREE.

Sad to hear that you are not joining this, but would really really appreciate if you could share it with your friends if possible! 😁

Collapse
 
cjdomacena profile image
CJ Domacena

Feedback: It was an amazing learning experience! Thank you!!!

Demo: idyb4.netlify.app/
Github: github.com/cjdomacena/idyb-challenge
Tech-Stack: React/ts, tailwind, react-query
Learning Outcome:

  1. In this challenge, I learned more about using react-query's infinite scroll, which was very fun!
  2. Built my own slideshow without any libraries. Hopefully it works as I intended it to. 🤣
    1. Also, working with supabase is always an amazing experience.

Again, thanks for the challenge!

Collapse
 
zernonia profile image
Zernonia

Thank you so much for participating!!
I'm glad that you had fun!!!

The slideshows is always difficult component to build, thus I would recommend using a library 😂 Personally recommend SwiperJS!

Here's some of my feedback yaaa, hope you don't mind:

  • I like that you structured Supabase query in a file.
  • I love the dropdown option for "sorting". Easy to use!!

  • The image should have a fixed width, so that it looks consistent when there's many item in the list.

  • Decimal point for "Price" should have consistent 2 decimal places. eg: $36.00

  • Infinite scroll is good! But it seems like the first trigger of infinite scroll had some unexpected loading state.

  • I think the infinite scroll is triggering multiple times, causing some unexpected item shift.

All in all, thank you once again for this submission ya!!! 🙌🏼🤩

Collapse
 
cjdomacena profile image
CJ Domacena

Appreciate the feedback!! 🙌 Will definitely continue working on it!

Thread Thread
 
zernonia profile image
Zernonia

You're welcome! Awesome! 🤩

Collapse
 
zernonia profile image
Zernonia

Congratulation to 5 of our winners for "I Design, You Build" Challenge 4!!
Please DM me on Twitter (zernonia) to receive your reward!!!! 🤩

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

Collapse
 
namysh profile image
Willy Tardy

Feedback: This was a nice experience

Demo: namysh.github.io/staem
Github: github.com/Namysh/staem
Tech-Stack: Vue, TailwindCSS
Learning Outcome:

  1. Learned to use debouncing
  2. Learned Splidejs

I will surely update it before the dateline

Collapse
 
christiankozalla profile image
Christian Kozalla

So, your tool supadb is just seeding the mock data for the application? Or can I do more with it?

Collapse
 
zernonia profile image
Zernonia

I was intended to provide mock data only. But definitely love to hear what you have in mind!

Collapse
 
christiankozalla profile image
Christian Kozalla

Alright, I just wanted to understand the intention. So it is your project in participating in the hackathon - looks awesome! Gonna check it out :D

Thread Thread
 
zernonia profile image
Zernonia

Hahaha yup! It's my submission for Supabase Hackathon!

Collapse
 
zernonia profile image
Zernonia

Feel free to ask me question regarding the challenge yaa!!! 🙌🏼

 
zernonia profile image
Zernonia

HAHAHA No problem! I'm glad that you found those nitty gritty details I missed lol.

Collapse
 
zernonia profile image
Zernonia

Update:
Dateline for submission will be 7 May 2022! 🤩

Collapse
 
zernonia profile image
Zernonia

Sorry. I don't understand your request..

Collapse
 
zernonia profile image
Zernonia

Thank you for letting me know! Fixed the link above!

dribbble.com/shots/18027956-STAEM-...