Firebase React Redux Blog App

Demo

Check out the live demo of the Firebase React Redux Blog App:

Table of Contents

1. Introduction
2. Features
3. Tech Stack
4. Installation
5. Usage
6. Screenshots
7. License
8. Contact

---

Introduction

This project serves as a learning tool for gaining a deeper understanding of React.js, focusing on concepts such as Higher-Order Components (HOC), and exploring state management using Redux Toolkit (RTK). It also offers an opportunity to implement Firebase Firestore for database management, Firebase Storage for file handling, and Firebase Authentication for user management. Additionally, I have implemented middleware concepts in Redux Toolkit (RTK) within this project to enhance the state management workflow and handle side effects.

Features

This project includes several key features that enhance the user experience and functionality:

• CRUD Operations for Blog Posts: Users can create, read, update, and delete blog posts seamlessly, allowing for dynamic content management.
• User Authentication and Authorization: Implemented secure login and registration processes, including a forgot password feature to facilitate account recovery. Ensured that only authorized users can access specific features, enhancing overall security.
• Admin Dashboard: An intuitive admin dashboard that allows administrators to manage users, blog posts, and site settings effectively.
• Like Blog Posts: Users can like blog posts, fostering engagement and interaction within the community.
• Infinite Scrolling: Users can scroll through blog posts without interruptions, as more content loads automatically as they reach the bottom of the page.
• Pagination: Pagination is applied specifically to the table of approved blog posts in the admin dashboard, making it easier to navigate through the content.
• Edit User Profile: Users can update their profile by editing their username, password, email, and profile picture, as well as verifying their email address.

Tech Stack

List the technologies and tools used in this project.

Installation

Step-by-step guide on how to set up and run the project locally.

Prerequisites

• Node.js
• Git

Steps

1. Clone the repository:

   git clone https://github.com/dillahCodes/firebase-react-redux-blog-app.git
   cd firebase-react-redux-blog-app

2. Install dependencies:

   npm install

3. Set up environment variables by creating a .env file in the root directory (provide an example if needed):

   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
   VITE_FIREBASE_APP_ID=your_firebase_app_id
   VITE_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id
   VITE_USE_FIREBASE_EMULATOR=true # set to true to use firebase emulators or false to use in production

4. Start the development FrontEnd server:

   npm run dev

5. Start the development Database Server:

   npm run db

6. Local FrontEnd Server http://localhost:5173

7. Local Firebase Server http://127.0.0.1:4000

8. Available Script:

   npm run dev
   npm run db
   npm run build
   npm run preview
   npm run release
   npm run lint

Usage

Instructions on how to use the project after installation.

1. Create an Account:

   • Navigate to the registration page.
   • Fill in the required details to create your account.

2. Login:

   • Use your registered email and password to log in to the application.

3. Set Admin Role:

   • After logging in, check your Firebase Firestore data and change the user role to either admin or super_admin as needed.
   • After changing the user's role, users with the admin or super_admin role will be able to unlock and access the Admin Dashboard menu.

Screenshots

Home Page	Create Blog Page
Dashboard Admin Page	Edit Profile Page
My Article Page	Detail Article Page
Detail Topic Page

License

This project is licensed under the MIT License

Contact

• Email: [email protected]
• GitHub: dillahCodes