DEV Community: Tran Minh Tri

QuickStart example on how to build CI/CD using CircleCI for monorepo

Tran Minh Tri — Sun, 07 Jan 2024 08:23:32 +0000

Hello friends 😄, this is a quick-start example of how to build CI/CD pipelines using CircleCI and Monorepo. This guide will give you an example right out of the box so you can copy it and change it to fit your needs.

By all means, please don't treat this as a guide but as an example. Me/myself has to struggle a lot to set up this to work with CircleCI with Monorepobut it is not perfect and I'm not an expert on this topic.

Initial Problem: Build pipelines for a project inside a Monorepo.

What you can get from this quickstart guide:

How to set up CircleCI for Monorepo
Full examples by code on how to set up them line by line
How to trigger a job manually with CircleCI

Context:

This is what my folder structure looks like for Monorepo

This is a CircleCI example of how to set up pipelines for a BackEnd project inside a Monorepo that requires 4 different stages including build / test / deploy_to_dev_env / deploy_to_prod_env

Enough chitchat. Let's get to the code

Codes:

At the root level of Monorepo, you need to have folder .circleci/config.yml

version: 2.1

setup: true

orbs:
  path-filtering: circleci/path-filtering@1.0.0

workflows:
  Setup:
    jobs:
      - path-filtering/filter:
          base-revision: master
          config-path: ./BackEnd/config.yml
          mapping: |
            BackEnd/.* run-backend-jobs true

Inside BackEnd project ( one of the project of Monorepo that you want to setup pipelines ), we have config.yml at the root level of BackEnd

version: 2.1

orbs:
  node: circleci/node@5.2.0

parameters:
  run-backend-jobs:
    type: boolean
    default: false

jobs:
  BE_build:
    executor:
      name: node/default
      tag: "18.16"
    steps:
      - checkout
      - run:
          command: |
            cd BackEnd
            node --version
            npm install
            npm run build
  BE_unit_test:
    executor:
      name: node/default
    steps:
      - checkout
      - run:
          command: |
            cd BackEnd
            node --version
            npm install
            npm run build
            npm run test:ci
  BE_deploy_dev:
    machine:
      image: ubuntu-2004:current
    resource_class: medium
    environment:
      ENV: dev
    steps:
      - run:
          name: Deploy Introspection's BackEnd to Dev Environment
          command: |
            response=$(curl -s -w "%{http_code}" -o response.txt $DEPLOY_DEV_URI)
            response_code=${response:(-3)}
            if [ $response_code -eq 200 ]; then
              echo "Deployment to dev env successful!"
              cat response.txt  # Print the response body
            else
              echo "Deployment to dev env failed with response code: $response_code"
              cat response.txt  # Print the response body
              exit 1
            fi
  BE_deploy_prod:
    machine:
      image: ubuntu-2004:current
    resource_class: medium
    environment:
      ENV: prod
    steps:
      - run:
          name: Deploy Introspection's BackEnd to PROD Environment
          command: |
            response=$(curl -s -w "%{http_code}" -o response.txt $DEPLOY_PROD_URI)
            response_code=${response:(-3)}
            if [ $response_code -eq 200 ]; then
              echo "Deployment to production successful!"
              cat response.txt  # Print the response body
            else
              echo "Deployment to production failed with response code: $response_code"
              cat response.txt  # Print the response body
              exit 1
            fi

workflows:
  BackEnd:
    when: << pipeline.parameters.run-backend-jobs >>
    jobs:
      - BE_build
      - BE_unit_test:
          requires:
            - BE_build
      - request_manual_approve_before_deploy_to_dev:
          type: approval
          requires:
            - BE_build
            - BE_unit_test
      - BE_deploy_dev:
          requires:
            - request_manual_approve_before_deploy_to_dev
          filters:
            branches:
              only: master
      - request_manual_approve_before_deploy_to_prod:
          type: approval
          requires:
            - BE_deploy_dev
      - BE_deploy_prod:
          requires:
            - request_manual_approve_before_deploy_to_prod
          filters:
            branches:
              only: master

Now for this example above, many things won't fit your need like the fact that I'm using Render as the deployment service, and the jobs that I have for my BackEnd workflows.

What you really need to keep in mind is whatever is under command: | is the script that you can run locally to deploy your project so you just need to figure that block out yourself and insert that block into there to make it work for you.

There is also a quick example of how to manually approve a job on CircleCI to make it run like the example below ( This block of code below is inside workflows of the block of code above ):

      - request_manual_approve_before_deploy_to_dev:
          type: approval
          requires:
            - BE_build
            - BE_unit_test
      - BE_deploy_dev:
          requires:
            - request_manual_approve_before_deploy_to_dev
          filters:
            branches:
              only: master

With all of that, hopefully, you have something like this in your CircleCI as well :

Now this is far from perfect but you can even work on circle.ci/config.yml in the root config to work out what changes happen on what project inside Monorepo to trigger that project pipelines only. I haven't actually figured it out yet but if do please feel free to even comment on the solution below for everyone to check it out.

I hope this post helps you on your journey to test out CircleCI and start building pipelines for your own projects. A full-on example can be viewed here line by line through https://github.com/Tris-909/Introspection

Go course reviewer

Tran Minh Tri — Mon, 28 Aug 2023 14:28:58 +0000

So I spent my last week learning Go as a new backend language that I can use to build out awesome backend.

Go is famous for powerful performance and claimed to be easy to learn.

Knowing what I know, It's best for me to find a reliable source to first start learning Go so I choose Go: The Complete Developer's Guide (Golang) from Stephen Grider on Udemy.

This is absolutely not a paid promotion or anything, I bought the course with dirt cheap price on Udemy and gets quite good knowledges about Go languages from it, so I would definitely recommend it.

For summary it can teach you about :

Many basics like : Variables in Go, Functions, How to write a Go file and run it, how to "import" Go files code to use in another Go file code.
Many data type and how to use them like : primitive types, array or slices, interfaces, struct, maps
Many important Go features like : Pointer, Receiver Function, Reference types and Value types, Routine and Channel
How to write test files in Go

This course won't teach you how to build a fully functional app with Golang backend but it give you a very solid knowledge about what Golang is and how it works.

After you learn the code, you can try this link https://www.freecodecamp.org/news/best-resources-to-learn-golang-for-free/ to actually build out backend using Golang.

I also have written a few notes about Go here https://github.com/Tris-909/KnowledgeStores/blob/master/Golang/Golang.md, I would absolutely love it if anyone who reads this can go through the course and make some pull requests directly to that MD files to correct me on some points if it feels wrong.

Well that it is for Golang, wish you all the best on your learning journey.

Hope anyone can provide me some goods Golang learning materials.

I created my own email server to send emails into my gmail for My Portfolio

