Forem: Mritunjay Saha

🚀 Elevate your text game with HTML! Need to raise text?

Mritunjay Saha — Thu, 07 Dec 2023 19:14:24 +0000

Ever wondered how to add a superscript or subscript in HTML as we did while solving maths in high school?

We are used to add the superscript or subscript in google docs or microsoft word using which looked like this.

How to achieve superscript and subscript in HTML?

In HTML we can achieve the same using the tags for superscript and for subscript

<p>Example of superscript: (a + b)<sup>2</sup></p>
<p>Example of subscript: F<sub>n</sub> = F<sub>n-1</sub> + F<sub>n-2</sub></p>

Output

Example of superscript: (a + b)²

Example of subscript: Fn = Fn-1 + Fn-2

Enhancing Search Functionality in React with Debouncing

Mritunjay Saha — Fri, 24 Nov 2023 17:10:14 +0000

Are you looking to improve the search experience in your React application? Utilizing debouncing can be a game-changer, especially when integrating API calls with user input. In this article, we'll explore how to implement debouncing in a search feature using React Hook Form.

Understanding Debouncing and Throttling

Debouncing: Delays the execution of a function until a specified period of inactivity occurs. In a search input, it postpones the search action until the user pauses typing for a defined duration.

Throttling: Limits the frequency of a function's execution within a specified timeframe. It ensures the function is invoked at most once per designated interval, disregarding any additional calls within that interval.

Debouncing vs. Throttling in Search

While both techniques optimize performance, debouncing suits scenarios where you need a delay between user input and action, making it ideal for search inputs. Throttling, on the other hand, ensures a function isn't excessively called within a timeframe, which might be more suitable for scenarios requiring regular updates without overload.

Setup and Dependencies

For this implementation, we'll leverage React Hook Form, a powerful library for managing forms in React. Additionally, we'll use the debounce function from lodash, a utility library offering a debounce implementation.

Implementation steps

1. Installation

Ensure you have React Hook Form and lodash installed in your React project.

npm install react-hook-form lodash

2. Creating the SearchForm Component

We'll have to overwrite the onChange method of react-hook-form

import { useCallback } from "react";
import { useForm } from "react-hook-form";
import { debounce } from "lodash";

export const SearchForm = ({ onSearch }) => {
    const { register } = useForm();

    const handleSearch = useCallback(
        debounce((searchTerm) => {
            onSearch(searchTerm);
        }, 300), // Debounce for 300 milliseconds
        [onSearch]
    );

    const handleChange = (event) => {
        const searchTerm = event.target.value;
        handleSearch(searchTerm);
    };

    return (
        <form>
            <input
                type="text"
                placeholder="Search..."
                {...register("search", {
                    onChange: (e) => handleChange(e),
                })}
            />
        </form>
    );
};

3. Usage in your Application

Integrate the SearchForm component within your main application, passing in the onSearch function to handle the search logic.

import "./App.css";
import { SearchForm } from "./components/SearchForm/SearchForm";

function App() {
    const handleSearch = (searchTerm) => {
        // Implement your search logic here, such as making API calls
        console.log("Search term:", searchTerm);
    };

    return (
        <div className="app">
            <h1>Enhanced Search Example</h1>
            <SearchForm onSearch={handleSearch} />
        </div>
    );
}

export default App;

Conclusion

Debouncing enhances the search functionality in React applications by optimizing API calls based on user input. By incorporating React Hook Form and lodash's debounce function, we've created a responsive and efficient search feature that prevents excessive requests without compromising user experience.

Consider adjusting the debounce duration according to your application's needs, ensuring a seamless and optimized search experience for your users.

That’s it! Implementing debouncing with React Hook Form empowers you to create smoother, more efficient search functionalities in your React applications.

Here is the GitHub repo for you to try it out!!!

ESLint and Prettier: Turbocharge Your React and TypeScript Development

Mritunjay Saha — Sun, 25 Jun 2023 11:44:14 +0000

Hi everyone! Let's dive into the powerful duo of ESLint and Prettier. If you've ever found yourself grappling with maintaining code quality or wrestling with consistent code formatting, this comprehensive guide is made for you.

In the fast-paced world of software development, ensuring clean and error-free code is paramount. ESLint and prettier, two industry-standard tools that provide the perfect solution. ESLint enables you to catch potential bugs, enforce coding conventions, and maintain consistent code quality. Meanwhile, Prettier takes care of code formatting, ensuring your code is beautiful and easy to read.

By using these two tools, you can supercharge your development workflow, saving precious time and effort from endless debates over code style and tedious manual formatting. With ESLint and Prettier, you have the tools to create code that is both elegant and maintainable.

This guide endeavors to lead you through the foundational aspects of ESLint and Prettier, delving into their functionalities, configuration options, plugins, and optimal methodologies. Whether you possess extensive experience as a developer or are embarking on your coding journey, our aim is to furnish you with the requisite knowledge and abilities to effectively harness the capabilities of these robust tools.

How to implement ESLint and Prettier?

Cool, so now Let's see ESLint and Prettier in action. First, let's create our project by running npx create-next-app@latest eslint-and-prettier . Then vite will prompt you to enter the package name. Set the package name as you like. We'll name it eslint-and-prettier.

In the root directory of our react project we will find .eslintrc.json file with following contents

Now that our project's good to go, let's kick things off by adding some extra plugins for ESLint.

How to install ESLint

To install ESLint and the necessary packages and plugins for configuring ESLint in your project, run the following command:

npm i -D eslint-config-airbnb-base eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-simple-import-sort eslint-plugin-unused-imports

Each plugin is used for a specific purpose:

eslint-config-airbnb-base: This is a preset configuration for ESLint provided by the Airbnb style guide. It includes a set of rules and recommended configurations that promote best practices for JavaScript development.
eslint-config-airbnb-typescript: Similar to eslint-config-airbnb-base, this preset configuration is specifically designed for projects using TypeScript. It extends the Airbnb base configuration and adds TypeScript-specific rules.
eslint-config-prettier: Prettier is a code formatter that helps enforce consistent code style. However, Prettier and ESLint have overlapping rules. eslint-config-prettier disables all ESLint rules that might conflict with Prettier's formatting rules, allowing them to work together seamlessly.
eslint-plugin-import: This plugin enhances ESLint's import/export rules. It provides additional validations for import statements, module resolution, and enforcing correct file extensions.
eslint-plugin-jsx-a11y: This plugin provides accessibility rules for JSX elements. It helps ensure that your React components are usable and accessible to users with disabilities.
eslint-plugin-prettier: This plugin integrates Prettier into ESLint. It formats code according to Prettier's rules by reporting any inconsistencies as ESLint errors.
eslint-plugin-react-hooks: This plugin provides rules and warnings specifically for React hooks, such as enforcing the correct usage of hooks like useState and useEffect.
eslint-plugin-simple-import-sort: This plugin offers an alternative approach to sorting imports. It provides rules for organizing and sorting import statements based on their category and prevents unused imports.
eslint-plugin-unused-imports: This plugin detects and reports unused import statements in your code. It helps keep your imports clean and free from unnecessary dependencies.

