DEV Community: Prince NZAMUWE(Fudji Bokande)

Building a Full-Stack Web Application with MERN Stack: A Beginner's Guide

Prince NZAMUWE(Fudji Bokande) — Tue, 25 Jun 2024 08:57:49 +0000

Opening:

Building a web application from scratch can be a daunting task, especially for beginners. However, with the MERN stack, the process becomes more manageable and even enjoyable. In this blog post, I will walk you through the process of creating a full-stack web application using MongoDB, Express.js, React, and Node.js. By the end of this guide, you'll have a functioning web app and a solid understanding of how these technologies work together.

Opening
Introduction
Setting Up Your Development Environment
Initialize Your Project
Set Up the Backend with Express.js and MongoDB
Create MongoDB Data Models
Create Routes for CRUD Operations
Connect Routes to the Server
Set Up the Frontend with React
Connecting Frontend to Backend
Summary
Conclusion

Introduction

The MERN stack comprises four key technologies that work together to create a seamless full-stack web development experience:

MongoDB: A NoSQL database that stores data in flexible, JSON-like documents.
Express.js: A web application framework for Node.js, used to build backend services.
React: A JavaScript library for building user interfaces, particularly single-page applications.
Node.js: A JavaScript runtime built on Chrome's V8 engine, used for server-side development.

1. Setting Up Your Development Environment

Before we dive into the code, ensure you have the following software installed on your computer:

Node.js and npm: Download and install from nodejs.org.
MongoDB: Install MongoDB Community Server from mongodb.com.
Code Editor: Use a code editor like Visual Studio Code, which you can download from code.visualstudio.com.

2. Initialize Your Project

Create a new directory for your project and navigate into it. Then, initialize a new Node.js project:

mkdir mern-app
cd mern-app
npm init -y

3. Set Up the Backend with Express.js and MongoDB

Install Express.js, Mongoose (an ODM for MongoDB), and some other essential packages:

npm install express mongoose body-parser cors dotenv

Create a file named server.js and set up your Express server:

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.json());

// MongoDB connection
mongoose.connect(process.env.DB_CONNECTION)
  .then(() => console.log('Connected to database'))
  .catch((error) => console.log(error));

