Creating a Blogging App Using React, Part 1: User Sign-In

In this tutorial series, you will learn how to create a simple blogging application using React. We will be creating the application using functional React components. The tutorial covers various aspects like the database, server, routing, and styling.

Getting Started

Our project comprises three parts: a server, a database, and a client. Before we start with the client-side development, we need to set up the server and database.

Building the Database

Let's begin building our database. We are going to use a PSQL shell for the blog application. That means you have to install PSQL on your machine. Once the shell is installed, use the following command to switch into the database:

1	psql -U postgres

Create a database called blog using the command CREATE DATABASE blog, and switch into it using the command \c blog.

This application needs three different tables, so create a schema.sql file and add the following lines of code for creating the tables.

CREATE TABLE users (
  uid SERIAL PRIMARY KEY,
  username VARCHAR(255) UNIQUE,
  email VARCHAR(255),
  email_verified BOOLEAN,
  date_created DATE,
  last_login DATE
);

CREATE TABLE posts (
  pid SERIAL PRIMARY KEY,
  title VARCHAR(255),
  body VARCHAR,
  user_id INT REFERENCES users(uid),
  author VARCHAR REFERENCES users(username),
  date_created TIMESTAMP,
  likes INT DEFAULT 0
);

CREATE TABLE comments (
  cid SERIAL PRIMARY KEY,
  comment VARCHAR(255),
  author VARCHAR REFERENCES users(username),
  user_id INT REFERENCES users(uid),
  post_id INT REFERENCES posts(pid),
  date_created TIMESTAMP
);

You can copy and paste these SQL statements in the PSQL Shell for the tables to be created successfully. Remember, every SQL query has to end with a ;. Once the commands are executed, run \dt to see all the tables. You should see the following list:

Setting Up the Server

For the server, we are going to use express. If you do not have express in your system, it can be installed easily using the express-generator package.

1	npm install -g express-generator

express-generator is a very simple tool. Once the installation is done, you can initialize the server project using the express command. There will be many files and folders once the installation is done. You must delete the extras and be left with the main folder. The server directory should have the following structure.

Server
--main
----app.js
----db.js
----schema.sql
--node_modules
--package-lock.json
--package.json

Next, modify app.js. You can change the port to anything but 3000 (which will be used by the client).

const express = require('express')
const app = express()
const port = 5000

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Once express is running successfully, we have two other dependencies to be added.

cors: this is a library widely used for communicating between the express and react applications.
pg: this library is used by the server to communicate with the database.

Run the below command to install these libraries:

1	npm install pg cors

Next, we need to get the server and the database communicating. Establishing this connection is very simple, and the pg library helps in doing so. In db.js, enter the following lines of code:

const { Pool } = require('pg')

const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'blog',
  password: 'postgres',
  post: 5432
})

module.exports = pool

Remember to enter the same credentials you used while creating and setting up the PSQL shell.

To implement the sign-in functionality, we need to get all users from the database and check if anyone matches with the data entered. To achieve this, we will modify app.js with the following query. Data from the client application will be present in the req object.

const express = require('express')
const app = express()
const port = 5000
var pool = require('./db')

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

app.get('/api/get/userprofilefromdb', (req, res, next) => {
    const email = req.query.email
    const pwd = req.query.pwd
    pool.query(`SELECT * FROM users WHERE email=$1 AND pwd = $2`, [ email, pwd ],
            (q_err, q_res) => {
                res.json(q_res?.rows)
        })
  })

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

There you go! The server and the database are now ready.

Creating the Client Environment

Our next goal is to create the client environment.

Firstly, we need to install React. Let's call our project my-blog. The most recent version of React needs Node version 14 or greater and NPM version 5.6 or greater. So install Node and NPM before you install React. To install React and create your project directory, run the following command:

1	npx create-react-app my-blog

Under the hood, the React application uses Webpack to run the front-end pipeline. However, you don't have to worry about this—create-react-app handles it all for you. Once the application is successfully created, run the below command to start the app.

npm start

That's how simple it is to create and run a React application. Once the application is running, you will be able to access it at https://localhost:3000.

Project Directory

The default project structure of React will have a bunch of folders. We will have to modify this folder structure to suit our new blog application. The folder structure for our blog will appear as below.

Root
-- src
---- pages
------ landing
------ signin
------ signup
---- app.css
---- app.js
---- app.test.js
---- index.css
---- index.js

Our first goal is to build the sign-in page. The index.js and index.css files will be created in the signin folder. As mentioned previously, we are going to create a functional React component.

To build the sign-in page, we'll use the default form provided by HTML. This form makes things extremely convenient. It has all the JavaScript functions required to validate, enter, and submit form data. React offers many controlled form elements like <input>, <select>, and <textarea>.

The sign-in form has two input fields and a submit button.

The input field will have a value, id, type, and an onChange function.

value links the form input to a specific state variable.
id is a unique identifier to the form input.
type identifies if the input is an email, text, or password.
onChange is triggered whenever the user updates the value. With this function, we can update the state variable inked to the input field.

The button field will have a type and an onClick function.

type identifies the button type.
onClick is triggered when the user clicks on the button.

import './index.css';
....

function SignIn() {
  ....
  return (
    <div>
      <form ...>
        <h2 className="form-signin-heading"> Sign In </h2> 
        
        <div className="formItem">
            <label htmlFor="inputEmail"> Email address</label> 
            <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autoFocus />
        </div>
        <div className="formItem">
            <label htmlFor="inputPassword"> Password</label> 
            <input type="password" id="inputPassword" className="form-control" placeholder="Password" required />
        </div>
        ..
        <button className="btn btn-lg btn-primary btn-block" type="button"> Sign In </button>
        {error && <div className='error'>{error}</div>}
      </form>
    </div>
  );
}

