DEV Community: Nitin Ranganath

I built a social network for developers to showcase their projects

Nitin Ranganath — Mon, 20 Sep 2021 11:45:13 +0000

TL;DR: Driwwwle is an open-source social network to showcase your projects with like, comments, notifications, profiles and real-time chat.

As developers, we like to look out for new and exciting projects or products. However, finding them is not the easiest task out there. Sure, you can scroll through GitHub's trending section to find a lot of awesome products but what if it is closed source?

Things aren't so hard for designers though. They can visit a website like Dribbble or Behance and enjoy the thousands of creative designs easily. What if we had something like Dribbble, but for developers?

Introducing Driwwwle

Driwwwle is a social network for developers to showcase their projects or products with other developers across the globe. Just like any other social network out there, you can like posts, save them privately, leave a comment and follow your favorite developers to build your own personal feed.

Some of the other features include:

⚡ Server-side rendering with Next.js
🍪 Cookie-based authorization with JSON web tokens
📜 Infinite scrolling feed with React Query
🖼️ Cloud image upload with Cloudinary
❤️ Like, save, and comment on posts
💬 Realtime chat with Socket.io
🤝 Follow developers and build personal feed

and a lot more..

Sounds interesting? I would love for you to create an account on Driwwwle and post your awesome creations.

Did I mention that Driwwwle is also open-source? You can browse through the code on this GitHub repo:

itsnitinr / driwwwle

The social network for developers. Discover creative websites and build a community.

Driwwwle

The Social Network for Developers

Features

⚡ Server-side rendering with Next.js
🍪 Cookie-based authorization with JSON web tokens
📜 Infinite scrolling feed with React Query
🖼️ Cloud image upload with Cloudinary
❤️ Like, save and comment on posts
💬 Realtime chat with Socket.io
🤝 Follow developers and build personal feed
and a lot more..

Running Locally

Clone this repository and install dependencies by running:

npm install
#or
yarn install

Create a new file named config.env with the following environment variables in the root of the project folder:

PORT = 
MONGO_URI = 
JWT_SECRET = 
CLOUDINARY_CLOUD_NAME = 
CLOUDINARY_API_KEY = 
CLOUDINARY_API_SECRET = 
SENDGRID_API_KEY = 
SENDER_EMAIL =

Create a new file named .env.local with following configuration:

NEXT_PUBLIC_BASE_URL = http://localhost:3000

For development mode, run:

npm run dev

For production mode, run:

npm run build
npm start

Visit http://localhost:3000 or your custom port environment variable to view the app.

Screenshots

Landing Page	Search

Personal Feed

…

View on GitHub

Some more screenshots

A picture speaks a thousand words but more importantly, I hope it excites you enough to give Driwwwle a try. Here are some screenshots, thanks to MockupBro for the awesome mockups.

Suggestions and feedback welcome!

Driwwwle is in its initial stages at the moment and I would highly appreciate any feedback, suggestions and questions you would like to provide. What features would you like to see? What seems unnecessary or what's causing difficulties?

Thank you for your time and I await to see your posts on Driwwwle soon. Until then, have a nice day!

5 NPM Packages to Secure Your Node.js Backend in 5 Minutes

Nitin Ranganath — Wed, 09 Jun 2021 13:59:17 +0000

When you start to focus on the performance and security of your backend alongside the other features, you know that you're growing and maturing as a developer. It goes without saying but having some sort of security measure against common attacks is essential, even if it's just a hobby project.

If you're new to security or want to quickly get started with some basic protection, these 5 NPM packages will help you get started in just a few minutes. The best part about these packages is that all you have to do is just install them and use them as middleware. It's that easy!

In a hurry or just need the list of packages? Here are the 5 NPM packages that I'll be going over:

Package Name	Package Link
helmet	NPM Link
xss-clean	NPM Link
hpp	NPM Link
express-mongo-sanitize	NPM Link
express-rate-limit	NPM Link

Helmet

What it does: Sets security-related HTTP response headers to protect against some well-known web vulnerabilities.

What does it protect against: Cross-site scripting attacks, cross-site injections, clickjacking, MIME sniffing and targeted attacks towards Express servers by disabling the X-Powered-By header.

How to use it:



npm install helmet



const app = require('express')();
const helmet = require('helmet');

// Using helmet middleware
app.use(helmet());

app.listen(1337);

helmetjs / helmet

Help secure Express apps with various HTTP headers

Helmet

Help secure Express apps by setting HTTP response headers.

import helmet from "helmet";

const app = express();

app.use(helmet());

Helmet sets the following headers by default:

Content-Security-Policy: A powerful allow-list of what can happen on your page which mitigates many attacks
Cross-Origin-Opener-Policy: Helps process-isolate your page
Cross-Origin-Resource-Policy: Blocks others from loading your resources cross-origin
Origin-Agent-Cluster: Changes process isolation to be origin-based
Referrer-Policy: Controls the Referer header
Strict-Transport-Security: Tells browsers to prefer HTTPS
X-Content-Type-Options: Avoids MIME sniffing
X-DNS-Prefetch-Control: Controls DNS prefetching
X-Download-Options: Forces downloads to be saved (Internet Explorer only)
X-Frame-Options: Legacy header that mitigates clickjacking attacks
X-Permitted-Cross-Domain-Policies: Controls cross-domain behavior for Adobe products, like Acrobat
X-Powered-By: Info about the web server. Removed because it could be used in simple attacks
X-XSS-Protection: Legacy header that tries…

View on GitHub

XSS-Clean

What it does: Sanitizes user input coming from POST request body (req.body), GET request query (req.query) and URL parameters (req.params).

What does it protect against: Cross-site scripting / XSS attacks.

How to use it:



npm install xss-clean



const app = require('express')();
const xssClean = require('xss-clean');

// Protect against XSS attacks, should come before any routes
app.use(xssClean());

app.listen(1337);

jsonmaur / xss-clean

Middleware to sanitize user input

Announcement

This library has been deprecated. The implementation is quite simple, and I would suggest you copy the source code directly into your application using the xss-filters dependency, or look for alternative libraries with more features and attention. Thanks for your support.

Node.js Connect middleware to sanitize user input coming from POST body, GET queries, and url params. Works with Express, Restify, or any other Connect app.

How to Use

npm install xss-clean --save

const restify = require('restify')
const xss = require('xss-clean')

const app = restify.createServer()

app.use(restify.bodyParser())

// make sure this comes before any routes
app.use(xss())

app.listen(8080)

This will sanitize any data in req.body, req.query, and req.params. You can also…

View on GitHub

HPP

What it does: Puts the array parameters in req.query and/or req.body asides and just selects the last parameter value to avoid HTTP Parameter Pollution attacks.

What does it protect against: Bypassing input validations and denial of service (DoS) attacks by uncaught TypeError in async code, leading to server crash.

How to use it:



npm install hpp



const app = require('express')();
const hpp = require('hpp');

// Protect against HPP, should come before any routes
app.use(hpp());

app.listen(1337);

analog-nico / hpp

Express middleware to protect against HTTP Parameter Pollution attacks

HPP

Express middleware to protect against HTTP Parameter Pollution attacks

Why?

Let Chetan Karande's slides do the explaining:

...and exploits may allow bypassing the input validation or even result in denial of service.

And HPP solves this how exactly?

HPP puts array parameters in req.query and/or req.body aside and just selects the last parameter value. You add the middleware and you are done.

Installation

This is a module for node.js and io.js and is installed via npm:

npm install hpp --save

Getting Started

Add the HPP middleware like this:

// ...
var hpp = require('hpp');
// ...
app.use(bodyParser.urlencoded()); // Make sure the body is parsed beforehand.

app.use(hpp()); // <- THIS IS THE NEW LINE

// Add your own middlewares afterwards, e.g.:
app.get('/search',

…

View on GitHub

Express Mongo Sanitize

What it does: Searches for any keys in objects that begin with a $ sign or contain a . from req.body, req.query or req.params and either removes such keys and data or replaces the prohibited characters with another allowed character.

What does it protect against: MongoDB Operator Injection. Malicious users could send an object containing a $ operator, or including a ., which could change the context of a database operation.

How to use it:



npm install express-mongo-sanitize



const app = require('express')();
const mongoSanitize = require('express-mongo-sanitize');

// Remove all keys containing prohibited characters
app.use(mongoSanitize());

app.listen(1337);

fiznool / express-mongo-sanitize

Sanitize your express payload to prevent MongoDB operator injection.

Express Mongo Sanitize

Express 4.x middleware which sanitizes user-supplied data to prevent MongoDB Operator Injection.

What is this module for?

This module searches for any keys in objects that begin with a $ sign or contain a ., from req.body, req.query, req.headers or req.params. It can then either:

completely remove these keys and associated data from the object, or
replace the prohibited characters with another allowed character.

The behaviour is governed by the passed option, replaceWith. Set this option to have the sanitizer replace the prohibited characters with the character passed in.

The config option allowDots can be used to allow dots in the user-supplied data. In this case, only instances of $ will be sanitized.

See the spec file for more examples.

Why is it needed?

Object keys starting with a $ or containing a . are reserved for use by MongoDB as operators…

View on GitHub

Express Rate Limit

What does it do: Used to limit IP addresses from making repeated requests to API endpoints. An example would be to rate limit an endpoint that is responsible for sending password reset emails, which can incur additional fees.

What does it protect against: Brute force, denial of service (DoS) and distributed denial of service (DDoS) attacks.

How to use it:



npm install express-rate-limit



const app = require('express')();
const rateLimit = require('express-rate-limit');

// Restrict all routes to only 100 requests per IP address every 1o minutes
const limiter = rateLimit({
    windowMs: 10 * 60 * 1000,    // 10 minutes
    max: 100                     // 100 requests per IP
});
app.use(limiter);

app.listen(1337);

express-rate-limit / express-rate-limit

Basic rate-limiting middleware for the Express web server

`express-rate-limit`

Basic rate-limiting middleware for Express. Use to limit repeated requests to public APIs and/or endpoints such as password reset Plays nice with express-slow-down and ratelimit-header-parser.

Usage

The full documentation is available on-line.

import { rateLimit } from 'express-rate-limit'

const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    limit: 100, // Limit each IP to 100 requests per `window` (here, per 15 minutes).
    standardHeaders: 'draft-7', // draft-6: `RateLimit-*` headers; draft-7: combined `RateLimit` header
    legacyHeaders: false, // Disable the `X-RateLimit-*` headers.
    // store: ... , // Redis, Memcached, etc. See below.
})

