DEV Community: Rajesh Ranjan

Realtime Todo App Using React and Pocketbase

Rajesh Ranjan — Sat, 08 Oct 2022 17:12:37 +0000

I recently came across an outstanding Open Source backend project called PocketBase and its really amazing.
Let's point out the good parts:

It is written in Go, and everyone knows how _blazingly _ fast Go is.
Open-source alternative to Firebase for smaller/hobby projects.
Only one file to run, and can be used for RealtimeDB, Authentication(with different providers), File Storage, RestAPI and much more to come.
Now the best part, it requires very very few lines to setup, and trust me its super easy to setup a realtime db really fast, compared to Firebase which has a lot of boilerplate and setup at client side🤯.
Local admin dashboard to take control of everything, can be self hosted easily, only one single file to run everything. Isn't this Amazing! 😲

Cons
Still under development so you might face some issues, but the development team is keen to resolve issues really fast.

PocketBase Dashboard
You can easily get the required code for your APIs here easily:

You can setup your own rules for the access to APIs easily:

I created this simple todo app using React+PocketBase, which supports creation and updation of todo in realtime.

Download PocketBase from according to your OS and run it using the command pocketbase serve.

Open the Admin UI in browser and create a new collection named todoCollection and add these fields to it and for now disable list action,create action and update action API rules to grant everyone access.

That's it for the server side. Now coming to the client side:

Create a new react-app with Tailwind if you want styling as mine else leave it and create a components folder with a file named TodoScreen.jsx.
Install pocketbase js-SDK using npm install pocketbase and import it in your file using: import Pocketbase from 'pocketbase'
Pocketbase doc is itself sufficient and also the Admin Dashboard as I mentioned above where you can get the codes for your APIs to use.
Just an important code that deals with the realtime in React:

// realtime
  useEffect(() => {
    client.realtime.subscribe('todoCollection', function (e) {
      // console.log('realtime', e.record);
      let x = todos.filter((item) => item.id !== e.record.id);
      setTodos([e.record, ...x]);
    });
    return () => {
      client.realtime.unsubscribe(); // don't forget to unsubscribe
    };
  });

So what it does is, keep the looking for mutations in the collection as the client is subscribed to the collection. When some changes happens in the collection (create,update & delete) it gets fired and returns the new record.

P.S (not going to write full code here because its easily understandable)

Link to the full code: https://github.com/rajesh6161/pocketbaseTodo

Thanks, and hoping this was of some help for devs looking out for Realtime DB with easy and fast setup.

Google Sign in using Supabase, NextJS

Rajesh Ranjan — Fri, 14 Jan 2022 15:36:00 +0000

Supabase is really an awesome opensource 👌 alternative to Google's Firebase. Its really really simple to setup the database, authentication flow, uploading/downloading stuffs to/from the server. In this tutorial let's create a really simple authentication system that uses Google's oAuth to authenticate users and is **persistent **also incase you close the browser also.🤩

For this tutorial we'll use NextJS for frontend (you can choose react/remix as you prefer), tailwind for little styling as it makes CSS styling superrrrr fast.

Just a simple login page for demo:

Setup your Google Cloud Project using the official tutorial from the Supabase team by going to this link:

Fork this Repo and integrate in your own project easily plus you can easily customize it with no breaking changes.🤩

Hope it helps you! ✌️ and if you have any issues please let me know in the comments.
https://github.com/rajesh6161/SupabaseOAuth

Complete Missions and Get Certificate from Netlify *free

Rajesh Ranjan — Sat, 08 Jan 2022 17:31:30 +0000

I just got certificate from Jamstack Explorers from Netlify which consists of various tracks called missions which then consists of various crash courses on different topics like NuxtJS, NextJS, Strapi+Nuxt and many more. These all tutorials have code along exercises which is best and you will brush up your skills.
Best for beginners with knowledge of Vue/React and web fundamentals.

Check this out here --> https://explorers.netlify.com/missions

Checkout my new Portfolio Page

Rajesh Ranjan — Tue, 04 Jan 2022 19:15:09 +0000

No doubt Next.js and Tailwind CSS are best combos out there so I also tried and made my own portfolio using these two awesome technologies and yeah the killer firebase alternative Supabase. Just wow🤩 I am really amazed by supabase's fast setup and easy to access dashboard that really helped me make this portfolio successful.
I am sharing some screenshots and link to my portfolio please have a look and do let me know what else I can add to make it better.
P.S. I am a fresher.

