DEV Community: Md Yasin Miah

Developing Full-Stack Software with React.js, Next.js, Django, and SQL: A Comprehensive Guide

Md Yasin Miah — Mon, 12 Aug 2024 18:48:46 +0000

In today's fast-paced digital world, full-stack development has become a vital skill set for building robust, scalable, and efficient web applications. Combining the power of front-end and back-end technologies, full-stack development offers a comprehensive solution for creating dynamic and responsive web applications. In this blog post, we will explore how to develop full-stack software using React.js, Next.js, Django, and SQL—an exceptional stack that enables developers to build seamless and powerful web applications.

Why Choose This Stack?
Before diving into the technicalities, let's briefly understand why React.js, Next.js, Django, and SQL are an excellent combination for full-stack development.

React.js: React.js is a popular JavaScript library for building interactive user interfaces. Its component-based architecture allows developers to create reusable UI components, making the development process faster and more efficient.
Next.js: Built on top of React.js, Next.js is a powerful framework that adds server-side rendering, static site generation, and API routes to React applications. It enhances SEO, performance, and scalability, making it a go-to choice for modern web development.
Django: Django is a high-level Python web framework that promotes rapid development and clean, pragmatic design. It handles the back-end operations, including user authentication, database interactions, and server-side logic, with simplicity and reliability.
SQL: SQL (Structured Query Language) is the standard language for managing and manipulating relational databases. It works seamlessly with Django to handle complex data operations, ensuring data integrity and consistency.

Step-by-Step Guide to Developing Full-Stack Software

1. Setting Up the Development Environment

Begin by setting up the development environment for React.js, Next.js, Django, and SQL. Install Node.js and Python, and use package managers like npm or yarn for JavaScript dependencies and pip for Python packages.

2. Front-End Development with React.js and Next.js

Start by creating the front-end using React.js. Design reusable UI components that cater to your application's needs. Leverage Next.js for server-side rendering, which ensures faster load times and better SEO performance. The combination of React's flexibility and Next.js's powerful features creates a smooth and responsive user experience.

3. Back-End Development with Django

Once the front-end is in place, focus on the back-end using Django. Set up the Django project and configure the database using SQL. Django's ORM (Object-Relational Mapping) makes it easy to interact with the database, perform CRUD operations, and manage user authentication.

4. Database Management with SQL

SQL plays a crucial role in managing the database for your application. Design the database schema, define relationships between tables, and write SQL queries to retrieve and manipulate data. Django's ORM simplifies this process, allowing you to work with databases without writing raw SQL queries.

5. API Integration

With the front-end and back-end developed, integrate APIs to enable communication between the two layers. Use Django's REST framework to create robust APIs that handle data exchange between the client and server. Next.js API routes can also be used for serverless functions and microservices.

6. Testing and Debugging

Testing is a crucial step to ensure the application functions as expected. Use tools like Jest for front-end testing and Django's built-in testing framework for back-end testing. Debugging tools like React Developer Tools and Django Debug Toolbar will help identify and fix issues during development.

7. Deployment

Finally, deploy your full-stack application to a production environment. Platforms like Vercel and Heroku are popular choices for deploying Next.js and Django applications. Ensure that your application is optimized for performance, security, and scalability before going live.

Benefits of This Full-Stack Approach

Efficiency: The integration of React.js, Next.js, Django, and SQL streamlines the development process, enabling rapid development and deployment.
Scalability: This stack allows for scalable web applications that can handle growing user demands and data loads.
Flexibility: The combination of these technologies provides the flexibility to create a wide range of web applications, from simple blogs to complex enterprise solutions.
Performance: Next.js and Django ensure that your application is optimized for performance, with server-side rendering and efficient database management.

Conclusion
Developing full-stack software using React.js, Next.js, Django, and SQL is a powerful approach to building modern web applications. This stack offers the perfect blend of front-end and back-end technologies, providing a robust framework for developing scalable, efficient, and user-friendly applications. Whether you're a seasoned developer or just starting your journey, mastering this stack will open up a world of possibilities in web development.

Ready to build your next web application? Order our full-stack development service on Fiverr today and let us turn your vision into reality with a team of experts dedicated to your success!

How many way to find max number in array on Javascript.

Md Yasin Miah — Sun, 06 Mar 2022 01:34:52 +0000

1. With for-loop