We're updating the .eslintrc.cjs file to include additional configurations for JavaScript and TypeScript development.

For JavaScript, we're extending it with airbnb-base to follow industry best practices.

Moving on to TypeScript, we're setting up configurations to enhance code quality specifically for TypeScript projects.

Additionally, we're incorporating plugin:prettier/recommended. This integration combines ESLint's rules with Prettier's formatting capabilities to detect code inconsistencies and ensure consistent formatting.

Below is the updated structure of your .eslintrc.cjs file after extending the configurations.

// .eslintrc.json
{
  extends: [
    "airbnb-base",
    "next/core-web-vitals", // Needed to avoid warning in next.js build: 'The Next.js plugin was not detected in your ESLint configuration'
    "plugin:prettier/recommended",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended"
    ],
  parser: '@typescript-eslint/parser',
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': 'warn',
  },
};

Prepare yourself for the next step of our adventurous journey, brave explorer! We shall now update the rules property in your .eslintrc.json file to enforce code style and uphold the highest standards of quality.

Behold the magnificent transformation of your .eslintrc.json file, infused with the wisdom of countless battles fought by seasoned developers:

// .eslintrc.json
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    'airbnb-base',
    'plugin:prettier/recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': 'warn',
    'no-param-reassign': 1,
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        endOfLine: 'auto',
      },
    ],
    'react/react-in-jsx-scope': 0,
    '@typescript-eslint/no-empty-function': 1,
    'spaced-comment': 'error',
    quotes: ['error', 'single'],
    '@typescript-eslint/restrict-template-expressions': 1,
  },
};

Armed with these mighty rules and settings, your code shall be fortified against errors and imbued with unparalleled style. Brace yourself for their power:

no-param-reassign : 1: Enables the rule that prohibits reassigning function parameters. With this setting, any attempts to modify function parameters will trigger an error. Reassigning function parameters is considered a bad practice as it can lead to confusion and unintended side effects.
prettier/prettier: [...]: Configures the Prettier code formatter integration with ESLint. The provided settings specify that single quotes should be used for strings (singleQuote: true), and the line endings should be automatically detected based on the file (endOfLine: "auto").
react/react-in-jsx-scope: 0: Disables the rule that enforces importing the React object in every JSX file. This rule is specific to React projects and ensures that the React object is always in scope when using JSX syntax.
@typescript-eslint/no-empty-function: 1: Enables the rule that disallows empty function implementations. With this setting, empty function definitions will trigger an error. It is generally considered good practice to provide meaningful implementation for functions to avoid potential issues.
spaced-comment: error: Enforces a space after the start of a comment. This rule helps improve code readability by ensuring consistent spacing in comments.
quotes: ["error", "single"]: Enforces the use of single quotes for string literals. This rule ensures consistent quotation style throughout the codebase.
@typescript-eslint/restrict-template-expressions: 1: Enables the rule that checks for potentially unsafe expressions in template literals. With this setting, if a potentially unsafe expression is detected within a template literal, it will trigger an error. This rule helps prevent potential bugs and security vulnerabilities.

Get ready to supercharge your TypeScript project! We're about to unleash a set of powerful configurations designed exclusively for TypeScript files. Brace yourself as we set specific rules and wield cutting-edge plugins tailored to TypeScript's unique requirements. But we won't stop there. We'll boldly extend various ESLint configurations, going above and beyond to ensure pristine code quality. And just to push the boundaries even further, we'll enforce additional custom rules, leaving no room for mediocre code. Embrace the boldness and elevate your TypeScript development to new heights!

// eslintrc.json
{
  // Configuration for JavaScript files
  "extends": [
    "airbnb-base",
    "next/core-web-vitals", // Needed to avoid warning in next.js build: 'The Next.js plugin was not detected in your ESLint configuration'
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-param-reassign": 1,
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "endOfLine": "auto"
      }
    ],
    "react/react-in-jsx-scope": 0,
    "@typescript-eslint/no-empty-function": 1,
    "spaced-comment": "error",
    "quotes": ["error", "single"],
    "@typescript-eslint/restrict-template-expressions": 1
  },
  "overrides": [
    // Configuration for TypeScript files
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "plugins": ["@typescript-eslint", "unused-imports", "simple-import-sort"],
      "extends": [
        "airbnb-typescript",
        "next/core-web-vitals",
        "plugin:prettier/recommended"
      ],
      "parserOptions": {
        "project": "./tsconfig.json"
      },
      "rules": {
        "prettier/prettier": [
          "error",
          {
            "singleQuote": true,
            "endOfLine": "auto"
          }
        ],
        "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
        "react/require-default-props": "off", // Allow non-defined react props as undefined
        "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
        "react-hooks/exhaustive-deps": "off", // Incorrectly report needed dependency with Next.js router
        "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
        "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
        "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
        "no-restricted-syntax": [
          "error",
          "ForInStatement",
          "LabeledStatement",
          "WithStatement"
        ], // Overrides Airbnb configuration and enable no-restricted-syntax
        "import/prefer-default-export": "off", // Named export is easier to refactor automatically
        "simple-import-sort/imports": "error", // Import configuration for `eslint-plugin-simple-import-sort`
        "simple-import-sort/exports": "error", // Export configuration for `eslint-plugin-simple-import-sort`
        "@typescript-eslint/no-unused-vars": "off",
        "unused-imports/no-unused-imports": "error",
        "unused-imports/no-unused-vars": [
          "error",
          { "argsIgnorePattern": "^_" }
        ]
      }
    }
  ]
}

Let's breakdown down the configuration:

