Good to have you here

I am Chakit 👋
Full Stack Developer 🚀
DevRel 🥑 at Storyblok

I am a Full Stack Developer based in India, always thrilled about the web. I like to be involved in the community, I am Twitter space host, who likes to talk and write about technology. I am always excited to try out new technologies and frameworks.

Find me on -

twitter-logo linkedIn-logo devto-logo hashnode-logo youtube-logo github-logo showwcase-logo
Chakit Arora

Technologies I've Worked With

Quasar Logo
Quasar
Vue Logo
Vue JS
Node Logo
Node JS
Angular Logo
Angular
Flask Logo
Flask
Docker Logo
Docker
Fast API Logo
Fast API
Mongo DB Logo
MongoDB
Tailwind Logo
TailwindCSS
Storyblok Logo
Storyblok
React Logo
React
MySQL Logo
MySQL
Strapi Logo
Strapi
Bootstrap Logo
Bootstrap
Firebase Logo
Firebase
Lambda Logo
Lambda
EC2 Logo
EC2
API Gateway Logo
API Gateway
Cloudfront Logo
Cloudfront
Gridsome Logo
Gridsome
Next Logo
Next
Nuxt Logo
Nuxt

A Few Projects

Recent Blogs

Free TailwindCSS UI-kits

Free TailwindCSS UI-kits

Tailwind is an amazing CSS framework and is growing at a rapid pace. Here are some UI kits to help you make great designs. <br/><br/> # 1 - Tail-Kit ![Tail-kit](https://pbs.twimg.com/media/E_3RFBGUUAEwVcW?format=jpg&name=medium) Contains a lot of ready-to-use components with some templates! It's open-source! <br/> Link - [Tail-kit](https://www.tailwind-kit.com/) <br/><br/> # 2 - Wicked Blocks ![Wicked Blocks](https://pbs.twimg.com/media/E_3StMHVcAEneRb?format=jpg&name=medium) Provides a variety of blocks like page sections, forms, navigation, and much more. This is a project by wickedtemplates. <br/> Link - [Wicked Blocks](https://blocks.wickedtemplates.com/) <br/><br/> # 3 - Tailblocks ![Tailblocks](https://pbs.twimg.com/media/E_3UOEnVIAcWb72?format=jpg&name=medium) It gives you a good number of ready-to-use blocks made with TailwindCSS. The best part is, you can view the blocks with different colors and different devices on their website itself. <br/> Link - [Tailblocks](https://tailblocks.cc/) <br/><br/> # 4 - Daisy UI ![Daisy UI](https://pbs.twimg.com/media/E_3edVQVgAUe6Dh?format=jpg&name=medium) Dasiy UI can be installed like any other dependency. It gives you bootstrap-like classes to use with your HTML. This makes it a lot cleaner because there are fewer classes present. It gives you multiple themes and is very to use. <br/> Link - [Daisy UI](https://daisyui.com/) <br/><br/> # 5 - Tailwind Mobile ![Tailwind Mobile](https://pbs.twimg.com/media/E_3p-d4UcAcAeyE?format=jpg&name=medium) This provides you with neat components specifically for mobile development. It has both ios and material components for React, Vue, and Svelte. The docs are there just for React yet. Also good to go with cordova and capacitor. <br/> Link - [Tailwind Mobile](https://tailwind-mobile.com/) <br/><br/> # 6 - VueTailwind ![VueTailwind](https://pbs.twimg.com/media/E_3VOI9VcAsUfEs?format=jpg&name=medium) You can use this as a dependency in your Vue project. It provides you custom vue components made with tailwind, which are customizable and have their own props too. You can even build a custom theme before installing it. <br/> Link - [VueTailwind](https://www.vue-tailwind.com/) <br/><br/> # 7 - Kutty ![Kutty](https://pbs.twimg.com/media/E_3Ws-KVEAcoyof?format=jpg&name=medium) It is a tailwind plugin for building web applications. It has a set of accessible, reusable, and clean components. <br/> Link - [Kutty](https://kutty.netlify.app/components/) <br/><br/> # 8 - Lofi UI ![Lofi UI](https://pbs.twimg.com/media/E_3X5LYUYAcKiOJ?format=jpg&name=medium) It's a little different, you can even get graphs and calendars here. <br/> Link - [Lofi UI](https://lofiui.co/) <br/><br/> # 9 - Kometa UI Kit ![Kometa UI Kit](https://pbs.twimg.com/media/E_3ZKZPVQAwda5H?format=jpg&name=medium) Gives components and sections like blogs, stats, and more. It also provides the code in Vue and React along with HTML. <br/> Link - [Kometa UI Kit](https://kitwind.io/products/kometa/components) <br/><br/> # 10 - Treact ![Treact](https://pbs.twimg.com/media/E_3adhpVEAgjfxU?format=jpg&name=medium) Treact gives you responsive pages and components built with Tailwind for React! <br/> Link - [Treact](https://templatana.gumroad.com/l/QaruQ) <br/><br/> # 11 - gust ui ![gust ui](https://pbs.twimg.com/media/E_3b7eLVgAgGqSZ?format=jpg&name=medium) It has a different theme than what we usually see in other tailwind kits. It looks very clean and easy to use with a number of pages, elements, and components. You get the code in react along with HTML. You can even check the different screen looks on the website. <br/> Link - [gust ui](https://www.gustui.com/) <br/><br/> # 12 - Meraki UI ![Meraki UI](https://pbs.twimg.com/media/E_3cvkVVcAc4w4g?format=jpg&name=medium) This kit gives you a few important components which are responsive. The dark mode here is impressive. <br/> Link - [Meraki UI](https://merakiui.com/#main) <br/><br/> Here is a Twitter thread on the same: %[https://twitter.com/arorachakit/status/1440575554722271236] Thank you for reading! I hope it was useful.

