13 Things You Should Know If You Are A Software Developer/Entrepreneur In 2020

Target audience

• A tech entrepreneur or want to become one
• An Engineer who wants to learn more about packaging and shipping an application end to end
• Someone having some tech background and little bit of exposure about how tech works

• This post will give you a direction to move into when making a product and delivering it.
• I will upload detailed blogs individually for all 13 topics where you can learn more in-depth. Till then, keep hustling and follow me for more insights!

Some background:

intervue.io is an easier way to take tech interviews remotely with collaborative code editor and audio/video calling integrated in the browser itself. It supports 25+ programming languages and gives a curated question bank/home assignments that can be given to the candidate to test his knowledge in a practical way.

1. Developing Frontend using React, Redux, Typescript & Node

• Make the classic Todo application in Frontend using React, Redux, Node & Typescript.
• Follow this starter kit https://github.com/kriasoft/react-starter-kit or find a starter kit that supports typescript as well
• Make a User Interface that looks something like this

• Add todos
• List added todos
• Use a background image and a small logo in the appSearch from the added todos using the search bar
• Fit in all sizes (make it responsive)

2. Front-end performance

• LCP, TBT, TTI, SI and other Lighthouse v6 scoring parameters and how a browser renders a webpage
• Content delivery network and Static storage for Frontend applications
• Browser caching
• Optimizing images (using webp for chrome)
• Minimizing your javascript using code splitting and chunking via Webpack

• AWS Cloudfront (CDN) for serving assets (JS, CSS, Images)
• Browser caching with Cache-control headers (to cache assets on the browser only)
• AWS simple storage service (S3) for storing assets (JS, CSS, Images)
• Webpack, it’s various plugins and loaders

What you should do

• First, host your Todo application developed above on some environment
• Then, calculate your website score and see the recommendations given by page speed insights
• Work on above scoring matrix and recommendations given by page speed insights to improve your score.

3. Develop backend using Node, Sequelize and Postgresdb (Use Redis as cache)

• Node and Express to make APIs
• Middlewares
• Models (to make database table schema)
• Controllers
• Postman tool
• Curl request

• Node
• Express
• Sequelize
• Postgres
• Postman
• Curl
• CORs

• Clone the following repo https://github.com/sahat/hackathon-starter
• Install sequelize and connect to Postgres instance
• Make GET API to get todos
• Make POST API to add new todos
• Make GET API for todos search basis query parameters
• Store Todos in Redis Cache and add Cache eviction policy
• Use Postman to hit the APIs and request data from them
• Use Curl to do the above thing again
• Integrate the APIs with React frontend that you did in the first step (you might get CORs issues), we will solve it via our next step.

4. Setting up nginx & integrate with other services

• Setting up Nginx and its configuration (nginx.conf)
• Setup domain routing in /etc/hosts
• Integrate Frontend to Backend and the database
• Routing via Nginx

• Nginx
• Resolving the CORs issue
• Sample nginx routing via nginx.conf

• Get rid of the CORs error from the last step while integrating frontend with backendSetup nginx and make nginx.conf file in your machineSetup routing for frontend and backend services
• Frontend and backend should now be on the same domain but different locationsFirst slash (/) call should go to nginx and it should decide where to route (Frontend or backend)
• Once nginx is integrated, complete your API setupYour Todos should now be directly coming from the postgresdb via APIs to the Frontend and rendered via React

5. Dockerize your application: frontend, nginx, backend, postgres and redis

• Docker and Yaml syntax
• Making an image for all 4 services for your Todo application
• Running all four images as containers on your local to run the application

Tech Stack Used

• Docker
• Images & Containers
• Networking, container port and host port
• Sample docker compose file

• Use Docker to containerise your Frontend application for consistent behaviour across environments
• Use Docker to containerise Nginx
• Use Docker to containerise Redis
• Use Docker to containerise your backend application
• Use Docker to containerise Postgres
• For the above three make docker-compose.yml and make images for nginx, frontend, backend and postgresdb

6. Jenkins CI/CD in groovy

• Jenkins CI/CD
• Setting up AWS EC2 instances and Security Groups
• Deploying docker containers on AWS

Tech Stack Used

• Jenkins
• AWS EC2
• Security Groups in AWS
• Groovy to make a pipeline in Jenkins
• Deploying Docker containers on AWS EC2 instances to run your application
• Jenkins pipelines

What you should do

• This one is a little tricky but do not give up and get it done!
• Signup to AWS (Amazon web services)
• Make an EC2 instance (take a micro instance which comes as free on AWS sign-up). You will have to increase the instance size going ahead, as images and parallel CI/CD pipelines will not fit in micro sized instance
• Install Jenkins on it
• After Jenkins is setup, expose it to an IP via Security groups
• Login to Jenkins and make 4 pipelines (Frontend, backend, nginx, postgres)
• Pipelines should clone the project, build it, dockerize it and deploy it on AWS instances (For this setup, you will have to deploy more machines to deploy your docker containers)
• We will later comeback and integrate Kubernetes with it to make our deployment more seamless

