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

Dwell demo click here

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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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: [],
}
Enter fullscreen modeExit fullscreen mode

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;
Enter fullscreen modeExit fullscreen mode



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
    Create Project

  • Add your venture identify
    Add Project Name

  • Configure the analytics account
    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
Complete Setup

  • 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,
  },
});
Enter fullscreen modeExit fullscreen mode

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;
Enter fullscreen modeExit fullscreen mode

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.
Firebase config

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"
};
Enter fullscreen modeExit fullscreen mode

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;
Enter fullscreen modeExit fullscreen mode

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;
Enter fullscreen modeExit fullscreen mode



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