React Image Magnify

Abstract

1. Introduction

A responsive React image zoom component for touch and mouse.

Experiment with react-image-magnify live on CodePen. Use the Change View button to select editing mode or for different layout options. Use the Fork button to save your changes.

2. Objective

A responsive image zoom component designed for shopping sites.

This project demonstrates how JavaScript, React can be applied to a real-world Full Stack Web Development problem.

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm
• A modern web browser
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/ethanselzer/react-image-magnify.git
cd react-image-magnify

npm install react-image-magnify

import ReactImageMagnify from 'react-image-magnify';
...
<ReactImageMagnify {...{
    smallImage: {
        alt: 'Wristwatch by Ted Baker London',
        isFluidWidth: true,
        src: watchImg300
    },
    largeImage: {
        src: watchImg1200,
        width: 1200,
        height: 1800
    }
}} />
...

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add role-based access control
• Deploy on a VPS or cPanel hosting with a custom domain
• Add automated tests and a CI pipeline

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Explain the frontend, backend and database layers of this application.
2. How is user authentication and authorisation implemented?
3. Describe the main database tables / collections and their relationships.
4. Which REST APIs or routes are exposed and what do they return?
5. How would you deploy this application to production?

9. Source Code & License

This project is developed by ethanselzer and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.