1 week of using Github Copilot

1 week of using Github Copilot

Recently a lot of people got access to Github Copilot, I was one of those who got it. I was on the waiting list for a very long time, and trust me I was dying to use it after all the good stuff already heard. Github Copilot is an AI pair programmer developed by Github and OpenAI. The deep neural network model for Copilot is trained on public code repositories on GitHub. It helps you by giving suggestions for the code you might wanna write. I am seriously amazed by the performance, it is just amazing. It is really smart and exactly knows what do you wanna write most of the time. You can just write a comment, hit enter and it will suggest you the code. I am using it for over a week now and I find it really great. It picks up your coding style, your variables, and your way of writing. So, I was entering mock data into the database with a script. And I was hardcoding the data for it. I was making objects for the entries. ![pexels-andrea-piacquadio-3760809.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1636220257324/eReFid3I5.jpeg) I was inserting those objects to MongoDB. Then using the inserted ones for further data. And I was shocked at how fast Copilot picked everything. After a few lines, I wasn't writing. I was just hitting tab, I was changing the variables name a few times. But that didn't bother me. The other thing is that it was evening changing the numbers, if I had a cost somewhere for a certain size and I tried to change the size in another object, it automatically changed the cost. It was even suggesting me the units. I was writing some pipelines for MongoDB, and I was using FastAPI. It even suggested to me the complete pipelines, with insertion, retrieval, and whatnot. This made me cry, haha! The crazy thing is there were situations that require me to Google usually for the syntax because I don't remember the syntax but, it suggested me such a good piece of code using my variables and my style that didn't Google. This is such a great thing, It even helped me with improving my own code, the suggested code was great and after a few suggestions, I had so much faith that I wasn't even checking the code thoroughly. I trust Github Copilot now and it is seriously reducing my efforts and making my work significantly faster. Now the question arises, if this is a good thing or not. This is tricky, but I think it is good. People can have a lot of different perspectives. Some say creativity might end, that can happen. I am not really sure. But one thing I am certain of is, it is a beginning of a new era. I wasn't believing this before using it, but I feel the power it has after using it. There are great things coming in near future and the future is bright! Thank you for reading! Let me know if you liked it.

JWT, access token, and refresh token

JWT, access token, and refresh token

