DevBlog

This repository contains the source code for a modern blogging platform designed for tech enthusiasts. The project implements a full-stack web application with a clean user interface, robust backend, and features such as user authentication, article management, commenting. The codebase demonstrates integration of React, Tailwind CSS, Node.js, Express.js, and MongoDB, providing a foundation for building and extending a technical blogging platform.

📸 Screenshot

🚀 Live Demo

View Live Demo

✨ Features

• User Authentication: Secure registration and login using email/password, as well as social logins via Google, Facebook, and Apple.
• Progressive Web App (PWA): The app can be installed on desktop and mobile devices for a native-like experience.
• Article Management: Users can create, read, and delete their own blog posts.
• Commenting System: Add, read, and delete comments on articles to foster discussion.
• Profile Management: Users can update their profile information and avatar.
• Save Posts: Bookmark and save favorite articles for quick access later.
• Search, Sort, and Filter: Easily find articles with advanced searching, sorting, and filtering options.
• Responsive & Impressive UI: Modern, mobile-friendly design with a clean and engaging user interface.

🛠️ Tech Stack

• Frontend:

  • React: Building dynamic and interactive user interfaces.
  • Tailwind CSS: Utility-first CSS framework for rapid UI development.
  • Axios: Handling HTTP requests to the backend API.
  • React Router: Client-side routing and navigation.
  • PWA Support (Workbox): Enabling offline capabilities and installable app features.

• Backend:

  • Node.js: JavaScript runtime for server-side logic.

  • Express.js: Web framework for building RESTful APIs.

  • MongoDB: NoSQL database for storing users, articles, and comments.

  • Mongoose: ODM for MongoDB, schema modeling and validation.

  • CORS: Enabling cross-origin requests between frontend and backend.

  • dotenv: Managing environment variables.

• Additional Integrations:

  • ImageKit: Handles image uploads, optimization, and CDN delivery for user avatars and article images.
  • Clerk: Provides secure, scalable authentication and user management.
  • Svix: Enables real-time notifications and webhooks for events like new comments or article updates.
  • TanStack Query: Manages server state, caching, and data synchronization in the frontend for efficient API interactions.
  • react-infinite-scroll-component: Implements infinite scrolling for seamless article and comment loading.
  • timeago.js: Displays human-readable timestamps (e.g., "5 minutes ago") for posts and comments.

🖥️ Local Setup

Follow these steps to run the project locally:

1. Clone the Repository

git clone https://github.com/amanhaidry/DevBlog.git
cd DevBlog

2. Backend Setup

cd backend
npm install

• Create a .env file in the backend folder (see .env.example if available) and add the following variables:

Sample .env for backend

MONGODB_URI=your_mongodb_connection_string
CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret
CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
CLIENT_URL=http://localhost:5173
IK_URL_ENDPOINT=your_imagekit_url_endpoint
IK_PUBLIC_KEY=your_imagekit_public_key
IK_PRIVATE_KEY=your_imagekit_private_key

• Start the backend server:

npm start

---

3. Client Setup

cd ../client
npm install

• Create a .env file in the client folder and add the following variables:

Sample .env for client

VITE_IK_URL_ENDPOINT=your_imagekit_url_endpoint
VITE_IK_PUBLIC_KEY=your_imagekit_public_key
VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_API_URL=http://localhost:3000

• Start the frontend development server:

npm run dev

---

4. Access the App

• Frontend: http://localhost:5173
• Backend API: http://localhost:3000

---

Note: Replace all your_* values with your actual credentials.