Resize-Image

A full-stack web application for everyday image tasks — resize, compress, convert format, and turn images into PDF — bundled with a lightweight article / blog CMS and an admin dashboard.

The heavy image processing runs on a Node.js + Express API powered by sharp and pdf-lib, while a React single-page app provides the user interface.

• Repository: https://github.com/umeraslamwattoo/Resize-Image

---

Table of Contents

• Features
• Tech Stack
• Project Structure
• Architecture
• Getting Started
  • Prerequisites
  • 1. Clone the repository
  • 2. Backend setup
  • 3. Frontend setup
• Environment Variables
• Available Scripts
• API Reference
• Frontend Routes
• Data Model
• Deployment
• Known Limitations / Roadmap
• Contributing
• License

---

Features

Image tools

Tool	Description	Processing
Resize	Resize an image to an exact width and height.	Server (sharp)
Compress to target size	Compress an image down to a target size in KB by iteratively lowering JPEG quality.	Server (sharp)
JPEG / PNG / GIF compressors	Dedicated pages with presets (e.g. "Compress JPEG to 100 KB").	Client (browser-image-compression) + Server
Web Image Converter	Convert an image to jpg, png, or webp.	Server (sharp)
Image → PDF	Wrap an image into a single-page A4-style PDF.	Server (sharp + pdf-lib)

Content management

• Create, edit, and delete rich-text articles with a WYSIWYG editor (React Quill).
• Organize articles by category (Resize, JPEG Compressor, PNG Compressor, GIF Compressor, Image Converter, Pdf-Converter, Resize-card, …).
• Each tool page pulls its own help/SEO content from the articles API by category.
• Admin dashboard for managing posts.

---

Tech Stack

Frontend

• React 18 (Create React App)
• React Router v6
• Tailwind CSS 3
• browser-image-compression, compressorjs — client-side compression
• react-quill — rich-text editor
• react-toastify — notifications
• react-icons

Backend

• Node.js + Express 4
• MongoDB with Mongoose 8
• multer — multipart uploads (in-memory storage)
• sharp — image resize / compress / convert
• pdf-lib, pdfkit — PDF generation
• dotenv, cors

---

Project Structure

Resize_image/
├── backend/
│   ├── index.js            # Express app: article CRUD + image-processing endpoints
│   ├── Model/
│   │   └── Artical.js      # Mongoose schema for articles
│   ├── vercel.json         # Vercel serverless build config
│   └── package.json
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── App.js          # Routes
│   │   ├── index.js
│   │   ├── index.css       # Tailwind entry
│   │   └── components/
│   │       ├── Header.jsx  Footer.jsx  Buttons.jsx
│   │       ├── Home/           # Hero, Features, FAQ, FormateGuide
│   │       ├── Resize/         # Resize tool + article views
│   │       ├── jpegcompressor/ pngcompressor/ gifcompressor/
│   │       ├── pdfconverter/   # Image → PDF
│   │       ├── WebConvert/     # Format converter
│   │       └── Dashbord/       # Admin: CreatPost, Articles, Sidebar
│   ├── tailwind.config.js
│   └── package.json
│
└── README.md

---

Architecture

┌─────────────────────────┐         HTTP (JSON / multipart)        ┌──────────────────────────┐
│   React SPA (port 3000) │  ───────────────────────────────────▶  │  Express API (port 5005) │
│                         │                                        │                          │
│  • Tool pages           │   /api/articles           (CRUD)       │  • Mongoose models       │
│  • Article CMS UI        │   /resize-image           (multipart)  │  • sharp pipelines       │
│  • Client-side compress │   /compress-image         (multipart)  │  • pdf-lib PDF builder   │
│                         │   /convert-image-to-:fmt  (multipart)  │                          │
└─────────────────────────┘   /convert-image-to-pdf   (multipart)  └───────────┬──────────────┘
                                                                               │
                                                                               ▼
                                                                    ┌──────────────────────┐
                                                                    │   MongoDB (Atlas)    │
                                                                    │   articles collection│
                                                                    └──────────────────────┘

Uploaded files are held in memory (multer.memoryStorage), processed, streamed back to the client as a download, and never persisted to disk.

---

Getting Started

Prerequisites

• Node.js 18 or newer
• npm 9 or newer
• A MongoDB connection string (local mongod or a free MongoDB Atlas cluster)

sharp ships prebuilt binaries for most platforms. If installation fails, see the sharp install guide.

1. Clone the repository

git clone https://github.com/umeraslamwattoo/Resize-Image.git
cd Resize-Image

2. Backend setup

cd backend
npm install

Create a .env file in backend/ (see Environment Variables):

MONGO_URI=mongodb+srv://<user>:<password>@<cluster>/<db>?retryWrites=true&w=majority
PORT=5005

Start the API:

# with auto-reload during development
npx nodemon index.js

# or a plain run
node index.js

The server logs Server running on http://localhost:5005 and MongoDB connected on success.