const array = [-29, 5, 0, 3, 111, 99, 2, 99];

function maxNumberInArray(arr) {
    let maxNumber = arr[0];
//same way can apply on other loop like(For In, For Of, While)
    for(let i = 0; i < arr.length; i++){
        if(arr[i] > maxNumber){
            maxNumber = arr[i];
        }
    }
    return maxNumber;
}
console.log(maxNumberInArray(array));

2. With forEach

let array = [-1, 10, 30, 45, 5, 6, 89, 17];

function maxNumberInArray(arr) {
  let maxNumber = -Infinity;
  arr.forEach(number => { 
         maxNumber =  number > maxNumber ? number :  maxNumber;
               });
  console.log(maxNumber);
}

console.log(maxNumberInArray(array));

3. Using Math.max function.

let array = [-1, 10, 30, 45, 5, 6, 89, 17];
console.log(Math.max(...array))

4. Using reducer

let array = [-1, 10, 30, 45, 5, 6, 89, 17];
console.log(array.reduce((element,max) => element > max ? element : max, 0));

What is React JS?

Md Yasin Miah — Sun, 09 Jan 2022 14:54:18 +0000

What is React JS

React JS is a JavaScript library for building UI with reusable components. It is an open-source, component-based and front-end library that is responsible only for the view layer of the application. Every part of a web application can be considered as a component. Most of the components are the same in design but different in data. So with React JS, it is quite easy to make our application dynamic and use the same component for all parts. It was developed by Meta(Facebook) and what's app, Instagram and Facebook also developed with React JS.

MySQL- RDBMS

Md Yasin Miah — Wed, 29 Dec 2021 16:54:47 +0000

Relational Database(MySQL)

RDBMS stands for Relational Database Management System.
Relational databases define the relation between different data tables. This relation can be created based on one common data table's column that is the same in both data tables and the data column must be a unique data field.

MySQL is a free and fast Relational Database Management System. It is ideal for both small and large applications.

In MySQL, SQL is used to insert, search, update, and delete database records. All MySQL commands will be in capital letters.
In MySQL, most common SQL commands are:

SELECT - extracts data from a database
UPDATE - updates data in a database
DELETE - deletes data from a database
INSERT INTO - inserts new data into a database
CREATE DATABASE - creates a new database
ALTER TABLE - add, delete or modify a database table
CREATE TABLE - creates a new table
DROP DATABASE- deletes a table
CREATE INDEX - creates an index (search key)
DROP INDEX - deletes an index

1. SELECT - extracts data from a database.

To select the full table

SELECT * FROM tableName;

To select one or many specific columns(with all column data) from the data table.

SELECT column, column2, ... FROM tableName;

To select one or many specific columns(without duplicate column data) from the data table.

SELECT DISTINCT column, column2, ... FROM tableName;

2. UPDATE - updates data in a database.

The UPDATE statement used to modify the existing date of a table.
If you don’t use WHERE with condition then when all dates in the column will change.

UPDATE tableName
SET column = value, column2= value2, ...
WHERE conditions;

3. DELETE - deletes data from a database.

The DELETE statement is used to delete records from a data table.
If you don’t use WHERE then all records will delete.

DELETE FROM tableName
WHERE conditions;

4. INSERT INTO -inserts new data in a database.

You can write an INSERT INTO statement in two ways.Firstly, you can specify the column name and then specify their values in orderly like this

INSERT INTO tableName (column, column2, column3, ...)
VALUES (value, value2, value3, ...);

Secondly, you don’t need to specify the column name but you can specify only the values for each column orderly of your data table.

INSERT INTO tableName
VALUES (value, value2, value3, ...);

5. CREATE DATABASE -creates a new database.

With the CREATE DATABASE statement we can create a new database.

CREATE DATABASE tableName;

6. ALTER TABLE -add, delete or modify a database column.

To add a new column and must be specify the dataType.

ALTER TABLE tableName
ADD columnName dataType;

To delete an existing column from a data table

ALTER TABLE tableName
DROP COLUMN columnName;

To change an existing column’s dataType from a data table.

ALTER TABLE tableName
MODIFY COLUMN columnName dataType;

7. CREATE TABLE -creates a new table.

CREATE TABLE statement used to create a new table in a database.

