I Design, You Build! - Frontend Challenge #4 (Supabase version)
Command Palette
Search for a command to run...
Comments (13)
Join the discussionS
Sivasakthi M3y ago
Thanks a lot Bro. I have been searching for Figma designs for practice and to showcase my frontend skills. This is awesome
L
Lucas Kenzo Cyra4y ago
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?
1
L
Lucas Kenzo Cyra4y ago
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:
- Basics of Mantine
- Practiced using Tailwind CSS
- Learned to fully customize carousels using SwiperJs
- Practiced making animation components
- Tried different ways to implement responsiveness
- Learned a bit about Supabase and Postgres
F
Fabio D. Oliveira4y ago
Feedback: I loved this challenge, nice work
Demo: staem.vercel.app
Github: fabioivi/STAEM
Tech-Stack: React, NextJS, Learning Outcome:
- Chakra UI
- Swiper
3
Z
Zernonia4y ago
Even though the link above was deleted by Hashnode, but in my email I do see the links 😂
https://staem.vercel.app/ https://github.com/fabioivi/STAEM
I'm so glad to hear that you enjoy this challenge!! 😊
Some quick feedback for you yaaa:
- I love the skeleton loader
- Carousel is working well using Swiper!
- Good job with chaining search and sort!
- Nicely done on Responsive Design!
Feedback:
- You should you input throttle on
Searchto prevent search triggers on every key input. Imagine the user search forelden, it would trigger 5 requests, which could cause heavy load on backend API if the traggic is busy. - Hover over the card looks good, but when "unhover" it, the scale immediately drop to original, which feels a bit too sudden.
- Decimal places for price should be 2. eg:
$ 22.00 - Click on card should open a new tab.
target=_blank
2
F
Fabio D. Oliveira4y ago
Zernonia thanks for the feedback.
I made the changes reported, thank you very much.
A
Alfredo Tito4y ago
Feedback: I loved the approach to the challenge and learning to use supabase it helps a lot with data.
Demo: https://staem-challenge.vercel.app/
Github: https://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.
2
Z
Zernonia4y ago
I'm glad the hear your awesome feedback! Yup I saw this opportunity to make a design challenge, and let user experience the awesomeness of Supabase at the same time!
Nicely done btw! Here some of my feedback yaa!
- Love the skeleton loader when fetching data
- Carousel works nicely!
- Good job on the responsiveness!
- Sorting and search is working nicely
Improvement:
- Skeleton loader color is abit too bright
- Responsive design - can try improve the alignment of the pricing! (removing width: 100% !important from
.ihucCa span) - Sorting and search could would be even better if you chain those utilities together.
- Infinite scrolling seems to be not working 😥
1
A
Alfredo Tito4y ago
Zernonia Great feedback on improvement points. I will focus on them for a better fit.
2
Z
Zernonia4y ago
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! 😊
A
Alejandro Alvarez4y ago
Feedback: Second one!
Demo: zernonia-frontend-challenge-4-altf4dev.netlify.app Github: /AlejandroAltF4Dev/Challenge-4 Tech-Stack: Angular, TailwindCSS Learning Outcome:
- First time using @egjs/flicking
2
Z
Zernonia4y ago
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.
O
Omar Moustafa4y ago
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
And so many thanks to Zernonia as this challenge improved my programming skills as a school student
2
O
Omar Moustafa4y ago
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
1
O
Omar Moustafa4y ago
Zernonia I did try Vercel.
Do watch the video to judge fairly
A
Arpit Dalal4y ago
Twitter: _arpit_dalal_
Tech-Stack: Remix, React, Tailwind CSS, Netlify
Learning Outcome:
- 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
- Practiced my Remix skills and learned the way to do things when there is no JavaScript like sorting, searching, and implementing infinite scrolling
2
Z
Zernonia4y ago
Thank you Arpit Dalal for your submission! Hope that you enjoy this challenge!!
I Design, You Build
Part 1 of 4
I Design, You Build! - Frontend Challenge #3
Appreciation What an overwhelming response from the first two challenges! I know I said it before, but I really enjoy seeing every submission, and appreciate every feedback given. If you haven't give the challenge a try, I strongly encourage you to j...
More from this blog
Idea to Production in 2 days, thanks to...
...Nuxt 3! If you are not familiar with Nuxt 3, it is build on top of the awesome Vue 3 + Vite (or Webpack if you like) + Typescript, which makes the process of development feels like a breeze. But before we jump right into the Nuxt awesomeness, let ...
May 18, 2022
I Design, You Build! - Frontend Challenge #3
Appreciation What an overwhelming response from the first two challenges! I know I said it before, but I really enjoy seeing every submission, and appreciate every feedback given. If you haven't give the challenge a try, I strongly encourage you to j...
Oct 14, 2021
Supabase Hacktoberfest Hackathon
It's the time of the year, where we Developer cave in to our Coding Dent and start coding again - Hacktoberfest! As all developer are scavenging through tons and tons of Github repo just to find somewhere they belong, but sometimes to no avail. But...
Oct 1, 2021
I Design, You Build! - Frontend Challenge #2
Appreciation What an overwhelming response from the first challenge! I really enjoy seeing every submission, and appreciate every feedback given. If you haven't give the challenge a try, I strongly encourage you to join us in this fun challenge! 🤩✨ ...
Sep 30, 2021
