Building a Modern Blogging App Using React, Vite, and Postgres

Welcome to the exciting world of building a modern blogging app! In this guide, we’ll be exploring the seamless integration of four powerful technologies: React, Vite, Postgres, and Froala. These tools, each with its unique strengths, come together to create a dynamic and user-friendly react rich text editor.

Whether you’re a beginner or an experienced developer, join us as we break down the process of constructing this app step by step. 

Let’s dive into the world of web development and craft a blog application that stands out with its modern features and functionalities.

Step-by-Step Guide to Build an App

Creating your very own app is easy and fun with our “Step-by-Step Guide to Build an App.” We’ve made it simple, breaking down each part into easy steps. Whether you’re new to this or already know a bit, our guide is here to help you at every step. 

From the first set-up to adding cool features, we’ve got you covered. It’s like a friendly roadmap that turns your idea into a real app. 

So, let’s get started!

1. Setting Up the Database with Postgres

Alright, let’s get things rolling by setting up the most important part of our app – the database. No need to worry about the type of computer you have; we’re keeping it simple and inclusive. We’ll go with Postgres, a friendly choice that works for everyone.

Once we’ve got Postgres in our toolkit, we’ll create the database named ‘froala’.

create database froala;

We use a simple command that’s like giving instructions to the database. Here, we create a database table called “Articles” to store our blog post’s title and content. It’s straightforward and kind of like preparing a canvas for our creative ideas.

CREATE TABLE Articles (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    body TEXT NOT NULL
);

2. Connecting Node.js to Postgres

Now that we’ve sorted out how our database should look, let’s link it up to our Node.js server. Think of it like connecting two friends who haven’t met yet — we want them to chat and share information.

To make this connection happen, we’re using a handy tool called Knex. It’s like a translator that helps our server understand the database language. First things first, we tell Knex how to connect – where the database is and what it’s called. 

Once Knex knows the way, it creates a database buddy for our server, making it easy for them to chat.

module.exports = {
  client: "postgresql",
  connection: {
    database: "froala",
    user: "rimsha",
    password: "12345",
  },
  pool: {
    min: 2,
    max: 10,
  },
};

Now, with our server and database on speaking terms, we can ask questions (queries) and get answers. Imagine it like asking your friend about their favorite movie – the server asks the database, and the database answers. Simple, right? 

Now, our server is all set to work with the database, making our app do some cool stuff.

import knex from 'knex';
import creds from './knexfile.cjs';

const db = knex(creds);

db("articles").select("*").then(console.log)

Crafting the Server with Express

The Express server is like the traffic director in our app. When someone wants to see articles, the server takes center stage and gets ready to help. Imagine our server as the friendly guide who listens for requests like, “Hey, show me some articles!” To make this happen, we tell the server where to look, and we call these locations “endpoints.” So, when we say “/articles,” it’s like telling our server, “Hey, get me the list of all articles!”

Now, the server does its behind-the-scenes and fetches all the articles from the database. It’s like going to a bookshelf and grabbing all the books you want to read. The server then neatly arranges this information and hands it over to the front end of our app in a JSON format. This ensures a smooth and organized flow of data, ensuring our app looks good and works fast.

import knex from "knex";
import creds from "./knexfile.cjs";
import express from 'express'

const db = knex(creds);

const app = express()
app.use(express.json())

app.get("/articles", async (req, res) => {

const articles = await db("articles").select("*")
res.json(articles)
})

app.listen(3000)

3. The React and Vite Marvel

Next up, let’s talk about the front part of our app, where React and Vite play the main roles. Imagine the front end as the part of your app that people see and interact with. To get started, we’ll make a copy of the ready-made set of code (called a repository) that’s provided. It’s like having a bunch of tools and materials to help us build the front part of our app.

Now, the most important part is a big boss called the root component. Think of it as the conductor of an orchestra – it makes sure everything works together smoothly. In our case, it talks to the server to get all the articles we want to show on our blog. Once it has them, it arranges and shows them on the main page of our blog. It’s like the magic that makes our blog homepage look awesome. 

import React from "react";
import ReactDOM from "react-dom/client";

The React Router Ballet

For smooth navigation within our application, we employ the elegant React Router. With this choreographer of web navigation, users can seamlessly move between different sections of our blogging app, ensuring a fluid and user-friendly experience.

import { createBrowserRouter, RouterProvider } from "react-router-dom";

4. Froala Editor Integration

Let’s dive into Froala, our superstar text editor that makes creating content super cool. When we add Froala to our app, it’s like giving our users a magic wand for writing and editing blog posts.

With lots of cool features and an easy-to-use design, it becomes the special place where bloggers work their magic. 

It changes the way we deal with words and paragraphs, making it a creative center for our bloggers. So, using Froala isn’t just about typing – it’s a whole new, awesome way to express ideas and stories.

• Install Froala into React using the following command. 

  npm install react-froala-wysiwyg --save

   

• Import the Froala editor into the React component. 

  import "froala-editor/css/froala_style.min.css";
  import "froala-editor/css/froala_editor.pkgd.min.css";

   

5. Viewing and Editing Articles

As our server and the part of the app you see (front end) work together smoothly, you can now look at one article at a time. Special parts of our app called React Components handle getting the details of each article and neatly showing them.

Now, Froala, the editor we use, comes back into play. This time, it helps edit articles that are already there. You can easily change things in the writing, and these changes smoothly go back to the database, making sure editing feels easy and smooth.

Conclusion

Congratulations! You’ve successfully crafted a modern blogging application that harnesses the power of React, Vite, Postgres, and Froala. As you celebrate this achievement, remember that the journey doesn’t end here. Froala beckons you to explore its vast plugin ecosystem, providing opportunities for further customization and enhancement of your editor. 

This comprehensive guide serves as both a starting point and a reference for your web development endeavors.

This article provides a high-level overview. For a more in-depth exploration and complete code, check out the GitHub repository. You can watch a video version of this on our YouTube Channel.