https://github.com/shaileshkale17/image_app
https://github.com/shaileshkale17/image_app
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shaileshkale17/image_app
- Owner: Shaileshkale17
- Created: 2025-01-21T06:04:27.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-21T06:24:02.000Z (4 months ago)
- Last Synced: 2025-01-21T07:24:38.228Z (4 months ago)
- Language: JavaScript
- Size: 8.68 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Image App
This is a web-based application that enables users to search for images, annotate them with shapes and text, and download the modified images. The project is hosted on GitHub and can also be explored on CodeSandbox.
---
## Features
### 1. **Search Images**
- Users can search for images by entering keywords in a search bar.
- Related images are displayed in a gallery below the search bar.
- Each image in the gallery includes proper attribution to its source or author.
### 2. **Select and Annotate Images**
- Select an image from the gallery to load it onto the canvas.
- Available annotation tools:
- **Add Caption:** Enter custom text in the input field and click "Add Caption" to place it on the image.
- **Add Rectangle:** Draw rectangles on the image to highlight areas.
- **Add Circle:** Draw circles to mark specific points.
### 3. **Download Images**
- After making annotations, users can download the final edited image by clicking the "Download" button.
---
## How to Run
### 1. **GitHub Repository**
[Image_App Repository](https://github.com/Shaileshkale17/Image_App)
### 2. **CodeSandbox**
[CodeSandbox Link](#) *(Replace `#` with your actual CodeSandbox link.)*
### 3. **Run Locally**
Follow these steps to run the application on your local machine:
1. Clone the repository:
```bash
git clone https://github.com/Shaileshkale17/Image_App.git
```
2. Navigate to the project directory:
```bash
cd Image_App
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
5. Open the application in your browser:
[http://localhost:3000](http://localhost:3000)
---
## Common Issues
### 1. **Issue: Image Not Showing in Canvas**