==syntex==
CREATE TABLE tableName (
columnName1 dataType,
columnName2 dataType,
columnName3 dataType,
...  ...
);

==example==
CREATE TABLE Persons (
    PersonID int,
    LastName varchar(255),
    FirstName varchar(255),
    Address varchar(255),
    City varchar(255)
);

Create table using another existing table
With CREATE TABLE you can copy one existing table and create a new one with existing table columns and also can apply conditions to get existing table columns into your new table.

CREATE TABLE newTableName AS
SELECT column1, column2, ...
FROM existingTableName
WHERE conditions;

8. DROP DATABASE -deletes a table.

DROP DATABASE statement used to delete an existing database.
Be careful to drop because once delete a table all of data in this table will lost forever

DROP DATABASE tableName;

9. CREATE INDEX - creates an index (search key)

To create indexes in a table you can use the CREATE INDEX statement. Indexes allow us to retrieve our data from a table quickly. Usually users can’t see the indexes. Indexes are just used to speed up our queries.

Create an index in a table. Duplicate values are allowed.

CREATE INDEX indexName
ON tableName (column1, column2, ...);

Create an unique index in a table. Duplicate values are not allowed here.

CREATE UNIQUE INDEX indexName
ON tableName (column1, column2, ...);

10. DROP INDEX - deletes an index (search key)

Use DROP INDEX statement to delete an index

ALTER TABLE tableName
DROP INDEX indexName;

MongossJs, JWT

Md Yasin Miah — Wed, 29 Dec 2021 16:26:31 +0000

MongooseJs :

Basically Mongoose is a package.It is a mediator between the MongoDB server and NodeJS application. It is an Object Document Mapper(ODM) that allows us to define objects with strongly-typed-schema. These objects are mapped to a MongoDB document. Mongoose also supports all the CRUD operations – Creating, Retrieving, Updating, and Deleting.

JWT :

JWTs are commonly used as OAuth bearer tokens. In this way, an authorization server creates a JSON Web Token (JWT) at the request of a client for security parpas. The client will then send this JWT with its request to a REST API. The REST API will verify that the JWT’s signature matches its payload and header to verify this JWT token. When the REST API has verified the JWT, the client's request is accepted.
In short, To authenticate users and share information JWTs are used as a secure way.

React Custom Hook and JSX

Md Yasin Miah — Tue, 28 Dec 2021 13:56:22 +0000

React Custom Hooks

Custom Hooks

The reusable function can be a Hook. When we create a logical function, that function can be used in multiple components. For that we can extract out logic to reuse. A hook function name start with “use” example: “useFetch”

Usually we need to fetch data in different components like this.

import { useState, useEffect } from "react";

const Home = () => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};
export default Home;

So now we can create a Hook for fetch logic as we can reuse it in other components. Like this,

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

Now we can fetch data with our custom Hook. as usual

import react from "react";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};
export default Home;

JSX with React

JSX stands for Javascript XML. normally we can not write HTML in react without createElement() or appendChild() method. But JXL allows us to write HTML in Javascript to place in DOM. JSX converts HTML code into react element and it is an extension of Javascript based on ES6.

Without JSX

import react from "react";
const Home () => {
    const myElement = react.createElement("h2", {}, "we are not using JSX");
return (
    {myElement}
 );
};
export default Home;

With JSX

import react from "react";

const Home () => {

return (
    <h2>we are using JSX</h2>
 );
};
export default Home;

Expressions in JSX
React components accept only elements. It can be with one HTML tag or fragment also can use parameter in { } ”curly bracket”

import react from "react";
const Home () => {
const heading = “Expressions in JSX”
return (
    <div>
        <h>{heading}</h1>
        <p>we are using JSX</p>
        <span>react accept only one section.</span>
     </div>
  );
};
export default Home;

With fragment <> </>

import react from "react";
const Home () => {
return (
     <>
       <div>
            <h>heading</h1>
            <p>we are using JSX</p>
            <span>react accepts only one section.</span>
        </div>
        <div>
            <h>heading</h1>
            <p>we are using JSX</p>
            <span>react accepts only one section.</span>
        </div>
    </>
  );
};
export default Home;

Elements must be closed and class attribute is className

import react from "react";
import logo from "./logo.favicon";
const Home () => {
return(
    <input className= "email" type= "email" />
     <img className= "logo" src= {logo} />
  );
};
export default Home;

