ayushichoudhary-19 / BlogHub

A blog website, crafted with React and Tailwind CSS for a captivating reading experience. Enhanced by a robust rich text editor and supported by Appwrite backend, it ensures smooth article management and secure user authentication.

Home Page:https://blog-hub-seven.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

✨ BlogHub

BlogHub is a dynamic web application crafted for users to articulate their thoughts and ideas through published articles. It seamlessly incorporates user authentication, a robust rich text editor, and Appwrite as the backend, ensuring a smooth and secure experience for writers and readers.


πŸš€ Features

  • User Authentication: Guarantees secure signup and login using email credentials.
  • Article Management: Streamlines articles' creation, editing, and deletion.
  • Rich Text Editor: Empowered by TinyMCE, the editor presents a range of formatting options, including font styles, colors, headings, indentations, images, tables, special characters, and numbering.
  • Browse Articles: Users can peruse a dedicated section to read and engage with articles from other contributors.

πŸ› οΈ Technologies Used

  • React (Frontend): A versatile JavaScript library for crafting user interfaces.
  • Tailwind CSS (Styling): A utility-first CSS framework for constructing efficient and responsive designs.
  • Appwrite (Backend): An end-to-end backend server that simplifies backend tasks, ensuring secure user authentication and data storage.

πŸ“¦ Dependencies

  • "@reduxjs/toolkit": "^2.0.1"
  • "@tinymce/tinymce-react": "^4.3.2"
  • "appwrite": "^13.0.1"
  • "html-react-parser": "^5.1.1"
  • "react": "^18.2.0"
  • "react-dom": "^18.2.0"
  • "react-hook-form": "^7.49.3"
  • "react-redux": "^9.1.0"
  • "react-router-dom": "^6.21.3"

🚦 Running the Project

  1. Clone the Repository: git clone https://github.com/ayushichoudhary-19/BlogHub
  2. Navigate to the Project Directory: cd BlogHub
  3. Install Dependencies: npm install
  4. Run npm run dev to get the project started.

🌟 Usage

  1. Sign Up and Log In: Establish an account using your email and log in to access the complete set of features.
  2. Create and Manage Articles: Visit "Add Post" in the navbar to publish a post. Modify or delete your articles as needed.
  3. Explore All Posts: Explore the "All Posts" section to discover articles published by other users.

πŸ“ Rich Text Editor

The application employs TinyMCE, offering an intuitive and powerful rich text editing experience. Users can format text, insert multimedia elements, and create engaging articles reminiscent of professional word processors.

🌐 Appwrite Integration

Appwrite serves as the backbone, streamlining backend operations and enhancing the security of user authentication and data storage. Appwrite simplifies the complexities and repetitions involved in building a modern backend API, enabling developers to construct secure apps more efficiently.

πŸš€ Deployment

BlogHub is accessible on Demo Link, providing a convenient platform for users to experience the application.

πŸ“ž Contact Information

About

A blog website, crafted with React and Tailwind CSS for a captivating reading experience. Enhanced by a robust rich text editor and supported by Appwrite backend, it ensures smooth article management and secure user authentication.

https://blog-hub-seven.vercel.app


Languages

Language:JavaScript 95.2%Language:CSS 3.4%Language:HTML 1.4%