DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Announcing Weekly UI Challenge
Geoff Davis
Geoff Davis

Posted on • Updated on

Announcing Weekly UI Challenge

β€œDesign one UI component per week, and implement one feature per day.”

Like many developers, I love to code in my free time for personal side projects; also like many developers, my side projects tend to fizzle out and collect dust in their Github repos.

In the interest of engaging with the dev and design community and achieving attainable, meaningful progress in side projects, I decided to come up with a Weekly UI Challenge; while I designed this for my own benefit and conditions, it will be shared in a public repo, and I will be sharing my daily design and write-ups on that day's development. If this interests you, I encourage you to follow a long!

Goals

I have a few goals in mind for this challenge:

  1. Continue working on my React skills
  2. Bolster my design abilities, especially in regards to UI/UX
  3. Work on a project that has incremental progression at a reasonable pace

Even though I can get #1 and #2 in any design/UI challenge, like Daily UI, I wanted to not only control my own pace, but also have the ability to work on one piece of a design per day. My thinking is this will allow my to really focus on building component features in the principle of Atomic Design, and will (hopefully) prevent me from burning out or losing interest.

How will it work?

Here's my plan for how the challenge will work:

  • Designs will be made with Adobe XD or Sketch
  • Components will be developed in a React-based stack: React, styled components, Webpack, Storybook, Jest
  • Each day will have a unique goal/set of goals; day 1 (Sunday) will usually be design, and the rest of the days have goals to implement individual or sets of pieces of the design

If you want to join me in this challenge, know that you can design your own components and develop them using any stack/technology you wish! I will be posting the weekly challenge and my own write ups under the #weeklyui tag here on dev.to, and posting on twitter using #WeeklyUI.

Week 1 sneak peek

ecommerce listing component with different states of pricing, availability, and product color

The first week's component is: ecommerce listing! I kind of cheated and already made the design; I had the idea to make this a public challenge after I had already designed it. The daily breakdown will look like this:

  1. (Sunday 4/8) Design component
  2. Display product name, price, and image
  3. Add to cart button, favorite button
  4. Sale price display, sold out states
  5. Color variant thumbnail buttons
  6. 100% a11y score
  7. Tweaks, refactors, fixes

To follow along with my repo or to use the same stack I'm using, fork the Weekly UI repo on Github.

Happy designing! πŸŽ‰

Image credit: @leonelfdez on Unsplash

Top comments (6)

Collapse
 
ben profile image
Ben Halpern • Edited on

This is great Geoff. You have the full support from the admins. Email me at ben@dev.to if you want to coordinate about anything. I gave the tag some colors, but we can make you a tag moderator for best control over the tag. Email me and we'll get you set up.

Collapse
 
geoff profile image
Geoff Davis Author

*Geoff ;)

Thanks Ben! I will email you later today.

Collapse
 
ben profile image
Ben Halpern

Eeeeep. Sorry about that!! Very rude of me to get that wrong. Edited the spelling comment.

Thread Thread
 
geoff profile image
Geoff Davis Author

Ha no worries! I've heard and seen it all :P

Collapse
 
alahmadiq8 profile image
Mohammad Alahmadi

That is a super cool idea. Would love to join.

This is exciting because now i can use this opportunity to experiment with the new react 16.3 features.

I will give this a shot this week :)

Collapse
 
geoff profile image
Geoff Davis Author

Sounds great Mohammad! Welcome aboard!

🌚 Life is too short to browse without dark mode