What is API

Md Yasin Miah — Tue, 28 Dec 2021 08:02:04 +0000

About API

API stands for “Application Programming Interface”. It is a set of functions. It allows applications to access data and interact with external software components, operating systems, or microservices.
To simplify, an API brings the user's response to the system and brings the system’s response to the user. When we click “commend” an API tells the site we commend on that post; the website puts the commend on the post, and our commend box is updated with that commend.

We may hear that “microservices” are related to API. These however, are not the same. Microservices divides functionality in a web application where API is the framework to interact with a web application. Microservices can actually use API to communicate between each other.

A developer can make “call” or “request” through API in order to send or get information from the server. For this communication there is a programming language called “JSON”. There is a CRUD operation with API:

POST – Create new data
GET – Read data
PUT – Updates pieces of data
DELETE – Deleting data

Differences between “==” and “===”

Md Yasin Miah — Tue, 28 Dec 2021 01:30:35 +0000

Differences between “==” and “===”
== and === Both are known as conditional equal operators. == (double equal) check the only value if the value is the same then return true else return false. On the other hand === (triple equal) check both value and data type if the value and data type are the same then return true else return false. It also can use as conditional not equal like !== .

var num = 30;
var num2 = "30";
if(num == num2){
console.log("both are same.");
}
output: both are same.

var num = 30;
var num2 = "30";
if(num === num2){
console.log("both are same.");
}
else if(num !== num2){
console.log("both are not the same.");
}
output: both are not the same.

JavaScript Array Method

Md Yasin Miah — Sun, 26 Dec 2021 16:56:13 +0000

## JavaScript concept 01

JavaScript Array method

1. toString()
The JavaScript method toString() converts an array to a string of (comma separated) array values.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makeString = animals.toString();
console.log(makeString);
output: cow, dog, tiger, elephant, horse

2. join()
The JavaScript method join() also adds all array elements into a string form. But it can get special symbols to add elements to each other.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var joinAll= animals.join(“+”);
console.log(joinAll);
output: cow + dog + tiger + elephant + horse

3. pop()
The JavaScript method pop() removes the last element of an array and the pop() method return the removed element.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePop= animals.pop();
console.log(animals);
console.log(makePop);
output: ["cow", "dog", "tiger", "elephant"]
output: horse

4. push()
The JavaScript method push() adds a new element in the last position in an array and the push() method returns the length of the array.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePush= animals.push("lion");
console.log(animals);
console.log(makePush);
output: ["cow", "dog", "tiger","elephant","horse", "lion"]
output: 6

5. shift()
The JavaScript method shift() removes the first element of an array and the shift() method returns the removed element.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePop= animals.shift();
console.log(animals);
console.log(makePop);
output: ["dog", "tiger", "elephant", "horse"]
output: “cow”

6. unshift()
The JavaScript method unshift() adds a new element in first position in an array and the unshift() method returns the length of the array.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePush= animals.unshift("lion");
console.log(animals);
console.log(makePush);
output: ["lion", "cow", "dog", "tiger","elephant","horse"]
output: 6

7. Changing index element.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
animals[0] = "lion";
animals[animals.length] = "fox";
console.log(animals);
output: ["lion", "dog", "tiger","elephant","fox"]

8. delete
We can delete an array element with the javascript delete operator. It returns undefined for the whole array. Using pop(), shift() best way to do this.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var remove = delete animals[0];
console.log(remove);
output: undefined;

9. concat()
The JavaScript method concat() merging the existing array concatenates the existing array. It doesn't change the existing array, it creates a new array.

var smallAnimals = ["cat", "dog", "sheep", "rat"];
var bigAnimals = ["elephant", "giraffe"];
var animals = smallAnimals.concat(bigAnimals);
console.log(animals);
output: ["cat", "dog", "sheep", "rat", "elephant", "giraffe"]

concat() can also merge more than one array.

var smallAnimals = ["cat", "dog", "sheep", "rat"];
var bigAnimals = ["elephant", "giraffe"];
var waterAnimals = ["dolphin", "while"];
var animals = smallAnimals.concat(bigAnimals,waterAnimals);
console.log(animals);
output: ["cat", "dog", "sheep", "rat", "elephant", "giraffe", "dolphin", "while"];

concat() can also merge strings in an array.

