Category: Web Development

  • Typescript – Step by Step Guide to setup with React

    If you’re a React developer, you might have heard of TypeScript, a popular programming language that adds static typing to JavaScript. Using TypeScript with React can help you write more maintainable code, catch errors earlier, and improve your overall development experience. In this guide, we’ll go through the step-by-step process of setting up a React […]

  • Step-by-Step Guide to Setup Typescript with Vue 3

    If you’re planning to use Vue3 with Typescript, there are a few steps you need to follow to set up your project. In this blog post, we’ll guide you through the process of setting up Typescript with Vue3 using Vite. Prerequisites Before we begin, make sure you have the following installed on your system: Step […]

  • Learn Typescript – A Step-by-Step Guide

    keywords: learn typescript fast, typescript coding tutorial, online tutorial for typescript) A Comprehensive Step-by-Step Guide on How to Learn Typescript Quickly Are you looking to learn Typescript quickly? If so, you’ve come to the right place! In this tutorial, we’ll provide you with a comprehensive guide that will help you learn Typescript in no time. […]

  • Creating a Reusable Button Component in React, Typescript and Tailwind

    Learn to build reusable button component using react, typescript and tailwindcss

  • Configuring Typescript with React

    In this part, let’s setup typescript in our React client app. Step 1 : Install Here’s what each package is for : typescript – the library that converts Typescript files (file extension with .ts or .tsx) in to javascript. ts-loader – webpack loader that integrates typescript in to webpack. webpack uses this loader to help […]

  • Creating REST APIs using Node, Express, Typescript, Mongodb

    In the last tutorial, we were able to setup our client using React. In this part, we gonna be focusing on the backend/server building the API’s for our Todo App. Setting up Mongodb Let’s install lerna add ‘mongoose’ –scope ‘@fullstackopenjs/server’ lerna add -D ‘@types/mongoose’ –scope ‘@fullstackopenjs/server’ This will install the dependencies In order to use […]

  • Setting up React Client from scratch

    In the last tutorial we completed, setting up tooling for our node express typescript server, so let’s now focus on building our client app using react and typescript. creating our react app base If you are a beginner with react and don’t want to setup react manually, you can go with this command, that will […]

  • Configuring Tooling using ESLint, Editorconfig, Prettier and Husky

    Setup EditorConfig : EditorConfig is very helpful, as it can override your current vscode settings with the settings defined in the project (so all the developers has same set of vscode configurations). To make it work, We need to install this extention https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig for Vscode EditorConfig This extension is activated whenever you open a new […]

  • Setup Code Linting in VSCode for Express Typescript Server with Eslint

    Configuring ESlint for our Express Typescript Project with VScode When setting up eslint for a project we usually have 3 options (choose any one ): 1. Install Eslint globally We will install eslint dependency globally (means it will be available for all projects on your machine, cool!) using npm using yarn Run eslint 2. Install […]

  • Setting up a custom logger for node express typescript server

    In the last tutorial, we learnt how to setup typescript to a node-express app. Let’s move further, and setup a custom logger for our node-express-typescript app, so that whenever we want to log something in our terminal, we have pretty colored and formatted outputs. We don’t want console.log’s anymore in our application code. So let’s […]