// Apply the rate limiting middleware to all requests.
app.use(limiter)

Data Stores

The rate limiter comes with a built-in memory store, and supports a variety of external data stores.

Configuration

All function options may be async…

View on GitHub

With these 5 NPM packages, you can make your Node.js + Express.js application much more secure in just 5 minutes. All of the packages above are extremely easy to use, just export and use as a middleware.

What security precautions do you take? Or did I miss any of your favorite packages? Let me know in the discussion below and I'll be happy to hear your thoughts.

I Built a VSCode Inspired Developer Portfolio

Nitin Ranganath — Sat, 08 May 2021 11:06:26 +0000

The Idea & Inspiration

Truth be told, I've lost count of the number of amazing portfolio websites I've visited and been in awe of. I would try to take some inspiration from them and recreate them in my own way for my portfolio. However, after working on it for a few hours, I would come across a different design or idea and hop onto that instead.

Due to this cycle, I have over 5-6 incomplete portfolio websites on my laptop, each having a different design. I love the creativity of some websites but I just can't make up my mind and stick to one design. So, what caught my eye this time? This amazing Ubuntu-themed portfolio website.

I liked the idea so I thought of what tools do developers use. And what could be a better choice than the text editor most of us write code on: Visual Studio Code.

VSCode-Themed Portfolio

If you're interested in exploring the project yourself, there's the link to it: http://vscode-portfolio.vercel.app/

itsnitinr / vscode-portfolio

A VSCode themed developer portfolio built using Next.js

vscode-portfolio

A Visual Studio Code themed developer portfolio website built with Next.js and deployed on Vercel.

Features Roadmap

Themes and customizations
- GitHub Dark (default)
- One Dark Pro
- Dracula
- Ayu
- Nord
Interactive custom terminal

For other features and themes suggestions, please open an issue.

Environment Variables

For fetching your articles from dev.to, create an .env.local file inside the project directory. Check the .env.local.example file for more information.

Running Development Server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

All VSCode related components can be found in the components folder. To change the content of the portfolio, check out the pages folder. To add or remove pages, modify components/Sidebar.jsx and components/Tabsbar.jsx.

Next.js Resources

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can…

View on GitHub

This is a responsive and server-side rendered portfolio website built with Next.js, one of the technologies that I mentioned in my "Technologies I'll be Learning in 2021" post.

Technologies That I'll Be Learning in 2021 as a MERN Stack Developer (with resources)

Nitin Ranganath ・ Jan 5 '21

#webdev #typescript #react #node

Right from the layout to appearance, I'm aiming to build a portfolio website that looks and feels like Visual Studio Code. This includes adding some cool stuff like themes, extensions, an interactive terminal, and probably more.

Can You Help Me?

As you might've noticed, most of the pages are still empty because I wanted some feedback on the layout and VSCode aspects of the design. What type of design would you like to see for the other pages? What other features would you like to see in this project? I would highly appreciate if you leave a feedback, criticism or suggestion of any kind.

The best part of the project is that since the other pages are yet to be built, you can fork the project and implement your own design which can help you stand out from the original project.

If you're interested in contributing, the project is open-source and I would appreciate any sort of help. Otherwise, you can share it or star the repo, if you want to of course.

5 Key Takeaways from my First Freelance Project

Nitin Ranganath — Thu, 25 Mar 2021 06:00:58 +0000

Getting your first client as a freelancer is usually a giant stepping stone that a lot of the developers, especially the newer ones, look forward to. The satisfaction and confidence you receive after successfully building an actual product that might be used by hundreds or even thousands of users is unmatched and makes all your hard work worth it. I'm grateful to have been on that path recently after building an e-commerce platform for a PCB manufacturing startup and I'd love to share some of my insights and tips that could help you make the most out of your first freelance job. Without further ado, here are five of my key takeaways:

Don't Underestimate Yourself

While this may also be interpreted as trusting in yourself and the skills you've acquired in the past few months or years, what I really mean to convey is that don't undersell yourself just because you're new. It is undeniable that you may lack professional experience as you're beginning but that does not make you any less professional in terms of your code and the efforts you'll be putting in. Yes, you may be paid lesser than an experienced freelance developer and that's totally fine. It may be difficult to strike the perfect deal but make sure the project you're taking on is worth your time and efforts.

From my experience, the excitement of learning and implementing new things was more fruitful to me more than the paycheck. Think over the project requirements, devise a plan, and don't be hesitant in asking for what you feel you deserve. That being said, pay emphasis on the things you'll be learning along the way but don't let yourself be exploited just to get that client you've been waiting for.

Lay Down the Deliverables

I find it really essential to let your client know exactly what you'll be providing them in the beginning itself to avoid unexpected surprises later. Create a concise document, write down the features and functionalities you'll be implementing and share them with your client. This is something I regret not doing. Few weeks into the project, I was asked to implement some features I wasn't expecting.

Albeit a great learning experience, it helps to know these things in advance to properly plan and execute them to the fullest of your capabilities. Moreover, you can keep this document as a reference for yourself to keep track of the things you've completed and yet to do.

Break Down The Project Into Milestones

You must've heard quite a lot about breaking down tasks into smaller chunks or subtasks. The same principle applies here. This makes the project less overwhelming and less intimidating, allowing you to focus on a particular task at any given time. A simple example would be to dissect the project you'll be building into features and functionalities like authentication and further breaking it down into frontend (pages, components, state management) and backend (routes, controllers, models) tasks.

You can also use a project management tool like Trello or Notion to keep track of tasks to do, in progress, to design, to test, and whatever else feels appropriate. Combine all the related tasks into milestones. If possible, you can structure your payouts in such a way that you get paid a fraction of the total amount after achieving each milestone.

Communication, really, is the key

The heading seems pretty self-explanatory for this one. However, people tend to undervalue this particular statement. Right from the start, I maintained professional but friendly communication with my client on an instant messaging platform. In case you're skeptical about sharing your phone number, platforms like Discord, Telegram, or Slack are perfect for such use-cases. Even a simple e-mail communication is much better than no or rare communication between you and your client.

The reason I included this as a key takeaway is that this communication helped me put worth my own ideas, implementations and even revise my client's plans in a better way. This shows that you have a positive attitude and interest towards the projects and clients will genuinely appreciate this. Moreover, the chances of getting further opportunities and referrals from them are pretty high too.

Don't Shy Away From Asking for a Testimonial

Once you complete the project successfully, I would highly recommend you ask your client for their experience working with you and a small testimonial regarding the same. I'm sure that most of the clients would gladly agree to it. **Having a well-written and genuine testimonial alongside the projects section of your portfolio enhances it by a great margin **and leads to more opportunities in the future. It's also great for identifying the areas in which you can further improve.

More than adding credibility to your skills and portfolio, receiving positive feedback truly sparks happiness for the hard work you've been putting in for weeks or months. And in the end, being able to help the people around you through your skills and knowledge might just be what truly matters.

So that was some of the lessons I've learned from my first freelance project. Did I miss out on anything? Want to share your first freelance experience or leave some feedback? Drop a comment down below or tweet it to me.

Build A Crypto Discord Bot using Discord.js

Nitin Ranganath — Mon, 08 Mar 2021 04:41:41 +0000

Discord is one of the best platforms for developers to communicate for multiple reasons: the ability to create your own community (or server), talk to others using voice channels, and overall an amazing instant messaging platform. However, with the help of bots, the experience just becomes way more interesting and easier thanks to the automation and features these bots provide. There's a bot for pretty much everything. May it be for helping you manage your server or just sending you memes.

In this article, we'll be building our own Discord bot using discord.js which will allow us to program our own bot using NodeJS. If you're not familiar with NodeJS or JavaScript in general, I'd highly encourage you to check those out first so that you can follow along with ease. Regardless, I'll still be explaining all of the code I write for your understanding. Let's get started!

itsnitinr / crypto-discord-bot

A discord bot that fetches cryptocurrency prices and news.

crypto-discord-bot

A discord bot that fetches cryptocurrency prices and news.

Command	Description
!ping	Checks if the bot is online and working
!price <vs_currency>	Fetches the price of a crypto with respect to another currency or cryptocurrency
!news	Fetches the latest news related to cryptocurrency
!help	Replies with all commands available and their description

To run the bot:

Clone the repo
Create an .env file and add DISCORD_BOT_TOKEN and NEWS_API_KEY
Run the bot using node bot

Credits

DiscordJS CoinGecko News API

View on GitHub

What we're building

Today, we'll be building a simple Discord bot that will fetch the price of various cryptocurrencies to get familiar with discord.js. But you can feel free to play around and build something else as well since the concepts will remain the same. I'll be using an API to fetch the prices so you can use a different API for a completely different purpose.

Our aims for today will be:

Register our bot to Discord and get the bot token
Add a command to ping our bot and check if it’s working
Add a command to our bot which will fetch the price of a cryptocurrency with respect to another currency or cryptocurrency
Add a command to get the latest news related to cryptocurrencies

Getting Bot Token from Discord

The first step towards creating our own bot is to register it with Discord and get a token to access it. So, let's head on over to the Discord Developer Portal and fill in some details. You'll need to login into your Discord account if you haven’t already.

Once logged in, you'll be greeted with a screen like this:

To create a bot, press the New Application button on the top right corner of your screen and you'll be asked to enter a name for your bot. I'll be naming it 'Crypto Bot' for now.

