DEV Community

Cover image for Introducing Codier - Front-end Coding Challenges and Creations
Kenan Yusuf
Kenan Yusuf

Posted on

Introducing Codier - Front-end Coding Challenges and Creations

Around two years ago, I was starting the final year of my degree in Digital Design and had to come up with an idea for my dissertation/major project. At the time, I had a year's experience as a front-end developer, and one of my biggest passions and hobbies was coding.

I spent a lot of my time on sites like CodePen, creating pens and occasionally using them as blog material on my personal site. The only blocker I had to creating more content was my inability to come up with ideas for things to build.

Scattered around the internet are coding challenges, often just posted on Twitter by big name developers - discovering these challenges gave me the idea to create a platform where front-end developers could go to get inspiration for things to build, as well as share their code creations with a community.

Challenges on Codier
Challenges on Codier

I began developing Codier as a university project, and once I began to show people outside of that environment, it was clear to me that there was a genuine interest in this idea. Shortly after graduating I begun discussions with my employer, Clock, about how they could help me make Codier happen for real.

Clock agreed to help support my side project financially (hosting etc.) and through them, I managed to convince two incredible Software Engineers, Bala Clark and Jack Burgess to help rebuild Codier. They would handle all of the stuff behind the scenes, and I would do the design and front-end. The rebuild was necessary as what I had built at university was more of a prototype and not suitable for use.

Together, we narrowed down the idea to what Codier is today:

  • Challenges: User submitted coding challenges.
  • Creations: User submitted code creations.
  • Profiles: A page hosting all of a user's challenges and creations.

Challenges

Challenges on Codier can be anything that the challenger wants them to be; if it's a Pure CSS Checkbox challenge, the user that creates the challenge can specify that in the rules of the challenge. They can also add a template to get creators started - templates can be the basic HTML structure for a challenge or even just a framework like React.

Superhero logo Challenge on Codier
'Make a superhero logo!' Challenge on Codier

Once a challenge has been posted, any signed up user is able to post a solution to it. The solutions to the challenge are listed directly under the challenge's title and description. Solutions are created through Codier's editor and can be as basic or complex as the user feels.

Creations

Creations on Codier can be built through a combination of HTML, CSS and JavaScript within the editor. Users can alternatively use preprocessors to write their creations, and even include external resources.

Solution to 'Material design card' challenge
Solution to 'Material design card' challenge

The editor has been built to feel familiar to users; people that have used similar online editors like CodePen and JSFiddle should have no problems using the Codier editor. It is also customisable in many ways; users can set the editor to be dark themed, move and hide panes, change editor font family and size and much more.

Monaco Editor

Users of VS Code will be pleased to know that Codier uses Monaco Editor to handle code input. Monaco has some incredible features that make our editor feel more like a native IDE such as code suggestions, autocompletion and search and replace.

Creations can be upvoted and commented on, both features help us decide which to feature as popular; if a creation is a solution to a challenge, upvotes will decide its ranking. Users can also, name, describe and tag their creations to help boost their rankings in search results.

Profiles

Signed up users have a unique profile page to host their content on; Profiles display all of a user's challenges and creations. If user's wish to, they can also add a bio, location and website to their profile.

Tom Snelling's profile on Codier

Final words

Codier is a lot more than just a platform for people to find challenges. We believe it is a great place for learning, and also as a source of inspiration.

I would urge you all to give challenges on Codier a go, you might surprise yourself with how fun it can be! Alternatively, if you're an old hat and don't need any practice, give Codier's editor a shot the next time you need to quickly demo some code.

I would love to hear your comments on Codier, and if you have any suggestions for new features or improvements to the current ones, please let me know!

Top comments (31)

Collapse
 
stargator profile image
Stargator

You may want to look at exercism.io and see how they are doing. They had (non-frontend) challenges and then people could submit solutions.

Recently, they changed to a mentoring-based system. The challenges remained, but now there were mentors to offer feedback and advice to users before determining whether the user was ready to go to the next challenge.