Tran Minh Tri — Sun, 28 Nov 2021 02:45:23 +0000

I have my portfolio here at My Portfolio. Date after date, there are peoples send message to me through the contact form.

Initially, I used emailJS to handle sending mails to my gmail for a peace of mind. But their free tier is quite low, only allow 200 requests per months. So I decided to create my own server to send mails to mine gmail so I can have better flexibility and control over it.

This is also a guide on how to use nodemailer to send mail to gmail. There are many things need to sort out before you can use nodemailer to make it works well with gmail. I hope this guide can help you ( and also help myself in the future if I need it 😉 ).

1/ Install Packages and set up basic express App

You need to do a npm init first then just go along with default configuration

We need a few packages to make sure our server works :

npm install express nodemailer nodemailer-smtp-transport dotenv cors

and

npm install --save-dev nodemon

Your package.json should look like this now :

{
  "name": "my-portfolio-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon ./index.js",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "nodemailer": "^6.7.2",
    "nodemailer-smtp-transport": "^2.7.4"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

I will explain why we need each of them :

cors : to resolve CORS when you send a request from your website to this server
dotenv : to use environment variables in your server
express : to set up an Express app
nodemailer and nodemailer-smtp-transport : to send mails to gmail
nodemon : to test your local server app live

2/ Set up local config :

Now you need to create a .env file and .gitignore file.

We will get to git first. You may need to do a git init then push your current project on an existing branch ( in my case it's Github ) We will need that so later you can deploy it to Heroku ( I used Heroku but if you don't feel free to skip the deployment step and do it on yourown )

In your .env file, make sure they have these :

MY_GMAIL={Your Gmail here}
MY_GMAIL_PASSWORD={Your Gmail Password}

Then in your .gitignore, also make sure they look like this :

.env
node_modules/

You don't want to push your credentials to Github to the public. So that's why we need .gitignore and also we need credentials of your own gmail so we can use it later to send mails using nodemailer.

3/ Set up your gmail account to make sure nodemailer works :

Log into your Gmail Account then click on this

You need to enable less secure app access and display unlock captcha for your gmail account https://accounts.google.com/b/0/DisplayUnlockCaptcha

Then you have to follow this 6 steps at https://support.google.com/accounts/answer/185833?hl=en to get the password that you can put it in .env file or this won't work

I know it's a lengthy process. But trust me, I have to go through my StackOverflow issues and answers to leave them here for you so you can have a peace of mind. Nodemailer doesn't work well with Gmail but once you have set them up, you are good to go for life.

Now you have set up both your gmail config and local config. We can start writting our server.

4/ Build out your server

I just gonna throw them here just because they only have a file and one endpoint.

const express = require('express')
const nodemailer = require('nodemailer');
const smtpTransport = require('nodemailer-smtp-transport');
const cors = require('cors');

// This makes .env file work
require('dotenv').config();

// Env Variables
// You may not see 'PORT' mentioned in .env file above because this is used for HEROKU deployment only
const PORT = process.env.PORT;
const MY_GMAIL = process.env.MY_GMAIL;
const MY_GMAIL_PASSWORD = process.env.MY_GMAIL_PASSWORD;

const app = express()
const port =  PORT || 5000;

// You need this so when you send a request from frontend with a different url like https://tranminhtri.com it won't throw CORS errors
app.use(cors());

// You can choose different endpoint like /email, /mail or anything
app.post('/sendMessage', (req, res) => {
    // I used `name`, `email`, `message` for my Form so I extract them here, feel free to expand them as you need
    const { name, email, message } = req.query;

    const transporter = nodemailer.createTransport(smtpTransport({
        service: 'gmail',
        host: 'smtp.gmail.com',
        auth: {
          user: MY_GMAIL,
          pass: MY_GMAIL_PASSWORD
        }
    }));

    const mailOptions = {
        from: email,
        to: MY_GMAIL,
        subject: `A Message from ${email} (My Portfolio)`,
        text: `
        Email: ${email}

        Name: ${name}

        Message: ${message}
        `
    };
      transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
          console.log(error);
        } else {
          console.log('Email sent: ' + info.response);
        }
      });

    res.status(200).send('Send email successfully');
});

app.listen(port, () => {
  console.log(`Example app listening at ${port}`)
})

The file need to be named index.js just for deployment later on, as mentioned in package.json it's nodemon ./index.js as well.

Your file structure should look like this :

The idea behind this is simple, built and endpoint that will take whatever data coming from the frontend and pass them into nodemailer so they will be directed to your gmail.

The whole part from transporter, mailOptions and transporter.sendMail is just syntax so if you want to know more feel free to visit https://nodemailer.com/usage/ and https://nodemailer.com/message/

The Source code for the whole server is here if you need to compare code line by line : https://github.com/Tris-909/My-Portfolio-Server

5/ Local test :

You can run

npm start

to start your local development

If you hit the endpoint with a post request like a screen shoot below, it should send a mail to your gmail account :

Now everything is working fine locally. You can deploy it then integrate it with your websites.

6/ Deployment Heroku ( Optional ) :

Different platform have different ways to deploy an app or a server. I used Heroku because it's quick and easy and generous for it free tier. But if you are using a different platform I can't really help you, you have to figure it out on your own.

There are gonna be a few steps through this, and this is quite prone to error so I hope you can stick with it ( Deployment always be a pain 🙂 )

Step 1 : Create your own heroku account if you haven't gotten one yet
Step 2 : Run node -v to get the version of your current nodejs env then add these to your package.json :

  "engines": {
    "node": "16.13.0"
  }

Mine is 16.13.0 so I put it there

Step 3 : Alter your scripts inside package.json to make heroku works :

  "scripts": {
    "start": "node ./index.js",
    "dev": "nodemon ./index.js"
  },

Heroku runs npm start behind the screen for deployment so you need to move your development script into something else like above.

Step 4 : Install Heroku CLI and create your app through command line, You need to follow this https://devcenter.heroku.com/articles/heroku-cli until step Getting Started to create your app on heroku

Now if you go to heroku dashboard, you will see your app like this, mine is obscure-brook-87266

Now click on the project, and go to Deploy tab, then connect your app to your Github Account ( This is why I need you to commit and push it to Github at the start ) before you go to click deploy, go to Settings tab and click on Reveal Config Vars, you need to add env variables under the same name as your .env file.

After that you can go to Deploy and click on Manual Deploy to wait for your app to deploy. And then that's it. You are done.

Try to use POSTMAN again to test it out but replace your URL with the new URL provided by Heroku.

If you follow the whole guide till now everything should work as expected. It's not a smooth process for me I have to read a lot of StackOverflow issues and answers to figure it all out but I hope this will help you in some ways.

