Skip to content

README.md

Latest commit

 

History

History
128 lines (94 loc) · 2.85 KB

README.md

File metadata and controls

128 lines (94 loc) · 2.85 KB

BlogBytes

BlogBytes is a full-stack blogging platform designed for modern writers and readers. It allows users to create, read, update, and delete blog posts with a seamless UI and secure backend. The platform supports user authentication, rich text editing, categories, and more.

Features

  • User Authentication – Secure login/signup with JWT
  • Create & Edit Posts – Rich text editor for writing beautiful articles
  • Category & Tag Support – Organize posts by topic
  • Comments System – Engage with readers
  • Responsive Design – Mobile-first, clean UI

Tech Stack

Frontend

  • React + Vite
  • Tailwind CSS / SCSS
  • Axios

Backend

  • Node.js + Express
  • MongoDB + Mongoose
  • JWT Authentication
  • Cloudinary (for image uploads)

📁 Project Structure

BlogBytes/
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   └── lib/
│   └── vite.config.js
│
├── backend/
│   ├── controllers/
│   ├── prisma/
│   ├── routes/
│   ├── middleware/
│   └── index.js
│
└── README.md

⚙️ Setup Instructions

Prerequisites

  • Node.js and npm installed
  • MongoDB running locally or cloud URI
  • Prisma

Installation

  1. Clone the repo

    git clone https://github.com/Talish1234/BlogBytes.git
cd BlogBytes

  2. Install frontend & backend dependencies

    cd frontend && npm install
cd ../backend && npm install

  3. Add environment variables

    Create a .env file in /backend with:

    BASE_URL= frontend_base_url
DATABASE_URL=mongodb+srv://<USERNAME>:<PASSWORD>@cluster.mongodb.net/BlogBytes
SECRET=yourJWTSecret

    Image Upload Configuration (Cloudinary)

    This project uses Cloudinary for handling image uploads in the following pages:

    • frontend/pages/CreatePost.jsx
    • frontend/pages/Register.jsx
    • frontend/pages/Profile.jsx

    To enable image uploads, configure your Cloudinary credentials in these files.

    How to Set It Up

    Replace the placeholders with your actual Cloudinary values:

    cloud_name: {/* Your Cloudinary cloud name */},
uploadPreset: {/* Your upload preset */}

    You can find these in your Cloudinary Dashboard: Settings → Upload → Upload Presets

  4. Run the development servers

    • Backend: npm run dev (in /backend)
    • Frontend: npm run dev (in /frontend)

Future Scope

  • Bookmark & like functionality
  • Newsletter subscription
  • Markdown support
  • WYSIWYG editor
  • Draft autosaving
  • Analytics for authors

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you’d like to change.