export default SignIn;

Next, we need to style our sign-in page. For this, we will create an index.css file in the Sign In folder. The index.css has to be imported in the index.js file. Add the following line in the index.js file.

1	import './index.css';

.formItem {
    padding-bottom: 30px;
    display: flex;
    align-items: center;
}

.form-signin-heading {
    margin-bottom: 100px;
    font-size: 48px;
}

.error {
    color: red;
    font-weight: 600;
    margin-top: 30px;
}

To implement the sign-in process, you need to handle the input text onChange event and keep the text box values in a state variable. When the user clicks the button, you'll make use of the state variables to read the email address and password text box values. So let's add the onChange event to the input text boxes:

..
<div className="formItem">
    <label htmlFor="inputEmail" className="sr-only"> Email address</label> 
    <input type="email" id="inputEmail" value={email} onChange={handleEmailChange} className="form-control" placeholder="Email address" required autoFocus />
</div>
<div className="formItem">
    <label htmlFor="inputPassword" className="sr-only"> Password</label> 
    <input type="password" id="inputPassword" value={password} onChange={handlePasswordChange} className="form-control" placeholder="Password" required />
</div>
        

Define the onChange events in the Signin component. We make use of the useState Hook inside the component. The useState hook declares the state variables email and password. This is the new alternative to this.state inside class-based React components.

To access the state variable, we only need to use {email} or {password} inside the HTML elements.
To update the value of the state variable, we need to use the setEmail and setPassword functions defined through useState.
The default values of the state variables can be passed through useState. In our case, both variables are empty.

import { useState } from 'react';
....

function SignIn() {
....
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')

const handleEmailChange = (event) => {
setEmail(event.target.value)
}

const handlePasswordChange = (event) => {
setPassword(event.target.value)
}
..
}

Next, define an onClick method which you'll invoke on button click. This is a simple GET call to be made with the email and password. Once the response is received, we will display an error or redirect the user to the landing page.

const handleSubmit = () => {
    var formdata = new FormData();

    var requestOptions = {
      method: 'GET',
      body: formdata,
      redirect: 'follow'
    };

    const url = `http://localhost:5000/api/get/userprofilefromdb?email=${email}&pwd=${password}`
    fetch(url, requestOptions)
      .then(response => response.text())
      .then(result => navigate("/landing"))
      .catch(error => setError('Something Went Wrong'));
}

.
.
.
<button className="btn btn-lg btn-primary btn-block" type="button" onClick={handleSubmit}> Sign In </button>

App.js

We have successfully built the basic code for our sign-in page. Now, we need to connect the sign-in page with the app, and this is extremely simple to achieve. We will import the SignIn page into our App.js file.

import './App.css';
import SignIn from './pages/signin';

function App() {
  return (
    <div className="App">
      <SignIn />
    </div>
  );
}

export default App;

Navigating Between Pages

In any React application, you'll need to navigate between pages. That's what a router is for!

So far, we need to achieve the following routes:

If the user successfully signs in, the app must navigate to the landing page.
If the user does not have sign-in credentials, the app must load the sign-up page.
If the user wants to return to the home page, they should be able to navigate to the root page.

For this, we will use react-router-dom. Run the below command to install react-router-dom.

1	npm install react-router-dom

Once react-router-dom is installed successfully, modify the src/index.js code with the required routes.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import SignUp from './pages/signup/index'
import Landing from './pages/landing/index'
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

First, import createBrowserRouter and RouterProvider from react-router-dom.

const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
  },
  {
    path: "/signup",
    element: <SignUp />,
  },
  {
    path: "/landing",
    element: <Landing />,
  }
]);

Define the required routes using createBrowserRouter. In this blog application, we will have a route for signup and landing.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);


Finally, add RouterProvider to the app root component.

Next, we'll modify the sign-in page to accommodate routing.

First, import Link and useNavigate from react-router-dom.

1	// ...
2
3	import { Link } from "react-router-dom";
4	import { useNavigate } from "react-router-dom";

Next, create a handler for the submit button that navigates to the landing page if the user enters the correct email and password. To do this, first create a navigate function with the useNavigate() hook. Then you can call navigate("/landing") to navigate to the landing page.

function SignIn() {

  //...
  
  const navigate = useNavigate();

  const handleSubmit = () => {
    var formdata = new FormData();

    var requestOptions = {
      method: 'GET',
      body: formdata,
      redirect: 'follow'
    };

   const url = `http://localhost:5000/api/get/userprofilefromdb?email=${email}&pwd=${password}`
    fetch(url, requestOptions)
      .then(response => response.text())
      .then(result => navigate("/landing"))
      .catch(error => setError('Something Went Wrong'));
  }

Finally, enclose the Sign Up button with <Link to={`signup`}><button> Sign Up </button></Link>. Remember, the `signup` route has to be defined inside the RouterProvider.

  // ...

  return (
    <div>
      <form onSubmit={handleSubmit}>
        // ...
        <Link to={`signup`}><button className="btn btn-lg btn-primary btn-block" type="button"> Sign Up </button></Link>
        // ...
      </form>
    </div>
  );
}

export default SignIn;

Now, the sign-in page will appear as below:

Implementing user signup is similar to how you implemented sign-in. I'll leave the user signup implementation as an exercise for now, but I'll post it in the next part of this tutorial series.

You can see the completed project code in the GitHub repo.

Demo

We have created this application in StackBlitz for your quick access. Of course, don't try to copy the sign-up code before giving it a try yourself.

Wrapping It Up

In this part of the tutorial series, you created a database, built a simple server, and implemented the sign-in screen on the client-side. You also saw how to use react-router-dom to implement routing in React. In the next part of this tutorial, you'll see how to implement the sign-up portion and the add post page.