There is always a need for Authentication when building an application. And if you're a developer, you know how painful the authentication part can get. It takes a significant amount of effort to build this part if you're starting from scratch. Also, it is a little difficult to understand how it works at once. I still struggle every time I try to implement it. Let's look at a way of implementing an access token and refresh token system using JWT. JWT stands for JSON web token, and it consists of three main parts. A header, payload, and a signature. For a valid one, we need these three parts to be present in it. Usually, these tokens are created by using a library, be it for javascript or python. Generally, during the creating of one token, we need to specify three things - The payload, a secret key, and the algorithm to create the token. The payload is the data we need in the token. There are a few general keys like 'sub', 'iat' (issued at), etc but it can be customized. We need to specify the algorithm because there can be multiple of those, which can be used for the creation. The important thing is the secret key. Anyone can create a token with the same payload and algorithm. So to verify that it is created by our server, we need the key. Now, let's see how the access token and refresh token works. So, once the user login we create a jwt as discussed above which works as an access token. It contains the user information in the payload. We send this to the front-end and store the access token there. It can either be stored in localStorage or your store (redux, vuex or whatever). Now we send this token along with the requests to the backend, and for every secured route (the one which we need the user to be logged in) on our backend, we check this access token on our backend. We check the expiry for that token on the frontend itself before sending the request to the backend. It can be set by us while creating. This part can be customized. This is generally intercepting your own request and checking. The access token is also added to the request in this step. Now, for checking this access token on the backend, as mentioned before we decode it with the help of our secret key. Now if everything goes well, we allow that request. If it doesn't that means the token has been tampered with. We throw the user out in this case. A refresh token is also created during the login, but we don't usually create a jwt for that. You can create it by any library or even use a simple uuid to create a unique token string. We store this along with the expiry of the refresh token in our database along with the user. This refresh token is also sent to the frontend and usually store as a cookie, so it is by default sent to the backend with the requests. If the access token is expired (during the interception), we use this refresh token and validate with what is stored in our database. We send the request to a refresh route created by us to check if it is a user's refresh token and not expired. If it is not expired we generate a new access token for that user as we did during the login and the process is the same again. If it is expired, we log the user out. So, most of the time we are using the access token to verify if the user is authenticated. But if the access token is expired, we use our refresh token to create a new access token. There can be multiple approaches to this according to the need and comfort. ### Thank you so much for reading, I hope you liked it. If you have any questions or suggestions, please leave a comment below or feel free to reach out.

What and Why - Moment.js?

What and Why - Moment.js?

Moment js is a very significant javascript library and you're definitely gonna use it! If you're a javascript developer, this is for sure. Let's take a look at what this library does and why is it important. Moment js is used to parse, validate, manipulate and display date/time. In short, it's the way you can play with dates in javascript. Whenever I start a new project I make sure to install moment. It solves the problem of reading different sorts of stamps and display accordingly. You can download moment directly if you're not using any package manager or you can use yarn or npm for adding it to the dependencies. It gives a lot of things to play with. Let's look at a few of them. You can import moment like other dependencies and use it accordingly. Moment js creates a wrapper for the Date object. To get this wrapper object, simply call "moment()" and this will give a new object with the current date config. You can pass different sorts of parameters to parse and get the object. For example moment("2021-10-25"), or maybe something like moment("10-25-2021", "MM-DD-YYYY") and so on. There are different use cases for every time. You can even parse the timestamps. Now to get the information out of that object, there are a lot of things we can do. You can access even the milliseconds if in the object. Then there obviously day, month, hour, day and so on! You can even manipulate the dates, which means that you can add or subtract the dates. Maybe add delivery time to current time and see by which time the food is gonna get delivered. This is just a use-case but this should give an idea of how powerful and useful it is. We also have a lot of different ways in which we can display od see the dates. As there are different date formats and different use cases there are different ways. Maybe you want to show 25th October 2021, or October 25th, and so on! We can even show the time passed, for example in a chat application we need to show when the recent message is delivered - a minute ago, a few seconds ago, and so on. Or in any other application where you wanna see the files uploaded time, as in a day ago, 10 days ago, and so on! Moment can also be used for performing other operations which might be useful, like calculating the difference between 2 dates. There can be a lot of places where this and similar stuff is useful. Moment also helps in querying. There are different methods available to do this. For example isBefore, isAfter, isLeapYear, and so on! The names are self-explanatory. You can compare dates and use these kinds of different methods to get the other required information. Moment can also help with the locale, you can change the dates you're using and get every other thing according to the country and timezone! This is a great advantage when you're building for multiple places. There is a lot more! So make sure to check the documentation. ### Thank you so much for reading, I hope you liked it. If you have any questions or suggestions, please leave a comment below or feel free to reach out.

What is docker and why everyone is using it?

What is docker and why everyone is using it?