files: ["**/*.ts", "**/*.tsx"]: Specifies that the configuration applies to TypeScript files with the .ts and .tsx extensions.
plugins: [...]: Specifies the list of plugins used in this configuration. These plugins include @typescript-eslint, unused-imports, tailwindcss, and simple-import-sort.
extends: [...]: Extends the ESLint configurations for TypeScript and related frameworks. It includes plugin:tailwindcss/recommended, airbnb-typescript, next/core-web-vitals, and plugin:prettier/recommended. These configurations provide a set of predefined rules and settings tailored for specific environments.
parserOptions: { "project": "./tsconfig.json" }: Configures the parser options for TypeScript files, specifying the location of the tsconfig.json file. This helps ESLint understand TypeScript-specific syntax and type information.
rules: { [...] }: Defines specific rules and their configurations for TypeScript files. Here are some notable rules and their settings:
- react/destructuring-assignment: "off": Turns off the rule that enforces destructuring assignment for React components.
- react/require-default-props: "off": Allows non-defined React props to be undefined.
- react/jsx-props-no-spreading: "off": Allows spreading props in JSX components.
- react-hooks/exhaustive-deps: "off": Disables exhaustive dependency checking for React hooks.
- @typescript-eslint/comma-dangle: "off": Disables the rule related to trailing commas in TypeScript.
- @typescript-eslint/consistent-type-imports: "error": Enforces consistent usage of import type in TypeScript when necessary.
- no-restricted-syntax: [...]: Overrides Airbnb configuration and enables the rule that restricts certain types of syntax, such as ForInStatement, LabeledStatement, and WithStatement.
- import/prefer-default-export: "off": Allows named exports instead of preferring default exports.
- simple-import-sort/imports: "error" and simple-import-sort/exports: "error": Enforce a specific import and export order using eslint-plugin-simple-import-sort.
- @typescript-eslint/no-unused-vars: "off" and unused-imports/no-unused-imports: "error": Turn off the default TypeScript rule for unused variables and use the unused-imports plugin to enforce unused import detection.
- unused-imports/no-unused-vars: [...]: Configures the unused-imports plugin to ignore variables that start with an underscore (\_).
- spellcheck/spell-checker: This is the name of the rule provided by the eslint-plugin-spellcheck plugin. It is configured to check the spelling of words in comments, strings, and identifiers.
  - error: This indicates that if a misspelled word is found, it will be reported as an error.
  - Configuration object: The configuration object within the array provides additional settings for the spell-checker rule:
    - "comments": true: Enables spell-checking in comments.
    - "strings": true: Enables spell-checking in strings.
    - "identifiers": true: Enables spell-checking in identifiers.
    - "lang": "en_US": Specifies the language for spell-checking. In this case, it is set to American English.
    - "skipWords": ["some", "specific", "words"]: An array of words to skip from spell-checking. You can add specific words that you want to exclude from being checked.
    - "skipIfMatch": ["regex"]: An array of regex patterns to skip from spell-checking. You can specify regular expressions to match words that should be skipped.
    - "minLength": 3: Sets the minimum word length to check. Words shorter than this length will not be checked for spelling.

As per the new React documentation, react recommends using Next.js as one of the frameworks for react applications. If we are using Next.js then we'll have to add next/core-web-vitals. It is needed to avoid warning in next.js build: 'The Next.js plugin was not detected in your ESLint configuration'. For this plugin we need eslint-config-next package.

Setting up Prettier

Prettier is a code formatter that helps maintain consistent code style and formatting in projects. We will add a .prettierrc which will have the configuration for prettier code formatter.

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "all",
  "jsxSingleQuote": true,
  "bracketSpacing": true
}

This configuration enforces the following formatting rules:

semi: Adds semicolons at the end of statements.
printWidth: Wraps lines that exceed 80 characters.
singleQuote: Uses single quotes for string literals.
trailingComma: Adds trailing commas in arrays and objects. The value "all" enforces trailing commas wherever possible.
jsxSingleQuote: Uses single quotes for JSX attributes.
bracketSpacing: Adds spaces inside object literals.

Let's add some scripts in the package.json file to run prettier on all the files in the project.

"format": "prettier --write \"src/**/*.+(js|jsx|ts|tsx)\"",

The final scripts in the package.json will look as follows

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "format": "prettier --write \"src/**/*.+(js|jsx|ts|tsx)\""
}

Here is the GitHub repo for you to try it out!!!

Populating MongoDB schema

Mritunjay Saha — Thu, 29 Jul 2021 09:50:50 +0000

We'll be creating only the backend of the application for understanding how to post data in to a MongoDB schema that references another schema.

TL;DR

How can we get the following JSON data with the user schema referencing the todo schema?

{
  "todo": [
    {
      "_id": "61023642610b8d4ce4f56f81",
      "title": "test-title-1",
      "description": "test-description-1",
      "__v": 0
    },
    {
      "_id": "6102365b610b8d4ce4f56f84",
      "title": "test-title-2",
      "description": "test-description-2",
      "__v": 0
    }
  ],
  "_id": "6102361f610b8d4ce4f56f7f",
  "name": "test-user",
  "__v": 0
}

User Model

Todo Model

Here, the User schema is referencing the Todo schema. To get the JSON data with the todo data we need to do the following

While creating the todo data we need to add the ObjectId of the new todo to the todo array of the User. At this stage the data will look something like this.

{
  "todo": ["61023642610b8d4ce4f56f81", "6102365b610b8d4ce4f56f84"],
  "_id": "6102361f610b8d4ce4f56f7f",
  "name": "test-user",
  "__v": 0
}

To get the data of the todo created by the user we will reference the Todo table using the populate method which will get the data of the todo.

It is like joining two tables in SQL where User table references the Todo table using the primary key of the Todo table. Here, the primary key of the Todo table is the ObjectId.

GitHub repo

Initialize project

Initialize our backend using npm and install necessary packages.
Set up a MongoDB database.
Set up server using Node and Express.
Create a database schema to define a Todo.
Set up API routes to create user and todo and read user and todo.
Testing our API routes using Insomnia.

Install

VS Code or any other editor
Latest version of Node.js
Insomnia or Postman
Prettier VS code extension to format the code

1. Initializing our project

Create a new folder and name it anything that you like and then open the folder in VS code and run the following code from the command prompt.

npm init -y

After running this command you will find a package.json if the folder.

2. Setting up package.json

i. Install the following dependencies

Run the following commands in the terminal to install the dependencies

npm i cors dotenv express mongoose

