https://github.com/rohan26ir/the-content-hub

Content Hub is a modern blogging platform built with React, Firebase, MongoDB, and Vite. Users can register, log in, post blogs, comment, and wishlist blogs. Fully responsive and optimized for all devices.
https://github.com/rohan26ir/the-content-hub

content-hub firebase-auth npm-package react server-side-rendering tailwindcss vercel-deployment vite website

Last synced: 2 months ago
JSON representation

Content Hub is a modern blogging platform built with React, Firebase, MongoDB, and Vite. Users can register, log in, post blogs, comment, and wishlist blogs. Fully responsive and optimized for all devices.

• Host: GitHub
• URL: https://github.com/rohan26ir/the-content-hub
• Owner: rohan26ir
• Created: 2025-01-01T00:38:17.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-02-12T10:08:54.000Z (3 months ago)
• Last Synced: 2025-02-12T10:52:28.222Z (3 months ago)
• Topics: content-hub, firebase-auth, npm-package, react, server-side-rendering, tailwindcss, vercel-deployment, vite, website
• Language: JavaScript
• Homepage: https://content-hub-24.web.app/
• Size: 147 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# The Content Hub

## Project Overview

**The Content Hub** is a dynamic, user-friendly blogging platform built with modern technologies like **React**, **Firebase**, **MongoDB**, and **Vite**. The website allows users to register, log in, post blogs, comment on blogs, wishlist blogs, and much more. It is fully responsive and optimized for mobile, tablet, and desktop views.

## Live URL

[The Content Hub](https://content-hub-24.web.app/)

## Key Features

- **Authentication**: Users can register and log in using email/password authentication. Integration with third-party authentication services like Google is also included.

- **Fully Responsive Design**: The platform is optimized for mobile, tablet, and desktop devices to ensure a seamless user experience across all screen sizes.

- **Create and Manage Blogs**: Logged-in users can add, edit, and delete their own blog posts, with fields for title, image URL, category, short description, and long description.

- **Featured Blogs**: Display top blogs based on word count in the long description.

- **Wishlist**: Users can add blogs to their wishlist and view them on a dedicated wishlist page.

- **Comments**: Users can comment on blogs (except on their own) with profile pictures attached to each comment.

- **Search & Filter**: Users can search for blogs by title and filter by category to easily find the content they're interested in.

- **JWT Authentication**: Secure private routes with JWT to protect users' personal data.

- **Data Table**: The featured blogs are displayed in a sortable data table using **Tanstack-Table** or another similar library.

- **Animations**: The homepage includes engaging animations powered by **Framer Motion** to enhance user interaction.

## Technologies Used

- **Frontend**:

  - **React** for building the UI.

  - **Tailwind CSS** for styling and responsive design.

  - **React Router** for routing and navigation.

  - **Firebase** for authentication.

  - **Framer Motion** for animations.

  - **Vite** as the build tool and development server.

  

- **Libraries**:

  - **@react-icons/all-files** for adding icons.

  - **@tanstack/react-query** for data fetching and caching.

  - **@tanstack/react-table** for creating sortable data tables.

  - **axios** for making API calls.

  - **react-toastify** for showing toast notifications.

  - **sweetalert2** for elegant alerts and pop-ups.

  - **react-helmet** for managing the document head.

  - **react-hot-toast** for better toast notifications.

  - **moment** and **date-fns** for date formatting.

  - **match-sorter** for sorting blog data.

  

- **Development Tools**:

  - **Vite** for fast and optimized development builds.

  - **ESLint** for JavaScript linting.

  - **Tailwind CSS** for utility-first styling.

  - **DaisyUI** for pre-built components in Tailwind CSS.

### Frontend requerement:

[DOCS LINK:](https://docs.google.com/document/d/1BmkQilfhFTLDeF_KOWKThBV8iATvSHfon93pMuk8hd4/edit?tab=t.0)