Now you can customize all the general information such as name, description, and icon as per your liking. Make sure to save your changes. Now, click on the Bot tab present in the settings sidebar on the left side.

On the bot page, you will see a screen like this from which you can copy or regenerate your token.

Copy the token and make sure you keep it safe and secure. This is a private token which you should not share with anyone and especially not put it up on GitHub or else people will be able to take actions on behalf of your bot, which you certainly don't want.

Finally, let's authorize our bot and add it to our server. For that, click on the OAuth2 tab and tick on the bot scope in the scopes section and send messages & embed links permissions in the bot permissions section.

Copy the OAuth2 link and open it up on your browser. You'll be asked to select the server in which you want to bot to join. Make sure you have permission to add bots to your server.

Awesome, we're ready to get started with programming our bot with NodeJS & Discord.js in the next section.

Initial Setup

Now that we have our bot token, we can get started with the code. Make a directory for your code and change into that directory on your terminal.

mkdir crypto-discord-bot
cd crypto-discord-bot

Inside this directory, use the npm init command to set up an NPM package and generate the package.json file.

For this project, we'll be having 2 dependencies: discord.js, a library that will help us to interact with the Discord API easily, and dotenv, which we'll be using to create environment variables for storing our bot token and other API keys. Let's go ahead and install those using:

npm install discord.js dotenv

Go ahead and open up the folder using your favorite text editor or IDE and let's begin coding.

Start by creating 3 new files in the project folder: bot.js, which will contain the source code for our Discord bot,.env, for storing confidential information and API keys, and .gitignore to exclude the .env and node_modules folder from being pushed to our GitHub. If you're not going to initialize Git, you can skip the .gitignore file.

Our folder structure looks something like this now:

crypto-discord-bot
    - bot.js
    - .env
    - .gitignore
    - node_modules
    - package.json
    - package-lock.json

Inside .gitignore, add the following lines of code:

node_modules/
.env

Now, inside the .env file, let's paste the bot token that we got from Discord. In case you lost the token, you can go back to the Discord Developer Portal and copy your token again. This is how your .env file should look like:

DISCORD_BOT_TOKEN = ODE2NTk2MTQwOTY2ODA1NTM1.YD9Qaw.uTwkqds9EIapoJ_zJQGX2PAYOWw

DISCORD_BOT_TOKEN is like a variable whose value can be accessed through process.env.DISCORD_BOT_TOKEN. These are known as environment variables. If you’re wondering why we are using environment variables to store our bot token, it’s mainly because we don’t want to reveal the token as others can misuse it. Make sure you do not reveal your bot token to anyone or upload it onto the internet.

Time for some actual JavaScript code.

Setting Up Our Bot

If you notice, our bot is currently offline on our server. To make it online, let's write some code which I'll explain shortly.

// Require dependencies
const { Client } = require('discord.js');
const dotenv = require('dotenv');

// Load environment variables
dotenv.config();

// Create a bot instance
const bot = new Client();

// Log our bot in
bot.login(process.env.DISCORD_BOT_TOKEN);

As soon as you run this file using node bot, you'll see that our bot becomes online and we have successfully logged in. In case you see an error, please make sure that you've spelled the environment variable just like you did in the .env file.

In the first few lines of the code, all I did was just require the dependencies which our bot needs which are the discord.js library and dotenv . Then, to use environment variables in our file, we need to first load it by calling the .config() method on dotenv. As you can see, I've only imported the Client class from discord.js library since that's all we need for our purpose. Our bot will act as the client through which we’ll interact with Discord.

Let's move on to logging in as our bot. To do that, I've made an instance of the Client class and assigned it to a constant named bot. We can call several methods on the bot instance. For logging in, we use the .login() method which takes the bot token as a required parameter. Instead of pasting the bot token directly, we can access it from the .env file.

Commit till this part

The Ping Command

Here we go, our first command for our bot: !ping. This command is used to check if the bot is working or not. If it is working, the bot will reply back with 'I am working’ to let us know. In case we don't receive any reply from our bot, we can safely assume that there was some kind of error or our bot is down. Let's break this down into small tasks:

Log to the console when the bot is ready
Listen for messages and check if it matches any of our commands
Check if the message was sent by a user or a bot
Respond appropriately to the message

In Discord, every action can be considered an event. So we can listen for messages using the .on() method listening for message on the client and passing it an async (since we'll be making API calls in the upcoming commands and even discord.js returns promises) callback function with message as the parameter, like this: bot.on('message', async (message) => ...do something).

Let us first tackle our first subtask, which is to log to the console when our bot has logged in and is ready to be used. This is pretty simple as we only have to listen for the ready event and console.log() in our callback function. The code will be somewhat like this:

// Log to console when the bot is ready
bot.on('ready', () => {
  console.log(`${bot.user.username} is up and running!`);
});

Now, let's listen for messages and respond to the !ping command.

// Reply to user messages
bot.on('message', async (message) => {
  // Do not reply if message was sent by bot
  if (message.author.bot) return;

  // Reply to !ping
  if (message.content.startsWith('!ping')) {
    return message.reply('I am working!');
  }
});

In the above snippet of code, we have an event listener listening for message event. Once a message has been sent to the channel, we first check if the message's author is a bot or not. We can do this by accessing message.author.bot. This will return true if the message was sent by a bot and false if it was sent by a user.

Then, we check if the message starts with !ping which is our command for pinging our bot. Since we're only checking if the message starts with !ping, other messages such as !ping 123 or !ping abc will also trigger the ping functionality. You can change the behavior to strictly check for !ping only if you want but I'll go with the starts with functionality for now. To reply to the message, we use the .reply() method on message. And believe it or not, it is as simple as that.

You can append the above 2 code snippets below your previous code and we'll be good to go and implement our primary functionality, getting the crypto prices, in the next section.

Commit till this part

The Price Command

Moving onto one of the core functionalities of our: fetching a price of a cryptocurrency with respect to another currency to compare it with. For this, we'll be using the CoinGecko API which is a free API that provides us an endpoint to achieve the functionality we want. Before we move on that, let's once again break our tasks into few subtasks:

Check if the message sent by the user starts with !price
Check if the user has passed 2 arguments along with it: the crypto and the currency to compare with
Get the price from CoinGecko API if the user has passed 2 arguments
Check if we have received a proper response with data from the API. If so, reply to the user's message with the price. If not, reply to the user notifying that there was an error.

To tackle our first subtask, we can use the inbuilt .startsWith() method to check if the message starts with !price. To check if we have 2 arguments, we can split the string and use the spread (...) operator for accumulating the arguments passed by the user in an array.

If the length of the args array is not 2, it means that the user has either passed too few arguments or too many arguments. For fetching the price from the API, we'll use the axios package. You can do this by executing the following command:

npm install axios

Once done, import it into the bot.js by adding this line below the other require statements:

// Require dependencies
const { Client } = require('discord.js');
const dotenv = require('dotenv');
const axios = require('axios');     // New line that we added

The API endpoint that we'll be using to fetch the price will be: https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd

The response from this API endpoint looks something like this:

{
  "bitcoin": {
    "usd": 47575
  }
}

This API endpoint takes 2 parameters: ids where we'll be passing the name of the crypto that the user sent in the message and vs_currencies where we'll be passing the currency that we want to compare it against, again taken from the user's message.

Here's the final code for all the functionality we discussed above:

// Reply to !price
  if (message.content.startsWith('!price')) {
    // Get the params
    const [command, ...args] = message.content.split(' ');

    // Check if there are two arguments present
    if (args.length !== 2) {
      return message.reply(
        'You must provide the crypto and the currency to compare with!'
      );
    } else {
      const [coin, vsCurrency] = args;
      try {
        // Get crypto price from coingecko API
        const { data } = await axios.get(
          `https://api.coingecko.com/api/v3/simple/price?ids=${coin}&vs_currencies=${vsCurrency}`
        );

        // Check if data exists
        if (!data[coin][vsCurrency]) throw Error();

        return message.reply(
          `The current price of 1 ${coin} = ${data[coin][vsCurrency]} ${vsCurrency}`
        );
      } catch (err) {
        return message.reply(
          'Please check your inputs. For example: !price bitcoin usd'
        );
      }
    }
  }

You can add this code right below your existing code for the !ping command such that your message event listener function. Here's the GitHub commit with the complete code till this section

The News Command

The next core functionality that we'll be implementing is to get the latest news article related to crypto. As you might have guessed, this is fairly similar to the price command. We'll again be using an API to get the news article. This time, the API will be from News API, which is free but you'll have to create an account in order to generate your API key. So head on over to News API and generate your free API key.

Once you're done with the registration, copy your API key and paste it to the .env file like this:

DISCORD_BOT_TOKEN = ODE2NTk2MTQwOTY2ODA1NTM1.YD9Qaw.uTwkqds9EIapoJ_zJQGX2PAYOWw
NEWS_API_KEY = 6094f663e14952f986c002c636010243

Once again, I would like to remind you not to share these API keys or bot tokens with anyone. I’ve shown my bot token for tutorial purposes and will be discarding it shortly.

Now, let's check out the API endpoint that we'll be using and the response structure.

The endpoint for our purpose will be: https://newsapi.org/v2/everything?q=crypto&apiKey=${process.env.NEWS_API_KEY}&pageSize=1&sortBy=publishedAt

The q parameter stands for the query for which we've passed crypto as the value since we only need those articles that are related to cryptocurrency. We'll also have to send our apiKey as a parameter which we can get from the .env file. The pageSize parameter determines how many articles we'll receive from the API endpoint at a time. Since we need only 1 article, we've set the value to 1. Finally, we can also sort the articles as per rating, publish date, and relevance. Since we need the latest article, we'll set sortBy to publishedAt so that we get the latest article.


  "status": "ok",
  "totalResults": 7503,
  "articles": [
    {
      "source": {
        "id": null,
        "name": "Business Wire"
      },
      "author": null,
      "title": "Cipher Mining Inc., a Newly Formed US-based Bitcoin Mining Company, to Become a Publicly Traded Company via a Merger with Good Works Acquisition Corp.",
      "description": "HOUSTON & NEW YORK--(BUSINESS WIRE)--Cipher Mining Technologies Inc. (“Cipher Mining”), a newly formed U.S.-based Bitcoin mining operation, and Good Works Acquisition Corp. (Nasdaq: GWAC) (“Good Works”), a U.S. publicly-traded special purpose acquisition comp…",
      "url": "https://www.businesswire.com/news/home/20210305005234/en/Cipher-Mining-Inc.-a-Newly-Formed-US-based-Bitcoin-Mining-Company-to-Become-a-Publicly-Traded-Company-via-a-Merger-with-Good-Works-Acquisition-Corp.",
      "urlToImage": "http://www.businesswire.com/images/bwlogo_square.png",
      "publishedAt": "2021-03-05T11:51:19Z",
      "content": "HOUSTON &amp; NEW YORK--(BUSINESS WIRE)--Cipher Mining Technologies Inc. (Cipher Mining), a newly formed U.S.-based Bitcoin mining operation, and Good Works Acquisition Corp. (Nasdaq: GWAC) (Good Wor… [+17142 chars]"
    }
  ]
}

