How I created devchallenges.io in just 3 Months in my free time

About me

Hi I am Thu. I am from Vietnam and I moved to Finland 5 years ago (all alone..). I came to study and I got my first job as a game programmer just after 1.5 year of self-studying. Later I got a job as a web developer in one of the biggest company in Finland - Telia. I am working as Developer/Scrum master in the team.

Now I am at the point where going to work everyday become a bit boring, so I decided to do something different. I started to make devchallenges.io after seeing people sharing their stories in dev.to and here is how I make it happen.

Roadmap

Week 1

I gathered inspirations from different sources for designing the website. Most of my time I spent on Dribbble, I picked several designs and I use the colors from them.

After few days, I had a rough idea of what I wanted to do. Then I used Figma - a free tool for design to draw quickly designs in just one weekend.

Week 2 - Week 3

I worked hard in these 2 weeks translating my idea to Code and I completed 75% of application - both frontend and backend

Week 4 - Week 8

The next step is to design challenges.

This is the most challenging part as I have to come up with the ideas and designs. But I manage to do 16 designs at the end by reading different articles and Dribbble :)

Week 9 - Week 12

The last step is to put everything together. There are time when I wanted to give up as I thought it's never going to complete.

There were many I have to redo because it does not make sense when it comes together. But a good thing is whenever I shared my work to my friends they all think that the designs looks goods and it moves me forward.

What I use

I use all the free stuffs here :)

Design:

• Figma

Front-end:

• React - I use Create React App to start with
• Hooks - with useState for local state and useContext for global state
• CSS modules, CSS variables - To keep CSS organize
• Others: Typescript, react-hook-form, yup,..

Back-end:

• Firebase - I use for hosting, authenticate, database,.. everything it offers.
• Express - To create RESTful API

Automation:

• I use Google cloud to continuously build and deploy.

How I keep it look professional

When it come to design a website, I want it to look good. And there is no secret to it, as long I keep my spacing and color consistent, it will turn out well eventually.

By using CSS and Sass variables, I manage to do it with ease.

Because I make it look so clean, many of my friends keep asking if this is free. Yes it is free, I am not selling a damn thing there :)))

What next

I will continue work on devchallenges.io and make it better. I already see the first users and I hope there will be more.

I am planning to create a youtube channel where I share my stories and share my experience.

The end

So thank you for reading, I hope this will help you in your personal projects or somehow motivate people to do what I do. And if you want to improve your portfolio then checkout https://devchallenges.io/.

Feel free to leave me a comment.