Skip to content

README.md

Latest commit

 

History

History
203 lines (173 loc) · 5.57 KB

README.md

File metadata and controls

203 lines (173 loc) · 5.57 KB

Blogify

Blogify is a dynamic, modern web application for creating, managing, and sharing blogs seamlessly. Built using cutting-edge technologies like React, RTK, Tailwind CSS, and Appwrite, it provides a robust platform for bloggers to express themselves while ensuring scalability, security, and a rich user experience.

Features

  • User Authentication: Secure user login and registration using Appwrite's authentication system.
  • Blog Management: Create, edit, and delete blogs with ease.
  • Rich Text Editing: Format your blogs with an intuitive and user-friendly text editor.
  • Responsive Design: Fully responsive and optimized for all screen sizes.
  • Real-Time Updates: Blogs are updated in real-time without refreshing the page.
  • Secure Backend: All user and blog data are securely managed with Appwrite.

Technologies Used

Frontend

  • React: For building the dynamic and interactive user interface.
  • Redux and RTK: For managing and and centralizing application states.
  • Tailwind CSS: For rapid UI design and responsive layouts.
  • DaisyUI: Tailwind plugin for pre-designed UI components.

Backend

  • Appwrite: A self-hosted backend-as-a-service platform for managing authentication, database, and storage.

Others

  • React Router: For seamless navigation.
  • Vite: For fast and efficient development.
  • ESLint: To maintain code quality.

Getting Started

Folder structure

.
├── .env.sample
├── eslint.config.js
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   ├── favicon
│   │   ├── android-chrome-192x192.png
│   │   ├── android-chrome-512x512.png
│   │   ├── apple-touch-icon.png
│   │   ├── favicon-16x16.png
│   │   ├── favicon-32x32.png
│   │   ├── favicon.ico
│   │   ├── icon.png
│   │   └── site.webmanifest
│   └── vite.svg
├── README.md
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── appwrite
│   │   ├── auth.js
│   │   └── config.js
│   ├── assets
│   │   └── react.svg
│   ├── components
│   │   ├── AuthLayout.jsx
│   │   ├── Button.jsx
│   │   ├── container
│   │   │   └── Container.jsx
│   │   ├── Footer
│   │   │   └── Footer.jsx
│   │   ├── Header
│   │   │   ├── Header.jsx
│   │   │   ├── LogoutBtn.jsx
│   │   │   └── UserBadge.jsx
│   │   ├── index.js
│   │   ├── Input.jsx
│   │   ├── Login.jsx
│   │   ├── Logo.jsx
│   │   ├── PostCard.jsx
│   │   ├── post-form
│   │   │   └── PostForm.jsx
│   │   ├── RTE.jsx
│   │   ├── Select.jsx
│   │   └── Signup.jsx
│   ├── conf
│   │   └── conf.js
│   ├── index.css
│   ├── main.jsx
│   ├── pages
│   │   ├── AddPost.jsx
│   │   ├── AllPosts.jsx
│   │   ├── EditPost.jsx
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── Post.jsx
│   │   └── Signup.jsx
│   └── store
│       ├── authSlice.js
│       └── store.js
├── tailwind.config.js
├── tree.txt
├── vercel.json
└── vite.config.js

14 directories, 54 files

Follow these steps to set up and run the project on your local machine:

Prerequisites

  • Node.js (v16+)
  • Appwrite Server (self-hosted or Appwrite Cloud)

Installation

  1. Clone the repository:

    git clone https://github.com/TBS96/megaBlogAppwrite.git
cd megaBlogAppwrite

  2. Install dependencies:

    npm install

  3. Configure Appwrite:

    • Create a project in your Appwrite console.
    • Configure your database and authentication.
    • Update the Appwrite endpoint and project ID in the app configuration.

  4. Start the development server:

    npm run dev

  5. Open the app in your browser: Navigate to http://localhost:5173.

Deployment

To build the app for production, run:

npm run build

Contributions

Contributions are welcome! Feel free to open issues or submit pull requests to improve this project.

Steps to Contribute:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/YourFeature).
  3. Commit your changes (git commit -m 'Add some feature').
  4. Push to the branch (git push origin feature/YourFeature).
  5. Open a pull request.

Contact

If you have any questions or feedback, feel free to reach out:

Happy Blogging!