What is docker and why everybody is using it? A thread. "But it works on my machine!" We all heard this, and we all face this problem in our daily lives. There are times when a few or lot of people are working on an application, and it often happens that it works on a machine and not on the other one. Setting up an application on a new machine is always a pain, there are so many things involved. Even during running the tests, it happens a lot. This is the easiest and most used way to explain what docker is and how it is beneficial. I will try and explain it without using a lot of technical terms. Docker is an open-source containerization platform. Docker uses a thing called containers. This is completely different than a Virtual Machine. A Virtual Machine comes with its own Operating System. And for each app, you need a new virtual machine. On the other hand, docker containers can use the same host's kernel. A container is something that is just bundled up with all the requirements for your application and can be shipped anywhere. It's an isolated environment for your application. It is a form of virtualization but has a lot more benefits. You can literally run it on any machine! The other important thing to understand is docker image. A way to understand it is like classes and objects, where a class is an image and an object is a container. The images are used to run containers. Docker hub contains a lot of common images, you can even build your own. Let's take an example to see what and how it all works. Consider you decided to go with MongoDB for your existing application. Now you will need to download and install MongoDB. You can set it up with a database and a password including some collections. Now the other thing you can do is pull up the image for MongoDB from docker hub, and run a container with that using the same configurations you can do for a normal one. Now, this way you have MongoDB running on your machine without even installing it. This comes to a lot more significance when you need multiple things like MongoDB. Maybe you need redis, a python env, nginx, and a SQL DB too! What you can do is, take all the images and build containers. Docker gives you a tool named docker-compose to build and start multiple containers at once. You can define all the config in one file mentioning what all you need and booom! Use that anywhere. Use that on any machine and you don't need to do messy installation every time. Docker gives a lot more features like volumes, networks, etc. Volumes are so that you can have a specific place at your machine to store your data. In our case may be to store the data for mongoDB, so that whenever we stop, delete or make a new container we can use the same data. Docker allows you to even make different networks. So that one container can communicate with the other one easily. You can have multiple networks for a particular application regarding the needs. Docker is a great solution. It can be a little tricky at the start but is of a great use. A lot and lot of companies and projects nowadays use docker to make everything better and easy!. It's very exiciting. And as always - You cannot avoid it for long! ### Thank you so much for reading, I hope you liked it. If you have any questions or suggestions, please leave a comment below or feel free to reach out.

Why javascript is a badass?

Why javascript is a badass?

Javascript has been making the web crazy and is a very essential part of our daily lives. It is already doing great stuff for a long time. If you are a web developer you have probably used nothing else more than javascript. But it is not limited, the future is very interesting. Javascript was not meant to do all the stuff which we see it doing. It was just supposed to run in the browser. Frontend development itself evolved a lot. All the cool frameworks we see use a lot of javascript. And if you're a frontend developer, it's everything for you! Nowadays, we see javascript running on the server-side. You probably know about node, which is around for a while now. Node helped developers to just know one language and code both frontend and backend. You can easily be a full-stack developer if you know javascript. And this is a lot in demand. MERN, MEVN, and MEAN are quite popular and you can see a lot of people doing those. This has become the new basic, and we can see many major companies hiring for this. A huge number of projects depend on javascript! This is something that is very common, but there is a lot more happening with javascript. This is all because of the popularity it gained over the years. Javascript is not limited to just the web. You can do a lot and lot more now! Native Development: There are a lot of frameworks evolving that allow you to develop native android and ios applications. React native and vue native are examples of that. This makes it very easy for a web developer to even switch to native anytime. You can even convert an existing web application to a native one with the help of Cordova and Ionic framework. This is really interesting and a lot of fun. You don't need to know java or Kotlin for making an Android or IOS app! AR/VR: There is a lot going in this domain, it has been in hot topics for a while. And yes, it is possible with javascript. There is a lot of improvement happening every moment. The support is increasing day by day. So if you know javascript, you can probably try this too! ML/AI: We have come far in this domain. TensorFlow js is a great and a very popular library for Machine Learning in javascript! There is a lot of new stuff happening in this domain as well, and very frequently. It seems like a person can do many things and explore other popular domains with javascript. It's great to learn and again the scope is not limited. With all this happening, it can be assumed that the future of javascript is going to be great and very exciting. ### Thank you so much for reading, I hope you liked it. If you have any questions or suggestions, please leave a comment below or feel free to reach out.