P.S. Project links will be added later 😊
https://rajeshranjan.live/

Reverse Lists, Add them, Reverse the sum and return the sum as a List

Rajesh Ranjan — Mon, 28 Jun 2021 10:39:46 +0000

I came around this problem while solving questions on leetcode. This is a very good problem of linked lists. Basically the problem says: You are given two linked lists, you have to add those lists by reversing them and again reverse your addition output and return it as a linked list 🤔. I will not go solving this problem in context of time complexity but rather I will try to simplify it to the most basic level.
I'm using Java to solve this problem. I will be solving it from the scratch.

1. First let's create a node for the linked list.

public class Node {
        int data;
        Node next;

        public Node(int data) {
            this.data = data;
            next = null;
        }
    }

2. Function to add Nodes to the linked list:

    public Node head = null;
    public Node tail = null;

    public void addNode(int data) {
        Node newNode = new Node(data);
        if (head == null) {
            head = newNode;
            tail = newNode;
        } else {
            tail.next = newNode;
            tail = newNode;
        }
    }

3. Function to display nodes in the list.

public void display() throws IllegalStateException {
        Node current = head;
        if (head == null) {
            throw new IllegalStateException("Your List is empty");
        }
        while (current != null) {
            System.out.println(current.data);
            current = current.next;
        }
    }

The top 3 blocks of codes were normal implementation of the linked list and displaying them using the display function.
Now, the function to reverse the linked list:

4. Reversing the linked list iteratively (you can do that recursively also)

public Node reverse(Node start) throws IllegalStateException {
        if (start == null) {
            throw new IllegalStateException("List is empty");
        }
        Node current = start;
        Node prev = null;

        while (current != null) {
            Node next = current.next;
            current.next = prev;
            prev = current;
            current = next;
        }
        return prev;
    }

5. The most important step is to add the values from the list to a StringBuilder and convert it to integer and return it. We'll use this value in the main function. Workaround: To add the values easily that's why we are doing this extra step.

public static int arr(Node start) throws IllegalStateException {
        Node current = start;
        if (start == null) {
            throw new IllegalStateException("Your List is empty");
        }

        StringBuilder sb = new StringBuilder();

        while (current != null) {
            sb.append(current.data);
            current = current.next;
        }
        String str = sb.toString();
        int x = Integer.parseInt(str);
        return x; // string converted to int
    }

6. Finally the main method:

public static void main(String[] args) {
        // creating two demo lists 
        AddTwoNumbers list1 = new AddTwoNumbers();
        list1.addNode(1);
        list1.addNode(1);
        list1.addNode(6);

        AddTwoNumbers list2 = new AddTwoNumbers();
        list2.addNode(1);
        list2.addNode(9);
        list2.addNode(2);

        // reversing the lists
        Node x1 = list1.reverse(list1.head);
        Node x2 = list2.reverse(list2.head);

        // getting the returned integer representation of the lists
        int y1 = arr(x1);
        int y2 = arr(x2);

        // adding both the values that's why we did the 5th step to simplify this summing process
        int sum = y1 + y2;

        // convert again to string builder so that we can reverse it easily
        StringBuilder str = new StringBuilder();
        StringBuilder output = str.append(sum).reverse();

        // create a new list that will be returned
        AddTwoNumbers finalList = new AddTwoNumbers();

        // pass the values to the list
        for (int i = 0; i < output.length(); i++) {
            int x =Integer.parseInt(String.valueOf(output.charAt(i)));
            finalList.addNode(x);
        }

        // and, finally display it
        finalList.display();

    }

I know this solution went too long but this is a good workaround of solving this problem easily.

An Intro To JavaScript Array Methods

Rajesh Ranjan — Mon, 11 May 2020 11:01:01 +0000

Arrays are one of the most basic Data Structures in every programming language.
Every programmer must know the very basic concepts of array and how to use them efficiently. As arrays are already built-in in every programming language they are usually very efficient and are good choice to store and retrieve data easily.
Many programming languages provide built-in array methods to increase the efficiency of a programmer, JavaScript also provides as such built-in array methods which are very powerful.

Let's look at some of the important array methods in JavaScript

1. Array.push()

  //Use this method to add one element to the end of the array

  let fruitList = ['Mango', 'Apple', 'Orange', 'Banana']
  fruitList.push('Guava') 
  console.log(fruitList)
  Outputs: ["Mango", "Apple", "Orange", "Banana", "Guava"]