Following the steps from the last command, here's how the code will look like:

// Reply to !news
  if (message.content.startsWith('!news')) {
    try {
      const { data } = await axios.get(
        `https://newsapi.org/v2/everything?q=crypto&apiKey=${process.env.NEWS_API_KEY}&pageSize=1&sortBy=publishedAt`
      );

      // Destructure useful data from response
      const {
        title,
        source: { name },
        description,
        url,
      } = data.articles[0];

      return message.reply(
        `Latest news related to crypto:\n
        Title: ${title}\n
        Description:${description}\n
        Source: ${name}\n
        Link to full article: ${url}`
      );
    } catch (err) {
      return message.reply('There was an error. Please try again later.');
    }
  }

All you need to do now is to append the code below your price feature code. And we've successfully implemented the news feature as well. Yay! If you faced any difficulties, you can cross check your code with this commit

The Help Command

Alright, time to implement one last feature, an easy one too. The !help command can be used by the user to get the list of all the commands that our bots supports and a small description of each command. This is pretty similar to our ping command. All we need to do is to check if the message starts with !help and reply accordingly.

// Reply to !help
  if (message.content.startsWith('!help')) {
    return message.reply(
      `I support 4 commands:\n
      !ping - To check if I am working\n
      !price <coin_name> <compare_currency> - To get the price of a coin with respect to another coin or currency\n
      !news - To get the latest news article related to crypto\n
      !help - For checking out what commands are available`
    );
  }

That is pretty much it. We've built all the features that we desired. You can surely add more features to the bot as per your liking. I would highly encourage you to check out the DiscordJS Documentation to explore more features. What we've built is just scratching the surface of the huge pile of features it provides up.

Nevertheless, I'm sure you've learned something of value and I'm excited to see what you come up with. I hope this was a good introduction to discord.js and I'll be happy to answer all your queries. Here's the final commit of the complete project.

Resources To Check Out

Official DiscordJS Documentation

Create a Discord Bot With Node.js on YouTube

DiscordJS In Depth YouTube Playlist

You Need to Try These 10 NPM Packages as a React Developer

Nitin Ranganath — Fri, 26 Feb 2021 05:33:05 +0000

As web developers, we tend to make use of several NPM packages on a daily basis for different reasons, from simple ones like adding colors to the console.log() statements on our terminal to fully-fledged front-end libraries such as React. These packages increase our productivity and save us a lot of time by not having to rewrite things that have been implemented several times by tons of users.

In this post, I'll introduce you to 10 NPM packages that you should check out if you're learning React or already are an experienced user. We'll be going over multiple domains such as UI frameworks to utility-based packages. Without further ado, let's get started.

Material UI

Material UI is probably one of the best UI frameworks built for React, allowing you to build a consistent design system while leveraging Google's Material Design. Material UI helps you in building and designing by providing over 50+ components such as cards, progress bars, modals, and a lot more, which you can further theme as per your requirements. If I had to recommend a UI framework to a React developer, Material UI would surely be my first choice.

Link to NPM Package

Redux Toolkit

Although the useContext and useReducer hooks have reduced the need of using Redux in modern applications, it's not uncommon to see a lot of codebases still Redux for global state management. Redux is still a valuable skill to learn in my opinion and does have its own use cases. However, the amount of boilerplate it takes to set up Redux in your React application can be overwhelming, especially for beginners.

Redux Toolkit aims to solve just that! It is advertised as the official, opinionated, batteries-included toolset for efficient Redux development and is also highly recommended by the official Redux team to write your Redux logic. Do yourself and your codebase a favor by choosing Redux Toolkit over regular Redux next time.

Link to NPM Package

React Icons

React Icons is a marvelous package that consolidates icons from over a dozen of popular icon sets such as Font Awesome, Material Icons, Ant Design Icons, and more. This makes it extremely easy to have access to all your favorite icons just by installing a single package without having to install each of them individually. Through ES6 imports, you can make sure that you import only those icons which you intend to use.

Link to NPM Package

React Google Login

OAuth or Open Authorization enables users to sign up or log in to your website through other providers such as Google, Facebook, Twitter, GitHub, and more. You must've noticed the 'Login with Google' button on lots of popular websites. React Google Login allows you to accomplish the same functionality and makes the authorization process easy for you. All you need is an API key from Google and you're set to implement Google OAuth in your website using this simple package.

Link to NPM Package

Formik

Formik makes the painstaking job of building forms in React easier by taking care of all the repetitive stuff such as keeping track of value state, change handlers, submit handlers, validation, and more. This form library is small, simple and encourages you to spend less time writing form code and focus on building your big thing. It is well documented and has a dedicated tutorial for you to get familiar with it.

Link to NPM Package

React Query

An essential part of a full-stack web application is fetching the data from your backend API or server state and loading them into your component or global state. If you're using Redux, this process might be firing an action in your useEffect hook to fetch data from your backend when the component is mounted. Well, what if there could be a better alternative to this approach?

React Query is an excellent data-fetching library that is the perfect candidate for this use case. Not only fetching, but React Query is also capable of caching, synchronizing, updating server state, paginating, and even lazy loading. Everything you need to make your interactions with the backend more fruitful is baked into this library and I highly encourage you to give it a try. Alongside performance improvements, it will help you make your codebase cleaner and more maintainable.

Link to NPM Package

Styled Components

Styled Components is a CSS-in-JS library which JavaScipt's tagged template literals to create styled HTML components. Why should you consider this over the regular CSS approach? Good question! Styled Components provides a component-like structure to your custom styled elements and saves you from typing className a bunch of times. Furthermore, it has some valuable features like automatic vendor prefixing and automatic critical CSS. Since Styled Components use the regular CSS syntax, you can transition pretty quickly to it.

Link to NPM Package

Axios

Axios is a promise-based HTTP client based on the XMLHttpRequest interface which helps you make HTTP requests in order to fetch some data. But wait, isn't that what the native fetch() is used for. Well, yes. Just like other packages, the goal of this package is the simplify the process and provide more features such as automatic JSON data transformation, intercept request and response data, protect against XSRF, cancel requests and provide you a simpler API to work with for making HTTP requests.

Link to NPM Package

Framer Motion

Framer Motion is an amazing animation and motion library for React to make your websites more interactive and fun to look at. Just visit their landing page, and you'll be blown off by the sheer ease to use and the number of features they provide ranging from general animations, gesture-based animations, drag animations, scroll animations and so much more. Let me put it this way: if you were on the lookout for animation libraries, look no further than Framer Motion.

Link to NPM Package

Reselect

This particular package is especially useful if you're Redux and are trying to improve the performance by avoiding unwanted expensive calculations. In a nutshell, Reselect is a selector library that allows you to efficiently compute derived data from the Redux store through memoization and by memoized selectors. If performance is key to your React-Redux application, definitely check out Reselect.

Link to NPM Package

So that was my list of 10 NPM packages that I think you should have a look at if you're working with React. Let me what packages do you use to make your workflow simpler and more productive, I'd love to hear them. Until then, happy coding!

Build a Dogecoin Price Ticker using React

Nitin Ranganath — Sun, 07 Feb 2021 17:49:25 +0000

Projects. We all love them. Especially the ones that really help us to nail down the fundamentals and learn something new. Dogecoin has been trending since the past week so why don't we build something related to it.

In this project, we will be building a simple Dogecoin price ticker, a web app which will fetch the lowest price of the day, the highest price of the day and the last traded price via an API and will be updated every 10 seconds. Throughout the project, you will learn about setting up a React project, building components, props, state and the most used React hooks such as useState and useEffect.

I've broken down the project into small sections and if you face any issues in following along, you can check the GitHub repo commits to look at the changes I've made.

Live Demo: https://dogecoin-ticker.netlify.app/
Source Code:

itsnitinr / dogecoin-ticker

A live Dogecoin price ticker built using React

Creating a React Project

The first step is to create ourselves a React project. For this purpose, we'll be using Create React App which will help us to focus on our code and not worry about setting up the build tools. The prerequisites are that you'll need NodeJS v8.10 or above and NPM version v5.6 or above.

Open up your terminal and run the following command in your preferred directory:

npx create-react-app dogecoin-ticker

npx is a package runner tool that comes with npm. The above command might take 5-10 minutes to complete so grab a cup of coffee and relax!

Once done, let's hop on to the project directory. For that, you could either use the file explorer or use the following terminal command: cd dogecoin-ticker. Now, open up the project folder using your favourite text editor and we'll get started with the initial setup in the next section. To start the development server, run npm start on your terminal in the project folder.

If you got stuck in any of the steps, check this commit.

Initial Setup

Once we start our development server using npm start, go to localhost:3000 on your browser and you'll be greeted with a screen like this.

This is the default homepage that Create React App has generated for us. Since we don't need anything similar to this, let's start by deleting unwanted files and setting up the project as per our requirements.

