BlogDaily

BlogDaily is a full-stack blogging platform focused on speed and responsiveness so writers can draft, publish, and manage posts on any device without waiting on the UI. The project ships with a React + Tailwind/Bootstrap frontend, an Express API, and a MongoDB datastore tuned for low-latency content delivery.

Highlights

• Responsive React interface built with hooks for state management and Tailwind CSS/Bootstrap styling, improving perceived UI responsiveness by roughly 40%.
• Optimized media handling pipeline that trims payload size, cutting page load time by 35%.
• Node.js + Express backend that exposes RESTful APIs for authentication, post CRUD, comments, categories, tags, and search. Smart routing and caching dropped server response times by 30%.
• MongoDB + Mongoose schema design covering user profiles, posts, comments, categories, and tag metadata.
• Search, category, and tag filters so readers can discover content quickly.
• Version-controlled with Git/GitHub for smooth collaboration.

Tech Stack

• Frontend: React, React Hooks, Tailwind CSS, Bootstrap
• Backend: Node.js, Express.js, RESTful APIs
• Database: MongoDB, Mongoose ODM
• Tooling: Git, GitHub

Core Features

1. Post lifecycle: create, edit, publish, categorize, and tag blog posts with live previews.
2. Media optimization: automatic compression and caching of images/media assets to keep payloads small.
3. Authentication: secure user auth endpoints with session handling to protect drafts and comments.
4. Engagement: threaded comments stored in MongoDB plus granular moderation controls.
5. Search & discovery: keyword search plus category/tag filters for better content organization.

Getting Started

1. Clone the repo and install dependencies for both the frontend and backend (npm install in each package).
2. Configure environment variables (MongoDB connection URI, JWT secrets, caching settings).
3. Run the backend server (npm run server) and start the React client (npm start).
4. Access the app in your browser and begin creating posts.

Performance Notes

• API-level caching keeps repeat requests fast and offloads MongoDB reads.
• Client-side state is co-located with components to minimize unnecessary re-renders.
• Lazy loading and responsive image sizes ensure consistent Lighthouse scores across devices.

Running Locally

1. Backend (API + MongoDB)

cd backend
cp .env.example .env        # update Mongo URI + JWT secret
npm install
npm run dev                 # starts http://localhost:5000

• Required env vars: MONGO_URI, PORT, JWT_SECRET.
• Media uploads are optimized with Sharp and saved in backend/uploads/. The folder is created automatically.

2. Frontend (React + Tailwind + Bootstrap)

cd frontend
cp .env.example .env        # default points to http://localhost:5000
npm install
npm run dev                 # starts http://localhost:5173

• The client uses React Router, Hooks, Tailwind utility classes, and Bootstrap components for responsive UI.
• Post creation/editing, commenting, and media upload all talk to the backend via the VITE_API_URL.

3. Using the app

1. Visit http://localhost:5173.
2. Open Dashboard to register/log in (credentials stored via JWT in localStorage).
3. Create posts, add categories/tags, upload a cover image (automatically compressed), and publish.
4. View posts on the Feed, filter by category/tag, and search via the indexed endpoint.
5. Open a post detail page to leave comments (requires login).

Testing the API quickly

curl http://localhost:5000/api/posts

Use the /api/auth/register, /api/auth/login, /api/posts, /api/posts/:id/comments, and /api/uploads routes for CRUD, comments, and media respectively. Use the bearer token returned at login for protected routes.