Furry Friends Blogs

Project Overview

The Home of Pet Lovers who enjoy writing and reading blogs about pets

Furry Friends Blogs is a feature-rich blogging platform designed for pet lovers who enjoy writing and reading about pets. The platform offers a seamless and engaging experience for users to share their pet stories, tips, and advice. It includes various functionalities such as adding blogs to a wishlist, filtering and searching for blogs, and interactive user profiles, ensuring dynamic interaction with the content. Additionally, it provides secure user authentication and a responsive design for an optimal experience across devices.

Live Link

• Live Link (Vercel)
• Live Link (Firebase)

Notable Features of the Website

• Advanced Blog Filtering & Search: Users can effortlessly filter blogs by category or search for specific titles, with robust pagination control to enhance browsing experience.

• Comprehensive Content Management: Users can efficiently manage (edit and delete) their blogs, comments, and replies, ensuring full control over their content and interactions.

• Personalized Wishlist Management: Users can save blogs for later reading, remove blogs from their wishlist, and receive notifications if a blog has been deleted by its author.

Technologies used in this Project

• ReactJS
• Javascript
• TailwindCSS
• Express.js (Server Side)
• MongoDB (Server Side)

Run the Project Locally

1. Clone the Repository:

   git clone https://github.com/nazmul-nhb/furry-friends-blogs-client.git
   cd furry-friends-blogs-client

2. Install Dependencies:

   npm install

3. Set Up Environment Variables: Create a .env.local file in the root directory and add the necessary environment variables. (Important!)

4. Run the Application:

   npm run dev -- --host

5. Access the Site: Open your browser and go to http://localhost:5173/ or http://192.168.1.12:5173/ from other devices on the same network to view the application.

Utility Packages Used in this Project

Click to Expand

• tanstack-table for showing interactive table on Featured Blogs page
• tanstack-query for managing states while fetching data (get)
• axios for fetching data (CRUD)
• framer-motion for newsletter section animation
• react-photo-view to view photos in full size on Blog Details page and in Tips & Advice section
• lottie-react for Animation on ErrorPage
• react-hook-form for handling forms
• react-simple-typewriter in Blog Details page for comment heading
• swiper for Slider/Swiper on Homepage Banner
• animate.css for Animation Effects on Preview modals on Add & Update Blog pages
• react-tooltip for showing tooltips
• react-helmet-async for Dynamic Page Titles
• react-icons for showing icons throughout the site
• react-hot-toast for Showing Toasts
• sweetalert2 for Showing Sweet Alerts
• momentjs to get time & handle time format
• react-tabs in Tips & Advice section to show tabs