app.get('/', (req, res) => {
  res.send('Hello, MERN!');
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

4. Create MongoDB Data Models

Create a folder named models and add a file named Post.js:

const mongoose = require('mongoose');

const PostSchema = mongoose.Schema({
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  },
  date: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model('Posts', PostSchema);

5. Create Routes for CRUD Operations

Create a folder named routes and add a file named posts.js:

const express = require('express');
const router = express.Router();
const Post = require('../models/Post');

// Get all posts
router.get('/', async (req, res) => {
  try {
    const posts = await Post.find();
    res.json(posts);
  } catch (err) {
    res.json({ message: err });
  }
});

// Create a new post
router.post('/', async (req, res) => {
  const post = new Post({
    title: req.body.title,
    content: req.body.content
  });

  try {
    const savedPost = await post.save();
    res.json(savedPost);
  } catch (err) {
    res.json({ message: err });
  }
});

module.exports = router;

6. Connect Routes to the Server

In server.js, import and use the routes:

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const postsRoute = require('./routes/posts'); // Import the routes
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.json());
app.use('/posts', postsRoute); // Use the imported routes

// MongoDB connection
mongoose.connect(process.env.DB_CONNECTION, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Connected to database'))
  .catch((error) => console.log(error));

app.get('/', (req, res) => {
  res.send('Hello, MERN!');
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

7. Set Up the Frontend with React

Create a new React application in the client directory:

npm create vite@latest -- --template react client
cd client
npm run dev

The command npm create vite@latest -- --template react client is used to set up a new project using Vite, specifying the use of the React template. Here's a breakdown of the command:

npm create: This is a command utilized to scaffold a new project using a package that provides a create script.
vite@latest: This refers to the Vite package at its latest version. Vite is a modern frontend build tool that significantly improves the development experience.
-- --template react: Here, -- signals the end of command options for npm create, and the subsequent --template react tells Vite to use a template preset for a React application.
client: This is likely the name of the directory where your new project will be created.

8. Connecting Frontend to Backend

In your React application, install Axios to handle HTTP requests:

npm install axios

Create a new component to display posts from your backend:
// App.jsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/posts')
      .then(response => {
        setPosts(response.data);
      })
      .catch(error => {
        console.error('There was an error fetching the posts!', error);
      });
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      {posts.map(post => (
        <div key={post._id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

export default Posts;

9. Summary

Congratulations! You've just built a full-stack web application using the MERN stack. You've learned how to set up a server with Express.js, create data models with Mongoose, and build a responsive frontend with React. As you continue your journey in software development, the skills you’ve acquired here will serve as a strong foundation for building more complex web applications.

Conclusion

Building a web application using the MERN stack is an excellent way to develop your skills in both front-end and back-end technologies. The process may seem challenging at first, but with practice and dedication, you'll find it increasingly rewarding. Keep experimenting, keep learning, and soon you'll be creating advanced applications with ease. Happy coding!

Follow me for more useful contents:
Dev
LinkedIn
GitHub

What happens when you type https://www.google.com in your browser and press Enter?

Prince NZAMUWE(Fudji Bokande) — Sun, 14 Apr 2024 02:03:53 +0000

When you type https://www.google.com into your web browser and hit Enter, a seemingly simple action triggers a complex web of interactions between your computer and the remote servers hosting the Google search engine. This complex process is a dance of internet protocols, security checks, and network communications that seamlessly bring the world's information to your fingertips. Let's break down this fascinating journey step by step.
In this blog, we will cover different concepts, such as DNS Request, TCP/IP, Firewall, HTTPS/SSL, Load-balancer, Web server, Application server, Database

1. DNS Request

The journey begins with a DNS (Domain Name System) request. Think of DNS as the Internet's phonebook. When you type https://www.google.com, your browser needs to know where Google's website is. It needs www.google.com to be translated into an IP (Internet Protocol) address that computers understand. Your browser asks a DNS (Domain Name Service) resolver for the IP address associated with that domain name. The resolver, often provided by your ISP (Internet Service Provider), checks its cache, and if it doesn't find the address, it queries other DNS servers worldwide. Once it retrieves the IP address, it sends it back to your browser.

2. TCP/IP

With the IP address in hand, your browser can establish a connection to Google's server. This is done using TCP/IP (Transmission Control Protocol/Internet Protocol), which governs how data is sent and received over the Internet. TCP breaks down your request into smaller packets, labels them to ensure they're reassembled in the correct order, and sends them across the Internet. IP is responsible for routing these packets from your device to the destination server.

3. Firewall

As these data packets travel, they encounter firewalls. A firewall is a security system that monitors incoming and outgoing network traffic based on predetermined security rules. Your local machine and Google's servers have firewalls to prevent unauthorized access. These firewalls inspect the packets to ensure they're not malicious before passing them through.

4. HTTPS/SSL

The https in The URL indicates that the connection between your browser and Google's server will be secure, using HTTPS (Hypertext Transfer Protocol Secure) with SSL (Secure Sockets Layer) encryption. SSL encrypts the data exchanged to prevent eavesdropping or tampering by third parties. When your browser connects to Google's server, it requests a copy of the server's SSL certificate. If the certificate is valid, a secure connection is established.

5. Load-balancer

Google receives millions of requests per second, which is far too much for a single server to handle. Enter the load balancer, which distributes incoming network traffic across multiple servers. This ensures no single server is overwhelmed and helps to optimize resource use, maximize throughput, minimize response time, and avoid overload of any single resource.

6. Web Server

Once your request reaches Google's infrastructure, it's handled by a web server. This server's job is to serve web content. When it receives your request for https://www.google.com, it fetches the necessary HTML, CSS, and JavaScript files that make up the Google search page.

7. Application Server

While the web server serves static content, an application server handles the application's business logic. For Google, this includes executing search algorithms, personalizing content based on your profile, and ensuring that the search results are retrieved efficiently.

8. Database

Finally, the application server interacts with databases that store all the data Google needs to provide you with search results. This could be indexing information, user data, or cached content. When you perform a search, the application server queries these databases to retrieve and display the most relevant search results.

In summary, when you type https://www.google.com and press Enter, it is like starting a rapid-fire sequence of events in the digital world. Each step, from DNS requests to database queries, involves sophisticated technology and coordination.

This entire process happens in the blink of an eye, illustrating the incredible power and complexity of the Internet infrastructure we often take for granted.

Understanding this process satiates our curiosity and helps us appreciate the marvel of modern internet communications, a crucial skill set for any aspiring tech professional.

You can also find related blogs on my LinkedIn

Embracing the Tech Future: My Transformation Journey with ATLP.

Prince NZAMUWE(Fudji Bokande) — Mon, 18 Mar 2024 19:20:28 +0000

Two months ago, I embarked on a life-changing journey that accelerated my technical skill set and bolstered my vision of becoming a world-class software engineer: the Andela Technical Leadership Program (ATLP). I first heard about ATLP through a tech community event in Kigali at the end of 2022. As I listened to an alumnus share their story, I was captivated by the intensive, hands-on experience that promised a blend of technical and soft skill development.

Joining ATLP wasn't just a decision, but a commitment to my future. I didn't have any coding experience, but I was always eager to dive into the depths of coding and emerge as a disciplined coder and a technical leader. I saw ATLP as the perfect launchpad to turn my passion for technology into a career that could shape the digital landscape of Rwanda and beyond, so I decided to apply to ATLP in September 2023, and after being admitted, I officially started the program on January 22, 2024.

In these fascinating two months, my coding abilities have grown exponentially. HTML and CSS were my gateways into the intricate world of web development, allowing me to craft the structure and aesthetics of web pages with finesse. JavaScript then brought my designs to life, introducing me to the dynamic capabilities of web applications. The real game-changer, however, has been mastering the backend with NodeJS, Express JS, and MongoDB. Testing, documenting, and implementing APIs (using tools like Postman and libraries like Jest, Swagger, and Mocha) was somehow harsh but worth it. Designing server-side logic and managing databases has unveiled the robust architecture that powers our internet. These skills are the building blocks I am using to forge my path as a well-versed full-stack developer.

Once my nine-month tenure at ATLP concludes, my roadmap includes diving into the fintech sector. This industry's blend of finance and technology excites me, and I plan to contribute by developing secure, innovative solutions that can drive economic growth. Additionally, leveraging the apprenticeship program, I aspire to lend my expertise to businesses, further honing my skills in a real-world environment.

To those considering ATLP, step in with an eager mind and a resilient heart. This program is rigorous but rewarding, designed to teach and transform. The landscape of technology is vast and can seem discouraging, but with ATLP as your compass, even if you don't have any previous coding experience, you can navigate it successfully. Pursue excellence, embrace collaboration, and let us innovate for a brighter future.

In conclusion, as I venture through ATLP, I am more convinced than ever that the future is for those who build it. One thing to keep in mind is

You didn't get this far to only get this far
. Let's make it one line of code at a time.