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 […]