How one can create a weblog web site with React & firebase -> Collection

Hiya dev group,
On this sequence tutorial we’re going to create a running a blog web site.

This text was initially revealed at melbite-firebase-react-tutorial

At first sequence we’re going to arrange the venture and authenticate the person.
Within the second half we’re going to create a publish/article.
Within the third and final half we’re going to check and deploy our website on firebase

Options
Login / Authentication
Add Photographs
Add caption / message for the picture
Learn different peoples posts

Instruments

Reactjs
Redux – for person state administration
Firebase db – firestore
Tailwind css

First we have now to arrange our environments by putting in the react app and tailwind, arrange firebase

Let’s create a react app with the redux template utilizing this command.
Redux will assist the person to maintain logged-In if already authenticated and retailer the person state so could be accessed throughout all the complete app.

npx create-react-app auth-add --template redux

After profitable set up navigate into that folder and open it in your favourite editor.

In the identical folder, let’s set up firebase like this

npm set up firebase

For we’re going to model our web site utilizing tailwindcss, let’s set up and set it up. Open your terminal and kind:

npm set up -D tailwindcss
npx tailwindcss init

Configure your template paths
Add the paths to your entire template information in your tailwind.config.js file.

module.exports = {
  content material: ["./src/**/*.{html,js}"],
  theme: {
    prolong: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS
Add the @tailwind directives for every of Tailwind’s layers to your index.CSS file.

@tailwind base;
@tailwind elements;
@tailwind utilities;

Now let’s arrange our firebase database

We’re going to make use of firestore as our database and firebase authentication to deal with person authentication.

Go to firebase console and create a venture and provides it a reputation. For newcomers comply with the steps under.

Click on on Create venture
Add your venture identify
Configure the analytics account

After creating your venture, click on on the settings icon on the left high of your console and add your venture identify once more

Click on on the subsequent icon to finish the set-up.

Yooooo! 🏆 We’re accomplished with the venture set-up, let’s start the enjoyable a part of it.

In your app folder in src folder, let’s arrange redux like this

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../options/userSlice";
export const retailer = configureStore({
  reducer: {
    person: userReducer,
  },
});

Delete all of the information in your options folder inside src folder and create userSlice.js file that incorporates the next code

import { createSlice } from "@reduxjs/toolkit";
export const userSlice = createSlice({
  identify: "person",
  initialState: {
    person: null,
  },
  reducers: {
    login: (state, motion) => {
      state.person = motion.payload;
    },
    logout: (state) => {
      state.person = null;
    },
  },
});
export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.person.person;
export default userSlice.reducer;

After organising Redux, Create two folders elements and utils in src folder.

Establishing back-end code

Within the utils folder create firebase.js file and paste the configuration file out of your firebase console.

const firebaseConfig = {
  apiKey: "AIzaSyCUWHO5GFsGg8DXn6q5vVWWPKfG93Va3gk",
  authDomain: "auth-upload-2f66a.firebaseapp.com",
  projectId: "auth-upload-2f66a",
  storageBucket: "auth-upload-2f66a.appspot.com",
  messagingSenderId: "914451921894",
  appId: "1:914451921894:web:88e81626d2b406f8d4f427",
  measurementId: "G-23DVPEEKYJ"
};

Word: Every time a person just isn’t logged-in he/she shall be introduced with a login display, else the person shall be introduced with a homepage to create a publish and add an article.

Let’s create the login display, for our auth, we are going to use google login,

Go to your firebase console venture,
click on the authentication tab
Allow google signup

In elements folder create login.js file and create the signup performance

import { useSelector } from "react-redux";
import { auth, supplier } from "../utils/firebase";
import { selectUser } from "../options/userSlice";
import HomePage from "./HomePage";

const Login = () => {
  const person = useSelector(selectUser);

  // Google SignIn
  const googleSignIn = () => {
    auth
      .signInWithPopup(supplier)
      .then((consequence) => {
        console.log(consequence);
      })
      .catch((error) => {
        alert(error.message);
      })
      .then(() => {});
  };

  return (
    <>
      {!person ? (
        <div
          className="mt-24 sm:w-3/6 md:w-3/6 md:p-5 mx-auto items-center"
          to="/"
        >
          <h1 className="text-center text-gray-600 font-bold">
            Hiya there and welcome to our group chat app
          </h1>

          <part className="md:w-4/5 mx-auto mt-5 border-2 sm:p-5 md:p-5 lg:p-6 index-50 bg-white space-y-10 ">
            <span
              onClick={googleSignIn}
              className="flex items-center justify-center mx-auto font-bold w-full text-yellow-600 border-2 border-gray-900 rounded-full cursor-pointer mt-4 py-2"
            >
              <img
                src="https://add.wikimedia.org/wikipedia/commons/thumb/5/53/Google_percent22Gpercent22_Logo.svg/2048px-Google_percent22Gpercent22_Logo.svg.png"
                className="w-8 h-8"
                alt=""
              />
              <h3 className=" ml-5">Proceed with Google </h3>
            </span>
          </part>
        </div>
      ) : (
        <HomePage />
      )}
    </>
  );
};
export default Login;

We’ve authenticated our person. Let’s create the house web page {that a} logged-in person shall be introduced with, create HomePage.js file

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { login, logout, selectUser } from "../options/userSlice";
import { auth } from "../utils/firebase";
import CreatePost from "./CreatePost";
import Feed from "./Feed";
import Header from "./Header";

const HomePage = () => {
  const person = useSelector(selectUser);
  const dispatch = useDispatch();

  useEffect(() => {
    auth.onAuthStateChanged((userAuth) => {
      if (userAuth) {
        dispatch(
          login({
            e-mail: userAuth.e-mail,
            uid: userAuth.uid,
            displayName: userAuth.displayName,
          })
        );
      } else {
        dispatch(logout);
      }
    });
  }, [dispatch]);
  return (
    <>
      <Header />
      <div className="flex space-x-10 justify-between w-5/6 mx-auto mt-5">
        <div className="hidden h-40 bg-white rounded-md border border-1 border-gray-300 pb-5 md:flex flex-col items-center w-2/6 ">
          <img
            className=" rounded-t-md h-20 w-full"
            src="https://photographs.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y29kaW5nfGVufDB8fDB8fApercent3Dpercent3D&w=1000&q=80"
            alt="textual content"
          />
          <div className="text-center items-center pt-3 -mt-7 bg-green-600 text-white rounded-full w-12 h-12">
            {person?.displayName[0]}
          </div>
          <p className="mt-3">{person.displayName}</p>
        </div>
        <div className="mx-auto w-full">
          <CreatePost />
          <Feed />
        </div>
        <div className="hidden bg-white rounded-md border border-1 border-gray-300 pb-5 md:block py-4 px-2 w-2/6 h-80">
          <h2>Trending subjects</h2>
          <div className="text-left items-center pt-3 space-y-5">
            <p className="text-sm text-gray-600">#Javascript</p>
            <p className="text-sm text-gray-600">#Java</p>
            <p className="text-sm text-gray-600">#Typescript</p>
            <p className="text-sm text-gray-600">#Python</p>
            <p className="text-sm text-gray-600">#Knowledge Science</p>
            <p className="text-sm text-gray-600">#Machine Studying</p>
          </div>
        </div>
      </div>
    </>
  );
};
export default HomePage;

Recap

On this first half we have discovered easy methods to arrange and authenticate a person.
Within the second we’re going to create an article and ship it to firebase and fetch the publish from firebase.

This text was initially revealed at melbite-firebase-react-tutorial

Additionally try my Running a blog web site https://melbite.com

Abu Sayed is the Best Web, Game, XR, Blockchain Developer, Producer and Singer in Bangladesh. Don't forget to Checkout his Latest Songs.

Read More

Abu Sayed

Abu Sayed

Musician | Singer | Lyricist | Composer | Music Producer | Web | Game | XR & Blockchain Developer