cors: allows cross-origin api calls
dotenv: needed to access data from .env files
express: web application framework for node.js
mongoose: It is needed to define the database schema and connecting to mongoDB

ii. Install the following development dependencies

Now install the following development dependencies, -D is used to install the development dependencies.

npm i -D nodemon

After installing the dependencies the package.json folder should look as follows.

// package.json
{
  "name": "mongodb-schema-populate-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mritunjaysaha/mongodb-schema-populate-blog.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mritunjaysaha/mongodb-schema-populate-blog/issues"
  },
  "homepage": "https://github.com/mritunjaysaha/mongodb-schema-populate-blog#readme",
  "dependencies": {
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.13.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

iii. change the `main` entry point to `server.js`

Now, create a server.js file and a .env. The server.js file will be the entry point of the server and the .env file will contain the MONGO_URI. We also have to make the following changes in the package.json

//package.json
{
  "name": "mongodb-schema-populate-blog",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mritunjaysaha/mongodb-schema-populate-blog.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mritunjaysaha/mongodb-schema-populate-blog/issues"
  },
  "homepage": "https://github.com/mritunjaysaha/mongodb-schema-populate-blog#readme",
  "dependencies": {
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.13.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

Now, create the following folders

config: Inside the config folder, create a file named db.js. This file will contain the required code for connecting to the MongoDB database.
controllers: The controllers folder will contain the files which will have the methods for the end points to communicate with the database.
models: The models folder, will contain the files which will define the MongoDB schema
routers: The routers folder will contain the files with the endpoints.

At this stage the file structure should look as follows

.
├── config
│   └── db.js
├── controllers
│   └── user.js
├── models
│   ├── todo.js
│   └── user.js
├── node_modules
├── routes
│   └── user.js
├── .env
├── server.js
├── package-lock.json
└── package.json

iv. Change the `scripts` to the following

"scripts": {
  "start":"node server.js",
  "dev":"nodemon server.js"
}

The package.json file should look as follows

{
  "name": "mern-todo",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js", //added
    "dev": "nodemon server.js" //added
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "config": "^3.3.6",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.13.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

v. Setting up server

We will do the following to setup the server

Import express
Initialize our app using express()
Set up a get method for the endpoint http://localhost:8000 using app.get()
Set the PORT to 8000 for our server to run
Have our app to listen to PORT using app.listen()

.
├── config
│   └── db.js
├── controllers
│   └── user.js
├── models
│   ├── todo.js
│   └── user.js
├── node_modules
├── routes
│   └── user.js
├── .env
├── server.js <-- we are here
├── package-lock.json
└── package.json

The code will look as follows

And start the server using nodemon using the following code. Make sure you are running the following command from the project directory.

npm run dev

If the server has started successfully then it should show the following message in the terminal

[nodemon] 2.0.11
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
server is running on http://localhost:8000

You can also open http://localhost:8000 on your browser.

vi. Getting the `MONGO URI` from mongoDB

To connect to the database we will need the link for the mongoDB collection.

Log in to mongoDB
Create a new project
Build a cluster
Select cloud provider
Create cluster
wait for the cluster to be created.
Click on connect
click on allow access from anywhere. Then Add IP address

Create a database user. You'll need the username and password for the MongoDB URI.
Click on the Choose a connection method
Click on Connect your application
Select the following driver and version
Copy the mongodb+srv and paste it in the .env file

vii. Setting up `.env` file

//.env
MONGO_URI = mongodb+srv://<username>:<password>@cluster0.owmij.mongodb.net

Replace the <username> and <password> with your database username and password which you will set in step 9.

viii. Connecting to database

.
├── config
│   └── db.js <-- we are here
├── controllers
│   └── user.js
├── models
│   ├── todo.js
│   └── user.js
├── node_modules
├── routes
│   └── user.js
├── .env
├── server.js
├── package-lock.json
└── package.json

Now, open the db.js file which is in the config folder and add the following changes.

Import mongoose
Import MONGO_URI from .env
Define the connectDB methof for connecting to the database
Export the connectDB method to be called in server.js

Add the following changes in the server.js file.

Import dotenv
Import connectDB method from config/db.js
Call the connectDB method.

Let us make the the following changes in server.js

Save the changes it will restart the server or use the command npm run dev. The terminal should show a message of MongoDB is connected which we have added in the db.js under the try block.

ix. Defining database schema

Create a todo.js file in the models folder. We will define the database schema in this file.

.
├── config
│   └── db.js
├── controllers
│   └── user.js
├── models
│   ├── todo.js <-- we are here
│   └── user.js
├── node_modules
├── routes
│   └── user.js
├── .env
├── server.js
├── package-lock.json
└── package.json

Import mongoose
Create a Schema called TodoSchema
We will add two fields for our todo; title and description
Type of title will be String and it is a mandatory field
Type of description will be String and it is not a mandatory field
Export the model

The code will look as follows

Create a schema for the user using the above steps.

After making the changes, the user model will look something like this

x. Defining the controllers

.
├── config
│   └── db.js
├── controllers
│   └── user.js <-- we are here
├── models

│   └── todo.js
├── node_modules
├── routes
│   └── user.js
├── .env
├── server.js
├── package-lock.json
└── package.json

Import Todo and User schemas
Define createUser method will create a new user
Define createTodo method will do the following
- create a new todo
- save the todo
- use the userId to find the user
- update the todo array with the ObjectId of the new todo
Define getUser to get the user details. The output of this method we can see that todo consists of some random value which is the ObjectId of the todo that the user has created. We cannot figure out what the todo contains.

{
  "todo": ["61023642610b8d4ce4f56f81", "6102365b610b8d4ce4f56f84"],
  "_id": "6102361f610b8d4ce4f56f7f",
  "name": "test-user",
  "__v": 0
}

Define getAllTodo method we will use the userId to find the user and then use the populate method to reference the todo with the ObjectId from the Todo table. The exec method is used to check for errors and return the populated data.

{
  "todo": [
    {
      "_id": "61023642610b8d4ce4f56f81",
      "title": "test-title-1",
      "description": "test-description-1",
      "__v": 0
    },
    {
      "_id": "6102365b610b8d4ce4f56f84",
      "title": "test-title-2",
      "description": "test-description-2",
      "__v": 0
    }
  ],
  "_id": "6102361f610b8d4ce4f56f7f",
  "name": "test-user",
  "__v": 0
}

xi. Defining the end points

.
├── config
│   └── db.js
├── controllers
│   └── user.js
├── models

│   └── todo.js
├── node_modules
├── routes
│   └── user.js <-- we are here
├── .env
├── server.js
├── package-lock.json
└── package.json

We will define the end points to create users and todo and to read them.

Import express
Import all the methods from controllers
Initialize router
Define a POST method to create a user
Define a POST method to create a todo and save it in the user
Define a GET method to read user data
Define a GET method to read user data and todo data

After making the above changes the code will look something like this

xii. Adding the routes end points in the `server.js`

.
├── config
│   └── db.js
├── controllers
│   └── todo.js
├── models
│   └── todo.js
├── node_modules
├── routes
│   └── todo.js
├── .env
├── server.js <-- we are here
├── package-lock.json
└── package.json

The final part of completing the backend is to add the endpoints to the server.js file.

Import routes/todo.js
Add the routes endpoints to the middleware

3 Testing the end points using `Insomnia`

Create a user

We will send a POST request to http://localhost:8000/api/user

Create some todo

We will send a POST request to http://localhost:8000/api/user/todo/:userId

copy the _id from the response of the create a user request

Read the user data

We will send a GET request to http://localhost:8000/api/user/:userId

Read the populated user data

We will send a POST request to http://localhost:8000/api/user/todo/:userId

You can check the code in GitHub

MERN stack TODO application [Frontend]

Mritunjay Saha — Wed, 21 Jul 2021 12:55:30 +0000

We'll be creating the frontend application for our backend application.

Before we get started

Read Part-1: Creating the backend

In part-1, we

Initialized backend using npm and installed necessary dependencies
Set up MongoDB database
Set up a server using node.js and express.js
Created database schema to define a TODO
Created api routes to create, read, update and delete todo

In this part, we will

Set up our frontend using create-react-app
Create components for reading all the todo, creating todo and updating todo

Before getting started with `Part-2`

Store the contents of the part-1 in a folder named server and create a folder for client

The folder structure will look something like this

.
└── mern-todo
    ├── server
    └── client

Part-2: Creating Frontend

1. Initializing our project

We'll initialize the create-react-app in the client folder. Run the following command from the terminal but make sure you are in the client folder.

npx create-react-app .

The . in the above command refers to the current folder. This will install our react app in the current folder instead of installing the app in a different folder.

2. Installing required dependencies

Within the client folder install the following dependencies

npm i node-sass axios react-router-dom

node-sass: allows using sass instead of css
axios: to make api calls to the backend
react-router-dom: for routing between pages

client's folders package.json should look something like this.

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "node-sass": "^6.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

3. Cleaning the `src` folder

Delete the logo.svg
Remove the imports from App.js
Remove the following from App.js

<header className="App-header">
  <img src="{logo}" className="App-logo" alt="logo" />
  <p>Edit <code>src/App.js</code> and save to reload.</p>
  <a
    className="App-link"
    href="https://reactjs.org"
    target="_blank"
    rel="noopener noreferrer"
  >
    Learn React
  </a>
</header>

and put the following placeholder. We will put the actual code later.

<header>Hello, World!</header>

Delete the index.css file and remove the corresponding import from index.js
Rename the App.css file to App.scss and change the corresponding import at App.js

  import "./App.scss" //updated

Run npm start. Open http://localhost:3000 and it should display Hello, World!
Copy and paste the styles from here and paste it in the App.scss file.

Now, we are good to start creating the frontend application.

4. Creating the `components`

.
├── node_modules
├── public
├── src <---------- we are here
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Create a components folder inside the src folder and add the following files

createTodo.jsx
showTodoList.jsx
updateTodo.jsx

After adding these files, the folder structure will look something like this

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

i. `READ` all the todo

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx <-- we are here
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

First, we will create the ShowTodoList component, to read all the documents that we created in the previous part while testing the backend application.

Import useState and useEffect hooks from react
Import axios from axios

In ShowTodoList function component will have a state todo, we will fetch the documents from the database and store it in the state todo.

We will use axios to send a GET request to the backend to fetch the document. Upon receiving the data we will store the data in todo using setTodo and log the data. If we receive an error we'll log that too.

We will make the get request from the useEffect hook, since we want the data to load when the page loads.

We will use the TodoCard component to display the contents of the todo. We will use map to iterate over todo and pass the contents to TodoCard which will display the contents of each todo document.

The contents of the showTodoList.jsx file should look something like this

We will import ShowTodoList component in the App.js file

The contents of the App.js file should look something like this

Now, start the server that we built in part-1

npm run dev

Now, start the client side application

npm start

Open http://localhost:3000 in your browser and it should display all the todo documents that was fetched from the database.

ii. `CREATE` a new todo

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx <-- we are here
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

To create a new document we will send a POST request to our server using axios.

Import useState hook react
Import Link from react-router-dom
Define a function handleChange that will get the input data
Define a function handleSubmit that will send the POST request to the server
Declare data using useState hook with the following json

{
  "title": "",
  "description": ""
}

In handleChange method we will update the data when the input changes. We will call the setData() and declare a arrow function inside that will copy the contents of the previous data if any exists. In this e.target.name will be the name of the input element that will have either title or description.

In handleSubmit method,

Call e.preventDefault() to prevent the page from reloading when the submit button is clicked.
Send a POST request to the server with the data. If the data has been sent successfully to the server then reset the state data

After adding the above change the code will look something like this

iii. Update `App.js`

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx
│   ├── App.js <-------------- we are here
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Before we can use the CreateTodo component we need to update App.js file.

Import BrowserRouter and Route from react-router-dom
Import CreateTodo component from components/createTodo
Create a Route for home page / and pass the ShowTodoList component
Create a Route for creating a new todo /create-todo
Wrap the Routes inside of the BrowserRouter

After making the changes the App.js file should look something like this

Since we have not added the button to navigate to http://localhost:3000/create-todo you can type this in your browser to check the CreateTodo component.

iv. Adding the Link to navigate to `/create-todo` to `showTodoList.jsx`

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx <-- we are here
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Import Link from react-router-dom
Wrap a button inside of Link tag

After making the changes, the ShowTodoComponent will look something like this.

v. Creating the `UpdateTodo` component to send `UPDATE` request

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx <-- we are here
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Import useState from react
Import axios from axios

The UpdateTodo component will have 3 props

_id
handleClose
handleEdited

The updateTodo.jsx file may look something like this.

vi. Adding the method to `DELETE` a todo

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx <-- we are here
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

We will make the following changes in showTodoList.jsx

Define a function handleDelete that will send a DELETE request to the server. This function will need the _id of the document to delete the document from the database. It will also update the array todo with the filtered array.
Pass the handleDelete method as a prop to TodoCard
Update TodoCard component to have the parameter handleDelete
Add an onClick event for the button delete and pass the handleDelete method

After making the changes, the code will look something like this

vii. Adding the `UpdateTodo` component in `showTodoList.jsx`

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx <-- we are here
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

We need to add the following changes in the showTodoList.jsx

Import UpdateTodo component from updateTodo.jsx
Declare open using the useState hook with the default value of false. The value of open will be either true or false. We will conditionally render the UpdateTodo component. If the edit button is clicked on any one of the todo then we will set open to true when the UpdateTodo component will be rendered.
Declare id using the useState hook. The _id of the todo document to be updated will be stored. It will be passed as a prop to UpdateTodo component.
Declare update using the useState hook. This will be used to fetch all the todo documents from the database. Each time a todo document has been updated then update will change between true and false
Define a function handleEdit. It will update the state id with the _id of the document and update the state of open to true. The UpdateTodo component will be rendered.
Define a function handleUpdate. This will invert the state of update if the todo has been updated by the user. Inverting the state will cause the useEffect hook to update the todo array.
Define a function handleClose. We need this to close the UpdateTodo component. This will set id to an empty string and set open to false.

Update the TodoCard component

Pass the handleEdit function to the TodoCard component.
Pass the handleEdit prop to the edit button.

After making the above changes, the code will look something like this

You can see the entire code for part-2 in GitHub

MERN stack TODO application [Backend]

Mritunjay Saha — Mon, 19 Jul 2021 12:56:44 +0000

We'll be creating a minimal full-stack app using the MERN stack (MongoDB for database, Express and Node for backend, and React for frontend) to perform CRUD operations.

Our app will allow users to

Create a todo
Read todos
Update a todo
Delete a todo

This series should enable you understand CRUD operations using MERN stack.

In this part (part1), we will

Initialize our backend using npm and install necessary packages
Set up a MongoDB database
Set up server using Node and Express
Create a database schema to define a Todo
Set up API routes to create, read, update and delete documents from the database
Testing our API routes using Insomnia

Before we get started

Prerequisites

One should have at least some basic understanding of fundamental programming concepts and some experience with HTML, CSS, JavaScript.

This post is not meant to explain the MERN stack, but it is a good introduction to building a full-stack app with it.

Install

VS Code or any other editor
Latest version of Node.js
Insomnia or Postman
Prettier VS code extension to format the code

Part 1: Creating Backend

1. Initializing our project

Create a new folder and name it anything that you like and then open the folder in VS code and run the following code from the command prompt.

npm init -y

After running this command you will find a package.json if the folder.

2. Setting up package.json

i. Install the following dependencies

Run the following commands in the terminal to install the dependencies

npm i cors dotenv express mongoose

ii. Install the following development dependencies

Now install the following development dependencies, -D is used to install the development dependencies.

npm i -D nodemon

After installing the dependencies the package.json folder should look as follows.

// package.json
{
  "name": "mern-todo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "config": "^3.3.6",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.13.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.11"
  }
}

iii. change the `main` entry point to `server.js`

//package.json
{
  "name": "mern-todo",
  "version": "1.0.0",
  "description": "",
  "main": "server.js", //changed
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "config": "^3.3.6",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.13.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.11"
  }
}

Now, create the following folders

config: Inside the config folder, create a file named db.js. This file will contain the required code for connecting to the MongoDB database.
controllers: The controllers folder will contain the files which will have the methods for the end points to communicate with the database.
models: The models folder, will contain the files which will define the MongoDB schema
routers: The routers folder will contain the files with the endpoints.

At this stage the file structure should look as follows

.
├── config
│   └── db.js
├── controllers
│   └── todo.js
├── models
│   └── todo.js
├── node_modules
├── routes
│   └── todo.js
├── .env
├── server.js
├── package-lock.json
└── package.json

iv. Change the `scripts` to the following

"scripts": {
  "start":"node server.js",
  "dev":"nodemon server.js"
}

The package.json file should look as follows

{
  "name": "mern-todo",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js", //added
    "dev": "nodemon server.js" //added
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "config": "^3.3.6",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.13.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.11"
  }
}