var smallAnimals = ["cat", "dog", "sheep", "rat"];
var animals = smallAnimals.concat(“elephant”, “dolphin”);
console.log(animals);
output: ["cat", "dog", "sheep", "rat", "elephant", "dolphin"];

10. splice()
The JavaScript method splice() can add new elements anywhere and it also can delete any element.

var smallAnimals = ["cat", "dog", "sheep", "rat"];
var removed = smallAnimals.splice(2, 1, “elephant”, “dolphin”);
console.log(smallAnimals);
console.log(removed);
output: ["cat", "dog", "elephant", "dolphin", "rat"];
output: “sheep”

var removed = smallAnimals.splice(2, 1, “elephant”, “dolphin”);

First parameter 2 specifies the starting index and the second parameter 1 specifies how many elements will be deleted from the starting point and splice() returns the removed items.

11. slice()
The JavaScript method splice() can create a new array with a part of an array and splice() don’t delete any element. It can get two parameters.

var smallAnimals = ["cat", "dog", "sheep", "rat", "elephant", "dolphin"];
var new = smallAnimals.slice(1, 3);
var new2 = smallAnimals.slice(3);
var new3 = smallAnimals.slice(0);
console.log(new);
console.log(new2);
console.log(new3);
output: ["dog", "sheep", "rat"];
output: ["rat"];
output: ["cat"];

var new = smallAnimals.slice(1, 3);

Here the first parameter specifies the index number and second parameter the number of elements from the index. When using one parameter it picks that index element.

JavaScript Number method

There are 3 JavaScript number methods that can be used to convert variables to numbers
1. number()
This method usually converts a string into numbers.

console.log(number(true)); output: 1
console.log(number(true)); output: 0
console.log(number("23")); output: 23
console.log(number("23  ")); output: 23
console.log(number("23.45")); output: 23.45
console.log(number("34, 43")); output: NaN
console.log(number("cat")); output: NaN

2. parseInt()
This method parses a string into a whole number. Space can be allowed. And it can parse only the first number.

parseInt("-10"); output: -10
parseInt("-10.33"); output: -10
parseInt("10"); output: 10
parseInt("10.33"); output: 10
parseInt("10 20 30"); output: 10
parseInt("10 years"); output: 10
parseInt("years 10"); output: NaN

3. parseFloat()
This method parses a string into a number. Space can be allowed. And it can parse only the first number.

parseFloat("-10"); output: -10
parseFloat("-10.33"); output: -10.33
parseFloat("10"); output: 10
parseFloat("10.89"); output: 10.89
parseFloat("10 20 30"); output: 10
parseFloat("10 years"); output: 10
parseFloat("years 10"); output: NaN

CSS Transform 2D and 3D

Md Yasin Miah — Fri, 24 Dec 2021 17:12:05 +0000

CSS TRANSFORMS
CSS 2D transforms Method: With the transform: property the 2D methods are

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

translate()
With the translate() method we can move one element from its current position like,

div {
  transform: translate(50px, 100px);
}

Here translate(x, y) are assign as the value of x(horizontal) & y(vertical)

rotate()
We use the rorate() method so that we can rotate our element clockwise or anti clockwise like,

div {
  transform: rotate(40deg);
}

rotate(x) can assign a positive degree value to rotate clockwise and a negative degree to rotate anti-clockwise.

scale()
With scale() we can increase or can decrease element height and with.

div {
  transform: scale(2, 3);
}

Here the first value assign with and the second value stands for height.

skew()
The skew method skews an element in order of X-axis and Y-axis with angle.

div {
  transform: scale(2deg, 3deg);
}

Here first value assigns X-axis and the second value assigns Y-axis. skewY() only for Y-axis with one value, skewX() only for X-axis with one value.

matrix()
The matrix method is the combination of all transform methods.

div {
  transform: matrix(2, 3, 4, 4, 2, 4);
}

CSS 3D transforms Method: With the transform: property the 3D

methods are
rotateX()
rotateY()
rotateZ()

rotateX()
RotateX method rotates an element in X-axis with degree value.

div {
  transform: rotateX(2deg);
}

rotateY()
RotateY method rotates an element in Y-axis with degree value.

div {
  transform: rotateX(2deg);
}

rotateZ()
RotateZ method rotates an element in Z-axis with degree value.

div {
  transform: rotateX(2deg);
}