Appreciation ❤️
I'm loving every submission here on Dev.to
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 time for fetch
challenge! Challenger (you) would need to fetch data from API, then display the dynamic content! 🤩
But why is it called Supabase version? Because we are going to leverage Supabase's super powerful auto generated REST API/Graphql endpoint to query data. Not only simple query, you can even apply pagination/filters into the query without writing a single backend code!
Do not worry 😉! I created a tool, called SupaDB that allow user to access all the data provided for FREE! Just simply sign up to obtain the Authorization key, and initiate Supabase client and you are ready!
Target:
- 🎯 Target : Fetch from provided API
- 🎯 Target : Search games by name
- 🎯 Target : Sort games by "Price", "Name"
- 🎯 Target : Carousel item
- 🎯 Target : Responsive design
- 🎯 Target : External link to game's page on Steam
Extra:
- 🌟 Extra : Loading state (loader/skeleton)
- 🌟 Extra : Hover animation
Resources:
- 📃 Supabase : https://supabase.com/docs/reference/javascript/select
- 📃 Icon : https://icones.js.org/collection/all
- 📃 Hosting : https://vercel.com/
⚠ It will defeat the purpose of learning if you just copy and paste someone else's answer 😭!
Prizes!
As the title mentioned, this is the Supabase version of "I Design, You Build" challenge, so there will be AWESOME SWAG prizes to rewards 5 winners that has the best submission (I will be the judge 😉)
The judging period will be 1 month time from the today!
Dateline for submission will be 7 May 2022
Submission ended! I will start the judging process 😊
This is the first prizes giveaway for "I Design, You Build" series, and definitely not the last! There will be more prizes in the future! So stay tuned, remember to bookmark this challenge, and follow me on Dev.to
and Twitter to stay up to date!
Start Coding!
If you are ready to take on the challenge, then
- Help 💖 this design on Dribbble, and follow me! Please... 😳
- Bookmark this post so that you can submit it easier.
- Right-click here and open Open link in a New Tab to see the Figma Design.
- Enjoy coding! 🤩
- Come back to submit!
All the images and assets are free to use, and can be exported from the Figma Design.
Submission
Once you've completed, come back to this post, and submit your solution using the following template
in the comment section. You are encouraged to comment and upvotes other's answer!
Thank you!💘
Feedback: This is awesome!
Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome:
1.
2.
Why?
I share these design freely so that anyone who wanted to practice or challenge Web design be able to do so without paying other platform (ahem) to get their **Figma Design*🎨 file.
You are free to use the Design you've created in your portfolio. No copyright claims or anything.
But if you are loving my work, you are most welcomed to follow me on Dev.to
and Twitter 😄
Also, check out my own Website!
Discussion (20)
That all sounded very interesting and I'm looking for exactly such a challenge, however I'm in react native and wanted to submit this as an android and apple app. But I noticed that the design is inconsistent in many places, since the distances to the left and right are different, many things are not horizontally at the same height and so on. this is not beneficial in the entire learning process, because it is precisely this consistency that makes a professional design. and not being able to work with CENTER or reusable components because of one pixel is silly. But I think it is precisely this love of detail that should be the basis of such a challenge.
I would be happy if you remind me of the next challenge, the design should be perfect there. all the best to you. looking forward to the winner being drawn. Sorry about my english and and my opinion.
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! 😁
okay. i thought you are a professional. did not expect you are new in figma. i keep commenting and keep participating. even though I'm a react native dude. so maybe we can learn from each other. sounds great.
HAHAHA No problem! I'm glad that you found those nitty gritty details I missed lol.
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:
Again, thanks for the challenge!
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 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!!! 🙌🏼🤩
Appreciate the feedback!! 🙌 Will definitely continue working on it!
You're welcome! Awesome! 🤩
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! ❤️
So, your tool supadb is just seeding the mock data for the application? Or can I do more with it?
I was intended to provide mock data only. But definitely love to hear what you have in mind!
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
Hahaha yup! It's my submission for Supabase Hackathon!
Feedback: This was a nice experience
Demo: namysh.github.io/staem
Github: github.com/Namysh/staem
Tech-Stack: Vue, TailwindCSS
Learning Outcome:
I will surely update it before the dateline
Feel free to ask me question regarding the challenge yaa!!! 🙌🏼
Dribbble Link dribbble.com/uploads/18027956-STAE... is 404
Thank you for letting me know! Fixed the link above!
dribbble.com/shots/18027956-STAEM-...
Sorry. I don't understand your request..
Update:
Dateline for submission will be 7 May 2022! 🤩