7. Kubernetes on AWS

• Pods
• Services
• Deployments
• Cluster

• Kubernetes
• eksctl to deploy a cluster
• kubectl to make a service and do deployments

<span id="1324" class="cs ka kb bi sn b ca so sp r sq" data-selectable-paragraph="" style="box-sizing: inherit; font-weight: 400; display: block; font-style: normal; font-size: 16px; color: rgb(41, 41, 41); line-height: 1.18; letter-spacing: -0.022em; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-top: -0.09em; margin-bottom: -0.09em; white-space: pre-wrap;"><strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">apiVersion</strong>: apps/v1<br style="box-sizing: inherit;"><strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">kind</strong>: Deployment<br style="box-sizing: inherit;"><strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">metadata</strong>:<br style="box-sizing: inherit;">  <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">name</strong>: nginx-deployment<br style="box-sizing: inherit;">  <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">labels</strong>:<br style="box-sizing: inherit;">    <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">app</strong>: nginx<br style="box-sizing: inherit;"><strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">spec</strong>:<br style="box-sizing: inherit;">  <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">replicas</strong>: 3<br style="box-sizing: inherit;">  <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">selector</strong>:<br style="box-sizing: inherit;">    <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">matchLabels</strong>:<br style="box-sizing: inherit;">      <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">app</strong>: nginx<br style="box-sizing: inherit;">  <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">template</strong>:<br style="box-sizing: inherit;">    <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">metadata</strong>:<br style="box-sizing: inherit;">      <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">labels</strong>:<br style="box-sizing: inherit;">        <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">app</strong>: nginx<br style="box-sizing: inherit;">    <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">spec</strong>:<br style="box-sizing: inherit;">      <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">containers</strong>:<br style="box-sizing: inherit;">      - <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">name</strong>: nginx<br style="box-sizing: inherit;">        <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">image</strong>: nginx:1.14.2<br style="box-sizing: inherit;">        <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">ports</strong>:<br style="box-sizing: inherit;">        - <strong class="sn mg" style="box-sizing: inherit; font-weight: 700; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace;">containerPort</strong>: 80</span>

• Make a cluster on Kubernetes & use eksctl to bring that up
• Your cluster will add some AWS instances on the go (and it comes at a cost). Please verify the same before proceeding with it
• Make kubernetes_frontend, kubernetes_backend, kubernetes_redis, kubernetes_postgres yml files
• Update nginx and other environment variables to point to Kubernetes deployment names which are much more reliable and you will not have to point to IPs or do a Route53 entry for each service.
• Update your CI/CD to run kubectl and deploy images for the above pods

8. Setting up cloudfront with S3

• AWS Cloudfront to be used as CDN
• AWS S3 to be used as storage for assetsaws-cli or Webpack plugin to upload assets to S3

• AWS Cloudfront
• AWS S3
• AWS CLI
• Webpack Plugin to upload assets to S3Browser Caching headers

• Setup S3 and integrate aws-cli in your Jenkins CI/CD to upload the build folder to S3. Alternatively use Webpack plugin to upload assets to S3
• Setup CDN (AWS Cloudfront) to pick data from S3
• Pass cache-control headers for efficient browser caching of assets
• Your final pipeline will then look like this.
• The “install dependencies and make build” step will make build and also upload it to S3 when the above instructions are followed
• CI/CD pipeline for Jenkins

9. Route53 on AWS

• Route53
• Domain and Hosting

• Buy a domain from AWS or any other domain provider
• Install SSL for that domain using certbot (in your nginx service in kubernetes)
• Setup nameservers for that domain in your Route53
• Configure Route53 on AWS to add CNAME (this will be nginx service)

10. Integrating Sentry for end-to-end frontend monitoring

• Sentry SDK integration
• End to End runtime performance monitoring

• Integrate Sentry SDK in your React frontend
• Throw an exception and see if it gets recorded in the sentry dashboard

11. Integrating centralized logging with Kibana, fluentd & Kubernetes on AWS

• Bunyan and morgan logging in node
• Fluentd with Kubernetes to setup centralized logging
• Kibana to view logs and trends

• Bunyan
• Morgan
• Fluentd
• Kibana logging dashboard

• Use bunyan and morgan to do logging in Node Server, Node Express Backend
• Use fluentd to setup centralized logging
• Use Kibana to view the logsSetup alerts in Kibana for any errors in backend services

12. GTM/GA integration to closely monitor how customers are using your application

• GTM to manage events and see how your customers are using your application and where they are clicking
• GA dashboard to view trends

• Google tag manager
• Google analytics

• Integrate google tag manager and make a container inside it
• Use the GTM script with that container id in your frontend code
• Integrate basic Page view events recommended by GTM
• Integrate GA with GTM

13. Focused emailing with mixmax and mass emailing with sendy

• Sendy for sending out newsletters
• Newsletter management
• AWS Simple Email Service

• Sendy: Newsletter management
• AWS Simple email service

• Make an EC2 instance and setup sendy on it (This will come at a one-time payment)

Conclusion 🤓