https://github.com/abusaleh123/blog-sphere-web
Blog Sphere is an engaging and interactive blog platform where users can explore, comment, and share insightful content.
https://github.com/abusaleh123/blog-sphere-web
firebase html5 javascript mongodb nodejs reactjs tailwindcss
Last synced: 3 months ago
JSON representation
Blog Sphere is an engaging and interactive blog platform where users can explore, comment, and share insightful content.
- Host: GitHub
- URL: https://github.com/abusaleh123/blog-sphere-web
- Owner: abusaleh123
- Created: 2025-01-10T10:23:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-12T10:17:21.000Z (over 1 year ago)
- Last Synced: 2025-02-12T10:27:18.941Z (over 1 year ago)
- Topics: firebase, html5, javascript, mongodb, nodejs, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://blog-sphere-55e89.web.app
- Size: 48.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blog Sphere (A Blog Website)
### Purpose:
A blog website aims to share insights, connect audiences, inspire creativity, educate, provide updates, promote brands, express opinions, showcase expertise, and foster community engagement globally.
## About This Project
## Key Features :
### Dynamic Blog Management
- Users can add, update, and view blogs with detailed information. Features include filtering blogs by category, searching by title, and managing personal blogs via a private route.
### Interactive Wishlist System
- Allows logged-in users to wishlist blogs, view their wishlist on a dedicated page, and remove blogs as needed. Wishlist data is stored securely and dynamically updated.
### Advanced Authentication
- Includes email/password-based authentication, social login options (e.g., Google), and JWT protection for private routes. Error handling ensures user-friendly feedback
### Enhanced Blog Details with Comments
- Blog details pages support user comments with profile pictures and names. Conditional features restrict self-comments and allow blog owners to edit their content.
### Responsive and Engaging UI
- Fully responsive design with features like Framer Motion animations, sortable tables for top blogs, newsletter subscription toasts, and smooth navigation across devices.
## NPM Packages :
- Tailwind
- DaisyUI
- React-Toastify
- React-photo-view
- React-loading-skeleton
- React-data-table
- React-Icons
- React-intersection-observer
# Main Technology:
![]()
![]()
![]()
![]()
#
## Dependencies
- [AOS](https://github.com/michalsnik/aos) - ^2.3.4
- [Axios](https://github.com/axios/axios) - ^1.7.9
- [EmailJS](https://github.com/emailjs-com/emailjs-sdk) - ^4.0.3
- [Firebase](https://github.com/firebase/firebase-js-sdk) - ^11.0.2
- [Framer Motion](https://github.com/framer/motion) - ^11.15.0
- [KA Table](https://github.com/komarovalexander/ka-table) - ^11.3.0
- [LocalForage](https://github.com/localForage/localForage) - ^1.10.0
- [Lottie React](https://github.com/Gamote/lottie-react) - ^2.4.0
- [Match Sorter](https://github.com/kentcdodds/match-sorter) - ^8.0.0
- [Moment](https://github.com/moment/moment) - ^2.30.1
- [React](https://github.com/facebook/react) - ^18.3.1
- [React Awesome Reveal](https://github.com/dennismorello/react-awesome-reveal) - ^4.3.1
- [React Data Table Component](https://github.com/jbetancur/react-data-table-component) - ^7.6.2
- [React DOM](https://github.com/facebook/react) - ^18.3.1
- [React Helmet](https://github.com/nfl/react-helmet) - ^6.1.0
- [React Icons](https://github.com/react-icons/react-icons) - ^5.4.0
- [React Intersection Observer](https://github.com/thebuilder/react-intersection-observer) - ^9.14.0
- [React Loading Skeleton](https://github.com/dvtng/react-loading-skeleton) - ^3.5.0
- [React Photo View](https://github.com/felixrieseberg/React-Photo-View) - ^1.2.6
- [React Router DOM](https://github.com/remix-run/react-router) - ^7.1.0
- [React Toastify](https://github.com/fkhadra/react-toastify) - ^11.0.2
- [Sort By](https://github.com/kvnneff/sort-by) - ^1.2.0
- [SweetAlert2](https://github.com/sweetalert2/sweetalert2) - ^11.15.3
- [Swiper](https://github.com/nolimits4web/swiper) - ^11.1.15
## Dev Dependencies
- [@eslint/js](https://github.com/eslint/js-eslint) - ^9.17.0
- [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped) - ^18.3.17
- [@types/react-dom](https://github.com/DefinitelyTyped/DefinitelyTyped) - ^18.3.5
- [@vitejs/plugin-react](https://github.com/vitejs/vite) - ^4.3.4
- [Autoprefixer](https://github.com/postcss/autoprefixer) - ^10.4.20
- [DaisyUI](https://github.com/saadeghi/daisyui) - ^4.12.22
- [ESLint](https://github.com/eslint/eslint) - ^9.17.0
- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) - ^7.37.2
- [eslint-plugin-react-hooks](https://github.com/facebook/react) - ^5.0.0
- [eslint-plugin-react-refresh](https://github.com/facebook/react) - ^0.4.16
- [Globals](https://github.com/ljharb/cls) - ^15.13.0
- [PostCSS](https://github.com/postcss/postcss) - ^8.4.49
- [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) - ^3.4.17
- [Vite](https://github.com/vitejs/vite) - ^6.0.3
## Installation:
Run ``` npm install ``` to install project dependencies
## Live URL :
- https://blog-sphere-55e89.web.app
- https://blog-sphere-55e89.firebaseapp.com
#
#
This blog website is a dynamic, user-friendly platform combining modern technologies like React, Firebase, and MongoDB. It offers seamless blog management, interactive features like wishlists and comments, robust authentication, and a visually appealing, responsive design. With advanced functionalities and a focus on user experience, it stands out as an engaging digital space.