v. Setting up server

We will do the following to setup the server

Import express
Initialize our app using express()
Set up a get method for the endpoint http://localhost:8000 using app.get()
Set the PORT to 8000 for our server to run
Have our app to listen to PORT using app.listen()

.
├── config
│   └── db.js
├── controllers
│   └── todo.js
├── models
│   └── todo.js
├── node_modules
├── routes
│   └── todo.js
├── .env
├── server.js <-- we are here
├── package-lock.json
└── package.json

The code will look as follows

And start the server using nodemon using the following code. Make sure you are running the following command from the project directory.

npm run dev

If the server has started successfully then it should show the following message in the terminal

[nodemon] 2.0.11
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
server is running on http://localhost:8000

You can also open http://localhost:8000 on your browser.

vi. Getting the `MONGO URI` from mongoDB

To connect to the database we will need the link for the mongoDB collection.

Log in to mongoDB
Create a new project
Build a cluster
Select cloud provider
Create cluster
wait for the cluster to be created.
Click on connect
click on allow access from anywhere. Then Add IP address

Create a database user. You'll need the username and password for the MongoDB URI.
Click on the Choose a connection method
Click on Connect your application
Select the following driver and version
Copy the mongodb+srv and paste it in the .env file

vii. Setting up `.env` file

//.env
MONGO_URI = mongodb+srv://<username>:<password>@cluster0.owmij.mongodb.net