Good bye and have a good day 😙

Before I land a job as a developer, mistakes that I've made by learning how to code by myself

Tran Minh Tri — Sun, 29 Aug 2021 03:33:18 +0000

Before become a full stack developer by learning how to code as a self-taught developer for a year.

I've made many mistakes that now when I look back, I wish I didn't do it. These mistakes costed me my time, mental health and possibly money ( it's a small amount to me but I know there are peoples spent way more than I am ).

These mistakes could possibly block you from become a developer or make you suffer a lot before you can land your first job.

All the things below I about to say is my personal opinion, feel free to skip it but if you can find a small value in this blog, then cheer mate.

First mistake : Learning way too much without focusing on your goals and the reason why

When I'm 20. After a few months of learning how to code. I went to apply a few positions, not really a 'few' but many positions that I think I can apply to earn some experience.

Now that's all good. The problem is there are too many skills and I'm being too greedy about this.

I remembered I've learned PHP and React-Native before but now the only skill I actually learn and use from day to day is React.

You may wonder, what's so bad about that ?

The problem is by greed for every dev jobs out there, I'm not focusing on any particular skill. I didn't build out any big and complicated project using that specific language or framework. I'm half-good at everything and because I'm half-good.

The reality that I'm no good. No real strong point and no real focus.

You know the type of person who knows everything but in fact they only know the surface and that's no where match to the level you need to work in real world.

Looking back what I should have done is start by researching about the job market to understand what skill is the most important one for me to land a job as a developer then build out many projects using that one.

Now I know there are peoples reading to this point a be like : "What the hell is this guy is talking about ? Should developer always learn new things as their jobs ? Does this means that you can't apply to any jobs you don't qualify 100% for ?"

If you are thinking like this, you are totally missing the point. The fact that a developer has like 80-90% skill requirements for the job and learn the rest when they are on site is totally different from a guy who are no good and has his skills somewhere at 40-50% thinking that he will be able to win the job over all other 20-30 peoples applying to the same job.

If you apply directly without any helps from your friends, colleges, or even family. Understand that your skills must be at the top and you should have a strong point to sell. Jack of all trades is a joke and most of the times you are being way too confident about knowing anything rather than actually know it and use it professionally.

Second mistake : Learning like a parrot.

I have done so many tutorials. Yes that's me. The ugly true starts coming out after a few months of self-learning by watching other peoples code then re-write what they code.

I don't really know how to build things from scratch. That's what I realize. And believe me it's hard truth.

Ever feel likes you want to build out something that's really cool but then you don't know where to start, what technologies to use. How will you structure your databases. How will you build out your backend or frontend.

Yea that feeling. That's when you realize all the time you spent learning how to code. Indeed you learned how to code, but you learn the syntax rather than learn about the system the problem.

This will soon become even a bigger issue if you go work for companies and they start a new fresh project from scratch. Imagine all that pipelines, CI-CD, frontend, backend and so much more. If you just starting out as a junior developer. Well that's okay but one day you will become a mid level or a senior one you will have to do all of that.

So be aware, tutorials are great for learning how to code when you just start. But don't depend on them.

Learn the syntax, learn the fundamentals. Learn the "why". Then move one build your own application using all that technologies. Or you can follow a tutorial to some point. Then stop and keep building it using your own idea and rebuild the structure of the application to fit your needs.

Building many features all alone by yourself is hard. It will take time and will cause you many frustration but it will definitely help you in the long run.

You will have to build stuffs from scratch and that is freaky important. Believe me.

Third mistake : Not apply for job early

Don't wait for a perfect moment. In fact you will never be perfect. None of us are perfect and even the senior developers are not perfect.

You can't never stop learning something new in this field. As soon as you have the frontend skills : HTML, CSS, JS, a framework. You can start applying immediately.

This will force you to build out a resume. It force you to think about your selling points. It force you to be aware of your current level and try harder to be job-ready.

If you are learning how to code as a hobby. You will never force yourself learning or working on stuffs that's hard and no one hand holding your through it but are required.

Applying jobs early also bring many opportunities that you're not aware of if you are that kind of person who is way too modest and thinking you're no worth.

Personally, Applying for jobs give me the motivation to code every single day. More and more interviews just keep coming and the more I see the more I know that peoples are giving out recognition for my skills. That what keep me coding every single day. Knowing I will eventually break free and land my first job.

The job market is not high demand as you think, believe me. There are many many peoples applying to the same tech position. I've been there I know.

They only short for senior developer that agree to mid level salary. There are no shortage for new peoples. My job I'm working right now has nearly 50 peoples applied to it with degrees and experiences. The only reason I get hired is the attitude : 'All I need is experiences, I will work with minimum pay".

The story that graduates tech earn around 100k is certainly not the case. Positioning yourself to embrace it. You need experience than money. Especially if you're self-taught. Close that expectation now and it will be easier for you land job in the tech industry.

You will eventually get paid a lot but it will not come right out of the door.

So 2 things :

Applying for jobs early
Put down your ego and expectation. Your grow in career is the most important thing.

Fourth reason : Spending way too much ( This is not my mistake btw, I'm just putting it here because why not. I saw many peoples have this )

You don't need expensive bootcamp to learn how to code. You may don't even need a 4 years CS degree consider the fact that they don't really teach you about real skills you gonna use date to date as a developer.

There are many coding platform or courses will cost you as much as 15$-20$ that will provide you immense value and knowledge. Me personally, I would recommend people around 5 courses so they can be job-ready after finishing all of those.

Sometime being in debt, working a labour job for 8 hours a day is what stopping you from becoming a developer. No one can really put in the work to become a developer if they never have a chance. I solely believe I'm no special than a guy who work in the supermarket stocking items. If the guy in the supermarket know about this and create enough room to create an escape. He will be able to make it and be way more successful the he could ever imagine.

So believe me, don't create debt learning how to code. Don't push extra pressures on yourself. It won't come fast by any means. Just being patient and it will come. But create too many worries around yourself like debts and etc... You won't be able to make it.

Now I'm not saying that's all you need. You need proofs. Lot of them, things to show to other peoples to convince them you know what you are talking about and why you're good at what you're doing. And that's :

PORTFOLIO
GITHUB
LinkedIn that record your grow as a developer
Twitter ? ( I don't really use this )

But Github and Portfolio is a must, I won't say otherwise. I don't believe in story where you get the job from your friends by chance. I just point out if you gonna apply the job directly and compete with everyone else. If you don't have experience and you don't even have portfolio or github. You will lost 99% of the time ( I really want to say 100% but you know nothing is absolute ).

What you really need is time to learn how to code everyday and a dedication that you will never quit even if that's the 400th application you have failed.

One more thing, after you have worked as a developer. You will be self-teaching yourself how to code anyway. There are no bootcamps that will help you. So why don't save yourself a favor and start doing it now to form a habit.

END :

All the things above may be harsh but it's the truth. I wish when I first starting out someone will say all of this to me.

Believe me guys, I'm not trying to be a dick. But I've been there and done that. I worked at McDonald before becoming a developer. I spent so many hours just learning how to code.

Looking back I'm not really regret anything particularly. But if I know these things it maybe easier for me in some ways.

That's it guys. Hope you find some values out of it.

--peace--

Courses that I've taken to become a fullStack Developer from complete beginner

Tran Minh Tri — Sat, 26 Jun 2021 01:53:44 +0000

In this post I will share with you guys courses that I have taken and found it useful related to my date-to-date work as a developer.

Please take this as a reference only, because your developer job may have many different skills but on the basic level to become a developer these skills will be pretty much help you get there.

I recommend you to open a Github profile and start documenting your journey to become a developer because this would be super helpful for you to land that interview based on your Github alone

1/ The Web Developer Bootcamp 2021 - Colt Steele

This course is good for beginners who don't even know how to code but want to understand on the very basic level of things.

You will learn HTML CSS JavaScript Git API AJAX and many more. This should take your around a few months to finish it and at that point you should know at least the basics of all the things above.

After this you may not know CSS or JS at the level you should be so the next 2 courses will make it up to you.

2/ The Complete JavaScript Course 2021: From Zero to Expert! - Jonas

3/ Advanced CSS and Sass: Flexbox, Grid, Animations and More! - Jonas

These 2 courses will bring you CSS and JavaScript to the next level. You will start working on more complicated projects and concepts.

I remembered after these 2 courses I have become so much confident about HTML, CSS, JavaScript. It will lay a solid foundation for you to start learning more complicated courses.

Now you can pick up framework to prepare yourself for real because there are no jobs that you'll use plaint HTML CSS JavaScript. They all use framework or even many frameworks and libraries to get the work done quick and easy.

4/ React - The Complete Guide - Maximilian Schwarzmüller

5/ React Complete React Developer in 2021 (w/ Redux, Hooks, GraphQL) - Andrei Neagoie

6/ Modern React with Redux - Stephen Grider

React is one of the most popular library out there and no doubt about that. There are many reasons I choose React like :

Huge job market value and demand ( If you are serious about being a developer you should consider this as your first reason )
Robust, easy to learn and easy to use
Huge community support and ecosystem

There are many other technical reasons but we don't really need to go deep into that right now.

React is so big and to be honest it won't be replace anywhere soon because so many businesses built based on it. So you won't even have to worry about being jobless knowing this ( Ps: compared to Jquery ;) )

After finishing all these courses you should be job ready at least for a FrontEnd position so get yourself out there and looking for jobs because no learning exp is better than working exp.

But we are not done yet ;) So stay tune.

7/ The Complete Node.js Developer Course (3rd Edition) - Andrew Mead

8/ MERN eCommerce From Scratch - Brad Traversy

It's time for you to start learning more about BackEnd . I recommend you learn NodeJS because you can still use JavaScript which at this point I reckon you are very comfortable with.

These courses will teach you how to build an API, how to communicate between FE and BE, how to make private/public API, how to build a server of some sort and more. Very useful if you are planning become a MERN Developer like me.

After these 2 courses you should be able to understand how FrontEnd work with BackEnd. How to build a FullStack application even at the basic level.

What I will recommend you do right now is go and build a Portfolio that have many projects built and developed by you ( hopefully ). Now you will learn to do stuffs on your own even thou when learning courses you should be able to do it before watching the video to be fair.

All of these courses above along with many hours you spend outside of courses to work on your portfolio and projects that you have developed should take you around a year to be fair. If you finish all of these in 3-4 months you probably flying from video and video and applying ZERO what you're learning so take your time and don't rush even if you have to do another job while doing all of this.

Bonus

TypeScript

9/ Typescript: The Complete Developer's Guide - Stephen Grider

TypeScript is rising and if you want to go far into your career as a developer. TypeScript won't hurt. Many companies that are hiring developers, they are looking for TypeScript related now. Many high paying developer jobs you will see this skill once every few times.

CI-CD of choice

10/ GitLab CI: Pipelines, CI/CD and DevOps for Beginners - Learn with Valentine

Every single interview they will ask you if you have any experience related to CI-CD of some kind even if that is a junior position. If you are a junior developer they may ignore and accept that you don't know CI-CD. But the longer you work in the industry, it will become compulsory to know and even build pipeline to deploy code.

You can always consider this after you have studied all the things above.

End.
Now I may have taken even more courses and more projects on Youtube or other sources. But all the courses above are what I think will provide for you so much related industrial knowledge.

Developer requirements now are insane. I don't want to be a hater but the story I become a developer for 3 months 6 months always have something behind backing up for them that you don't know. So if you are a complete beginner who don't even know how to code a single line of code. You should take your time and always look out for opportunity to learn and improve yourself.

Now that's all. I hope this blog will help anyone who want to learn about how to become a FullStack Developer. Wish everyone a good day and thank you all.

How to use Redux with TypeScript ?

Tran Minh Tri — Sat, 03 Apr 2021 02:49:25 +0000

In this small tutorial, I will show you how to use Redux with TypeScript.

Disclaimer: I want to do this tutorial as a way to re-do what I learn and at the same time I want to share this knowledge with anyone who needs it. I can't make sure this is the best practice. But if you just want to find out how you can use redux with TypeScript this is one of them.

We will make a small application that simply reaches out to an API then fetches some data and dumps it out the screen. Now, this app may be small and that's okay because our main focuses are :

How to setUp a react-typescript project
How to setUp a redux store in our project
How to create an actionCreator that will perform an Async/Await Request
How to use this actionCreator in our components.

This tutorial requires you to know :

React
Redux
ES6 (async/await)
Basic of TypeScript

At the end of this tutorial, I will include some useful links for anyone who wants to learn more about TypeScript.

Why TypeScript ?

We know that TypeScript is rising ⭐ .Especially at the enterprise level where we have a lot of code to manage. People want to understand and see how data flow in their web applications.

I mean JavaScript works just fine. There nothing wrong with JavaScript except for the fact that with JavaScript alone it is really hard for you to come into a legacy codebase to build a new feature and this feature includes dozens of files😵 . All these files contain different variables, functions that are not written by you. So it will take you a lot of time to understand all of that without any directions whatsoever.

That is where TypeScript comes in. It will define type for nearly everything. Plus this type thing is also a protection for the app itself and this protection will prevent you from passing in the wrong type and causing more errors that you don't even know about.

The downside of TypeScript however is that it is somewhat re-invent the wheel (debatable). TypeScript does not help you build faster features especially if you are someone who doesn't understand TypeScript well enough. You can think of writing TypeScript as somewhat the same as writing tests.

You will have more errors than before because simply the app doesn't want to accept your type for some reason and you waste more time looking for the answer why 😡 .Believe me, It happens.

But it is undeniable that If we choose to use TypeScript we are choosing to develop an app that will eventually have ten thousand lines of code 📄 and make our future easier by making it more maintainable.

Plus as a developer. There are a lot of companies that desire a developer with experience with TypeScript 💰 💰 💰 .And that alone is a good reason to start learning it.

Tutorial :

Start our new react-typeScript project :

You need to choose a directory where you want your app to be and then open a command line in that directory then type this in :



npx create-react-app PROJECT_NAME --template typescript

Okay now go sipping some ☕ ☕ ☕ waiting for the npm packages to do it things

Install packages :

We will install some packages that allow us to work with both typeScript and redux. Open another command line in the project directory and type :



npm install --save @types/react-redux axios react-redux redux redux-thunk

We just install 5 packages, I will go through each and single one of them with you :

types/react-redux : for defining types for react-redux packages. When you use packages with typescript you have to download their type packages as well.
axios : this is for working with ajax easier. We actually don't need it but I love it so yea 😆
react-redux : You need this to work connect redux to react
redux : Redux library itself
redux-thunk : You need this to create an actionCreator

Understand what we want to build :

We gonna build a simple reducer that has an initialState of 3 things:

comments: Comment[]
loading : boolean
error : string | null

We will reach out to an API and fetch the comments array of that post with our input as postId then dump all comments out to the screens.

This is the API we will use : https://jsonplaceholder.typicode.com/comments?postId=1 .The postId will be inserted from an input that we gonna build later.

(PICTURE DEMO HERE)

SetUp Our Reducer

This should be your project folder structure at the moment :

Go and create a folder structure like this :

This is what your normal reducer looks like :

This won't work in TypeScript because we did not define a type for both state and action of this reducer.Now we will define a type for our state first :



interface Comment {
    postId: number,
    id: number,
    name: string,
    email: string,
    body: string
}

interface State {
    comments: Comment[],
    loading: boolean,
    error: string | null 
}

Pretty normal right ? Next we will create a type for our actions.
The thing with our actions is that based on action.type we will have different kind of payloads. In this case we have 3 different action.types so we need 3 different types of action for this.



enum ActionType {
    GET_POST_COMMENTS_PENDING = 'GET_POST_COMMENTS_PENDING',
    GET_POST_COMMENTS_SUCCESS = 'GET_POST_COMMENTS_SUCCESS',
    GET_POST_COMMENTS_FAIL = 'GET_POST_COMMENTS_FAIL'
}

interface actionPending {
    type: ActionType.GET_POST_COMMENTS_PENDING;
}

interface actionSuccess {
    type: ActionType.GET_POST_COMMENTS_SUCCESS;
    payload: string[];
}

interface actionFail {
    type: ActionType.GET_POST_COMMENTS_FAIL;
    payload: string ;
}

type Action = actionPending | actionSuccess | actionFail;

export const commentReducer = (state: State = initialState, action: Action):State => {
...}

I know that our code in this file is messy but It's okay. We will re-factor them later. That's why in the folder redux structure you see I create 2 other folders.

But before close this chapter, I need you to create a compbine File in your reducers to combine all reducers like this :



import { combineReducers } from 'redux';
import { commentReducer } from './index.ts';

const reducers = combineReducers({
comments: commentReducer
});

export default reducers;
//This RootState is required to use useSelector later on 
export type RootState = ReturnType<typeof reducers>;

At this point we already have our reducer ready.

Create an actionCreator and re-factor code :

Create a new file in dir: 'actionTypes' in redux dir. Then put all these codes in there and export our Action :



import { Comment } from '../reducers/index';

export enum ActionType {
    GET_POST_COMMENTS_PENDING = 'GET_POST_COMMENTS_PENDING',
    GET_POST_COMMENTS_SUCCESS = 'GET_POST_COMMENTS_SUCCESS',
    GET_POST_COMMENTS_FAIL = 'GET_POST_COMMENTS_FAIL'
}

interface actionPending {
    type: ActionType.GET_POST_COMMENTS_PENDING;
}

interface actionSuccess {
    type: ActionType.GET_POST_COMMENTS_SUCCESS;
    payload: Comment[];
}

interface actionFail {
    type: ActionType.GET_POST_COMMENTS_FAIL;
    payload: string ;
}

export type Action = actionPending | actionSuccess | actionFail;

Then import our Action and ActionTypes in our reducer File and replace the action.types the put some info in return statement and That's it. This is what our reducer currently looks like :



import { Action, ActionType } from '../actionTypes/index';

interface Comment {
    postId: number,
    id: number,
    name: string,
    email: string,
    body: string
}

interface State {
    comments: Comment[];
    loading: boolean;
    error: string | null;
}

const initialState = {
    comments: [],
    loading: false, 
    error: null 
}

export const commentReducer = (state: State = initialState, action: Action):State => {
    switch(action.type) {
        case ActionType.GET_POST_COMMENTS_PENDING:
            return {
                loading: true 
            } 
        case ActionType.GET_POST_COMMENTS_SUCCESS:
            return {
                loading: false,
                comments: action.payload
            }
        case ActionType.GET_POST_COMMENTS_FAIL:
            return {
                loading: false,
                error: action.payload 
            }
        default: 
            return state;
    }
}

Now we will create an actionCreator, if you have create an actionCreator before, then do it yourself then compare with code below :



import axios from 'axios';
import { Dispatch } from 'redux';
import { ActionType, Action } from '../actionTypes';

export const getComments = (postId: string) => {
    return async (dispatch: Dispatch<Action>) => {
        dispatch({
            type: ActionType.GET_POST_COMMENTS_PENDING
        });

        try {
            const { data } = await axios.get(`https://jsonplaceholder.typicode.com/comments?postId=${postId}`);

            dispatch({
                type: ActionType.GET_POST_COMMENTS_SUCCESS,
                payload: data  
            });

        } catch(err) {
            dispatch({
                type: ActionType.GET_POST_COMMENTS_FAIL,
                payload: err.message
            });
        }
    }
}

There not much of a different from normal actionCreator except you need to define type of dispatch before using it dispatch: Dispatch<Action>

Create a store and connect to our app then use our actionCreator to fetch some data then dump them to the screen :

You need to create a store.ts file in your redux dir.



import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers/combine';

export const store = createStore(reducers, {}, applyMiddleware(thunk));

Because this is a simple app I will build everything in App.tsx file.Go to your index.tsx file in your src directory to provide your store:



import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {store} from './redux/store'; 
import { Provider } from 'react-redux';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

We also need to create a custom hook to be able to use useSelector with TypeScript, you just need to create a file called useTypeSelector and pass this in :



import { useSelector, TypedUseSelectorHook } from 'react-redux';
import { RootState } from '../redux/reducers/combine';
export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

This is documented in React-Redux with TypeScript. That is just how it is to use useSelector so there nothing much to talk about this.

Okay now go to App.tsx, After this file I think we are done for this tutorial :



import React, {useState} from 'react';
import { getComments } from './redux/actionCreators/getComment';
import { useDispatch } from 'react-redux';
import { useTypedSelector } from './hooks/useTypeSelector';

function App() {
  const dispatch = useDispatch();
  const [postId, setPostID] = useState("");
  const { comments, loading, error } = useTypedSelector((state) => state.comments);

  const onSubmitHandler = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    await dispatch(getComments(postId));
  }

  return (
      <>
      <div>
        <form onSubmit={onSubmitHandler}>
          <input type={"number"} value={postId} onChange={(e) => setPostID(e.target.value)} />
          <button type="submit"> submit </button>
        </form>
      </div>

      {
        loading ? (
          <div>Loading...</div>
        ) : (
          <ul>
            {
              comments.map((comment) => {
                return(<li key={comment.id}>{comment.body}</li>)
              })
            }
          </ul>
        )
      }
      </>
  );
}