The folder structure at this moment looks something like this:

dogecoin-ticker
- public
    - index.html
    - favicon.ico
    - logo192.png
    - logo512.png
    - manifest.json
    - robots.txt
- src
    - App.css
    - App.js
    - App.test.js
    - index.css
    - index.js
    - logo.svg
    - reportWebVitals.js
    - setupTests.js
- node_modules
- .gitignore
- package.json 
- package-lock.json (or yarn.lock if using yarn)

The public folder consists consists of our index.html file which will be rendered by our browser. Open it up and start by removing the unwanted comments and modifying the title of the webpage. You can also additionally edit the meta tag for description and add your own. Here's how your index.html should look like once you're done:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Live dogecoin price ticker built using React"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Dogecoin Ticker</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

To give a more personal touch to our website, I have also changed the favicon and logo images which you can download from here

Let's move on to the src folder. We can get rid of most of the files here such as App.test.js, logo.svg, reportWebVitals.js and setupTests.js. On saving, you might have noticed that our development server throws an error that it failed to compile. Since we deleted the above files, we need to fix the imports as well. Checkout this commit to see the additions and deletions in detail. Our final result will look like this:

App.js

import './App.css';

const App = () => {
  return (
    <div>
      <h1>Dogecoin Ticker</h1>
    </div>
  );
};

export default App;

We removed all the existing content generated by Create React App and replaced it with a div containing an h1 with the text 'Dogecoin Ticker'. I've also changed the function to an arrow function but that's not mandatory. This function returns some JSX which is rendered by React. It can be used in multiple places in our project and is known as a component.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Here, we've removed the import for reportWebVitals since we deleted it as it was not necessary. We import the React and ReactDOM libraries which allow us to render a React component onto the DOM. The React component that we're rendering here is the App component from App.js.

App.css & index.css

In these files, we just remove all the preexisting styles that were generated. Essentially, these are just empty CSS files for now but we'll add some custom styles soon.

At the end of this section, our website looks something like this:

Making It Look Pretty

Since we're just rendering a div and an h1 currently through the App component currently, our design looks plain. To spice it up, let's add a logo (which you can download from here) and some styles. Move the logo.png to the src folder once downloaded.

Begin with importing our logo into our App.js file like this:

import logo from './logo.png'

Now, let's add more content to our App component such as a title and a subtitle. You can use HTML elements like h1 and h5 for this purpose. To use our imported logo as the source for the img tag, we use {logo}. We can use simple JavaScript expressions and variables inside the {} to render dynamic content.

For the purpose of styling, we can add classNames to the HTML entity. We do not use class since it can be misinterpreted as a JavaScript class (OOP concept). We can target these classes in our App.css file to style them. Here's how my App.js and App.css files look like:

App.js

import logo from './logo.png';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <img src={logo} width={150} height={150} alt="Dogecoin Logo" />
      <h1 className="title">Live Dogecoin Price</h1>
      <h5 className="subtitle">Dogecoin To The Moon 🚀🌕</h5>
    </div>
  );
};

export default App;

App.css

.App {
  background-color: #fff3b2;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%23676659' fill-opacity='0.13' fill-rule='evenodd'/%3E%3C/svg%3E");
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  margin-top: 1.5rem;
  font-size: 3.5rem;
  color: #222831;
}

.subtitle {
  margin-top: 0.5rem;
  font-size: 1.5rem;
  color: #393e46;
}

For styling, I kept the minimum height as 100vh so that the whole screen is utilised. On top of that, I've added a pale yellow color as background. The background-image property generates a diamond shaped pattern whose code I got from https://www.heropatterns.com/. Lastly, I've gave the div the display property of flex and aligned the content to be horizontally and vertically centered. Feel free to copy paste the CSS code.

I also imported the Raleway font from Google Fonts and applied some basic style reset to the index.css file.

index.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Raleway, sans-serif;
}

Here's how our website looks like now:

We're getting there! If you found any difficulty, refer this commit.

Building Price Card Component

To display the prices of Dogecoin, you might have noticed that I've used a card-like component. This is a custom React component and in this section, we'll be building just that. Components are highly useful when we want the same layout but with with different content. Instead of writing the HTML code for each card, I can build a component which can take the price as a prop and render the content dynamically. Time to show it in action.

While component file can be created in the src folder itself, it is common practice to create a new folder inside src called components so that all our React components are at the same place and our src folder doesn't become too crowded. So, create a components folder inside the src folder. Inside the newly created components folder, let's create a new file called PriceCard.jsx for our custom component.

We can use either js or jsx extension for components. Both would work perfectly fine and hence, I'm going to use the .jsx extension this time. The price card component is just a styled div which takes consists of the type of price (highest of the day, lowest of the day or last traded price) and the price itself as props. Since the price and price type will be different for each card, we can leverage props to make our price card dynamic.

Here's how I did it:

PriceCard.jsx

const PriceCard = ({ type, price }) => {
  const border = {
    high: '8px solid #f44336',
    low: '8px solid #4caf50',
    current: '8px solid #3f51b5',
  };

  return (
    <div className="price-card" style={{ borderBottom: border[type] }}>
      <h4 className="price-type">{type}</h4>
      <h1 className="price">$ {price}</h1>
    </div>
  );
};

export default PriceCard;

Firstly, we destructure the type and price props which will be used to make the content of price card dynamic. For styling the bottom border dynamically (red border for highest of the day, green border for the lowest of the day and blue border for last traded price), I have a created an object with 3 keys: high, low and current. The type prop will also be one of these values. By adding the style attribute to the div, the bottom border style has been made dynamic.

{{borderBottom: border[type]}} will evaluate to either borderBottom: 8px solid #f44336 , borderBottom: 8px solid #4caf50 or borderBottom: 8px solid #3f51b5. Notice that we camel case instead of the usual kebab case. For outputting dynamic content in our JSX, we wrap it with {} such as {price}.

Now that we have built and exported our custom PriceCard component, let's import it into our App component and use it.

App.js

import PriceCard from './components/PriceCard';
import logo from './logo.png';
import './App.css';

const App = () => {
      <img src={logo} width={150} height={150} alt="Dogecoin Logo" />
      <h1 className="title">Live Dogecoin Price</h1>
      <h5 className="subtitle">Dogecoin To The Moon 🚀🌕</h5>
      <div className="prices-container">
        <PriceCard type="low" price={100} />
        <PriceCard type="high" price={200} />
        <PriceCard type="current" price={150} />
      </div>
    </div>
  );
};

Since we don't have the prices retrieved from the API yet, I have set some random price to the price attribute. I've also wrapped all the PriceCard components in a div which we'll be using for styling.

Append the following styles to App.css:

.prices-container {
  max-width: 1200px;
  padding: 3rem 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.price-card {
  background: #fbf6f0;
  margin: 0 2rem;
  padding: 1rem 2rem;
  border-radius: 8px;
}

.price-type {
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #393e46;
  margin-bottom: 1rem;
}

.price {
  color: #222831;
  font-size: 3rem;
}

Once you have completed the above steps, you will be able to see something like:

Here's the commit for above changes in case you faced any issues.

Getting Dogecoin Price From API

Onto the final part of this project, which is to fetch the highest price of the day, lowest price of the day and last traded price from an API. This is also a great time to introduce you to React Hooks. We'll be using the useState and useEffect hook in this section.

The API that we'll be using is the WazirX API, which is a free API that allows us to get the price of lots of cryptocurrencies. The endpoint for fetching the price of Dogecoin compared to US Dollar is https://api.wazirx.com/api/v2/tickers/dogeusdt. This returns a JSON with all the data we need. However, to avoid issues due to CORS, use this endpoint: https://nitinr-cors.herokuapp.com/https://api.wazirx.com/api/v2/tickers/dogeusdt

The response from looks like this:

{
  "at": 1612629617,
  "ticker": {
    "buy": "0.05",
    "sell": "0.05001",
    "low": "0.0447283",
    "high": "0.0517549",
    "last": "0.05",
    "vol": "19364432.0"
  }
}

Also, we will be using axios to make a GET request to the above endpoint. We need to install axios before we can begin to use it. So, stop the React development server by pressing Ctrl + C. Now type npm install axios and run the command. Once done, start the server back using npm start.

Since the price of Dogecoin is subject to change every time we make an API call, we can keep it in the state using the useState hook. Whenever the API is called, we can set the state to the newly fetched data so that our application can re-render accordingly.

Using the useEffect hook, we can make a call to our API as soon as our component is mounted. With the help of setInterval function, we can call a function, which in turn calls our API every 10 seconds. Here's the complete App.js component followed by the explanation:

App.js:

import axios from 'axios';
import { useState, useEffect } from 'react';
import PriceCard from './components/PriceCard';
import logo from './logo.png';
import './App.css';

const App = () => {
  const [ticker, setTicker] = useState({
    low: 0,
    high: 0,
    last: 0,
  });

  useEffect(() => {
    async function getDogecoinPrice() {
      const { data } = await axios.get(
        'https://nitinr-cors.herokuapp.com/https://api.wazirx.com/api/v2/tickers/dogeusdt'
      );
      setTicker(data.ticker);
    }
    getDogecoinPrice();
    const interval = setInterval(() => getDogecoinPrice(), 10000);
    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div className="App">
      <img src={logo} width={150} height={150} alt="Dogecoin Logo" />
      <h1 className="title">Live Dogecoin Price</h1>
      <h5 className="subtitle">Dogecoin To The Moon 🚀🌕</h5>
      <div className="prices-container">
        <PriceCard type="low" price={ticker.low} />
        <PriceCard type="high" price={ticker.high} />
        <PriceCard type="current" price={ticker.last} />
      </div>
      <p>
        Dogecoin price updated every 10 seconds seconds from{' '}
        <a href="https://wazirx.com/">WazirX API</a>
      </p>
    </div>
  );
};

We import the useState and useEffect hooks from react library as named exports and axios from the axios package as a default export. The useState hooks takes in the initial value which we have set to an object having values of 0 for high, low and last. It returns us a variable which holds the current state and a function to set the new state. In our case, these are the ticker and setTicker respectively.

Inside the useEffect hook, we define an asynchronous function (since API calls are asynchronous in nature) named as getDogecoinPrice in which we make a request to our API endpoint using axios. We destructure the data from the response and set the state of ticker to data.ticker since we need only the ticker data from response. After the function definition, we call this function once followed by a setInterval with a delay of 10000ms (10 seconds) which will run our function and call our API every 10 seconds to get the updated price.

The useEffect hooks also take an array of dependencies as a second argument but since we need to run the setInterval only once, when the component is mounted, we can keep it as an empty array.

The price attribute of PriceCard component can be set to ticker.low, ticker.high and ticker.last respectively to get the lowest, highest and last traded value. Since ticker is a state variable, React will automatically re-render the UI every time its value changes.

Finally, here's what we have built:

Congratulations! You have built yourself a nice and simple web application using React to stay updated with Dogecoin. If you faced any difficulties during building it, please have a look at the GitHub repo or post a comment down below and I'll be more than happy to help you out. That's all, folks!

5 Awesome Web Browsers For Developers

Nitin Ranganath — Tue, 02 Feb 2021 08:16:24 +0000

If there's a software that developers use more than text editors or IDE, it has to be web browsers, right? From your occasional Google searches to fix that pesky little bug in your code to browsing memes on Reddit, it all starts with firing up your web browsers. However, not all browsers are the same.

As a web developer, you need a browser that makes you more productive by providing tools for analyzing and debugging code. And that's what this post is going to cover. Whether you're a casual user or a hardcore frontend developer, there is something for everyone. Let's get right into it!

Firefox Developer Edition
Sizzy
Polypane
Brave
Google Chrome

Firefox Developer Edition

Firefox, one of the most popular web browsers out there, has a special edition of its browser that is crafted for developers like you and me. We're talking about Firefox Developer Edition. The first question that would arise in our mind would be what makes the developer edition, you know, the developer edition. Here's a list of some features:

Lots of experimental features that aren't found in mainstream browsers.
Identify inactive CSS on a webpage.
Awesome DevTools to debug and inspect your code.
Make CSS grids easier to work with using visualization.
Get information on the fonts used on a webpage.

What's special? Firefox is undoubtedly one of the best and popular browsers. They are privacy-oriented and fast. The fact that they have an official developer edition makes it even better.

Sounds incredible, right? You can read more about the features mentioned above on their official website. Firefox Developer Edition is available for Windows, Linux, and macOS for free, so nothing stops you from trying it out.

Sizzy

Sizzy is a browser that focuses on speeding up your development workflow by providing excellent features and plugins. It is incredibly feature-rich and does stand up to its promise of making you more productive and speed up your development workflow. The list of features that Sizzy offers is quite long, but here are some that I felt were noteworthy:

Simulate and screenshot your webpage on multiples devices at the same time.
Inspect an element on all devices using the Universal Inspect Element feature.
Check how your website reacts and performs under various network conditions.
Spotlight-like feature to access everything with just your keyboard.
Session manager to switch between users with any manual work.

What's special? If you were looking for a feature-rich browser with tools that you won't find in any other browsers, Sizzy comes pretty close to it. It really is a browser made for developers.

There is just one caveat, though. Sizzy is not a free browser. It works on a monthly or annual subscription model, but they are generous enough to give you a 14-day free trial to try it out. Sizzy is available on Windows, Linux, and macOS.

Polypane

If you felt that Sizzy seemed a bit overwhelming for you, Polypane aims to strike the perfect balance between your classic browser and a developer-oriented one. However, this does not mean that Polypane lacks useful features. It keeps the important ones from Sizzy while excluding the not-so-useful ones. Here's what Polypane offers you:

Simulate your website on multiple viewports, from mobile to 5K screens.
Eighty accessibility tests to make your website a pleasant experience for everyone.
Social media previews supporting numerous platforms.
It comes with live and hot reloading by default, from plain HTML to React apps.
Supports extensions for all your favorite frameworks: React, Angular, Vue, Svelte, and much more.

What's Special? Polypane pays particular emphasis on making your website accessible. This is evident as it comes with features like color blindness simulators, which you won't find on your mainstream browsers.

Like Sizzy, Polypane works on a subscription-based payment model as well. But the good thing is, they, too, provide you a free 14-day trial with no credit card details required to get started. Go and check out this fantastic browser on Windows, Linux, and macOS.

Brave

The browsers mentioned above are explicitly geared towards developers. If you're looking for something more casual and for daily use, Brave Browser is a great choice! Brave is a fast, secure, and privacy-oriented web browser co-founded by Brendan Eich, the guy who created JavaScript and co-founded Mozilla. So yeah, you're in pretty good hands. Here's why I prefer Brave Browser:

Brave Browser claims to around 3x faster than Google Chrome while also optimized for better battery life and memory consumption.
It comes with an inbuilt ad-blocker and security measure to make your browsing session secure.
Syncs with your Android phone or iPhone seamlessly.
IPFS integration to browse websites without intermediaries.
Absolutely zero private data collection.

What's Special? Brave rewards you for using it. Yes! By optionally turning on the Brave Rewards option, you get a small and discreet ad notification that you don't even have to click. With each notification, you receive BAT, a crypto token. You can use BATs to support the publishers you love for free through contributing your BAT.

Brave is a reliable choice if you're looking for an excellent daily use browser. It's fast, it's secure, and just plain good. It is free, and you can use it on your computer (Windows, Linux, macOS) and your mobile devices (Android, iOS).

Google Chrome

I just had to include this one. Google Chrome is THE most popular browser. In a survey conducted by statcounter in December 2020, Google Chrome accounts for over 60% of users, miles ahead of its competition. As a developer, this also means that you should definitely test your code on Chrome before your ship it to production. So, why should you consider Chrome?

One of the best browsers in terms of feature compatibility.
Highly popular with a large user base.
Integration with the Google ecosystem.
The industry standard with tons of extensions.
A great DevTools.

What's Special? To be honest, there's nothing fancy about Chrome, which is one reason why it's so popular. It's aimed towards everyone. Considering that a ton of people use it, you might as well keep it handy.

You don't have to use Chrome. But it is undeniable that it will hold the majority of the market share for the next few years as well. Chrome isn't really privacy-oriented, but the Google ecosystem integration is pretty tempting. It's available for free on all the major platforms.

So, that was my list of some of the browsers which I felt were awesome for developers. Do you agree? Or did I miss out on anything? Let me know your thoughts in the comments below.

The Ultimate Guide to MERN Stack

Nitin Ranganath — Fri, 15 Jan 2021 09:05:35 +0000

The Modern Web

Websites have come a long way from what they used to be a decade ago. We started with plain HTML and CSS websites. Then came JavaScript and revolutionized the way the web works. From that point onward, web technologies have made significant strides, owing to JavaScript frameworks, which made single-page applications or SPAs a thing. Today, we're able to build websites that fetch the code files from the server once and never reload again, even while visiting other pages. How does this work?

If you've ever wanted to become a full-stack web developer, the chances are that you came across the term MERN Stack. Worry not if you haven't, though.

What is it?
what does it stand for
How can you become a MERN stack developer?

I'm here to demystify it and introduce you to one of the trendiest web development tech stacks while providing you a proper roadmap as well as resources alongside. Are you excited? Let's dive right into it and begin with understanding the core concepts.

What is the MERN Stack
MongoDB
ExpressJS
ReactJS
NodeJS
Combining The Technologies & Exploring How It Works Together
How To Become a MERN Stack Developer?
Resources & Tools
Let's Look at the Alternatives
Final Words

What is the MERN Stack

The MERN stack is a web development tech stack consisting of MongoDB, ExpressJS, ReactJS NodeJS and enables you to build feature-rich single page web applications using a single programming language, JavaScript. Some developers consider this to one of the key reasons why the MERN stack is so popular. You can use your proficiency in a single language to manage both the front and back of your web application.

Now that we have a basic understanding of the MERN stack let's dive deeper into the technologies it consists of, starting with MongoDB.

MongoDB

MongoDB is a NoSQL database in which data is stored in documents that comprise key-value pairs, sharing a lot of resemblance to JSON or JavaScript Object Notation. Woah, Woah, too much jargon? Don't worry! Let's break the above sentence into smaller chunks.

I am beginning with SQL vs. NoSQL. In SQL databases, data is stored in tables. Tables are just a collection of data in tabular form through rows and columns. Time for some visual representation!

Here's how the data stored in MongoDB looks like:

{
    _id: ObjectId("5fdf7cd797334f00175e956c")
    name: "Nitin Ranganath"
    email: "nitinranganath@gmail.com"
    password: "itsasecret!"
    createdAt: 2020-12-20T16:33:27.667+00:00
    updatedAt: 2021-01-01T08:06:15.269+00:00
    __v: 0
}

And here's out the data stored in MySQL, a SQL-based database looks like:

| id |    name    |            email            |  password   |
|  1 |    Nitin   |   nitinranganath@gmail.com  | itsasecret! |

MongoDB is excellent in so many aspects, making it a terrific choice for your upcoming projects. Some of these are:

High performance through indexing
Dynamic schemas for models
High scalability through distributing data on multiple servers
Ability to store geospatial data through GeoJSON
Auto replication

And a lot more!

Alright, but how exactly shall we use MongoDB to store our data in a MERN stack web application? While we can use the mongodb npm package, it is more convenient to use an ODM or Object Data Modelling library such as mongoose.

If I were to prepare a checklist of stuff you learn regarding MongoDB for building full stack web applications, it would consist of:

Setting up local MongoDB or cloud MongoDB Atlas database
Creating models and schemas
Perform CRUD (Create, Read, Update & Delete) operations on the database

Bonus points for:

Linking two related models using refs
Understanding mongoose pre and post hooks
Mongoose data validation

ExpressJS

Moving on to ExpressJS, let's first try to understand what it exactly is, why do we use it, and do we need it (spoiler alert, it's not!). Express is the most popular web application framework which uses NodeJS. In MERN stack applications, Express's role is to manage our backend API server, the one from which we will be fetching data from a database via our React frontend.

Express is used to listen to a particular port of our server for requests from the user or frontend in simpler terms. We can create different routes for each endpoint which the user accesses. Here's an example to make it clear what I'm talking about:

GET https://ourwebsite.com/products     -> Fetches all products
GET https://ourwebsite.com/products/1   -> Fetches the product with ID of 1

As the programmer, we design and build the routes to get the appropriate data from the right endpoint. That's what Express allows us to do quickly. Remember when I said Express is not precisely required? That's because we can use the core http module that NodeJS provides us to create the routes that I mentioned above. Then why don't we use that? Because Express makes the whole developer experience much better.

// Using http
const http = require('http');
http.createServer((req, res) => {
    if (req.url === '/products' && req.method === 'GET') {
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify(products));
    }
}).listen(5000, console.log('Server running on port 5000'));