Your site is still growing, but maybe that is something for you to consider in the project's future.

Collapse
 
manzanit0 profile image
Javier Garcia

Great resource! Like :)

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Awesome, I haven't heard of exercism.io until now so thanks for the reference!

Collapse
 
fegaeze profile image
Chioma Nkem-Eze

I really think you should leave the platform the way it is. I've been searching for somewhere where I can practice my UI development skills. This site satisfies that immensely

Thread Thread
 
kebabyusuf profile image
Kenan Yusuf

Thanks Jessica! It's definitely going to stay as it is with only improvements as time goes on 🙂

Collapse
 
dhavalwd profile image
Dhaval Vyas

Great platform to challenge your knowledge. Thanks for sharing. I have been frequent visitor to your personal website as I am re-designing my own and just love it how you have a super clean design. You have some really nice articles there. 🚀 👌

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Thank you for taking a look at Codier Dhaval, I'm glad you like it. Awesome that you remember my personal website too!

Feel free to drop me a message once your personal site is done, I'd love to see it.

Collapse
 
dhavalwd profile image
Dhaval Vyas

Sure, will do. :)

Collapse
 
juanfrank77 profile image
Juan F Gonzalez • Edited

Yo Kenan the site looks awesome! I've been looking for this coding challenges to keep practicing but most of the sites out there focus on programming languages for solving algorithms, which is cool but not related to what I wanted to (getting practice
in HTML, CSS).

This might very well be the end of my search and I'm already seeing some of the ways it could be very useful (think I will be replacing my codepen account soon) ;)

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Hey Juan, thank you! It's great that we have managed to provide what you have been looking for - I look forward to seeing your creations!

Collapse
 
soterox profile image
SoteroX

I'm going to check this out, seems like its something Ive been looking for.

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Thanks a lot, hope you like it!

Collapse
 
thidasapankaja profile image
Thidasa Pankaja Paranavitharana

This is awesome. Something I've been looking for. Btw, post this on IndieHackers community. You'll get good feedback and good traffic.

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Hey Thidasa! Thank you so much. Also, thanks for the recommendation, will be sure to do that!

Collapse
 
migueldeleon profile image
Miguel De León

Great project.

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Thanks Miguel!

Collapse
 
leob profile image
leob

Great initiative, interested to check it out!

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Thank you, would love to know what you think!

Collapse
 
leob profile image
leob

Hey man, incredible piece of work, posted a link on Twitter. The UI is just insane, really slick, love it ... I've put a link prominently on my desktop to try it out!

Collapse
 
ffreemanjr profile image
ffreemanjr

This is super amazing, Kenan. This will help some of us newbies with ideas and practice. Thank you for the platform.

Collapse
 
kebabyusuf profile image
Kenan Yusuf

ffreemanjr thank you so much for your comments, reassuring to know that people that are new to front-end development are finding this useful!

Collapse
 
eripdev profile image
Erika with a 'k'

Nice! I've been looking for something like this!

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Thanks Erika!

Collapse
 
asheboy profile image
Ash Summers

This is really cool. Here's my emoji solution codier.io/creation/ryGFK6pNX.

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Thanks Ash, love your emoji!

Collapse
 
cseeman profile image
christine

Another dev was sharing this on our internal slack, now I'll have to check it out, although I more back-end dev then full stack, maybe this will help me improve ;)

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Yes! I think it'd be a perfect way for you to improve.

Collapse
 
marlysson profile image
Marlysson Silva

Awesome work man.. I was looking for a platform like this.. Congratulations..

Collapse
 
kebabyusuf profile image
Kenan Yusuf

Thanks a lot, Marlysson. I look forward to seeing your creations!

Collapse
 
ccwongvr profile image
Colin Wong

You've built something really cool here, Kenan. I look forward to exploring it in-depth. Kudos.

Collapse
 
kebabyusuf profile image
Kenan Yusuf

I'm glad you like it Colin! Hope to see you on Codier soon