In this article, we will be creating a rich text editor with React and Quill. Our text editor will be able to add different headers, provide different colors to the texts, add subscript and superscript, indent or un-indent the text, and many more. You need to have a basic understanding of React to follow along with this article.
This is what our app will look like:
So, let’s get started.
Let’s hop over the terminal and write the following command:
In this article, we will create an authentication backend using Django-graphene.
To create the authentication system, we will be using a library called django-graphql-auth. This library helps us with functionality like registering a new user, verifying the email address of the newly signed up user, changing the user email address, changing the user password, and many more.
You need to know basic GraphQL, Python, and Django to create the authentication system that we are building.
We will begin by creating a virtual environment. To create the virtual environment, we will be using
virtualenv. To install
virtualenv you can follow the…
In this article, we’ll learn how to send email using python. We’ll be using the built-in library called smtplib to perform this task. It’s going to be pretty simple!
We need some credentials to send the email, of course. So let’s first deal with that part okay? Great! If you’re using yahoo mail or Gmail, you need to generate a separate password for security reasons.
New to React? Curious to know how to get up and running with the library and want to make use of the latest features. Then this Todo app will be a great starting point for you!
This is what our final app looks like:
In this article, we’ll create a minimal URL Shortener in Node.js. We’ll be using MongoDB as the database to store the URL.
Let’s now start working!
Let’s fire up the terminal and write the following command:
npm init -y
Let’s install some of the packages we need. For that, fire up the terminal and write the following command:
npm i dotenv express mongoose shortid validator
With this command, we’ve installed
dotenv package helps us to access .env files. We’ll be using the
shortid package to generate a short id for our URL. …
To put this in place, we’ll be using a data fetching tool called SWR. If you don’t know how to use SWR, you might want to take a look at this article first.
We won’t spend our time creating the backend for our app here. I have already written code for the backend, we’ll use that, okay?
So, let’s fire up our terminal and write this command:
git clone https://github.com/aa1aac/next-auth.git
This will clone the git repo where I’ve posted the code for the backend for our authentication. After cloning the repo, let’s install the packages we need. …
You need to have a basic understanding of React to follow along this article.
SWR is a lightweight, backend agnostic library developed by Vercel which allows us to fetch, re-fetch and cache the data with the help of React Hooks.
The name SWR is derived from “stale-while-revalidated.” When we ask SWR to make a request, it first provides us with cached data(stale) and then makes the request (revalidate), and finally provides an up to date data.
These are some of the features of SWR:
In order to follow along this article, you need to have a basic understanding of express and node.js.
JWT stands for JSON Web Token. It is a compact and secure way of transmitting JSON data. JWT can be easily verified because it is signed digitally. JWT can be used for authorization or exchanging information.
In this article, we will be using JWT for authorization.
Open up the terminal in main project directory and write the following command:
npm init -y
-y flag here will help to set every value to default.
Let’s now install the packages we need. For…
This is a step by step guide to help you create email/password authentication with passport.js.
In order to follow along this post, you need to have a basic understanding of Node.js, Express.js and MongoDB.
According to Passport’s website, passport is defined as follows:
“Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped into any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more.”
Yes, passport is a middleware. It is flexible and modular in a sense that we can install different strategies that help…
In this article, we will create a small app in React using a Hackernews API
This article assumes that you have a basic understanding of React and bootstrap.
Context API is an API offered by React to help in state management. It offers us with similar features as redux.
If we were to pass the value of a state from parent component to other children component, we would have to pass the data through props. But, this process can get difficult as the number of components increases. In order to make the task of sharing data among the components easy…