Replace the <username> and <password> with your database username and password which you will set in step 9.

viii. Connecting to database

.
├── config
│   └── db.js <-- we are here
├── controllers
│   └── todo.js
├── models
│   └── todo.js
├── node_modules
├── routes
│   └── todo.js
├── .env
├── server.js
├── package-lock.json
└── package.json

Now, open the db.js file which is in the config folder and add the following changes.

Import mongoose
Import MONGO_URI from .env
Define the connectDB methof for connecting to the database
Export the connectDB method to be called in server.js

Add the following changes in the server.js file.

Import dotenv
Import connectDB method from config/db.js
Call the connectDB method.

Let us make the the following changes in server.js

Save the changes it will restart the server or use the command npm run dev. The terminal should show a message of MongoDB is connected which we have added in the db.js under the try block.

ix. Defining database schema

Create a todo.js file in the models folder. We will define the database schema in this file.

.
├── config
│   └── db.js
├── controllers
│   └── todo.js
├── models
│   └── todo.js <-- we are here
├── node_modules
├── routes
│   └── todo.js
├── .env
├── server.js
├── package-lock.json
└── package.json

Import mongoose
Create a Schema called TodoSchema
We will add two fields for our todo; title and description
Type of title will be String and it is a mandatory field
Type of description will be String and it is not a mandatory field
Export the model

