/blogsphere

blog posting and viewing web app

Primary LanguageJavaScript

Blogsphere

Blogsphere is a feature-rich blog website where users can create, share, and explore blog posts. Whether you're a content creator looking to share your ideas or a user seeking engaging content, Blogsphere has you covered with its array of functionalities. image

Features

For Bloggers

  1. Analytics: Bloggers can track various metrics including total views, upvotes, followers, and post-specific analytics. image

  2. Markdown Support: Write posts using Markdown language with live preview and embed images seamlessly. image

  3. Post Customization: Choose post categories, add keywords for better visibility, and edit posts as needed.

  4. Post Management: Bloggers have full control over their posts including editing, deleting, sharing, activating, and deactivating them. image

For Users

  1. Discover Posts: Users can explore trending, featured, and newly uploaded posts directly from the home page.

  2. Dynamic Search: Utilize a dynamic search bar to find posts based on titles, keywords, and categories. image

  3. Follow Bloggers: Users can follow their favorite bloggers to stay updated with their latest posts. image

  4. Interaction: Logged-in users can engage with posts by commenting and upvoting. image

  5. Sanity Filtering: Automatic replacement of vulgar language in comments to maintain a positive environment.

  6. Responsive Design: Provided users with great responsive design for interative reading image image

Additional Features

  1. Server-side Rendering: Enhance SEO by serving static HTML pages from the server.

  2. Lazy Image Loading: Improve content loading speed with lazy loading of images.

Tech Stacks

  • Frontend: NEXT JS
  • Backend: NODE JS
  • Database: MONGO DB
  • Authentication: FIREBASE

Libraries Used

  1. REACT-SIMPLEMDE-EDITOR: For Markdown content writing.
  2. RECHARTS: Visualization of analytics data.
  3. REACT HOT TOAST: Toast notifications for user interactions.
  4. BCRYPT: Secure password hashing.
  5. JSON WEB TOKEN: Authentication token generation and verification.

Getting Started

To run the project locally:

  1. Clone this repository.
  2. Install dependencies using npm install.
  3. Set up environment variables including database credentials and API keys.
  4. Start the development server using npm run dev.

Contributors