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.
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.
'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
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.
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.
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)
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.
Great resource! Like :)
Awesome, I haven't heard of exercism.io until now so thanks for the reference!
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
Thanks Jessica! It's definitely going to stay as it is with only improvements as time goes on 🙂
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. 🚀 👌
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.
Sure, will do. :)
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) ;)
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!
This is awesome. Something I've been looking for. Btw, post this on IndieHackers community. You'll get good feedback and good traffic.
Hey Thidasa! Thank you so much. Also, thanks for the recommendation, will be sure to do that!
Great project.
Thanks Miguel!
Great initiative, interested to check it out!
Thank you, would love to know what you think!
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!
I'm going to check this out, seems like its something Ive been looking for.
Thanks a lot, hope you like it!
This is super amazing, Kenan. This will help some of us newbies with ideas and practice. Thank you for the platform.
ffreemanjr thank you so much for your comments, reassuring to know that people that are new to front-end development are finding this useful!
This is really cool. Here's my emoji solution codier.io/creation/ryGFK6pNX.
Thanks Ash, love your emoji!
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 ;)
Yes! I think it'd be a perfect way for you to improve.