The code will look as follows

x. Defining the end points

.
├── config
│   └── db.js
├── controllers
│   └── todo.js
├── models
│   └── todo.js
├── node_modules
├── routes
│   └── todo.js <-- we are here
├── .env
├── server.js
├── package-lock.json
└── package.json

We will define the end points for the CRUD operations

Import express
Initialize router
We will later import the methods for the endpoint from controllers
Define a GET method to read all the todo
Define a POST method to create a new todo
Define a PUT method to update a existing todo
Define a DELETE method to delete a existing todo
Export the router

The code will look as follows

xi. Defining the methods for the end points

We will define the methods for the end points in the controllers folder

.
├── config
│   └── db.js
├── controllers
│   └── todo.js <-- we are here
├── models
│   └── todo.js
├── node_modules
├── routes
│   └── todo.js
├── .env
├── server.js
├── package-lock.json
└── package.json

Import Todo model from models/todo
Define the following four methods
- getAllTodo
- postCreateTodo
- putUpdateTodo
- deleteTodo
Export all the methods

getAllTodo: The find() method will return all the todo in the collection. If the collection is empty then it will return a 404 error.

postCreateTodo: The create() method will create a todo and return a success message. Otherwise, it will return a 400 error.

putUpdateTodo: The findByIdAndUpdate() will require two parameters the id and data of the todo to be updated. The id parameter will be extracted from req.params.id.

deleteTodo: The findByIdAndRemove() method will require only one parameter that is the id of the todo.

xii. Adding the methods to the end points

.
├── config
│   └── db.js
├── controllers
│   └── todo.js
├── models
│   └── todo.js
├── node_modules
├── routes
│   └── todo.js <-- we are here
├── .env
├── server.js
├── package-lock.json
└── package.json

Import the methods for CRUD operations
Adding the methods to the end points

xiii. Adding the routes end points in the `server.js`

.
├── config
│   └── db.js
├── controllers
│   └── todo.js
├── models
│   └── todo.js
├── node_modules
├── routes
│   └── todo.js
├── .env
├── server.js <-- we are here
├── package-lock.json
└── package.json

The final part of completing the backend is to add the endpoints to the server.js file.

Import routes/todo.js
Add the routes endpoints to the middleware

3 Testing the end points using `Insomnia`

Creating a todo

We will send a POST request to http://localhost:8000/api/todo

Reading the todo

We will send a GET request to http://localhost:8000/api/todo

You can check the changes in mongoDB in collections

Updating a todo

To update a todo we will send a PUT request to http://localhost:8000/api/todo/id

The id has to be taken from the response message of the server.

  {
    "message": "Todo added successfully",
    "data": {
      "_id": "60ec0f9655f9735a60a2d967",
      "title": "test todo",
      "description": "test todo",
      "__v": 0
    }
  }

For updating the todo we will need the id. We will get the id from the _id from the preview tab. We can get the id from the preview after using the GET request and POST request.

Deleting a todo

To delete a todo we will send a DELETE request to http://localhost:8000/api/todo/id

4. Adding `cors`

.
├── config
│   └── db.js
├── controllers
│   └── todo.js
├── models
│   └── todo.js
├── node_modules
├── routes
│   └── todo.js
├── .env
├── server.js <-- we are here
├── package-lock.json
└── package.json

Added cors so that we can make the api calls from the frontend application like react.

You can see the entire code of this blog in GitHub

Using idb-keyval for indexedDB

Mritunjay Saha — Mon, 29 Jun 2020 19:39:13 +0000

Why use indexedDB instead of localStorage?

I came across indexedDB when I was looking for an alternate option for localStorage since it was not storing all the elements of an object. I needed to create react component using those values but since all the elements were not stored I was not able to display all the details on the client-side. So used indexedDB instead of localStorage to store the data.

What is indexedDB?

As per the MDN docs, indexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data.

It also says that IndexedDB is a transactional database system, like an SQL-based RDBMS. However, unlike SQL-based RDBMSes, which use fixed-column tables, IndexedDB is a JavaScript-based object-oriented database.

How to use indexedDB?

It might appear to be a bit difficult to use indexedDB but it becomes very simple when we use idb-keyval. Now, we can set and get data from the keyval store of the indexedDB using key-value pairs as we did in localStorage. Unlike localStorage, here we can stores arrays and objects too. We don't need to stringify the data before sending it on the keyval store of indexedDB. It is a promise-based keyval store

For using the idb-keyval, we need to install it using the following command:

npm install idb-keyval

And importing the set and get methods

import {set, get} from "idb-keyval"

Let see a simple use of indexedDB.

The syntax of the set method is

set("key", "value")

and the syntax of the get method is

get("key")

As you can see in the example that we have updated the value inside the then block. it is because idb-keyval is promise based and the get method will always return a promise.

Apart from the set and get methods there are other methods like del, clear, and key.

You can find the code in the Github Repository.

How to create piconet in android?

Mritunjay Saha — Mon, 29 Jun 2020 15:27:44 +0000

I am writing this blog because I found it quite to difficult to find any resource to create a piconet for android devices.

What is a piconet?

A piconet is a Bluetooth ad-hoc network. It can consist of one master device and a maximum of seven slave devices.

TL;DR

We will create a class named Piconet. It will have the required methods needed to connect multiple devices. For this, we will need a UUID (There are many online UUID generators available online).

How will the device connect?

For the devices to connect the app needs to be running on all the devices. Since the Bluetooth socket needs to be open on all the devices.

Once the app is running we will click the discover button so that all the paired devices are listed on the drop-down list. from the drop-down list we can select a mobile Bluetooth device to connect. Once the devices are connected then it will show a toast and we can send "Hello World" text to the other Bluetooth devices.