export default App;

And that is it, you may notice there aren't many differents with normal React components except event: React.FormEvent<HTMLFormElement> and import { useTypedSelector } from './hooks/useTypeSelector';

This is our final result :

Now this is ugly 😅 I have to admit it. But this is not a tutorial about CSS. You can always add that later and it is really trivial to focus on CSS in this tutorial.

My point is this tutorial will help you understand how to setUp redux-store with React using TypeScript, how to create an ActionCreator and how to use this ActionCreator in your app.

Here is the source code for the app : Here

If you want to dive deeper into this topic, please visit this link :
Here

I hope this will help you 😂 the main reason I do this tutorial is solidating my knowledge but if it helps you in some way then I glad. Please give me a star on Github if this helps you :3

-- peace --

Let's share our personal websites and see how we can we improve it.

Tran Minh Tri — Fri, 19 Mar 2021 07:08:58 +0000

Hi everyone, I am Tri Tran - Fullstack Developer 😊

Every Web Developer should have a portfolio especially a junior one. Nowadays, web development has become very competitive. Knowing the skills is not enough and you also should need a portfolio to contain projects related to that skills and show up your personality 😗

Today I want to make a post where people can come in and share their personal websites then receive opinions on how people think it looks and improves it together.

I will share mine first. I have built and made changes to this website for a couple of months. Thank to my personal website I got many callbacks and interviews just by seeing my resume and portfolio even though I don't have a degree and any commercial experience 😄 then eventually land my first job.