3. Frontend setup

In a second terminal:

cd frontend
npm install
npm start

The app opens at http://localhost:3000 and expects the API at http://localhost:5005.

---

Environment Variables

Backend (backend/.env) — not committed (ignored via .gitignore):

Variable	Required	Description
MONGO_URI	Yes	MongoDB connection string used by Mongoose.
PORT	No	Port for the Express server. Defaults to 5005.

The frontend currently calls http://localhost:5005 directly (hard-coded). See Known Limitations for making this configurable.

---

Available Scripts

Backend (backend/)

Command	Description
node index.js	Start the API server.
npx nodemon index.js	Start with auto-reload on file changes.

Frontend (frontend/)

Command	Description
npm start	Run the app in development mode on port 3000.
npm run build	Build an optimized production bundle to frontend/build/.
npm test	Run the Create React App test runner.
npm run deploy	Publish build/ to GitHub Pages (gh-pages).

---

API Reference

Base URL (development): http://localhost:5005

Articles

Method	Endpoint	Body	Description
POST	/api/articles	{ category, title, discripition }	Create an article.
GET	/api/articles	–	List all articles.
GET	/api/articles/:id	–	Get a single article by ID.
PUT	/api/articles/:id	{ category, title, discripition }	Update an article.
DELETE	/api/articles/:id	–	Delete an article.
GET	/api/articles/category/:category	–	List articles filtered by category.

discripition is the field name used by the schema and API (HTML string from the rich-text editor).

Example

curl -X POST http://localhost:5005/api/articles \
  -H "Content-Type: application/json" \
  -d '{"category":"Resize","title":"How to resize images","discripition":"<p>Steps…</p>"}'

Image processing

All image endpoints accept multipart/form-data and respond with the processed file as an attachment download.

Method	Endpoint	Form fields	Response
POST	/resize-image	image (file), width (number), height (number)	Resized JPEG
POST	/compress-image	image (file), size (target KB)	Compressed JPEG ≤ target size
POST	/convert-image-to-pdf	image (file)	Single-page PDF
POST	/convert-image-to-:format	image (file); :format ∈ jpg | png | webp	Converted image

Example

curl -X POST http://localhost:5005/resize-image \
  -F "image=@photo.jpg" \
  -F "width=800" \
  -F "height=600" \
  -o resized.jpg

---

Frontend Routes

Path	Component	Purpose
/	Hero	Landing page
/resize	Resize	Resize tool
/resizeReadmore/:articleId	ResizeArticle	Full article view
/pdf-converter	PdfConverter	Image → PDF
/jpeg-image-compressor	JpegCompressor	JPEG compression
/jpeg-imagecompressor/:articleId	JpegCompressorarticle	Article view
/png-image-compressor	PngCompressor	PNG compression
/png-imagecompressor/:articleId	PngCompressorarticle	Article view
/gif-image-compressor	GifCompressor	GIF compression
/gif-imagecompressor/:articleId	GifCompressorarticle	Article view
/web-converter	ImageCoverter	Format converter
/dashboard	CreatPost	Create a new post
/edit-article/:id	CreatPost	Edit an existing post
/articles	Articles	Manage posts

---

Data Model

ArticalPost (backend/Model/Artical.js):

Field	Type	Required	Notes
category	String	Yes	Used to group articles per tool page.
title	String	Yes	Article heading.
discripition	String	Yes	HTML content from the rich-text editor.

MongoDB also adds _id and __v automatically.

---

Deployment

Backend — Vercel serverless. backend/vercel.json builds index.js with @vercel/node. Set MONGO_URI (and optionally PORT) in the Vercel project's environment variables.

Frontend — GitHub Pages. gh-pages is configured as a dependency. Add a homepage field to frontend/package.json and a deploy script, then run npm run build && npm run deploy. Any static host (Vercel, Netlify) also works with the CRA build/ output.

When deploying, update the hard-coded http://localhost:5005 API URLs in frontend/src/components/** to point at the deployed API.

---

Known Limitations / Roadmap

• Configurable API URL — replace hard-coded http://localhost:5005 with REACT_APP_API_URL.
• Auth on the dashboard — /dashboard and article mutations are currently unprotected.
• Backend start script — add "start": "node index.js" / "dev": "nodemon index.js" to backend/package.json.
• Rename discripition → description across the schema, API, and frontend.
• GIF handling — GIF compression is client-side only; server pipeline outputs JPEG.
• Validation & rate limiting on upload endpoints (file type, max size, request throttling).
• Tests for the API and image pipelines.

---

Contributing

1. Fork the repo and create a feature branch: git checkout -b feature/my-change.
2. Make your changes with clear, focused commits.
3. Ensure npm run build succeeds in frontend/ and the API starts cleanly.
4. Open a pull request describing the change and the motivation.

---

License

The backend package.json declares the ISC license. No dedicated LICENSE file is present yet — add one to make the terms explicit.