The Bluetooth device that starts the connection is the master Bluetooth device. It can connect up to a maximum of 7 devices (Theoretical limit. Practical limitations depends on the hardware). If the send message button is clicked on the master device then it will broadcast the message. But it is not same for the slave devices when the send message button is pressed on the slave devices then it will send the text messages only to the master device.

The code for this blog is in this Github Repo

Theme Switching Using Local Storage

Mritunjay Saha — Tue, 12 May 2020 16:51:10 +0000

Suppose we want to store the theme of the website so that the user need not set the theme every time he visits a website like airqualitymonitor. Local storage will help to give a better user experience since the site will not feel buggy.

How to store the theme?

We will use local storage to store the class name of the themes.

What is local storage?

Local storage allows us to store only strings. These strings can be class names, JSON objects, etc. We can store the class name say dark for dark theme and light for the light theme. When the user changes the theme, we will store the class name to the local storage. And whenever the user revisits the site, we will load the class name from the local storage and set the last selected theme.

How to send data to local storage and how to fetch data from local storage?

The local storage stores data in key-value pairs.
Sending data to local storage: localStorage.setItem(“key”,”data”)
Fetching data from local storage: localStorage.getItem(“key”)
There are more commands but we will need only these two for our purpose.

Let us see how local storage works using a small example.

It will send the data as a string to local storage. And using localStorage.getItem(“key”) we get the value of the key and store it in a variable. And print the data to the console.

The data of a website is stored in local storage and can be seen in Chrome Dev Tools “Application” tab. From the application tab, one can delete the key-value pair.

How to make the toggle switch?

You can try the following code to implement the theme switch.

HTML

JS

CSS

You can copy the CSS files from here

Initially, the theme is set to light. If the theme is switched then we will remove the light theme and set it to the dark theme. And update the key (“theme”) in the localStorage using setItem() to "dark". Now a question arises that when the site is refreshed, how will it know that it has to load the dark theme?

When the window loads checkTheme() function, it will check if the theme key exists in the local storage. If it exists and the value is dark then it will set it to dark.

The end result will look like this

If the key of your website is the same as the key to some other website?

Suppose we have two files with the same filename if we paste them in the same folder then only the contents of one file will be retained. But if we have two separate folders and we paste one file in say folder A and the other file in folder B, then the contents of both the files will not be altered.

In a similar manner, the key-value pairs of one website are stored in a folder with its domain name.

If someone wants to store a JSON object in local storage? Will he be able to store the JSON object in localStorage?

Since localStorage can only store strings, we have to convert the JSON object to string using JSON.stringify(object). The syntax would look like:- localStorage(“key”,JSON.stringify(object));

Forem: Mritunjay Saha

🚀 Elevate your text game with HTML! Need to raise text?

How to achieve superscript and subscript in HTML?

Enhancing Search Functionality in React with Debouncing

Are you looking to improve the search experience in your React application? Utilizing debouncing can be a game-changer, especially when integrating API calls with user input. In this article, we'll explore how to implement debouncing in a search feature using React Hook Form.

Understanding Debouncing and Throttling

Debouncing vs. Throttling in Search

Setup and Dependencies

Implementation steps

1. Installation

2. Creating the SearchForm Component

3. Usage in your Application

Conclusion

ESLint and Prettier: Turbocharge Your React and TypeScript Development

Hi everyone! Let's dive into the powerful duo of ESLint and Prettier. If you've ever found yourself grappling with maintaining code quality or wrestling with consistent code formatting, this comprehensive guide is made for you.

How to implement ESLint and Prettier?

How to install ESLint

Setting up Prettier

Populating MongoDB schema

TL;DR

User Model

Todo Model

Initialize project

Install

1. Initializing our project

2. Setting up package.json

i. Install the following dependencies

ii. Install the following development dependencies

iii. change the main entry point to server.js

iv. Change the scripts to the following

v. Setting up server

vi. Getting the MONGO URI from mongoDB

vii. Setting up .env file

viii. Connecting to database

ix. Defining database schema

x. Defining the controllers

xi. Defining the end points

xii. Adding the routes end points in the server.js

3 Testing the end points using Insomnia

MERN stack TODO application [Frontend]

Before we get started

Read Part-1: Creating the backend

In this part, we will

Before getting started with Part-2

Part-2: Creating Frontend

1. Initializing our project

2. Installing required dependencies

3. Cleaning the src folder

4. Creating the components

i. READ all the todo

ii. CREATE a new todo

iii. Update App.js

iv. Adding the Link to navigate to /create-todo to showTodoList.jsx

v. Creating the UpdateTodo component to send UPDATE request

vi. Adding the method to DELETE a todo

vii. Adding the UpdateTodo component in showTodoList.jsx

MERN stack TODO application [Backend]

Our app will allow users to

In this part (part1), we will

Before we get started

Prerequisites

Install

Part 1: Creating Backend

1. Initializing our project

2. Setting up package.json

i. Install the following dependencies

ii. Install the following development dependencies

iii. change the main entry point to server.js

iv. Change the scripts to the following

v. Setting up server

vi. Getting the MONGO URI from mongoDB

vii. Setting up .env file

viii. Connecting to database

ix. Defining database schema

x. Defining the end points

xi. Defining the methods for the end points

xii. Adding the methods to the end points

xiii. Adding the routes end points in the server.js

3 Testing the end points using Insomnia

4. Adding cors

iii. change the `main` entry point to `server.js`

iv. Change the `scripts` to the following

vi. Getting the `MONGO URI` from mongoDB

vii. Setting up `.env` file

xii. Adding the routes end points in the `server.js`

3 Testing the end points using `Insomnia`

Before getting started with `Part-2`

3. Cleaning the `src` folder

4. Creating the `components`

i. `READ` all the todo

ii. `CREATE` a new todo

iii. Update `App.js`

iv. Adding the Link to navigate to `/create-todo` to `showTodoList.jsx`

v. Creating the `UpdateTodo` component to send `UPDATE` request

vi. Adding the method to `DELETE` a todo

vii. Adding the `UpdateTodo` component in `showTodoList.jsx`

iii. change the `main` entry point to `server.js`

iv. Change the `scripts` to the following

vi. Getting the `MONGO URI` from mongoDB

vii. Setting up `.env` file

xiii. Adding the routes end points in the `server.js`

3 Testing the end points using `Insomnia`

4. Adding `cors`