This is my portfolio : Portfolio

Please give me your opinion on how it looks and what I can do to improve and I would do the same for you as well ! 😆

5 hours GraphQL Tutorial with NodeJS and Express

Tran Minh Tri — Thu, 18 Mar 2021 08:26:14 +0000

This is a tutorial that will show you how to make a graphQL server using graphQL, NodeJS, Express, MongoDB.

At the end of this tutorial. You should know how graphQL works, be able to set-up a basic server that has one endpoint but allow you to gather information from many different databases in a single cluster.

Why GraphQL?

Normally, when you build APIs, you normally have many different endpoints for many different purposes.

The result is when you need changes on the front-end, you have to go back to the back-end and fix the API to make it return the right data. It is easy for you to do this when you have 10 APIs, but when you have 40, 50+ APIs with different complicated data to return it makes things harder to maintain.

This same problem happens to Facebook so they decide to invent graphQL. Now we have many more pros like :

Smaller payload
Fetching all data as one
Pre-defined Schema ( How your data should look like, this helps you have better understanding of data-flow in your app )

We also have some cons as well :

Learning Curve (Yes! You need to spend time learning it )
Not popular ( It is strong. But GraphQL just provides a new way to manage and write your APIs. It does feel life-changing but RESTful APIs work just fine in many cases. In fact, you may never need GraphQL if you don't do it in your day-to-day job as a developer ).

Still, If you still like GraphQL and want to see how you can create a basic server that allows you to fetch data from graphQL. Then this tutorial is for you.

Tutorial :

Installing npm packages :

_ Firstly, you need to choose a directory and run npm init to start the project.
_ Then install these packages (we will need them later on ):

cors ( workaround CORS problems )
dotenv ( using environment variables )
express ( express server )
express-graphql ( connecting express with graphql )
mongoose ( working with mongoDB )
nodemon ( keep your server on watch mode )

Your packages.json should look like this (versions of packages are not important, you just need to install the latest) :

SetUp a databases with MongoDB

We also need free-tier databases hosted on MongoD so we can see if our API works.

You should be able to go to MongoDB create an account if you don't have one and create a project.

When you have the project, choose connect > connect using mongodb compass and try to look for the string like this :

mongodb+srv://admin:${process.env.MONGO_DB_PASSWORD}@graphql.oumb8.mongodb.net/test

The admin and password could be different but it is okay. That's on you. Now just save it somewhere we will need it later.

SetUp Server ( app.js )

const express = require('express');
// grapqlHTTP allows us to use built-in interfaces to test our API
const { graphqlHTTP } = require('express-graphql');

// Using environment variable to store mongoDB databases password
const dotenv = require('dotenv');
dotenv.config();

// Connecting mongoose with databases
const mongoose = require('mongoose');
mongoose.connect(`mongodb+srv://admin:${process.env.MONGO_DB_PASSWORD}@graphql.oumb8.mongodb.net/test`,
{ 
    useNewUrlParser: true,
    useUnifiedTopology: true 
});
mongoose.connection.once('open', () => {
    console.log('Connected to databases');
});

// CORS 
const cors = require('cors');

// GrapQL Schema ( We haven't created it yet but we will soon )
const schema = require('./schema/schema');

const app = express();

app.use(cors());
app.use('/graphql', graphqlHTTP({
    graphiql: true,
    schema: schema
}));
const port = process.env.PORT || 5000;

app.listen(port, () => {
    console.log(`SERVER IS RUNNING ON PORT ${port}`);
});

Now I know this is long. But all of the things above are just boilerplate. So don't stress yourself too much. It always required a lot to setup a server even it is just a basic one.

Also, create .env file like this to use your environment variables:

MONGO_DB_PASSWORD=your-mongodb-password

Create Mongoose Model

Mongoose models are used to define how your data will be stored in mongoDB and also it is a way to connect to mongoDB to perform CRUD operations and more.

We will create 3 simple Mongoose Models : User, Hobby, Post
User.js

const mongoose = require('mongoose');
const UserSchema = mongoose.Schema({
    name: String,
    age: Number,
    job: String 
});
module.exports = mongoose.model('User', UserSchema);

Basically, we just create a UserSchema that will have name, age, job fields. Now we just need to do the same with Post and Hobby.

PostModel should have: comment, userId
HobbyModel should have: title, description, userId

I believe you can do it on your own. It is the same as UserModel.

Create GraphQL RootQuery and Mutation:

1.Definition about RootQuery and Mutation :

RootQuery is where you can define what queries you want to build. Basically, all queries of your graphql API are stored in this RootQuery. So you can access it through a single endpoint.

Mutation also just works like RootQuery but now it is used to store methods used to change your data instead of just read it.

Eventually, you will provide it to GraphQLSchema like this :

const RootQuery = ...
const Mutation = ...

module.exports = new graphql.GraphQLSchema({
    query: RootQuery,
    mutation: Mutation
});

2.Define types for RootQuery :

Just like we talked about one of the pros of RootQuery, we have pre-defined schema in GraphQL to help us to know what Queries from RootQuery will return. All of this is thank to types we will define in RootQuery.

A type in GraphQL will have 2 basic fields: name, fields and in every field of fields we have 3 basic fields: type, args (optional), resolve.

Enough for talking, we will now create a UserType to see what is a type in GraphQL.

Schema.js

const graphql = require('graphql');
const User = require('../models/User');
const Post = require('../models/Post');
const Hobby = require('../models/Hobby');

const UserType = new graphql.GraphQLObjectType({
name: 'UserType', //We will use this `name` in RootQuery
fields: () => ({
        id: {type: graphql.GraphQLID},
        name: {type: graphql.GraphQLString},
        age: {type: graphql.GraphQLInt},
        job: {type: graphql.GraphQLString},
        posts: {
            type: graphql.GraphQLList(PostType),
            resolve(parent, args) {
                const postArrays = Post.find({
                    userId: parent.id
                });

                return postArrays;
            }
        },
        hobbies: {
            type: graphql.GraphQLList(HobbyTypes),
            resolve(parent, args) {
                const hobbiesArray = Hobby.find({
                    userId: parent.id 
                });

                return hobbiesArray;
            }
        }
})
});

I will explain. Here in this UserType when we query for users we will expect to see 6 fields in return for each user and that are: id, name, job, age, posts, hobbies.

In this case, posts and hobbies are more special mainly because they have their own databases on MongoDB. we will need to use args (optional) and resolve(parent,args){} to fetch them from their own databases.

args: is where you will provide arguments that will be used in resolve method used to fetch data.

resolve(parent, args){}: is where you fetch your data and will have access to the parent element (User databases) and args that you provided earlier.

In resolve(parent, args){}, we just connect to our databases and doing Mongoose stuffs. This is not a tutorial about how to work with Mongoose so I guess you can figure this out.

Knowing that fields in GraphQL and Mongoose Models don't have to be exactly 100% like each other. Fields in GraphQL act like bridge between your databases where you can keep gathering information by jumping between Types while Model in Mongoose defines how your data will be stored in your databases. These two are different.

You can do the same for HobbyType and PostType then come back here to check.

const HobbyTypes = new graphql.GraphQLObjectType({
    name: 'HobbyType',
    description: "Model for HobbyType",
    fields:() => ({
        id: {type: graphql.GraphQLID},
        title: {type: graphql.GraphQLString},
        description: {type: graphql.GraphQLString},
        user: {
            type: UserType,
            resolve(parent, args) {
                const user = User.findById(parent.userId);

                return user;
            }
        }
    })
});

const PostType = new graphql.GraphQLObjectType({
    name: "PostType",
    description: "Model for PostType",
    fields: () => ({
        id: {type: graphql.GraphQLID},
        comment: {type: graphql.GraphQLString},
        user: {
            type: UserType,

            resolve(parent, args) {
                const user = User.findById(parent.userId);

                return user;
            }
        }
    })
});

In this situation, user field from fields acts like a bridge. You can gather userInfo then in userInfo you will have a post inside a postArray that contain info about the user and this user (same user) have a postArray and the cycle repeat. This is the power of GraphQL. You can freely fetch data by jumping between databases as long as you define them in fields.

3.Building RootQuery :

If you know how to build Types like above, you will know how to build RootQuery. It's basically the same.

const RootQuery = new graphql.GraphQLObjectType({
    name: "RootQuery",
    fields: {
        user: {
            type: UserType,
            args: {
                id: {type: graphql.GraphQLID}
            },
            async resolve(parent, args) {
                const user = await User.findById(args.id);

                return user;
            }
        },
        users: {
            type: graphql.GraphQLList(UserType),
            async resolve(parent, args) {
                const users = await User.find();

                return users;
            }
        },

        hobby: {
            type: HobbyTypes,
            args: {
                id: {type: graphql.GraphQLID}
            },
            async resolve(parent, args) {
                const hobby = await Hobby.findById(args.id);

                return hobby;
            }
        },
        hobbies: {
            type: graphql.GraphQLList(HobbyTypes),
            async resolve(parent, args) {
                const hobbies = await Hobby.find();

                return hobbies;
            }
        },

        post: {
            type: PostType,
            args: {
                id: {type: graphql.GraphQLID}
            },
            async resolve(parent, args) {
                const post = await Post.findById({
                    id: args.id
                });

                return post;
            }
        },
        posts: {
            type: graphql.GraphQLList(PostType),
            async resolve(parent, args) {
                const posts = await Post.find();

                return posts;
            }
        }
    }
});

You will have 6 queries, but if you can understand how we build user query, you will understand the rest.

user query will fetch a user using id provided in args. user has the UserType so when it returns a user, it will return 6 fields including posts and hobbies of this user. posts and hobbies are generated in UserType itself and not by we define posts and hobbies in RootQuery. These two are also different.

That is it for RootQuery. By this time, if you have data stored in MongoDB you will be able to test your GraphQL API using localhost, on how to actually call your GraphQL API I recommend you watch 15 mins tutorial since it really time-consuming for me to explain it here.

4.Building Mutation:

The same idea with RootQuery. I will only post one method for mutation so you can understand how can you write a Mutation for GraphQLSchema :

const Mutation = new graphql.GraphQLObjectType({
    name: 'Mutation',
    fields: () => ({
        createUser: {
            type: UserType,
            args: {
                name: {type:graphql.GraphQLNonNull(graphql.GraphQLString)},
                age: {type: graphql.GraphQLNonNull(graphql.GraphQLInt)},
                job: {type: graphql.GraphQLString}
            },
            async resolve(parent, args) {
                let user = new User({
                    name: args.name,
                    age: args.age,
                    job: args.job
                });
                const newUser = await user.save();
                return newUser;
            }
 })
})

You pass data you need to create a user to args. Then you create a new user in resolve and update it using Mongoose. As simple as that you can create a user through interfaces.

Now you can create more methods like : fetch singleUser, updateUser, deleteUser, createHobby, createPost,... Anything really. After this you can check my github code link below to see if you are right or wrong.

Github Code Base

At this point you should be able to :

Create a Type and define it in RootQuery
Create methods in Mutation to change your data in your databases
Fetching and Mutating all the fields in databases successfully through your local-host.

Be able to fetch infinity fields by jumping between two types in graphql like this :

From what you learn from this tutorial. You can start building a server of any application you want as long as you know how your data will look like. If you don't like to build anything at least you can understand how GraphQL works in certain ways.

--peace--

How I land my first software engineer job as a self-taught developer ?

Tran Minh Tri — Wed, 17 Mar 2021 03:29:51 +0000

After 1 year and 2 months, I have landed my first job as a developer by just sitting at home and learning how to code on my own.

Hi everyone, I am Tri Tran - a self-taught developer. Today I will share how I did it, some tips to help you land your first job as a FullStack developer without a degree or any relevant experience.

Background Story :

So back then, I am 19 years old. I moved to Australia in 2019 and lived in a small town called Bowen where there are no dev jobs / no University and Colleges. Basically no nothing.

Cause my temporary visa only allows me to work and study but doesn't allow me to get a loan for university or college and I am 19 years old. It pushes me into a situation where I can't do anything and the only job I can do is McDonald's for a living and I did.

At this point in my life, I feel really messed up. Everything is wrong and I have this hopeless feeling where I don't know what to do or even how to do it. That moment when you realize there little to nothing you can do to change your life, you realize to achieve what normal people here in Australia achieve like going to university and get a degree to get a basic job. It will cost you 5-6 years and possibly a 70-80k in-depth tuition fee.

I see myself in the worst state of my life :

Being broke ( I can't even have money to re-locate even if I land the developer job ). Now you may blame me for not going to work but Bowen is so small that the only place that you can apply for is McDonald's (Literally) and I did go to work there but they don't even allow you to work full-time even if I want to simply because they need a person to fill in the gap.

No background or a degree: I can't afford it in any way. Trying to teach yourself at home and compete with people who have a degree and maybe commercial experience is harder than anything else.

No Industry Experience.

Living in a rural area where there are no dev jobs. There are many jobs that required you to go to the office. If you live outside of the city where the office is based, you won't even be considered at all.

Doing all of this stuff in the second language.

Now all of these are crazy hard for me to getting the job but I haven't talked about my personal problems in life.

Believe me, I don't want to tell you how bad the situation is just to turn myself to become a hero of some kind. I am depressed and I have people who are ready to blame me for that. What I am trying to highlight here is that I believe you too can become a Software Developer if you are not in a situation as bad as me.

So at this point, I decided to step up my game and this is where the journey starts.

I studied like crazy. Doing everything I could to get ahead of myself. Failed hundred of times.

After 400+ applications, 10+ interviews, and endless hours of learning how to code. I have landed the job as a FullStack Developer and set myself to the first step of success in life.

The interview was nearly 3 hours. I have 2 separated ZOOM interviews with the Head of Engineering of the company and Lead Developer and everything went well. Originally, the CEO is looking for someone who has mid-senior experience. But after the interview, they like me so much that open a junior job exclusively for me and it turns out to be the happiest day of my life.

My advice to help you land your first job as a developer

So I will share with everybody things that will definitely help you on your journey regardless of your situation :

Being disciplined:

You have to put down at least 7-8 hours EVERY SINGLE DAY. Now a lot of people may have a degree, they may have a network to help them land their first job but a lot of folks out there have nothing and it's okay. This is why you need that time to work on yourself to separate yourself from anyone else.

Knowing what you need to know and find a good resource:

Before deciding on what to learn. Looking into what jobs you want to apply for and take note that what skills keep popping up all the time. Then go to Udemy just buy the best course related to that skills and start studying. That is as simple as that. You don't need to follow any road map whatsoever don't confuse yourself when you first starting out because these days we just have too many technologies.

Applying for jobs in the early state:

Job hunting is tired and even worse for someone who trying to land their first job as a developer. Originally, If you are someone who is kinda normal right? no degree - no exp - no nothing. You want to put yourself out there as soon as possible. You may fail and that is okay, that is where you learn from and know where you need to improve. You may never know what you may achieve if you never do it.

Understand the market and know your situation :

This sounds harsh but hears me out. I see a lot of people are rushing way too fast. They are spending a lot so they are in debt of college or university. They even pay more for Bootcamp and then feel desperate when they don't see the result after 3-6 months. In reality, that should be how it is. People coming from all backgrounds and there are people with many privileges: people can go to university their family pays for it, people live in the biggest city where all the jobs around, people have been coding since they are 14 and there are so many more. Don't compare yourself to others, compare yourself to you yesterday. Give yourself time to fail and learn.

The current job market is SATURATED with junior developer like you and me. Literally, I have the ZOOM interview with one of the companies I have applied for, and one day I open my Gmail to see that job has more than 100 applications for a single platform. And you will see this job on so many platforms. So there will be a few hundred people for a single job and this is real. So even if you fail, you should know that it is okay and usually that is should how it is.

Having skills but also make yourself stand out:

If you don't have a Github account full of contributions.
If you don't have a beautiful portfolio.
If you don't have a resume that has all the skills listed in the job requirements.
If you don't build a personal project that unique and big and aligned with the company tech stacks.

Most likely you will fail and never get a callback even if you have a degree. This field is competitive as hell and Coding Bootcamps are rising like fungus. To be able to make yourself stands out as a junior developer. Knowing the skills is not enough. You have to have all the things above.

Never Give Up.

This is the most important thing. You will fail hard, you will want to give up on coding. It will happen. The thing is how quickly can you come back to the game.

People around you don't believe in you?
It's okay. You can believe in yourself.
Your situation is dire?
It's okay. Work harder.

No matters what you are doing just don't give up. Eventually, you will be able to do it. It is the mindset that helps you grow. Knowing that it's okay as long as you try and believe in yourself.

My Portfolio and Resume that helps me to land my job :

Enough for advice, I know you guys need to see a real resume and real portfolio that helps me land my first job. That would be so much better than just words. So here it is :

This is my portfolio link : Tri Tran

This is my resume :

Alright guys, Thank you for reading. I just want to write my first blog and share my story on how I land my first job. Also give out some advice for someone who is trying to land one. That's it.

--Peace--