// Using express
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.json(products);
})

app.listen(5000, console.log('Server running on port 5000'))

This was just an example, quite a simple one too. Express code is much more cleaner to read as well as write. Now, coming to things that you should learn concerning Express, as a MERN stack developer:

Setting up an express server and listening on the desired port
Create routes/endpoints for data CRUD operations through GET, POST, PUT, and DELETE
Reading JSON form data sent from frontend via express.json() middleware
Setting up an ODM like mongoose with Express

Bonus point for:

Separating the logic in different files such as controllers, routes, and models
Creating custom middlewares to handle errors and more

ReactJS

If you want to become a frontend or a full stack web developer, the chances are that you've heard about JavaScript frameworks such as React, Vue, or Angular. For now, let's focus on React: undeniably, the most popular JavaScript frontend library. We'll be having a brief look at Vue and Angular to discuss the MEVN and MEAN stack. But let's learn more about React for now.

As mentioned above, it is a library created by Facebook that allows us to develop dynamic and interactive user interfaces on our websites efficiently. It offers dynamic interfaces using props (short for properties) and state in our web application. Moreover, it provides us with the ability to break down our code into smaller chunks, known as components, which make them more versatile. Components can be imported and used in multiple places in our web application, saving us time and energy to avoid rewriting the code with minor changes and keep our codebase DRY (don't repeat yourself.

One of the best things about React is that you can use it to create single-page applications or SPAs for short. What's unique about SPAs is that we only have to load all our static assets like HTML, CSS, and JavaScript only once compared to traditional websites that reload and fetch new assets every time you visit a new page of a website. For routing, react-router-dom is one of the most popular ways to do so. In a nutshell, load once and access the full website without ever reloading, unless you manually reload, duh!

We can have a whole separate article to discuss React and what makes it so great. Since this is more of an overview of the MERN stack and not just React, I'll list down some of the features of React which you'll be using while developing web applications, and you should definitely learn:

Creating appropriate components and using props
Write functional React code
Commonly used React hooks such as useState and useEffect
Managing props in a component through the useState hook
Conditional rendering
Making API calls from the useEffect hook to get data from the backend
Making form inputs controlled and handling form submits

Additionally, you sharpen your React skills with the following:

Managing global state through Context API or Redux
Learning the use cases of less common React hooks like useRef, useMemo, and more
Using styled-components or other CSS in JS methods

NodeJS

Finally, we complete the overview of the technologies that make up the MERN stack by exploring NodeJS. First things first, what is NodeJS, and how is it different from JavaScript? Is it something different altogether; why do we use it in the first place; can't we use JavaScript instead? I'll try answering all these common questions in the upcoming paragraphs. But first, let's see what NodeJS is.

NodeJS is a cross-platform JavaScript runtime environment that uses Google's V8 engine to run JavaScript code outside the browser. JavaScript intends to run on browsers, but we don't have browsers on our backend, do we? This is where NodeJS shines. It enables us to write JavaScript, which can run on our backend servers. But how does it achieve this? It uses something known as the V8 engine and libuv, a whole other topic. Here's a visual representation of how the NodeJS architecture works in a nutshell:

If you're interested in knowing more about the internal working of NodeJS, such as event loop and more, here's an excellent video to get you started with.

Coming back to the MERN stack, the purpose of NodeJS is simple. Allow us to write our backend in JavaScript, saving us the trouble of learning a new programming language capable of running the backend. It's an event-driven, non-blocking I/O model moreover. While there's not much specific to NodeJS that you have to learn to build a MERN stack application, here are some related things you should take a look at:

Initialising a npm package
Installing npm packages through npm or yarn
Importing and exports modules using commonJS
Understanding the package.json file

Bonus points for:

Accessing the filesystem using inbuilt fs package
Setting up a server with an inbuilt http package (not required if using express)

Combining The Technologies & Exploring How It Works Together

In the previous section, we had a look at all the four technologies which constituted the MERN stack. While each one of them is fantastic to work with individually, combining these technologies working together like clockwork results in an excellent web application. That's what we're going to learn about in this section. Knowing each technology is half the skill, while the other half is to piece them together into something meaningful. What could be better than another visual representation of a MERN stack web application, where the user is interacting with the frontend, which in turn is accessing the backend and the database.

Let's understand the whole mechanism by taking an example. Assume that we have built a great e-commerce web application that sells apparel. We have a customer who is currently visiting our website to shop for some sneakers. We have a link on the landing page that takes the user to the sneakers page. So how do we get the data from the backend? Let's take it one step at a time.

User visits our website's landing page built using React.
User clicks on the link to shop for sneakers. We render the sneakers page without reloading the page since we have built a single page application.
We do not have the sneakers data at this point, i.e., the state is empty. Therefore, we make an API call to our backend to fetch the data.
Since the process of fetching the data from our database is asynchronous, meaning that it will take some amount of time for it to finish executing, we show the user a loading GIF while sneakers data is being retrieved.
In our backend, ExpressJS looks at the endpoint (route) we've hit and executed the appropriate controller function, which is used to retrieve sneakers data.
Inside this controller function, we use mongoose to query our database and get the data and return it in the form of JSON (JavaScript Object Notation).
This JSON data is sent back to our React frontend, where we can update the state with our newly fetched data.
Since our state got updated, React will re-render the components which depend on it, and subsequently, we replace our loading GIF with the sneakers information.

And that's how all the technologies work together. Do not fret if you did not understand it entirely just yet. Since this mechanism is so commonly used, you will eventually understand and master it. Let us now talk about some things we are yet to cover, such as authentication, authorization, and state management.

Authentication

Most of the websites nowadays allow you to create a user account for yourself through sign-up and sign-in procedures. We want this functionality in our web application, don't we? Even the simplest of applications such as a to-do list can be made interesting if we can associate each to-do with the user who created it. So how do we authenticate a user?

While signing up to a website, we essentially create a user with email and password fields and store them into our database. But here's a catch. It is a bad practice to store the user passwords in plaintext or as it is due to security reasons. To overcome this, we can hash the user passwords using some strong hashing algorithm to secure them. I use the bcryptjs package from npm for this purpose.

Another option is to use OAuth, such as Google OAuth, to sign up the user to our website using his/her Google account. This saves us the hassle of manually taking care of all the security measures but adds complexity to the project due to handling API keys for OAuth with care.

Authorization

In the simplest terms, authorization is to restrict some routes to only specific types of users. For example, we do not want a user who's not logged in to place an order since we need to bind the user to each order. Similarly, we do not wish for any random user to delete someone else's account. Such functionality should be only restricted to admins. And that is why we need authorization.

We can restrict access to our backend API using some conditions to prevent misuse through authorization. One of the most popular ways to implement authorization is to use JSON Web Tokens, or JWT for short. Whenever a user registers or logs in, we send back a token to the user. With this token being passed into headers during future API calls, we can uniquely identify the user by encoding the user ID in the payload. This can help us check whether the user is logged in, is an admin, and determine which user is accessing the routes.

State Management

As your website grows, it is problematic to manage your global state. The user who is logged in can be an example of global state. Why? Because this information or state might be needed in multiple components, such as a navigation bar, profile card, and much more. Since we need to keep our shared state consistent across all the components which use it, having component level state with useState will not be feasible.

Another solution might be to store the state in the top-most component and pass it to other components that require it as props. Even this approach is not recommended as you might have to pass the state as props to multiple components and multiple levels, even to the components that do not require the state to pass the state from top-level component to bottom-level components.

This is why we can use Context API or Redux to maintain a global store of state from which we can access the state in all the components we require, without passing it as props. While some argue that Redux is not needed ever since Context API came out, I still find lots of codebases using it, and it might be a good idea to learn it.

How To Become a MERN Stack Developer?

Phew! That was a lot to take in. But the good thing is that you don't need to memorize any of it. Developers learn by doing, not memorizing! With that being said, you must be wondering how to become a MERN stack developer. That will be the prime focus of this section, where I'll be providing you with my own roadmap that you can take inspiration from and start your journey, whether you are new to web development or just exploring other tech stacks.

New to Web Development:

If you're new to web development or even programming in general, I would highly recommend giving yourself enough time and learning the basics first. This includes how the web works, HTML, CSS, and JavaScript at first. Once you're comfortable building static websites with them, you can either choose to learn a JavaScript framework like React or explore the backend path with NodeJS. The way you choose is up to you, but ultimately, you'll have to learn both of them. A fantastic way to sharpen your skills is by making javascript projects for beginners.

My recommended learning path would be:

So we start with the basics, understanding the web, and delving into the frontend world, and starting with HTML, CSS and JavaScript so that you can build some awesome static websites such as landing pages with responsive design. Using a version control system like Git is pretty crucial since you'll be using it quite a lot in the future. Guess what? You're already good enough to look for some freelance work.

Before writing some backend code, you should understand HTTP and the HTTP methods such as GET and POST. For the MERN stack, you'll use NodeJS in combination with ExpressJS to layout your backend. For interacting with your MongoDB database, you can use mongoose. Add a bit of authentication and authorization skills, and you're ready to build a full-stack web application.

Finally, we return to the frontend and get our hands on React, a framework (technically, a library) that will take your websites and developer experience to the next level. You can see yourself building social network web apps, e-commerce web apps, and virtually any web app you want with the help of whatever you've learned so far. Exciting!

Experienced Developers Switching Tech Stack:

While the roadmap remains the same for even experienced developers, you can skip the HTML, CSS, and JavaScript parts. You may already be familiar with it and focus on grasping a good understanding of NodeJS how it works. Due to your previous knowledge of a different tech stack, I'm confident that you'll be able to adapt NodeJS pretty soon. Making careful decisions on how to better architecture your web app, optimizing it, and writing clean code will definitely give you an advantage over others.

Resources & Tools

A quick note: You certainly do not watch each of these resources. Pick whatever you like the go with it. One of the mistakes that I made was that I kept switching between multiple resources due to the fear of missing out. Trust me, and you'll be fine. All of these resources are amazing and equally good. And you don't necessarily have to pick from just this list. A quick YouTube or Google search will also do.

Free Courses

FreeCodeCamp YouTube Channel

HTML, CSS and JavaScript:

HTML & CSS Playlist by Brad Traversy - Crash courses & tons of awesome projects.

12HR+ YouTube Coding Bootcamp 2021! by Ania Kubow - Learn HTML, CSS and JavaScript in a single video.

HTML & CSS Playlist by The Net Ninja - Byte sized videos to keep your interested.

Vanilla JavaScript Playlist by Brad Traversy - Solidify your JavaScript knowledge with lots of projects.

Modern JavaScript Playlist by The Net Ninja - Learn modern JavaScript including ES6

JavaScript for Beginners Course (2020) by Colt Steele - Get yourself started with JavaScript in a couple of hours.

NodeJS, ExpressJS & MongoDB:

NodeJS Playlist by Brad Traversy - Gem of a resource for all things NodeJS

NodeJS Crash Course by Dev Ed - Make learning NodeJS fun

Building a RESTful API with Express & MongoDB by Dev Ed - Learn to build a REST API

NodeJS Authentication with JWT by Dev Ed - Explore authentication and authorization

Introduction to MongoDB by Academind - Get yourself familiar with MongoDB

MongoDB + Mongoose + Node.js Crash Course by Codedamn - Teach yourself backend in an hour

React & Redux:

Modern React Playlist by The Net Ninja - Byte sized, up to date React tutorials

React Hooks Playlist by Web Dev Simplified - Learn all about React Hooks in a single playlist

React Crash Course 2020 by Codedamn - Understand React by building a big project

React Projects Playlist by Traversy Media - Build amazing React projects

Redux for Beginners for Dev Ed - Get to know about Redux in a fun way

Redux Explanation by Stephen Grider - One of the best explanations of Redux

Tools To Use

Visual Studio Code - Free, open source and one of the best text editors

Figma - The collaborative interface design tool

GitHub Desktop - Desktop client for GitHub

Google Lighthouse - Test your website's performance and SEO

React Developer Tools - Chrome extension for testing React websites

Redux DevTools - Chrome extension for testing Redux

JSON Viewer - Chrome extension for display JSON in a much more readable manner

WhatRuns - Check what tech stack your favorite website uses

Postman - Test your APIs

Design Resources

Design Resources for Developers - A repo full of tons of design resources

Coolors - Generate color schemes with ease

Grabient - Awesome gradient colors

Google Fonts - Fonts to use in your websites

FontAwesome - Collections of icon fonts

Let's Look at the Alternatives

There are many ways to achieve the same result when it comes to programming. Web development is no exception. Let's look at some popular alternatives to the MERN stack.

The MEVN Stack

The MEVN stack uses Vue instead of React in the frontend. VueJS is an open-source JavaScript framework with over 175k+ stars on GitHub and is undoubtedly a popular choice. It is considered to be easier to learn than React, but since it falls behind a bit when it comes to the number of jobs available for Vue developers comparatively. However, the framework itself is incredible and worth trying. It's also not backed by any corporations, unlike React and Angular.

The MEAN Stack

Talking of Angular, it is also a frontend framework that uses TypeScript instead of JavaScript to build web applications. It is arguably the hardest to learn compared to React and Vue but also used by lots of enterprises. It is developed by Google and focuses on high performance and MVC architecture.

Final Words

Being a developer is not easy. There are a lot of new advancements, frameworks, and technologies that keep coming out, and staying up to date is hard. Do not give in to the shiny object syndrome and believe in the process. Allow yourself to take time and make mistakes. We all learn from that. I hope this guide helped you to get started with the MERN stack. Good luck ahead!

Technologies That I'll Be Learning in 2021 as a MERN Stack Developer (with resources)

Nitin Ranganath — Tue, 05 Jan 2021 08:31:47 +0000

Hi Dev Community!

2020 has been a year of learning for me and I'm positive that this has been the case for tons of other self taught developers out there. From React to Redux, 2020 has shaped me into becoming a full stack developer, something that I'm passionate about.

Going forward, I have decided to learn the following technologies in 2021. While this is not a 'top 10' list for things that you SHOULD learn, this is just my take on it. Having said that, please feel free to share your opinions or suggest new technologies. I've also left some links to free resources for learning all the technologies I talk about. Alright, enough talk. Let's dive into the main stuff.

TypeScript

One thing that I was grateful for in 2020 was that I was able to build big projects, to a level that it was becoming kind of tedious to keep up with the bugs and potential issues that were popping up. Enter TypeScript! I've heard lots of people praising TypeScript for exactly solving this problem. Since it's also used in lots of production level projects, I see no reason to avoid TypeScript.

Resources to get started:
TypeScript Tutorial by Academind on YouTube
TypeScript Playlist by The Net Ninja on YouTube

React-Query

I'm excited for this one. So what exactly is react-query, you ask? It is a NPM package which you can use to asynchronously fetch data from an API. That's the simplest explanation that I could come up with. But hey, doesn't Redux with Axios do the same? Yes, but react-query comes with features such as auto-caching, garbage collection, infinite scroll and much more! Definitely something which you can use to improve your developer experience as well as performance. By the way, if you use Redux, you might want to checkout Redux Toolkit.

Resources to get started:
React Query Playlist by The Net Ninja on YouTube
Redux Toolkit by Justim Kim on YouTube

Tailwind CSS

I've used Bootstrap, Materialialize CSS and Bulma in the past. But somehow, Tailwind CSS still manages to excite me. I've heard great things about it and have also seen some stunning websites built using it. I'm aware of how it is a bit different from other CSS frameworks out there but that's where the fun lies. For the React side of things, I also want to explore Material UI a bit more.

Resources to get started:
Tailwind CSS Crash Course by Brad Traversy on YouTube
Tailwind CSS 2.0 Crash Course by codedamn on YouTube
Tailwind CSS Playlist by The Net Ninja on YouTube

NextJS

Next is great! I tried it for a brief period of time around the end of 2020 and I see no reason why I shouldn't take it up and use it in my own projects. If you're a React developer, the learning curve is pretty smooth. The benefits it brings, such as server side rendering and automatic image optimization make it well worth learning. Highly recommend it for all the React devs out there.

Resources to get started:
Next.js Fundamentals by Mehul Mohan on codedamn
Next.js Playlist by Bruno Antunes on YouTube

GraphQL

GraphQL is a query language for fetching data from APIs. What makes it great is that it is capable of exactly what is requested for and getting multiple resources in a single request, thus saving us multiple requests to the API server and improving the performance. I've only been using REST APIs till now and excited to see how GraphQL can improve my future projects.

Resources to get started:
Learn GraphQL by Web Dev Simplified on YouTube
GraphQL Playlist by The Net Ninja on YouTube

PostgreSQL

PostgreSQL or basically SQL databases are something that I've been wanting to give a try for quite some time now. I have used MongoDB my database needs in all my previous projects. I appreciate the freedom of NoSQL databases but SQL databases are widely used as well and can be a better option in some cases. Getting good at SQL and SQL databases is going to be one of my priorities this year.

Resources to get started:
PostgreSQL Tutorial by FreeCodeCamp on YouTube

Jest

Jest is a JavaScript testing framework which can be used to test your Node, React, Angular, Vue, TypeScript and other JavaScript code. I'm no fan of testing currently but it is such as essential skills which can differentiate two programmers especially when it comes to large projects. I have not delved deep into knowing more about Jest but from my limited research, it aims to do what I want.

Resouces to get started:
Jest Crash Course by Brad Traversy on YouTube
Jest Introduction by Web Dev Simplified on YouTube

Advanced JavaScript

Wait, what? JavaScript? Well, yes but no. Advanced JavaScript concepts such as V8 Engine, closures, hoisting, event loop, threads, binding and much more. The MERN stack is fully JavaScript and so it makes sense to get a good grasp over JavaScript, right? People do tend to miss out on the above mentioned topics when they're first learning JS and rightly so. However, it's good to go back to plain JavaScript once in a while to learn these topics.

Resources to get started:
Advanced JavaScript Concepts by Andrei Neagoie on Udemy (Paid)

React Native

Websites are great, no doubt! But the ease of use that applications provide make it a valuable skill to learn. I personally felt that I could get more users on my projects if only I had a mobile application on top of the website. React Native seems to be a good choice since I already know React and can hugely benefit me through code reuse. There's also Flutter, which uses Dart if you like that more.

Resources to get started:
React Native Crash Course by Brad Traversy on YouTube
React Native Tutorial by Academind on YouTube
React Native Playlist by The Net Ninja on YouTube

Some Honourable Mentions

Serverless technologies such as AWS
Framer Motion
GSAP
HTML Canvas
UI/UX
Docker and Kubernetes

So that was list of technologies to learn this year. I'd love to see yours too! Drop a comment if you feel like sharing yours. Thanks for reading!