How I created devchallenges.io in just 3 Months in my free time
Tags: showdev, webdev, javascript
Published: 2020-06-29 13:51:56


## 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](https://dribbble.com/), 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](https://www.figma.com/) - a free tool for design to draw quickly designs in just one weekend.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qzqogn6l26hmiw9lme8r.png)


#### 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](https://www.figma.com/)

#### Front-end:

- React - I use [Create React App](https://create-react-app.dev/) to start with
- [Hooks](https://reactjs.org/docs/hooks-intro.html) - with `useState` for local state and `useContext` for global state
- [CSS modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/), [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) - To keep CSS organize
- Others: Typescript, react-hook-form, yup,..

#### Back-end:

- [Firebase](https://firebase.google.com/) - I use for hosting, authenticate, database,.. everything it offers.
- Express - To create RESTful API

#### Automation:

- I use [Google cloud](https://cloud.google.com/cloud-build) 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.