2. Array.pop()

  //Removes only one element from the end of the array

  let fruitList = ['Mango', 'Apple', 'Orange', 'Banana', "Guava"]
  fruitList.pop() 
  console.log(fruitList)
  Outputs: ["Mango", "Apple", "Orange", "Banana"]

3. Array.concat()

  //Merges two arrays and outputs a new array

  let odd_nums = [1, 3, 5, 7]
  let even_nums = [2, 4, 6, 8]
  const my_nums = odd_nums.concat(even_nums)
  console.log(my_nums)
  Outputs: [1, 3, 5, 7, 2, 4, 6, 8]

4. Array.shift()

  //Removes one element from beginning

  let fruitList = ['Mango', 'Apple', 'Orange', 'Banana']
  fruitList.shift()
  console.log(fruitList)
  Outputs: ["Apple", "Orange", "Banana"]

5. Array.join()

  //Returns a string out of an array by combining all the elements inside it

  let fruitList = ['Mango', 'Apple', 'Orange', 'Banana']

  const str1 = fruitList.join('')
  const str2 = fruitList.join(' ')
  const str3 = fruitList.join(',')
  console.log(str1, str2, str3)

  Outputs: "MangoAppleOrangeBanana"
            "Mango Apple Orange Banana"
            "Mango,Apple,Orange,Banana"

6. Array.splice()

  //Returns a new array from an existing array by removing elements specified         
  by their index number

  let fruitList = ['Mango', 'Apple', 'Orange', 'Banana']

  //fruitList.splice(startAtIndex, numberOfElementsToRemove)

  const myFruits = fruitList.splice(0, 2)
  console.log(myFruits)

  Outputs: ["Mango", "Apple"]

But this method also alters the base array which means the elements are literally removed from the base array.
If we do a console.log() from the base array we can see that:

  console.log(fruitList)
  Outputs: ["Orange", "Banana"]

Here, we can see that "Mango" and "Apple" are removed from the base array too.
Array.splice() method is really a good method to add and remove elements from the array.

To add elements in the array using .splice() use this syntax:

   fruitList.splice(0, 2, "Papaya", "Strawberry", "Pears")
   console.log(fruitList)
   Outputs: ["Papaya", "Strawberry", "Pears", "Orange", "Banana"]

So, how does this works at all?
To remove elements from the Array:- Array.splice() takes two arguments first
index to start removing the element and second the number of elements we want to remove. Here, we can see we have started from index 0 and removed 2 elements from the fruitList array.

To add elements to the array:- Array.splice() takes three parameters first and second arguments are used to specify the elements to remove starting from some index and number of elements to remove following the starting index. And, the third parameter is used to specify what elements to insert. We can use an array too as the third parameter.

   let fruitList = ['Mango', 'Apple', 'Orange', 'Banana']      
   const myFruits = ['Carrot', 'Guava', 'Peach']
   fruitList.splice(0, 2, ...myFruits) //ES6 spread operator
   console.log(fruitList)
   Outputs: ["Carrot", "Guava", "Peach", "Orange", "Banana"]

Here, we can clearly see that the first two fruits are removed from the fruitList array and myFruits have in added at that place.
So, you will definitely say that what if I don't want to remove any fruits but I want to add my fruits to that fruitList also.
So, to do that simply make the second parameter 0, as we don't want any fruits to remove from the fruitList array.

let fruitList = ['Mango', 'Apple', 'Orange', 'Banana'] const myFruits = ['Carrot', 'Guava', 'Peach'] fruitList.splice(0, 0, ...myFruits) //ES6 spread operator console.log(fruitList) Outputs:["Carrot", "Guava", "Peach", "Mango", "Apple", "Orange", "Banana"]

Iterator Functions

These functions apply a function to each element of an array. And returns a value, a set of values, or a new array after applying the function to each element of an array.

7. Array.every()

This method applies a function to each element of the array and checks whether each element of the array satisfies the criteria of the defined function and returns a boolean value true or false based on the function definition.

  let nums = [2, 4, 6, 8]
  const isEven = nums.every((el) => {
  if (el % 2 == 0) return true
  else return false
  })
  console.log(isEven) //returns true

Let's alter the nums array :-

  let nums = [2, 4, 6, 8, 5]
  const isEven = nums.every((el) => {
  if (el % 2 == 0) return true
  else return false
  })
  console.log(isEven) //will now return false

