Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anandhupa1/imagemodifier
A versatile platform for secure image upload, editing, and management, featuring an accessible gallery for easy viewing and sharing.
https://github.com/anandhupa1/imagemodifier
bootstrap cropperjs css3 expressjs html5 mongodb-atlas multer-storage nodejs
Last synced: 28 days ago
JSON representation
A versatile platform for secure image upload, editing, and management, featuring an accessible gallery for easy viewing and sharing.
- Host: GitHub
- URL: https://github.com/anandhupa1/imagemodifier
- Owner: Anandhupa1
- Created: 2023-11-10T13:37:29.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2023-11-12T03:26:15.000Z (12 months ago)
- Last Synced: 2024-05-18T03:49:01.140Z (6 months ago)
- Topics: bootstrap, cropperjs, css3, expressjs, html5, mongodb-atlas, multer-storage, nodejs
- Language: JavaScript
- Homepage: https://youtu.be/DatcVikw-wM
- Size: 4.21 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Visual Canvas: Image Modifier 🖼️
---
## Project Overview 📝
Visual Canvas is a robust web application designed to revolutionize the way users interact with images. It provides a secure, intuitive platform for image uploading, editing, and management, all while ensuring a seamless user experience.
## Key Features 🌟
- **User Authentication**: Secure access with Gmail integration. 🔒
- **Image Upload & Editing**: Effortless upload and in-browser editing tools. ✂️
- **Image Gallery**: A sleek gallery for easy image access and management. 🖼️
- **Responsive Design**: Fully adaptable to various devices and screens. 📱💻
- **Optimized Storage**: Advanced image size reduction and .webp conversion. 💾
## Tech Stack
**Client:** HTML, CSS , Javascript , Bootstrap
**Server:** NodeJS, Express
**Database:** MongoDB
## Run Locally
Clone the project
```bash
git clone https://github.com/Anandhupa1/ImageModifier.git
```
Go to the project directory
```bash
cd ImageModifier
```
## Environment Variables
create a .env file inside Backend folder , copy paste the below keys and values inside it,
`MONGOURI=mongodb+srv://*****:*****@cluster0.j8dbuza.mongodb.net/ImageManager@latest?retryWrites=true&w=majority `
`PORT=4500`
`JWT_SECRET=secret1`
`SERVER_DEPLOYED_URL=http://localhost:4500`
Make sure to replace the `MONGOURI` with your original mongodb atlas connection url.
after successfully creating .env file you can run the server by following the steps below.
Run the server locally
```bash
cd Backend
```
Install dependencies
```bash
npm install
```
Start the server
```bash
npm run server
```