13 different things that you can learn today if you want to be a tech entrepreneur or a better engineer to make an application and ship it to your customers! Target audience Read this if you are: 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 If you are a beginner, this blog is the right thing to follow to get a direction to go into. Its 2020! 🤯 You should be knowing these 13 things, no matter what position you are working on. Even if you are a fresher or a VP of Engineering in some company or looking forward to start your own company, these 13 things should form a part of your skill-set, especially, if you are looking to launch something on the web and expecting some income out of it. 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: I learnt all these things from my personal experience while developing 😎 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. intervue.io Ok! Enough of my marketing 😛 Let’s see “The Thirteen”! 1. Developing Frontend using React, Redux, Typescript & Node What you will learn: React, redux, node and typescript for writing frontend codeMaking a responsive UI Tech Stack Used Use React for renderingRedux for storing the Todos and managing a store to store data on the UITypescript for strict typing (optional)Node for server side rendering (will help in SEO as well) What you should do: Make the classic Todo application in Frontend using React, Redux, Node & Typescript. Follow this starter kit or find a starter kit that supports typescript as well https://github.com/kriasoft/react-starter-kit Make a User Interface that looks something like this The app should be able to: 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) Upcoming post (coming soon) ⌛: How I used React, Redux, Typescript and Node to make intervue.io Till then learn the basics & follow me for more updates! 2. Front-end performance What you will learn 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 Tech Stack Used 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 now runs on Lighthouse V6: Google page speed insights Lighthousev6 scoring calculator According to the updated calculator, you should: 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. Upcoming post (coming soon) ⌛: How I used AWS Cloudfront and S3 for optimizing Frontend performance for intervue.io Till then learn the basics & follow me for more updates! 3. Develop backend using Node, Sequelize and Postgresdb (Use Redis as cache) What you will learn Node and Express to make APIs Middlewares Models (to make database table schema) Controllers Postman tool Curl request Tech Stack Used Node Express Sequelize Postgres Postman Curl CORs What you should do 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 issues), we will solve it via our next step. CORs Upcoming post (coming soon) ⌛: How I used Node Express to make backend microservice for intervue.io Till then learn the basics & follow me for more updates! 4. Setting up nginx & integrate with other services What you will learn Setting up Nginx and its configuration (nginx.conf) Setup domain routing in /etc/hosts Integrate Frontend to Backend and the database Routing via Nginx Tech Stack Used Nginx Resolving the CORs issue Sample nginx routing via nginx.conf What you should do 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 Upcoming post (coming soon) ⌛: How I used Nginx to do routing of Frontend, Backend and other micro-services for intervue.io Till then learn the basics & follow me for more updates! 5. Dockerize your application: frontend, nginx, backend, postgres and redis Now your application is running on local. Time to bundle it so it can be shipped What you will learn 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 What you should do 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 Upcoming post (coming soon) ⌛: How I used Docker to package intervue.io Till then learn the basics & follow me for more updates! 6. Jenkins CI/CD in groovy Now we are done with packaging our Todo application as well, let us now make a CI/CD pipeline to deploy our project to AWS. What you will learn 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 Upcoming post (coming soon) ⌛: How I used Jenkins CI/CD and Kubernetes to automate deployments for intervue.io Till then learn the basics & follow me for more updates! 7. Kubernetes on AWS Let us bring in Kubernetes and understand pods, services and deployments and how docker images can be used for deployments here. What you will learn Kubernetes on AWS to make a cluster (master is managed by AWS K8s services only. Hence it comes at a cost) Pods Services Deployments Cluster Tech Stack Used Kubernetes eksctl to deploy a cluster kubectl to make a service and do deployments apiVersion : apps/v1 kind : Deployment metadata : name : nginx-deployment labels : app : nginx spec : replicas : 3 selector : matchLabels : app : nginx template : metadata : labels : app : nginx spec : containers : - name : nginx image : nginx:1.14.2 ports : - containerPort : 80 < = = = = > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > 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;" </ > strong </ > span What you should do Make a cluster on & use to bring that up Kubernetes eksctl 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 Upcoming post (coming soon) ⌛: How I used Jenkins CI/CD and Kubernetes to automate deployments for intervue.io Till then learn the basics & follow me for more updates! 8. Setting up cloudfront with S3 What you will learn 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 Tech Stack Used AWS Cloudfront AWS S3 AWS CLI Webpack Plugin to upload assets to S3Browser Caching headers What you should do 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 Upcoming post (coming soon) ⌛: How I used Jenkins CI/CD and Kubernetes to automate deployments for intervue.io Till then learn the basics & follow me for more updates! 9. Route53 on AWS What you will learn Your Todo Application will now open on a domain, fetch assets from CDN and hit backend via nginx to get data from postgres Tech Stack Used Route53 Domain and Hosting What you should do 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) Upcoming post (coming soon) ⌛: How I setup Route53 for intervue.io Till then learn the basics & follow me for more updates! 10. Integrating Sentry for end-to-end frontend monitoring is used to track run-time performance and tracking if your users encounter Javascript errors. He can open your application in different browsers/devices and may encounter errors that you might not have encountered. Sentry What you will learn Logging of runtime javascript error and debugging it Tech Stack Used Sentry SDK integration End to End runtime performance monitoring What you should do Integrate Sentry SDK in your React frontend Throw an exception and see if it gets recorded in the sentry dashboard Upcoming post (coming soon) ⌛: How I sentry for intervue.io Till then learn the basics & follow me for more updates! 11. Integrating centralized logging with Kibana, fluentd & Kubernetes on AWS What you will learn Bunyan and morgan logging in node Fluentd with Kubernetes to setup centralized logging Kibana to view logs and trends Tech Stack Used Bunyan Morgan Fluentd Kibana logging dashboard What you should do 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 Upcoming post (coming soon) ⌛: How I setup logging with Kibana for intervue.io Till then learn the basics & follow me for more updates! 12. GTM/GA integration to closely monitor how customers are using your application What you will learn GTM to manage events and see how your customers are using your application and where they are clicking GA dashboard to view trends Tech Stack Used Google tag manager Google analytics What you should do 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 Upcoming post (coming soon) ⌛: How I setup GA/GTM with Kibana for intervue.io Till then learn the basics & follow me for more updates! 13. Focused emailing with mixmax and mass emailing with sendy What you will learn Sendy for sending out newsletters Newsletter management AWS Simple Email Service Tech Stack Used Sendy: Newsletter management AWS Simple email service What you should do Make an EC2 instance and setup sendy on it (This will come at a one-time payment) Active AWS Simple Email Service Setup Sendy with AWS SES to send newletters to your subscribers Setup mixmax with your gmail account (A particular plan of mixmax allows you to schedule follow-ups) Upcoming post (coming soon) ⌛: Setting up newsletter service and automated follow-ups for intervue.io Till then learn the basics & follow me for more updates! Conclusion 🤓 In this article I have discussed 13 things that you should know, each focusing on a different aspect of product development. Now the choice is all yours: Do you want to focus on something you already know and go a little bit here and there to get your product out in the market? Or, do you want to strengthen your skills by doing a project for a technology you already have some knowledge in? Or, will you rely on your favourite framework/library and do all the projects in 2020 with it? Feel free to leave a comment and don’t forget to follow me for more upcoming posts!