Because in the first case all the numbers inside the nums array are even and all the numbers satisfy the function definition that each number must be divisible by 2. But, in second case we added an odd number which doesn't satisfy the function definition and return false.

8. Array.some()

This method is just opposite of above Array.every(). In this method if any one the element in the array satisfies the function definition then it returns a boolean value based on that criteria.

  let nums = [2, 4, 6, 8, 5]
  const isOdd = nums.some((el) => {
  if (el % 2 != 0) return true
  else return false
  })
  console.log(isOdd) //returns true

As we can see the result is true which means there is at least one number in the array which is not DIVISIBLE by 2 and which means it is an odd number.

9. Array.map()

This method returns a brand new array out of the base array by applying the function to each element of the base array.
Let's see an example:-

  let fruitList = ['Mango', 'Apple', 'Guava', 'Papaya'];
  let eat = fruitList.map(fruit => {
     return `I want to eat ${fruit}`;
  })
  console.log(eat)

  Outputs: ["I want to eat Mango", "I want to eat Apple", 
           "I want to eat Guava", "I want to eat Papaya"]

Let's see one more example:-

let nums = [2,4,6,8,10]; let squaredNums = nums.map(num => { return Math.pow(num, 2); }) console.log(squaredNums); Outputs: [4, 16, 36, 64, 100]

10. Array.filter()

This method is some what similar to Array.every() but instead of returning a boolean value it returns a brand new array on the basis of the function definition. As the name suggests it filters out the elements from the array if the conditions are satisfied.
Let's see an example that filters out even numbers from the array:-

   let nums = [2,3,7,8,10,5]
   let filteredNums = nums.filter(num => {
      return num % 2 == 0;
   })
   console.log(filteredNums)
   Outputs: [2, 8, 10]

Let's see one more example to filter out numbers from the array which are greater than 15:-

let nums = [21,32,7,8,12,52,6] let filteredNums = nums.filter(num => { return num>15; }) console.log(filteredNums) Outputs: [21, 32, 52]

11. Array.reduce()

This method doesn't return a brand new array instead it returns a single value by applying the function to an accumulator and the successive elements of an array.

Let's take an array of numbers and we want to add all the numbers inside the array to get a total value. To achieve this we will use for loop

   let myNums = [1,2,3,4,5];
   let total = 0;
   for(let i=0;i<myNums.length;i++)
       total += myNums[i];
   console.log(total) //15

But we can achieve the same result using the Array.reduce() method easily.

  let myNums = [1,2,3,4,5]
  const sum = myNums.reduce((a,num) => {
       return a+num;
  },0)
  console.log(sum) //outputs: 15

The .reduce() method takes in three parameters, which are a (accumulator), num, and initial value, viz. 0 here.
What a does is that it takes in the initial value viz. 0 for now and keeps on adding the num from the array to the accumulator until the last index is reached in the array.

Let's see one more example:-

  let myNums = [1,2,3,4,5]
  const sum = myNums.reduce((a,num) => {
       return a+num;
  },10)
  console.log(sum) //now outputs 25

Because we have assigned initial value to our accumulator as 10, so it starts adding the numbers to 10 and so on until the last index of array is reached.

12. Array.sort()

This method is really a simple method to sort the elements inside the array which are composed of alphabets. This method sorts the elements in a lexical order which is similar to the way in which we search a word in a dictionary. But, this method doesn't works with numbers.

Let's take an example to see how this method works:-

  let fruitList = ['Mango', 'Apple', 'Orange', 'Banana', "Guava"]
  let sortedFruits = fruitList.sort()
  console.log(sortedFruits)

  Outputs: ["Apple", "Banana", "Guava", "Mango", "Orange"]

As we can clearly see the .sort() method has sorted our fruitList array
in alphabetical order.
But we can also use Array.sort() to sort our nums array too by passing a function to the Array.sort() method. And, what this function will do is that it will simply compare the nums in the array and sort them by following a simple rule viz.

If the number returned is negative, the left operand is less than the right operand, if the number returned is zero, the left operand is equal to the right operand and if the number returned is positive, the left operand is greater than the right operand.

Let's see the example:-

   let compareNums =(num1, num2)=> {
       return num1-num2;
   }
   let myNums = [5,27,85,4,78,32];
   const sortedNums = myNums.sort(compareNums)
   console.log(sortedNums)

   Outputs: [4, 5, 27, 32, 78, 85]

So, we have seen some of the JavaScript array methods, there are many more such methods but these are some of the methods that are used regularly.