All you need to know about Full Stack Development.

5 min readMar 20, 2022

Let’s start

Before starting actual content, let's see what is full-stack development means.

What is Full-stack Development?

In simple terms, this refers to the Creation of web applications’ front end (client-side) and back end (server-side) implementation.

Who is a Full-stack web developer?

A full-stack web developer is a developer or architect who can deal with both the front and back finishes of a product application, which implies they can easily take on projects requiring information bases, client confronting sites, and even customer joint effort all through the planning cycle.

They are also well-versed in both business logic and user interface, allowing them to get their hands dirty and advise and collaborate on strategy.

I previously mentioned the frontend (client-side) and backend (server-side) of a web application. But, first, you’ll need to understand what that entails.

What is Frontend Development(client-side)?

This skill set entails presenting your website and how it is viewed in browsers and mobile devices. In addition, a frontend developer must be familiar with HTML and CSS and the client-side scripting language JavaScript.

A frontend developer aims to build an interactive platform that allows visitors to communicate with one another in real-time and a platform that provides and receives information. A frontend developer’s range of abilities may likewise incorporate client experience and UI plan, which can assist a group with picking the best procedures for introducing and obtaining information.

Here is a sample snippet of HTML, CSS, and javascript

Let us see some HTML snippets.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Sample</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>

</head>
<body>
    <h1>I am a headline made with HTML</h1>
    <p>And I am a simple text paragraph. The color of this text is styled with CSS. Click the button below to remove me through the power JavaScript.</p>
     <button>Hide the text above</button>
    <script src='main.js'></script>
</body>
</html>

CSS snippet

body {
    font-family: sans-serif;
    text-align: center;
    padding: 3rem;
    font-size: 1.125rem;
    line-height: 1.5;
    transition: all 725ms ease-in-out;
}

h1 {
    font-size: 2rem;
    font-weight: bolder;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
    color: green;
}

button {
    cursor: pointer;
    appearance: none;
    border-radius: 6px;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid navy;
    background-color: blue;
    color: white;
}

JAVASCRIPT snippet

$('button').on('click', function() {
    $('p').css('opacity', 0);
});

Now, let’s talk about client-side

Client Software(FrontEnd)

HTML, CSS, Bootstrap, JavaScript, ES5, HTML DOM, JSON, XML, jQuery, Angular, React, Vue, Backbone.js, Ember.js, Redux, Storybook, GraphQL, Meteor.js, Grunt, Gulp etc.

What is Backend Development?

It refers to the server-side development of a web application, focusing on how the website works. It is responsible for the Creation, editing/update, and recollection of data and some of the processes most often associated with backend development.

The backend (sometimes known as “server-side”) is the part of a website you don’t see. It’s in charge of storing and organizing data and ensuring that everything on the client-side functions appropriately. The backend interacts with the frontend, sending and receiving data that is presented as a web page.

Below is a snippet of how a simple NodeJS Backend code includes a rate limiter implementation and socket.io integration.

const express = require("express");
const path = require("path");
const http = require("http");
const socketio = require("socket.io");
const apiRoutes = require("./src/routes");
const rateLimit = require("express-rate-limit");
const { PORT } = process.env;


const app = express();
const server = http.createServer(app);
const io = socketio(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});


// Limit request from same IP
const limiter = rateLimit({
  max: 100,
  windowMs: 60 * 60 * 100,
  message: "Too many requests from this IP, please try again in an hour!",
});

app.use("/api", limiter, start(io), apiRoutes);
app.use(express.static(path.join(__dirname, "public")));

io.on("connection", () => {
  console.log("Socket Connection Established...");
});

server.listen(PORT, () => {
  console.log(
    `::: server listening on port ${PORT}. Open via http://localhost:${PORT}/`
  );
  databaseConfig();
});

server.on("error", (error) => {
  console.log(`::> an error occurred in our server: \n ${error}`);
});

A typical software application comprises three components: the front end, the back end, and the database.

Server-Side Technologies(Back-end)

PHP, ASP, C++, C#, Java, Python, Node.js, Express.js, Ruby, REST, GO, SQL, MongoDB, Firebase, PaaS (AWS, GCP, Azure, and Heroku), and more programming languages.

I hope you now have a better understanding of full-stack development.

Popular Stacks:

MongoDB, Express, AngularJS, and Node.js make up the MEAN Stack.

The MEAN stack is a JavaScript-based full-stack framework for building online applications.

MongoDB — document database
Express(.js) — Node.js web framework
Angular(.js) — a client-side JavaScript framework
Node(.js) — the premier JavaScript web server

Django Stack: Django, Python, and MySQL as Database.

The Django stack is a Python-based full-stack framework for building online applications. After the three primary technologies that make up the different layers of the pile.

Django — a high-level Python framework
Python — a programming language
MySQL — relation database

MERN Stack: MongoDB, Express, ReactJS, and Node.js

The MERN stack is a JavaScript-based full-stack framework for building online applications. After the four major technologies that make up the different layers of the stack.

MongoDB — document database
Express(.js) — Node.js web framework
React(.js) — a client-side JavaScript framework
Node(.js) — the premier JavaScript web server

MEVN Stack: MongoDB, Express, VueJS, and Node.js

The MEVN stack is a JavaScript-based full-stack framework for building online applications.

MongoDB — document database
Express(.js) — Node.js web framework
Vue(.js) — a client-side JavaScript framework
Node(.js) — the premier JavaScript web server

MERGN Stack: MongoDB, Express, ReactJS, GraphQl, and Node.js

The MERGN stack is a JavaScript-based full-stack framework for building online applications after the five major technologies that make up the layers of the system.

MongoDB — document database
Express(.js) — Node.js web framework
React(.js) — a client-side JavaScript framework
GraphQl(.js) — a query language for your API
Node(.js) — the premier JavaScript web server

LAMP Stack: Linux, Apache, MySQL, and PHP.

The LAMP stack is a PHP-based full-stack framework for building online applications after the four major. These major technologies make up the layers of the system.

Linux — server for modern operating systems
Apache — a programming language
MySQL — relation database
PHP — a powerful server-side programming language

Conclusion

I hope you find this helpful! Don’t forget to share with others.

Thank you 🎉

See you soon with a new blog!