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