FullStack Blog Website made with Vite+React and Appwrite

Full Stack Blog Website made with Vite+React, Appwrite, Tailwind-css, Redux-toolkit, React-hook-form, React-router, Tinymce-react, Html-react-parser, .

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Live Demo
  • Features
  • Tech Stack
  • Environment Variables
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally
  • Deployment
• Contact

🌟 About the Project

• Blog Application

This project is a CRUD (Create, Read, Update, Delete) blog website developed using React.js, Redux-Toolkit, TailwindCSS, react-hook-form, and Appwrite. It provides users with the ability to create, read, update, and delete blogs, along with advanced features such as user authentication, rich multimedia content support, and blog privacy settings.

LIVE DEMO 💥

Features

• Login and Sign-up function
• Can create new posts
• Can update your posts
• Can delete your posts
• Can made active or inactive your post
• Can see all active post of any writer
• Can see your posts

👾 Tech Stack

Client

• Javascript
• React.js
• TailwindCSS
• Redux-toolkit
• React-hook-form
• TinyMce-react
• React-toastify

Backend Server

• Appwrite

🧰 Getting Started

‼️ Prerequisites

• Install Node JS in your computer HERE
• Sign up for a Appwrite account HERE
• Sign up for a Tiny-mce account HERE

🔑 Environment Variables

To run this project, you will need to add the following environment variables to your .env file

VITE_APPWRITE_URL

VITE_APPWRITE_PROJECT_ID

VITE_APPWRITE_DATABASE_ID

VITE_APPWRITE_COLLECTION_ID

VITE_APPWRITE_BUCKET_ID

VITE_RTE_API_KEY

⚙️ Installation

Install my-project with npm

npm create vite@latest my-project -- --template react

cd my-project

Install dependencies

🧪 Install Tailwind CSS

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Install dependencies

🔶 Dependency Info

🏃 Run Locally

Clone the project

  git clone https://github.com/2003tanmay/appwriteblog.git

change directory

  cd appwriteblog

Install dependencies

  npm install

Start the server

  npm run dev

---

This is a Vite+React project

---

Open http://localhost:5173 with your browser to see the result.

You can start editing the page by modifying src/main.jsx. The page auto-updates as you edit the file.

🚩 Deployment

To deploy this project run

Deploy on Vercel

The easiest way to deploy your React.js app is to use the Vercel Platform from the creators of React.js.

🤝 Contact

Tanmay Pal - LinkedIn - tanmayspal2003@gmail.com

Project Link: github

Don't forget to leave a star ⭐️